/* ==========================================================================
   Choose Your Own - customer booking form
   Mobile-first. Brand: dark-green page (#034F1B), white cards, Montserrat.
   ========================================================================== */

:root {
    --cyo-green: #034F1B;
    --cyo-green-accent: #5FB34C;
    --cyo-green-accent-dark: #4e9a3e;
    --cyo-green-deep: #23472e;
    --cyo-blue: #3A5166;
    --cyo-red: #b02a2a;
    --cyo-ink: #1d2b22;
    --cyo-muted: #5b6b60;
    --cyo-line: #d8e0d8;
    --cyo-field-border: #b9c4bc;
    --cyo-radius: 6px;
    --cyo-tap: 48px; /* minimum comfortable touch target */

    /* surfaces */
    --cyo-page-top: #d9e7db;
    --cyo-page-bottom: #c1d5c4;
    --cyo-panel: #ffffff;
    --cyo-tree-bg: #ecf3ed;
    --cyo-tree-border: #cfdfd2;
    --cyo-title: #0d3d20;
    --cyo-shadow: 0 12px 28px rgba(3, 50, 20, 0.08);
    --cyo-shadow-sm: 0 2px 6px rgba(3, 50, 20, 0.06);
}

/* ---- Theme footer (unchanged behaviour, kept from original) -------------- */
@media(max-width: 880px) {
    footer.footer-distributed { padding: 0.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
    footer.footer-distributed h3 { font-size: 1.5rem; }
    footer.footer-distributed *[class^="footer-"],
    footer.footer-distributed *[class^="footer-"] * { margin-bottom: 0; margin-top: 0; }
}

/* ---- Page shell ---------------------------------------------------------- */
body:has(#cyo-customer-wrap) {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--cyo-page-top) 0%, var(--cyo-page-bottom) 100%) fixed;
    color: var(--cyo-ink);
}

form:has(#cyo-customer-wrap) {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    max-width: 680px;
    margin: auto;
    padding: 3rem 1rem 2.5rem;
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
form#cyo-customer-details,
form#cyo-precut-details,
form#cyo-customer-details *,
form#cyo-precut-details *,
form#cyo-customer-details *::before,
form#cyo-precut-details *::before,
form#cyo-customer-details *::after,
form#cyo-precut-details *::after { box-sizing: border-box; }

/* ---- Header -------------------------------------------------------------- */
#cyo-customer-details > img:first-of-type,
#cyo-precut-details > img:first-of-type {
    height: 92px;
    width: auto;
    margin: 0 auto 1rem;
    display: block;
}
#cyo-customer-details > h3:first-of-type,
#cyo-precut-details > h3:first-of-type {
    text-align: center;
    margin: 0 0 0.75rem;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--cyo-title);
}
#cyo-customer-details > p:first-of-type,
#cyo-precut-details > p:first-of-type {
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: center;
    margin: 0 auto 2rem;
    max-width: 48ch;
    color: var(--cyo-muted);
}

/* ---- Layout resets for Bootstrap grid used in the markup ----------------- */
#cyo-customer-details .row,
#cyo-precut-details .row { margin: 0; }
#cyo-customer-details [class^="col"],
#cyo-precut-details [class^="col"],
#cyo-customer-details [class*=" col"],
#cyo-precut-details [class*=" col"] { padding: 0; }
#cyo-tree-wrap { padding: 0; }
#cyo-customer-wrap {
    padding: 1.15rem 0 0;
    border-top: 1px solid var(--cyo-line);
    margin-top: 1.1rem;
}
#cyo-customer-wrap[hidden] { display: none; }

/* ---- Collapsible section headers ----------------------------------------- */
#cyo-customer-details button.collapse-control,
#cyo-precut-details button.collapse-control {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: var(--cyo-tap);
    background: linear-gradient(180deg, #63b850 0%, #4f9c3f 100%);
    color: #fff;
    border: none;
    border-radius: var(--cyo-radius);
    padding: 0.9rem 1.1rem;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: var(--cyo-shadow-sm);
    transition: filter 0.15s ease;
}
#cyo-customer-details button.collapse-control:hover,
#cyo-precut-details button.collapse-control:hover { filter: brightness(1.05); }
#cyo-customer-details button.collapse-control:focus-visible,
#cyo-precut-details button.collapse-control:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#cyo-customer-details button.collapse-control p,
#cyo-precut-details button.collapse-control p {
    margin: 0;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
#cyo-customer-details button.collapse-control i,
#cyo-precut-details button.collapse-control i { transition: transform 0.25s ease-in-out; }
#cyo-customer-details button.collapse-control[aria-expanded="true"],
#cyo-precut-details button.collapse-control[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
#cyo-customer-details button.collapse-control[aria-expanded="true"] i,
#cyo-precut-details button.collapse-control[aria-expanded="true"] i { transform: rotate(90deg); }
#cyo-customer-details button.collapse-control:not([aria-expanded="true"]),
#cyo-precut-details button.collapse-control:not([aria-expanded="true"]) { margin-bottom: 1rem; }

/* ---- Section body card --------------------------------------------------- */
#cyo-customer-details div[id$="-collapse-content"],
#cyo-precut-details div[id$="-collapse-content"] {
    background: var(--cyo-panel);
    color: var(--cyo-ink);
    border: 1px solid var(--cyo-line);
    border-top: none;
    border-radius: 0 0 var(--cyo-radius) var(--cyo-radius);
    padding: 1.25rem 1.1rem 1.4rem;
    margin-bottom: 1.75rem;
    box-shadow: var(--cyo-shadow);
}

/* ---- Account: log in, or create one (there is no third option) ---- */
/* Sits at the top of the white "Your Details" panel, so no card chrome */
.cyo-account {
    margin: 0;
}
.cyo-account-lead {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--cyo-ink);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.cyo-account-lead i { color: var(--cyo-green-accent-dark); font-size: 1.15rem; }
.cyo-account-choices { display: flex; flex-direction: column; gap: 0.6rem; }
#cyo-customer-details .cyo-account-btn,
#cyo-precut-details .cyo-account-btn {
    appearance: none;
    -webkit-appearance: none;
    min-height: var(--cyo-tap);
    border: 1px solid var(--cyo-green-accent-dark);
    background: #fff;
    color: var(--cyo-green-accent-dark);
    border-radius: var(--cyo-radius);
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
/* Light tint on hover is for the secondary (white) buttons only. The primary
   buttons carry both classes,
so excluding them here stops the tint from
   overriding their green fill and leaving white text on a near-white bg. */
#cyo-customer-details .cyo-account-btn:not(.cyo-account-btn-primary):hover,
#cyo-precut-details .cyo-account-btn:not(.cyo-account-btn-primary):hover { background: rgba(95, 179, 76, 0.10); }
#cyo-customer-details .cyo-account-btn-primary,
#cyo-precut-details .cyo-account-btn-primary {
    background: var(--cyo-green-accent);
    border-color: var(--cyo-green-accent);
    color: #fff;
}
/* Darken to a solid green on hover (matches the submit button) so the white
   label keeps strong contrast. */
#cyo-customer-details .cyo-account-btn-primary:hover,
#cyo-precut-details .cyo-account-btn-primary:hover {
    background: var(--cyo-green-accent-dark);
    border-color: var(--cyo-green-accent-dark);
}
#cyo-customer-details .cyo-account-btn[disabled],
#cyo-precut-details .cyo-account-btn[disabled] { opacity: 0.6; cursor: default; }
/* Once an account is behind the booking the whole chooser is spent, and the
   identity line takes its place: who this booking is for, and the way back. */
#cyo-customer-details .cyo-account-prefilled .cyo-account-lead,
#cyo-precut-details .cyo-account-prefilled .cyo-account-lead,
#cyo-customer-details .cyo-account-prefilled .cyo-account-choices,
#cyo-precut-details .cyo-account-prefilled .cyo-account-choices { display: none; }
.cyo-account-identity {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #c3e6bd;
    background: #e9f6e6;
    border-radius: var(--cyo-radius);
}
.cyo-account-identity[hidden] { display: none; }
/* Deliberately NOT flex: a flex row lets the long, unbreakable email squeeze
   the label into a column barely wider than one character, which is how
   "Booking as" ends up hyphenated as "Bookin/g as". Normal text flow keeps the
   label intact and wraps the address underneath it. */
.cyo-account-identity-line {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: #1e5b2a;
}
.cyo-account-identity-line i { margin-right: 0.35rem; }
/* Only the address is allowed to break mid-token, and only because an email
   has no spaces to break at. */
.cyo-account-identity-line strong { font-weight: 700; overflow-wrap: anywhere; }
/* A quiet text link inside the log-in panel, not a third shouty button. */
#cyo-customer-details .cyo-account-link-btn,
#cyo-precut-details .cyo-account-link-btn {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0.4rem 0;
    color: var(--cyo-green-accent-dark);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    align-self: flex-start;
}
.cyo-field-locked {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    line-height: 1.35;
    opacity: 0.8;
}
.cyo-field-locked[hidden] { display: none; }
.cyo-login-panel,
.cyo-register-panel {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cyo-line);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.cyo-login-panel[hidden],
.cyo-register-panel[hidden] { display: none; }
.cyo-login-field { display: flex; flex-direction: column; }
/* The register panel is long enough to need a line of its own explaining why
   it is worth filling in, and quieter small print on the two fields that
   surprise people (which address is the login, and which one is optional). */
.cyo-register-lead {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--cyo-ink);
}
.cyo-register-hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    line-height: 1.3;
    opacity: 0.75;
}
.cyo-register-optional { font-weight: 400; opacity: 0.7; }
.cyo-account-alert {
    margin-top: 0.85rem;
    border-radius: var(--cyo-radius);
    padding: 0.7rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
}
.cyo-account-alert[hidden] { display: none; }
.cyo-account-alert-error { background: #fdeaea; color: #8a1f1f; border: 1px solid #f2c4c4; }
.cyo-account-alert-success { background: #e9f6e6; color: #1e5b2a; border: 1px solid #c3e6bd; }
@media (min-width: 560px) {
    .cyo-account-choices { flex-direction: row; }
    .cyo-account-choices .cyo-account-btn { flex: 1; }
}

/* ---- Fields -------------------------------------------------------------- */
#cyo-customer-details label:not(.form-check-label):not(.upload-label),
#cyo-precut-details label:not(.form-check-label):not(.upload-label) {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--cyo-muted);
    margin: 0 0 0.3rem;
}
#cyo-customer-details input:not([type="checkbox"]):not([type="radio"]),
#cyo-precut-details input:not([type="checkbox"]):not([type="radio"]),
#cyo-customer-details select,
#cyo-precut-details select,
#cyo-customer-details textarea,
#cyo-precut-details textarea {
    width: 100%;
    font-family: inherit;
    font-size: 16px; /* >=16px stops iOS zooming in on focus */
    color: #000;
    background: #fff;
    border: 1px solid var(--cyo-field-border);
    border-radius: var(--cyo-radius);
    padding: 0.7rem 0.8rem;
    min-height: var(--cyo-tap);
    line-height: 1.2;
}
#cyo-customer-details input::placeholder,
#cyo-precut-details input::placeholder { color: #9aa6a0; }
#cyo-customer-details input:focus,
#cyo-precut-details input:focus,
#cyo-customer-details select:focus,
#cyo-precut-details select:focus,
#cyo-customer-details textarea:focus,
#cyo-precut-details textarea:focus {
    outline: none;
    border-color: var(--cyo-green-accent);
    box-shadow: 0 0 0 3px rgba(95, 179, 76, 0.30);
}
select.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235b6b60' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 12px;
    padding-right: 2.3rem;
}

/* ---- Customer detail groups (stack on mobile, pair up on wider) ---------- */
#customer-details {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}
#customer-details .col-12 {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}
@media (min-width: 560px) {
    #customer-details .col-12 { flex-direction: row; }
    #customer-details .col-12 > div { flex: 1; }
}

/* ---- Tree cards ---------------------------------------------------------- */
#cyo-trees .cyo-tree {
    background: var(--cyo-tree-bg);
    border: 1px solid var(--cyo-tree-border);
    border-radius: var(--cyo-radius);
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: var(--cyo-shadow-sm);
}
.cyo-tree-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.cyo-tree-title { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--cyo-ink); }
.remove-tree-btn {
    appearance: none;
    border: none;
    color: #fff;
    background: var(--cyo-red);
    min-height: 40px;
    padding: 0.4rem 0.8rem;
    border-radius: var(--cyo-radius);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
#cyo-customer-details #add-tree-btn,
#cyo-precut-details #add-tree-btn {
    appearance: none;
    border: 2px dashed var(--cyo-green-accent);
    color: var(--cyo-green-deep);
    background: rgba(95, 179, 76, 0.08);
    width: 100%;
    min-height: var(--cyo-tap);
    border-radius: var(--cyo-radius);
    margin-top: 0.25rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
#cyo-customer-details #add-tree-btn:hover,
#cyo-precut-details #add-tree-btn:hover { background: rgba(95, 179, 76, 0.16); }

.tree-details { display: flex; flex-direction: column; gap: 1rem; }
.tree-basic-row { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 560px) {
    .tree-basic-row { flex-direction: row; }
    .tree-basic-row > div { flex: 1; }
}

/* ---- What3Words location ------------------------------------------------- */
.tree-location-wrap { display: flex; flex-direction: column; }
.tree-location-wrap .w3w-hint {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--cyo-muted);
    margin: 0 0 0.6rem;
}
.tree-location-wrap .location { position: relative; }
.location-inputs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.location-inputs input { flex: 1; min-width: 0; text-align: center; }
.location-inputs span { color: var(--cyo-muted); font-weight: 700; }

/* On small phones, stack the three word inputs so they stay readable */
@media (max-width: 480px) {
    .location-inputs { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .location-inputs span { display: none; }
    .location-inputs input { text-align: left; }
}
.tree-location-wrap .locate-btn {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    min-height: var(--cyo-tap);
    margin-top: 0.6rem;
    border: none;
    border-radius: var(--cyo-radius);
    background: var(--cyo-blue);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.invalid-coords {
    color: var(--cyo-red);
    font-weight: 700;
    font-size: 0.85rem;
    margin: 0.5rem 0 0;
}
.tree-location-wrap .spinner {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.88);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: var(--cyo-radius);
    font-weight: 700;
    color: var(--cyo-ink);
}

/* ---- Tree tag photo ------------------------------------------------------ */
.tree-image-wrap { display: flex; flex-direction: column; gap: 0.6rem; }
.tree-image-wrap .inputs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
}
.tree-image-wrap .inputs > span {
    text-align: center;
    color: var(--cyo-muted);
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 700;
}
.custom-file-upload { display: flex; }
.custom-file-upload input[type="file"] { display: none; }
.cameraInp,
.upload-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    min-height: var(--cyo-tap);
    margin: 0;
    padding: 0.7rem 0.9rem;
    background: var(--cyo-green-deep);
    color: #fff;
    border: none;
    border-radius: var(--cyo-radius);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}
.captureBtn,
.clearBtn {
    display: none;
    width: 100%;
    min-height: var(--cyo-tap);
    border: none;
    border-radius: var(--cyo-radius);
    background: var(--cyo-green-accent);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}
/* Secondary "switch camera" button - shown by JS only when 2+ cameras exist */
.swapCamBtn {
    display: none;
    width: 100%;
    min-height: var(--cyo-tap);
    border: 1px solid var(--cyo-green-deep);
    border-radius: var(--cyo-radius);
    background: #fff;
    color: var(--cyo-green-deep);
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}
.swapCamBtn i { margin-right: 0.35rem; }
.tree-image-wrap .output {
    position: relative;
    display: none;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--cyo-radius);
}
.tree-image-wrap .output video { width: 100%; margin: 0; display: block; }
.tree-image-wrap .output canvas { width: 100%; display: none; }
.tree-tag-img { display: none; width: 100%; border-radius: var(--cyo-radius); }

@media (min-width: 560px) {
    .tree-image-wrap .inputs { flex-direction: row; align-items: center; }
    .tree-image-wrap .inputs .custom-file-upload { flex: 1; }
}

/* ---- Submit + terms ------------------------------------------------------ */
.cyo-submit {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.cyo-submit .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0;
    margin: 0;
}
#cyo-customer-details .cyo-submit .form-check-input,
#cyo-precut-details .cyo-submit .form-check-input {
    position: static;
    width: 1.4rem;
    height: 1.4rem;
    min-height: auto;
    margin: 0.15rem 0 0;
    flex: 0 0 auto;
}
#cyo-customer-details .cyo-submit .form-check-label,
#cyo-precut-details .cyo-submit .form-check-label {
    text-transform: none;
    color: var(--cyo-ink);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    margin: 0;
}
.cyo-submit .form-check-label a { color: var(--cyo-title); text-decoration: underline; font-weight: 700; }
#cyo-customer-details .cyo-submit button[type="submit"],
#cyo-precut-details .cyo-submit button[type="submit"] {
    width: 100%;
    min-height: 54px;
    padding: 0.95rem 1rem;
    border: none;
    border-radius: var(--cyo-radius);
    background: var(--cyo-green-accent);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    transition: background 0.15s ease;
}
#cyo-customer-details .cyo-submit button[type="submit"]:hover,
#cyo-precut-details .cyo-submit button[type="submit"]:hover { background: var(--cyo-green-accent-dark); }

/* ---- Larger screens ------------------------------------------------------ */
@media (min-width: 881px) {
    /* Site header shows the logo on desktop,
so hide the in-form one there */
    #cyo-customer-details > img:first-of-type,
#cyo-precut-details > img:first-of-type { display: none; }
}
@media (min-width: 992px) {form#cyo-customer-details > h3,
form#cyo-precut-details > h3 { margin-top: 6rem; }
#cyo-customer-details .cyo-submit button[type="submit"],
#cyo-precut-details .cyo-submit button[type="submit"] {
        width: fit-content;
        min-width: 260px;
        align-self: center;
    }
    footer.footer-distributed { flex-direction: row; }
}

/* Honeypot: off-screen rather than display:none, because some bots skip fields
   they can tell are not rendered. Paired with the field in
   templates/customer-cyo/submit.php (and cyo-book-template.php) and refused
   server-side by cyo_reject_if_bot(). */
.cyo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- A section that isn't ready yet --------------------------------------
   "Collection or Delivery" is locked until the details above are filled in,
   because the dates it can offer depend on the postcode. Left clickable and
   focusable on purpose: a disabled button fires no click, so tapping it would
   do nothing at all - instead js/cyo-form-core.js catches the tap and sends
   them to the field that is missing. */
#cyo-customer-details button.collapse-control.collapse-control-locked,
#cyo-precut-details button.collapse-control.collapse-control-locked {
    background: linear-gradient(180deg, #b7c3b3 0%, #9fae9b 100%);
    color: #f2f4f1;
    cursor: not-allowed;
}

#cyo-customer-details button.collapse-control.collapse-control-locked:hover,
#cyo-precut-details button.collapse-control.collapse-control-locked:hover { filter: none; }

/* The note below is part of the same block, so the header gives up its bottom
   margin and its bottom corners to it - the same thing an expanded header does
   for its panel. */
#cyo-customer-details button.collapse-control.collapse-control-locked:not([aria-expanded="true"]),
#cyo-precut-details button.collapse-control.collapse-control-locked:not([aria-expanded="true"]) {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* The caret promises an expand that isn't going to happen yet. */
#cyo-customer-details button.collapse-control.collapse-control-locked i,
#cyo-precut-details button.collapse-control.collapse-control-locked i { opacity: 0.5; }

#cyo-customer-details .cyo-section-locked,
#cyo-precut-details .cyo-section-locked {
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    border-radius: 0 0 var(--cyo-radius) var(--cyo-radius);
    background: #f1f4f0;
    border: 1px solid var(--cyo-line);
    border-top: none;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--cyo-muted);
}

#cyo-customer-details .cyo-section-locked i,
#cyo-precut-details .cyo-section-locked i { margin-right: 0.3rem; }

/* ---- The held-shut Place Booking button ---------------------------------
   Rendered disabled by submit.php on the pages that ask for it, and released
   by js/cyo-form-core.js once the booking can actually be sent.

   Greyed and flattened so it reads as "not yet", not as "broken" - and the
   shadow goes, because a raised dead button is the one most likely to be
   jabbed at repeatedly. */
#cyo-customer-details .cyo-submit button[type="submit"]:disabled,
#cyo-precut-details .cyo-submit button[type="submit"]:disabled {
    background: #b9c2ba;
    box-shadow: none;
    cursor: not-allowed;
}
#cyo-customer-details .cyo-submit button[type="submit"]:disabled:hover,
#cyo-precut-details .cyo-submit button[type="submit"]:disabled:hover { background: #b9c2ba; }

/* The reason it is shut. Always on screen while it is - a dead control with no
   explanation is worse than a live one that bounces you. */
#cyo-customer-details .cyo-submit-blocked,
#cyo-precut-details .cyo-submit-blocked {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--cyo-muted);
    text-align: center;
}
#cyo-customer-details .cyo-submit-blocked[hidden],
#cyo-precut-details .cyo-submit-blocked[hidden] { display: none; }

/* ---- "Forgot your password?" --------------------------------------------
   Same shell as the log-in and register panels it sits beside, so the three
   read as one set rather than as a bolt-on. */
#cyo-customer-details .cyo-forgot-panel .cyo-register-lead,
#cyo-precut-details .cyo-forgot-panel .cyo-register-lead { margin-bottom: 0.75rem; }

/* ---- A field locked to the account --------------------------------------
   The email, once an account is proved. Tinted and dashed so it reads as
   "fixed", not as "broken".

   The :not() pair is not decoration - it is what makes this rule win. The
   generic field rule above is
     #id input:not([type="checkbox"]):not([type="radio"])
   which scores (1,2,1), so a plain `#id input.cyo-input-locked` at (1,1,1)
   loses to it no matter where in the file it sits. Mirroring its shape takes
   this to (1,3,1) and settles it on specificity rather than on load order. */
#cyo-customer-details input.cyo-input-locked:not([type="checkbox"]):not([type="radio"]),
#cyo-precut-details input.cyo-input-locked:not([type="checkbox"]):not([type="radio"]) {
    background: rgba(95, 179, 76, 0.07);
    border-style: dashed;
    color: var(--cyo-ink);
}

/* ===================== TREE STANDS (OPTIONAL) =====================
   Sits under the trees, inside the same section, because a stand goes with a
   tree and most bookings want neither - a collapse of its own would be a
   fourth thing to open for the few who do.

   Quieter than the tree cards on purpose: dashed "add" control, no panel
   until there is something in it. An empty optional extra should look
   skippable, because skipping it is the right answer for most people.

   No prices anywhere - see templates/customer-cyo/stands.php. */
.cyo-stands-wrap { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cyo-line); }
.cyo-stands-heading { font-size: 1rem; font-weight: 700; color: var(--cyo-title); margin: 0 0 0.2rem; }
.cyo-stands-optional { font-weight: 400; color: var(--cyo-muted); }
.cyo-stands-hint { color: var(--cyo-muted); font-size: 0.9rem; margin: 0 0 0.75rem; line-height: 1.4; }

.cyo-stands-list:not(:empty) { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.75rem; }

/* Fields side by side with the remove button on the end. The quantity track
   is fixed and narrow because it holds one or two digits - given a share of
   the width it ends up as wide as the dropdown, which is what made the admin
   version look wrong before it was rebuilt. */
.cyo-stand-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.5rem var(--cyo-tap);
    gap: 0.6rem;
    align-items: end;
    background: var(--cyo-tree-bg);
    border: 1px solid var(--cyo-tree-border);
    border-radius: var(--cyo-radius);
    padding: 0.75rem;
}
.cyo-stand-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.cyo-stand-field label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--cyo-muted);
    margin: 0;
}
.cyo-stand-line .form-control { min-height: var(--cyo-tap); }

/* A full tap target, not a small cross: this is a phone in a field. */
.cyo-stand-remove {
    appearance: none;
    border: 1px solid var(--cyo-field-border);
    background: #fff;
    color: var(--cyo-muted);
    width: var(--cyo-tap);
    height: var(--cyo-tap);
    border-radius: var(--cyo-radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cyo-stand-remove:hover, .cyo-stand-remove:focus { border-color: var(--cyo-red); color: var(--cyo-red); }

/* Deliberately lighter than "Add another tree": adding a tree is the job,
   adding a stand is an afterthought, and two identical shouting buttons
   stacked on each other would give them equal weight. */
.cyo-add-stand {
    appearance: none;
    border: 1px dashed var(--cyo-field-border);
    background: transparent;
    color: var(--cyo-green-deep);
    width: 100%;
    min-height: var(--cyo-tap);
    border-radius: var(--cyo-radius);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.cyo-add-stand:hover, .cyo-add-stand:focus {
    border-color: var(--cyo-green-accent);
    background: rgba(95, 179, 76, 0.08);
}

/* Narrow: the dropdown gets the full width and the quantity shares its row
   with the remove button, rather than three things fighting over 320px. */
@media (max-width: 420px) {
    .cyo-stand-line { grid-template-columns: minmax(0, 1fr) var(--cyo-tap); }
    .cyo-stand-field:first-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   After a successful booking

   js/cyo-form-core.js empties the form and puts the confirmation in its place,
   then adds this class. The live form is full width - its sections carry their
   own margins - so without this the confirmation would span the whole screen.
   680px centred is the column the prebook page confirms in, which is the
   pattern this follows.
   ========================================================================== */

form#cyo-customer-details.cyo-form-done,
form#cyo-precut-details.cyo-form-done {
	/* width AND max-width: on the precut page <body> is display:flex and this
	   form is a flex item, so it shrinks to fit its content - leaving the
	   confirmation in a narrow column the width of its own longest line. The
	   explicit width makes it fill up to the cap on both pages. */
	width: 100%;
	max-width: 680px;
	margin: 0 auto;
	padding: 2rem 1rem 3rem;
}