/* ==========================================================================
   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 to pre-fill, or continue manually ---- */
/* 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 a choice has been made,
hide the controls it renders redundant: the
   intro prompt and the spent "enter details manually" button. */
#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-manual-btn,
#cyo-precut-details .cyo-account-prefilled #cyo-manual-btn,
#cyo-customer-details .cyo-account-manual #cyo-manual-btn,
#cyo-precut-details .cyo-account-manual #cyo-manual-btn { display: none; }
.cyo-login-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] { display: none; }
.cyo-login-field { display: flex; flex-direction: column; }
.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; }
}