/**
 * Precut CYO - styles for the parts unique to page_templates/precut-cyo.php.
 *
 * The page shell, account panel, tree cards and camera controls are all styled
 * by css/cyo-customer.css, whose selectors carry a parallel #cyo-precut-details
 * alias. Only the collection/delivery step and the small precut-specific hints
 * live here. Inherits the --cyo-* custom properties defined there, so this file
 * must load AFTER it (the enqueue declares that dependency).
 */

/* ---- Shared small print --------------------------------------------------- */
#cyo-precut-details .precut-hint {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--cyo-muted);
}

#cyo-precut-details .precut-optional {
    font-weight: 400;
    color: var(--cyo-muted);
}

/* ---- "Where did you pick it up?" ------------------------------------------ */
#cyo-precut-details .precut-where-wrap { margin-top: 1rem; }

/* ---- Collection or delivery ----------------------------------------------- */
#cyo-precut-details .precut-fulfil { padding: 0; }

#cyo-precut-details .precut-choice {
    border: 0;
    margin: 0 0 1.25rem;
    padding: 0;
}

#cyo-precut-details .precut-choice legend {
    float: none;
    width: auto;
    margin-bottom: 0.6rem;
    padding: 0;
    font-size: 1rem;
}

/* Whole-row tap targets - these are the primary choice on the step, and the
   page is used one-handed on a phone at the farm. */
#cyo-precut-details .precut-choice-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: var(--cyo-tap);
    margin: 0 0 0.6rem;
    padding: 0.85rem 1rem;
    background: var(--cyo-tree-bg);
    border: 2px solid var(--cyo-tree-border);
    border-radius: var(--cyo-radius);
    cursor: pointer;
}

#cyo-precut-details .precut-choice-option:last-child { margin-bottom: 0; }

#cyo-precut-details .precut-choice-option input[type="radio"] {
    width: 22px;
    height: 22px;
    margin: 0.15rem 0 0;
    flex: 0 0 auto;
    accent-color: var(--cyo-green-accent);
}

#cyo-precut-details .precut-choice-option span {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

#cyo-precut-details .precut-choice-option strong {
    color: var(--cyo-title);
    font-size: 1rem;
}

#cyo-precut-details .precut-choice-option small {
    color: var(--cyo-muted);
    font-size: 0.85rem;
    line-height: 1.35;
}

/* Selected state. :has() carries this on modern mobile browsers; where it is
   unsupported the option simply keeps the default border - the radio itself
   still shows the choice, so nothing is lost. */
#cyo-precut-details .precut-choice-option:has(input:checked) {
    border-color: var(--cyo-green-accent);
    background: #fff;
    box-shadow: var(--cyo-shadow-sm);
}

#cyo-precut-details .precut-choice-option:focus-within {
    outline: 3px solid var(--cyo-green-accent);
    outline-offset: 2px;
}

/* ---- Date / safe place / notes -------------------------------------------- */
#cyo-precut-details .precut-date-wrap,
#cyo-precut-details .precut-safe-wrap,
#cyo-precut-details .precut-notes-wrap { margin-top: 1.25rem; }

#cyo-precut-details .precut-safe-wrap[hidden] { display: none; }

/* flatpickr's altInput swaps in a sibling text field; make sure it inherits the
   same field styling as the input it replaces rather than the browser default. */
#cyo-precut-details input.form-control[readonly],
#cyo-precut-details .flatpickr-input.form-control { background: #fff; cursor: pointer; }

#cyo-precut-details textarea.form-control {
    min-height: 96px;
    resize: vertical;
}

/* ---- Cost reassurance ------------------------------------------------------ */
#cyo-precut-details .precut-cost-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 1.5rem 0 0;
    padding: 0.8rem 1rem;
    background: #eef4ff;
    border: 1px solid #c9dbf5;
    border-radius: var(--cyo-radius);
    color: var(--cyo-blue);
    font-size: 0.88rem;
    line-height: 1.45;
}

#cyo-precut-details .precut-cost-note i { margin-top: 0.15rem; }