/**
 * The collection/delivery step, shared by BOTH customer-facing CYO forms:
 * page_templates/precut-cyo.php and page_templates/customer-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 (both enqueues declare that dependency).
 *
 * Every rule is therefore written for both form ids. The .precut-* class names
 * predate the step being shared and are kept as they are - renaming them would
 * touch two working templates and this stylesheet for no behavioural gain.
 */

/* ---- Shared small print --------------------------------------------------- */
#cyo-precut-details .precut-hint,
#cyo-customer-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,
#cyo-customer-details .precut-optional {
    font-weight: 400;
    color: var(--cyo-muted);
}

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

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

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

#cyo-precut-details .precut-choice legend,
#cyo-customer-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,
#cyo-customer-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,
#cyo-customer-details .precut-choice-option:last-child { margin-bottom: 0; }

#cyo-precut-details .precut-choice-option input[type="radio"],
#cyo-customer-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,
#cyo-customer-details .precut-choice-option span {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

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

#cyo-precut-details .precut-choice-option small,
#cyo-customer-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),
#cyo-customer-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,
#cyo-customer-details .precut-choice-option:focus-within {
    outline: 3px solid var(--cyo-green-accent);
    outline-offset: 2px;
}

/* Out-of-area delivery. js/cyo-form-core.js adds this (and disables the radio)
   when the typed postcode is in none of the configured delivery areas, so the
   option reads as unavailable rather than merely unselected. Greyed rather than
   hidden: someone who has already picked delivery needs to see WHY it changed
   under them, and the message below says where we do go. */
#cyo-precut-details .precut-choice-option.precut-choice-disabled,
#cyo-customer-details .precut-choice-option.precut-choice-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--cyo-surface-muted, #f4f4f2);
}

#cyo-precut-details .precut-choice-option.precut-choice-disabled *,
#cyo-customer-details .precut-choice-option.precut-choice-disabled * {
    cursor: not-allowed;
}

#cyo-precut-details .precut-hint-warn,
#cyo-customer-details .precut-hint-warn {
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    background: #fdf3e3;
    border: 1px solid #e6c98a;
    color: #7a5a12;
}

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

#cyo-precut-details .precut-safe-wrap[hidden],
#cyo-customer-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.

   The :not(.cyo-input-locked) matters: readonly is also how the email field is
   locked to the customer's account, and without it that field was given a white
   background and a pointer cursor here - reading as "click me to open a
   calendar" rather than "this one is fixed". This rule loads after
   cyo-customer.css and outranks it, so the exception has to be made here. */
#cyo-precut-details input.form-control[readonly]:not(.cyo-input-locked),
#cyo-precut-details .flatpickr-input.form-control,
#cyo-customer-details input.form-control[readonly]:not(.cyo-input-locked),
#cyo-customer-details .flatpickr-input.form-control { background: #fff; cursor: pointer; }

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

/* ---- Cost reassurance ------------------------------------------------------ */
#cyo-precut-details .precut-cost-note,
#cyo-customer-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,
#cyo-customer-details .precut-cost-note i { margin-top: 0.15rem; }