/* ==========================================================================
   Account page.

   Requires css/design-tokens.css.

   A restyle, not a rewrite. Every field on this page is bound by id to
   js/pages/account.js, and the tabs are wired to Bootstrap — so the markup and
   its hooks are left exactly as they are and only the presentation moves onto
   the design system. Same reason the selectors below target the existing
   Bootstrap and template classes rather than a fresh set of their own.
   ========================================================================== */

body.account-page {
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
}

.account-page #wrapper {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px 64px;
}

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

/* The template's section padding left a ~90px void between the page header
   and the tab strip. */
.account-page .products_tab {
    padding-top: 0 !important;
}

.account-page .nav-tabs {
    margin-top: 24px;
    border-bottom: 1px solid var(--divider);
}

.account-page .nav-tabs .nav-link {
    padding: 12px 18px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--cement-grey);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.98rem;
}

.account-page .nav-tabs .nav-link:hover {
    border-bottom-color: var(--divider);
    color: var(--cardamom);
}

.account-page .nav-tabs .nav-link.active {
    background: transparent;
    border-bottom-color: var(--cardamom);
    color: var(--cardamom);
}

/* --------------------------------------------------------------------------
   The card
   -------------------------------------------------------------------------- */

/* The template gave this .rounded .bg-white and a 3rem top margin; the panel
   reads as part of the tab strip when it sits tighter and carries the app's
   own shadow instead of a hard edge. */
.account-page .tab-content .container.rounded {
    max-width: none;
    margin-top: 0 !important;
    padding: 0;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.account-page .border-right {
    border-right: 1px solid var(--divider) !important;
}

@media (max-width: 767px) {
    /* The vertical rule becomes a horizontal one once the columns stack. */
    .account-page .border-right {
        border-right: 0 !important;
        border-bottom: 1px solid var(--divider) !important;
    }
}

.account-page .rounded-circle {
    border: 3px solid var(--tile-green);
    object-fit: cover;
}

.account-page #fullname-text {
    margin-top: 14px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.12rem;
    color: var(--ink);
}

.account-page #email-text {
    font-size: 0.9rem;
    color: var(--cement-grey) !important;
}

.account-page h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--ink);
    text-align: left !important;
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.account-page .labels {
    display: block;
    margin-bottom: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cement-grey);
}

.account-page .form-control {
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--divider);
    border-radius: var(--r-sm) !important;
    background: #fff;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.96rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.account-page .form-control::placeholder {
    color: var(--arrow-grey);
}

/* The theme sets box-shadow:none !important on .form-control, which removes
   any focus ring Bootstrap would draw — leaving keyboard users with nothing.
   The border carries it instead. */
.account-page .form-control:focus {
    border-color: var(--cardamom);
    outline: 2px solid rgba(11, 68, 51, 0.25);
    outline-offset: 1px;
}

.account-page .form-control:disabled {
    background: var(--tile-green);
    color: var(--cement-grey);
    cursor: not-allowed;
}

.account-page .col-md-6,
.account-page .col-md-12 {
    margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.account-page .profile-button,
.account-page .btn.btn-primary {
    min-height: 50px;
    padding: 0 30px;
    border: 0;
    border-radius: var(--r-md) !important;
    background: var(--cardamom);
    color: var(--paper);
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 600;
}

.account-page .profile-button:hover,
.account-page .btn.btn-primary:hover {
    background: var(--cardamom-strong);
    color: var(--paper);
}

.account-page .profile-button:focus-visible,
.account-page .btn.btn-primary:focus-visible {
    outline: 3px solid var(--turmeric);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Page header — replaces the template's tinted banner, which was sized by an
   empty four-column grid and left a large void above the tabs.
   -------------------------------------------------------------------------- */

.account-header {
    padding: 40px 0 28px;
    background: linear-gradient(180deg, var(--tile-green) 0%, var(--paper) 100%);
    border-bottom: 1px solid var(--divider);
}

.account-header__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

.account-header__kicker {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--turmeric-text);
}

.account-header__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
    line-height: 1.14;
    color: var(--ink);
}

@media (max-width: 640px) {
    .account-header {
        padding: 28px 0 20px;
    }

    .account-header__inner,
    .account-page #wrapper {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* --------------------------------------------------------------------------
   Location fields
   -------------------------------------------------------------------------- */

.account-page .section-sub {
    margin: 8px 0 2px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ink);
}

.account-page .section-sub__note {
    margin: 0 0 16px;
    max-width: 58ch;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--cement-grey);
}

/* Selects need the same treatment as inputs, plus room for the arrow. */
.account-page select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 7L9 11.5L13.5 7' stroke='%2355645C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    cursor: pointer;
}

/* The free-text fallback replaces its select in place, so it must not also
   reserve space when hidden. */
.account-page .is-hidden {
    display: none !important;
}