/**
 * My Account - page_templates/my-account.php
 *
 * Deliberately built on the same tokens as the booking forms (cyo-customer.css
 * defines them on :root), so the account area reads as the same product rather
 * than a bolt-on. The variable fallbacks below mean this file still renders
 * sensibly if it is ever loaded without that one.
 */

.cyo-account-page {
    --acct-ink:    var(--cyo-ink, #22331f);
    --acct-green:  var(--cyo-green-accent, #5fb34c);
    --acct-dark:   var(--cyo-green-accent-dark, #3f7f33);
    --acct-line:   var(--cyo-line, #dfe7dc);
    --acct-radius: var(--cyo-radius, 10px);
    --acct-tap:    var(--cyo-tap, 48px);
    --acct-shadow: var(--cyo-shadow, 0 2px 10px rgba(0, 0, 0, 0.06));

    max-width: 760px;
    margin: 0 auto;
    /* 16px side gutter so nothing touches the edge on a phone */
    padding: 1.5rem 1rem 3rem;
    color: var(--acct-ink);
}

.cyo-account-title { text-align: center; margin: 0 0 0.35rem; }
.cyo-account-lede { text-align: center; margin: 0 0 1.5rem; opacity: 0.85; }

/* ---- Notices ------------------------------------------------------------- */
/* Same two colourways as the booking form's account alert, so a success on one
   page looks like a success on the other. */
.cyo-account-page .cyo-account-alert {
    border-radius: var(--acct-radius);
    padding: 0.75rem 0.9rem;
    margin: 0 0 1.25rem;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
}
.cyo-account-page .cyo-account-alert-error   { background: #fdeaea; color: #8a1f1f; border: 1px solid #f2c4c4; }
.cyo-account-page .cyo-account-alert-success { background: #e9f6e6; color: #1e5b2a; border: 1px solid #c3e6bd; }
.cyo-acct-errors { margin: 0; padding-left: 1.15rem; }
.cyo-acct-errors li + li { margin-top: 0.3rem; }

/* ---- Tabs ---------------------------------------------------------------- */
/* Two real buttons rather than links, because switching section is a view
   change and should not add a history entry per tap. */
.cyo-acct-tabs,
.cyo-account-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.cyo-account-tab {
    appearance: none;
    -webkit-appearance: none;
    flex: 1;
    min-height: var(--acct-tap);
    border: 1px solid var(--acct-dark);
    background: #fff;
    color: var(--acct-dark);
    border-radius: var(--acct-radius);
    padding: 0.55rem 0.75rem;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.cyo-account-tab:hover { background: rgba(95, 179, 76, 0.10); }
.cyo-account-tab.is-active {
    background: var(--acct-green);
    border-color: var(--acct-green);
    color: #fff;
}
.cyo-acct-panel[hidden] { display: none; }

/* ---- Cards --------------------------------------------------------------- */
.cyo-acct-card {
    background: #fff;
    border: 1px solid var(--acct-line);
    border-radius: var(--acct-radius);
    box-shadow: var(--acct-shadow);
    padding: 1.1rem 1rem 1.3rem;
    margin-bottom: 1.25rem;
}
.cyo-acct-card-quiet { box-shadow: none; background: rgba(95, 179, 76, 0.05); }
.cyo-acct-h2 {
    margin: 0 0 0.6rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.cyo-acct-h2 i { color: var(--acct-dark); }
.cyo-acct-hint { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.45; opacity: 0.85; }
.cyo-acct-small { display: block; margin-top: 0.3rem; font-size: 0.8rem; line-height: 1.35; opacity: 0.75; }
.cyo-acct-warn { color: #8a1f1f; opacity: 1; font-weight: 600; }
.cyo-acct-optional { font-weight: 400; opacity: 0.7; }
.cyo-acct-cta { margin: 1rem 0 0; }

/* ---- Forms --------------------------------------------------------------- */
.cyo-acct-form { display: flex; flex-direction: column; gap: 0.85rem; }
.cyo-acct-field { display: flex; flex-direction: column; }
.cyo-acct-field label,
.cyo-acct-field-label { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.3rem; }
/* A value the customer can read but not change (the account email). Styled as
   text on a tinted strip rather than as a disabled input, so it does not look
   like a box that has stopped working. */
.cyo-acct-fixed {
    margin: 0;
    min-height: var(--acct-tap);
    display: flex;
    align-items: center;
    padding: 0.5rem 0.7rem;
    background: rgba(95, 179, 76, 0.07);
    border: 1px dashed var(--acct-line);
    border-radius: var(--acct-radius);
    font-size: 1rem;
    word-break: break-all;
}
/* Scoped to this page's fields on purpose: an unscoped input rule leaks onto
   flatpickr's own month/year selects and crops them (the bug fixed in
   prebook-cyo.css). */
.cyo-acct-field input[type="text"],
.cyo-acct-field input[type="email"],
.cyo-acct-field input[type="tel"],
.cyo-acct-field input[type="password"] {
    min-height: var(--acct-tap);
    border: 1px solid var(--acct-line);
    border-radius: var(--acct-radius);
    padding: 0.5rem 0.7rem;
    font-size: 1rem;
    width: 100%;
    background: #fff;
    color: var(--acct-ink);
}
.cyo-acct-field input:focus { outline: 2px solid var(--acct-green); outline-offset: 1px; }
.cyo-acct-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.cyo-acct-check input { width: 1.1rem; height: 1.1rem; }
.cyo-acct-row { display: flex; flex-direction: column; gap: 0.85rem; }

/* ---- Buttons ------------------------------------------------------------- */
.cyo-acct-btn {
    appearance: none;
    -webkit-appearance: none;
    min-height: var(--acct-tap);
    border: 1px solid var(--acct-dark);
    background: #fff;
    color: var(--acct-dark);
    border-radius: var(--acct-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;
    text-decoration: none;
}
.cyo-acct-btn:not(.cyo-acct-btn-primary):hover { background: rgba(95, 179, 76, 0.10); }
.cyo-acct-btn-primary { background: var(--acct-green); border-color: var(--acct-green); color: #fff; }
.cyo-acct-btn-primary:hover { background: var(--acct-dark); border-color: var(--acct-dark); color: #fff; }
.cyo-acct-btn-quiet { border-color: var(--acct-line); color: var(--acct-ink); text-transform: none; font-weight: 600; }
/* "Forgotten your password?" / "Back to sign in". Real links, so they keep
   working with JS off; js/cyo-my-account.js intercepts them to swap the view
   in place. Styled as text, not as a third button competing with the two
   submits. */
.cyo-acct-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    /* Tall enough to be a real tap target without looking like a button. */
    min-height: 44px;
    margin-top: 0.4rem;
    color: var(--acct-dark);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}
.cyo-acct-link:hover,
.cyo-acct-link:focus { color: var(--acct-ink); text-decoration: underline; }

/* The two halves of the sign-in card. Exactly one is ever on screen - they
   replace each other rather than stacking, so the card never shows two forms
   or two submit buttons at once. */
.cyo-acct-view[hidden] { display: none; }
.cyo-account-signout { margin-top: 1.5rem; text-align: center; }

/* ---- A booking ----------------------------------------------------------- */
.cyo-acct-booking {
    background: #fff;
    border: 1px solid var(--acct-line);
    border-left: 4px solid var(--acct-green);
    border-radius: var(--acct-radius);
    box-shadow: var(--acct-shadow);
    padding: 1rem;
    margin-bottom: 1rem;
}
/* A booking that has been and gone stays readable but stops looking actionable. */
.cyo-acct-booking.is-locked { border-left-color: #c7cfc4; background: #fafbfa; }

.cyo-acct-booking-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.cyo-acct-booking-ref { margin: 0; font-size: 1rem; }
.cyo-acct-booking-when { margin: 0.2rem 0 0; font-size: 0.95rem; display: flex; align-items: center; gap: 0.4rem; }
.cyo-acct-booking-when i { color: var(--acct-dark); }

.cyo-acct-status {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.cyo-acct-status-confirmed { background: #e9f6e6; color: #1e5b2a; border: 1px solid #c3e6bd; }
.cyo-acct-status-pending   { background: #fff6e2; color: #7a5300; border: 1px solid #f0dcae; }

.cyo-acct-summary { margin: 0.9rem 0 0; display: grid; gap: 0.5rem; }
.cyo-acct-summary > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.5rem; font-size: 0.9rem; }
.cyo-acct-summary dt { font-weight: 700; opacity: 0.8; }
.cyo-acct-summary dd { margin: 0; }

.cyo-acct-locked-note {
    margin: 0.9rem 0 0;
    font-size: 0.88rem;
    line-height: 1.45;
    display: flex;
    gap: 0.45rem;
    opacity: 0.85;
}
.cyo-acct-booking-toggle { margin-top: 0.9rem; }
.cyo-acct-booking-edit { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--acct-line); }
.cyo-acct-booking-edit[hidden] { display: none; }

/* ---- Wider than a phone -------------------------------------------------- */
@media (min-width: 560px) {
    .cyo-acct-row { flex-direction: row; }
    .cyo-acct-row > .cyo-acct-field { flex: 1; }
}

/* ---- flatpickr inside this page ------------------------------------------
   The theme styles every input on the site, which crops flatpickr's month and
   year controls. Same reset as cyo.css/prebook-cyo.css carry, kept here so the
   account page does not depend on one of those being loaded. */
.cyo-account-page .flatpickr-month { height: 50px; }
.cyo-account-page .flatpickr-calendar input,
.cyo-account-page .flatpickr-calendar select {
    padding: 0 !important;
    border: 0 !important;
    min-height: 0 !important;
    font-size: inherit !important;
}