@import url(root.css);

/* Something on this page renders wider than the viewport on phones, which
   pushes the whole document into horizontal scroll and drags the fixed
   header nav along with it (that nav is shared across every page via
   header2.php, but only overflows here - this page is the odd one out, not
   the header). Clipping horizontal overflow at the document level stops
   that regardless of which element is technically too wide. */
html,
body {
    overflow-x: hidden;
}

body {
    background-color: var(--1);
    color: var(--8);
    font-family: var(--garet);
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--garet);
}

/* Account page styles */
html {
    scroll-behavior: auto;
}

.site-account {
    position: relative;
    z-index: 1;
    padding-top: 50px;
    padding-bottom: 50px;
    background: var(--account-bg, linear-gradient(180deg, #fff7fc, #fbfdff 42%, #f8fbff 100%));
    color: var(--account-text, var(--8, var(--7)));
    --account-muted: var(--9);
    --dusty-charcoal: var(--account-text, var(--8, var(--7)));
    --charcoal: var(--account-text, var(--8, var(--7)));
    overflow: visible;
}

.site-account::before,
.site-account::after {
    display: none;
}

.account-page {
    position: relative;
    z-index: 0;
    margin-top: 0;
}

.account-header {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    align-items: stretch;
    gap: 18px;
    max-width: 1360px;
    margin: 0 auto 18px;
    padding: 0 18px;
}

.account-kicker,
.section-kicker,
.menu-label,
.stat-label {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--3);
    font-family: var(--garet);
    font-weight: 700;
}

.account-header h1 {
    margin: 0;
    font-family: var(--garet);
    font-size: clamp(34px, 5vw, 56px);
    line-height: 0.92;
    color: var(--account-text, var(--8));
}

.account-subtitle {
    max-width: 680px;
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--account-muted, var(--9));
}

.account-header-copy {
    display: grid;
    gap: 10px;
    align-content: center;
}

.account-header-panel {
    display: grid;
    gap: 10px;
    align-content: center;
    padding: 26px 24px;
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72));
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 22px 50px rgba(24, 39, 54, 0.08);
    text-align: left;
}

.account-header-panel strong {
    display: block;
    margin-top: 2px;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.05;
    color: var(--account-text, var(--8));
}

.account-header-panel small {
    display: block;
    margin-top: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--account-muted, var(--9));
}

.header-logout-form {
    margin: 0;
}

.header-progress { 
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(248, 197, 246, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.header-progress-top,
.profile-progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--8);
    font-family: var(--garet);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.progress-track {
    width: 100%;
    height: 10px;
    margin-top: 10px;
    border-radius: 999px;
    background: rgba(24, 39, 54, 0.1);
    overflow: hidden;
}

.progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--6), var(--14));
}

.account-message-stack {
    max-width: 1360px;
    margin: 0 auto 20px;
    padding: 0 18px;
}

.account-alert {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 14px 32px rgba(24, 39, 54, 0.08);
}

.header-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(191, 239, 228, 0.85);
    color: var(--8);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.account-grid {
    max-width: 1360px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 0 18px;
    align-items: start;
}

.account-grid-full {
    grid-template-columns: minmax(0, 1fr);
}

.account-side {
    position: sticky;
    top: 18px;
    align-self: start;
}

.account-tabs {
    display: grid;
    gap: 14px;
}

.site-account .card,
.profile-card {
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 22px 50px rgba(24, 39, 54, 0.08);
    backdrop-filter: blur(10px);
}

.profile-card {
    padding: 24px;
    text-align: center;
    background: linear-gradient(180deg, rgba(248, 197, 246, 0.72), rgba(255, 255, 255, 0.94));
}

.avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-family: var(--garet);
    font-weight: 700;
    background: linear-gradient(135deg, var(--6), var(--14));
    color: white;
    margin-bottom: 14px;
    box-shadow: 0 16px 32px rgba(255, 17, 103, 0.22);
}

.profile-card h2 {
    margin: 0 0 16px;
    font-family: var(--garet);
    font-size: 24px;
    color: var(--8);
}

.profile-card-note {
    margin: 0 0 18px;
    color: var(--9);
    line-height: 1.6;
}

.meta-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(24, 39, 54, 0.08);
    color: var(--9);
    font-size: 14px;
    text-align: left;
}

.meta-row:first-of-type {
    border-top: 0;
}

.meta-row strong {
    color: var(--8);
}

.meta-value {
    max-width: 60%;
    text-align: right;
    word-break: break-word;
}

.role-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.role-badges .badge.role {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(191, 239, 228, 0.88);
    color: var(--8);
    font-weight: 700;
}

.portal-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.profile-progress-card {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.7);
    text-align: left;
}

.profile-progress-card small {
    margin-top: 8px;
}

.portal-links .btn {
    width: 100%;
}

.account-menu,
.account-side .quick-links {
    margin-top: 14px;
    padding: 18px;
}

.menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    margin-top: 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--8);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.menu-link:hover,
.menu-link:focus-visible {
    transform: translateX(4px);
    box-shadow: 0 14px 28px rgba(24, 39, 54, 0.08);
    background: rgba(255, 255, 255, 0.96);
    color: var(--8);
}

.menu-link span {
    display: block;
    font-weight: 700;
}

.menu-link small {
    display: block;
    text-align: right;
    color: var(--9);
}

.account-side .quick-links h3,
.section-card h3,
.occasion-banner h4,
.saved-profile-card h4,
.empty-state h4 {
    margin: 0;
    font-family: var(--garet);
    color: var(--8);
}

.account-side .quick-links ul {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
}

.account-side .quick-links li+li {
    margin-top: 10px;
}

.account-side .quick-links a {
    color: var(--8);
    text-decoration: none;
    font-weight: 700;
}

.account-main {
    display: block;
}

.account-main > .section-card + .section-card {
    margin-top: 18px;
}

.tab-panel {
    display: none;
}

.tab-panel.is-active {
    display: block;
}

.section-card {
    padding: 26px;
}

.section-card h4 {
    margin: 0;
    font-family: var(--garet);
    color: var(--account-text, var(--8));
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.section-copy {
    max-width: 520px;
    margin: 0;
    color: var(--account-muted, var(--9));
    line-height: 1.7;
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.overview-stat {
    padding: 18px;
    border-radius: 20px;
    min-height: 155px;
}

.overview-stat strong {
    display: block;
    margin: 8px 0 10px;
    font-size: 38px;
    line-height: 1;
    color: var(--account-text, var(--8));
}

.overview-stat p {
    margin: 0;
    color: var(--account-muted, var(--9));
    line-height: 1.6;
}

.accent-pink {
    background: linear-gradient(180deg, rgba(248, 197, 246, 0.92), rgba(255, 255, 255, 0.94));
}

.accent-blue {
    background: linear-gradient(180deg, rgba(191, 239, 228, 0.95), rgba(255, 255, 255, 0.96));
}

.accent-white {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.74));
}

.occasion-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 14px;
    padding: 20px 22px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(110, 160, 211, 0.92), rgba(28, 152, 237, 0.88));
    color: var(--10);
}

.dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.occasion-banner p {
    margin: 6px 0 0;
    color: var(--10);
}

.occasion-banner .section-kicker,
.occasion-banner h4,
.occasion-banner p {
    color: var(--10);
}

.account-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.form-panel-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-panel {
    padding: 20px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.84));
    border: 1px solid rgba(255, 255, 255, 0.74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.form-panel+.form-panel {
    margin-top: 16px;
}

.form-panel-soft {
    background: linear-gradient(180deg, rgba(191, 239, 228, 0.28), rgba(255, 255, 255, 0.95));
}

.form-panel-header {
    margin-bottom: 16px;
}

.form-panel-header p {
    margin: 8px 0 0;
    color: var(--account-muted, var(--9));
    line-height: 1.6;
}

.form-row-wide {
    grid-column: 1 / -1;
}

.account-form label {
    display: block;
    margin: 0;
    color: var(--account-text, var(--8));
    font-weight: 700;
}

.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="tel"],
.account-form input[type="date"],
.account-form select,
.account-form textarea {
    width: 100%;
    margin-top: 8px;
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid rgba(176, 215, 204, 0.8);
    background: rgba(255, 255, 255, 0.92);
    box-sizing: border-box;
    color: var(--dusty-charcoal);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.account-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 46px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--silver) 50%),
        linear-gradient(135deg, var(--silver) 50%, transparent 50%);
    background-position:
        calc(100% - 22px) calc(50% - 2px),
        calc(100% - 16px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.account-form input[readonly] {
    background: rgba(248, 248, 248, 0.92);
    color: var(--silver);
}

.account-form input:focus,
.account-form select:focus,
.account-form textarea:focus {
    outline: none;
    border-color: rgba(255, 17, 103, 0.45);
    box-shadow: 0 0 0 4px rgba(255, 17, 103, 0.08);
}

.account-form textarea {
    min-height: 120px;
    resize: vertical;
}

.form-actions {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.profiles-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.saved-profile-actions {
    display: grid;
    justify-items: end;
    gap: 10px;
}

.saved-profile-actions .section-copy {
    text-align: right;
}

.recipient-form {
    padding: 20px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 197, 246, 0.38));
    border: 1px solid rgba(255, 255, 255, 0.72);
}

.saved-profiles-column {
    display: grid;
    gap: 14px;
}

.saved-profiles-list {
    display: grid;
    gap: 14px;
}

.saved-profile-card {
    padding: 18px 18px 16px;
    border-radius: 22px;
    background: rgb(255, 255, 255);
    border: 1px solid rgba(255, 255, 255, 0.74);
    box-shadow: 0 18px 38px rgba(24, 39, 54, 0.06);
}

.saved-profile-top {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.saved-profile-top p {
    margin: 4px 0 0;
    color: var(--account-muted, var(--9));
}

.saved-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.saved-profile-meta span,
.occasion-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(191, 239, 228, 0.7);
    color: var(--8);
    font-size: 13px;
    font-weight: 700;
}

.occasion-chip.muted {
    background: rgba(24, 39, 54, 0.08);
    color: var(--9);
}

.occasion-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.occasion-item {
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(191, 239, 228, 0.32));
    border: 1px solid rgba(176, 215, 204, 0.42);
}

.occasion-item label {
    display: block;
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--silver);
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
}

.occasion-item strong {
    color: var(--dusty-charcoal);
}

.saved-profile-notes {
    margin: 16px 0 0;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(248, 197, 246, 0.28);
    color: var(--9);
    line-height: 1.6;
}

.saved-profile-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.event-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.event-type-input,
.event-date-input {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(176, 215, 204, 0.8);
    border-radius: 14px;
    font-size: 14px;
    color: var(--dusty-charcoal);
    background: rgba(255, 255, 255, 0.94);
}

.event-type-input {
    flex: 1 1 55%;
}

.event-date-input {
    flex: 1 1 40%;
}

.btn-remove-event {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 17, 103, 0.08);
    color: var(--3);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.btn-remove-event:hover,
.btn-remove-event:focus-visible {
    background: rgba(255, 17, 103, 0.16);
    color: var(--hard-pink);
}

.btn-add-event {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 10px 14px;
    border: 1px dashed rgba(24, 39, 54, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    color: var(--8);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.btn-add-event:hover,
.btn-add-event:focus-visible {
    background: rgba(255, 255, 255, 0.96);
}

.profile-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(11, 18, 28, 0.64);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
}

.profile-modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.profile-modal {
    position: fixed;
    inset: 0;
    z-index: 1210;
    display: grid;
    align-items: center;
    justify-items: center;
    padding: clamp(16px, 3vw, 30px);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
}

.profile-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.profile-modal-dialog {
    width: min(960px, 100%);
    max-height: calc(100vh - clamp(32px, 6vw, 60px));
    overflow: auto;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.86);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(255, 247, 252, 0.98) 42%, rgba(248, 197, 246, 0.18) 100%);
    box-shadow: 0 36px 100px rgba(8, 15, 22, 0.38);
    padding: 22px;
    transform: translateY(18px) scale(0.985);
    transition: transform 0.24s ease;
}

.profile-modal.is-open .profile-modal-dialog {
    transform: translateY(0) scale(1);
}

.profile-modal-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
    position: sticky;
    top: -22px;
    z-index: 2;
    margin: -22px -22px 16px;
    padding: 22px 22px 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.94));
    border-bottom: 1px solid rgba(24, 39, 54, 0.09);
}

.profile-modal-header-copy {
    display: grid;
    gap: 6px;
}

.profile-modal-subtitle {
    margin: 0;
    color: var(--account-muted, var(--9));
    line-height: 1.6;
    max-width: 58ch;
}

.profile-modal-close {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: rgba(24, 39, 54, 0.08);
    color: var(--8);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.profile-modal-close:hover,
.profile-modal-close:focus-visible {
    background: rgba(24, 39, 54, 0.18);
}

.profile-modal-alerts {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.profile-modal-alerts .account-alert {
    margin: 0;
}

.profile-modal-steps {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(24, 39, 54, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    flex-wrap: wrap;
}

.profile-step-btn {
    border: 1px solid rgba(24, 39, 54, 0.15);
    background: rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 700;
    color: var(--8);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.profile-step-btn:hover,
.profile-step-btn:focus-visible {
    border-color: rgba(24, 39, 54, 0.25);
    background: rgba(255, 255, 255, 0.98);
    transform: translateY(-1px);
}

.profile-step-btn.is-active {
    border-color: rgba(255, 17, 103, 0.3);
    background: linear-gradient(135deg, rgba(255, 17, 103, 0.1), rgba(191, 239, 228, 0.88));
    box-shadow: 0 12px 22px rgba(24, 39, 54, 0.08);
}

.profile-modal-step {
    margin-top: 0;
    animation: profileStepFadeIn 0.2s ease;
}

.profile-modal-actions {
    justify-content: space-between;
    align-items: center;
    position: sticky;
    bottom: -22px;
    z-index: 2;
    margin: 24px -22px -22px;
    padding: 16px 22px 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.96) 28%, rgba(255, 255, 255, 0.99) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(24, 39, 54, 0.09);
}

.profile-modal .form-panel {
    border-radius: 24px;
}

.profile-modal .account-form-grid {
    gap: 16px;
}

.profile-modal .form-panel-header h4 {
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.05;
}

.profile-modal .form-panel-header p:last-child {
    max-width: 62ch;
}

.profile-modal .event-row,
.profile-modal .saved-profile-prefs,
.profile-modal #events-container {
    max-width: 100%;
}

.budget-slider-wrap {
    margin-top: 10px;
    padding: 16px 18px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(191, 239, 228, 0.24));
    border: 1px solid rgba(176, 215, 204, 0.55);
}

.budget-slider-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.budget-slider-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--3);
    color: var(--10);
    font-size: 12px;
    font-weight: 700;
    font-family: 'Roboto Condensed', sans-serif;
}

.budget-slider-value {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 17, 103, 0.1);
    color: var(--3);
    font-size: 15px;
    font-weight: 700;
}

.budget-range-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--account-muted, var(--9));
}

.account-form input[type="range"].budget-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    margin: 16px 0 8px;
    border-radius: 999px;
    background: linear-gradient(to right,
        var(--3) 0%, var(--3) var(--range-percent, 50%),
        var(--budget-track-empty, rgba(24, 39, 54, 0.12)) var(--range-percent, 50%),
        var(--budget-track-empty, rgba(24, 39, 54, 0.12)) 100%);
    outline: none;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.account-form input[type="range"].budget-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--10);
    border: 3px solid var(--3);
    box-shadow: 0 4px 10px rgba(255, 17, 103, 0.35);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.account-form input[type="range"].budget-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 3px solid var(--3);
    border-radius: 50%;
    background: var(--10);
    box-shadow: 0 4px 10px rgba(255, 17, 103, 0.35);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.account-form input[type="range"].budget-range::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: var(--budget-track-empty, rgba(24, 39, 54, 0.12));
}

.account-form input[type="range"].budget-range::-moz-range-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--3);
}

.account-form input[type="range"].budget-range:hover::-webkit-slider-thumb,
.account-form input[type="range"].budget-range:focus-visible::-webkit-slider-thumb {
    transform: scale(1.12);
}

.account-form input[type="range"].budget-range:hover::-moz-range-thumb,
.account-form input[type="range"].budget-range:focus-visible::-moz-range-thumb {
    transform: scale(1.12);
}

.account-form input[type="range"].budget-range:focus-visible {
    box-shadow: 0 0 0 4px rgba(255, 17, 103, 0.14);
}

.site-account[data-color-mode="dark"] {
    --budget-track-empty: rgba(255, 255, 255, 0.14);
}

@keyframes profileStepFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

html.profile-modal-open,
body.profile-modal-open {
    overflow: hidden;
}

.customization-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.customizer-block {
    margin-top: 0;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.customizer-block h4 {
    margin: 0;
    font-family: var(--garet);
    font-size: 24px;
    color: var(--account-text, var(--8));
}

.customizer-block > p:last-of-type {
    margin: 8px 0 0;
    color: var(--account-muted, var(--9));
    line-height: 1.7;
}

.mode-toggle,
.profile-theme-grid,
.theme-choices {
    margin-top: 18px;
}

.mode-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.profile-theme-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.profile-theme-btn {
    display: grid;
    gap: 8px;
    align-content: start;
    justify-items: start;
    padding: 18px;
    border: 1px solid rgba(24, 39, 54, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--account-text, var(--8));
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.profile-theme-btn strong {
    font-size: 20px;
    line-height: 1.1;
}

.profile-theme-btn small {
    color: var(--account-muted, var(--9));
    font-size: 14px;
}

.profile-theme-btn:hover,
.profile-theme-btn:focus-visible,
.profile-theme-btn.active {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(24, 39, 54, 0.08);
    border-color: rgba(24, 39, 54, 0.18);
}

.profile-theme-swatch {
    width: 54px;
    height: 12px;
    border-radius: 999px;
    display: inline-block;
}

.swatch-green {
    background: linear-gradient(90deg, #2e7d32, #81c784);
}

.swatch-pink {
    background: linear-gradient(90deg, #ec407a, #f8bbd0);
}

.swatch-blue {
    background: linear-gradient(90deg, #1c98ed, #90caf9);
}

.swatch-peach {
    background: linear-gradient(90deg, #e64a19, #ffccbc);
}

.form-label-block {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--8);
}

.form-label-block small {
    font-weight: 400;
    color: var(--9);
}

.tag-input-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(176, 215, 204, 0.8);
    border-radius: 16px;
    cursor: text;
    min-height: 54px;
    background: rgba(255, 255, 255, 0.92);
}

.tag-chip,
.pref-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(248, 197, 246, 0.42);
    border-radius: 999px;
    font-size: 13px;
    color: var(--8);
}

.tag-chip button {
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    color: var(--3);
    font-size: 15px;
}

.tag-chip button:hover,
.tag-chip button:focus-visible {
    color: var(--3);
}

.tag-text-input {
    border: none;
    outline: none;
    font-size: 14px;
    flex: 1;
    min-width: 120px;
    background: transparent;
    color: var(--8);
}

.saved-profile-prefs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}

.account-tab-menu,
.account-side-logout {
    padding: 16px;
}

.account-side-logout .btn {
    width: 100%;
}

.tab-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    margin-top: 10px;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--8);
    text-align: left;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.tab-link span {
    display: block;
    font-weight: 700;
}

.tab-link small {
    display: block;
    color: var(--9);
    text-align: right;
}

.tab-link:hover,
.tab-link:focus-visible,
.tab-link.is-active {
    background: linear-gradient(135deg, rgba(255, 17, 103, 0.12), rgba(191, 239, 228, 0.82));
    box-shadow: 0 12px 26px rgba(24, 39, 54, 0.08);
    transform: translateX(-2px);
    color: var(--8);
}

.tab-link.is-active {
    border: 1px solid rgba(255, 17, 103, 0.1);
}

.inline-form {
    margin: 0;
}

.btn-delete {
    padding: 0;
    color: var(--3);
    text-decoration: none;
    font-weight: 700;
}

.btn-delete:hover,
.btn-delete:focus-visible {
    color: var(--3);
    text-decoration: underline;
}

.empty-state {
    padding: 30px;
    border-radius: 22px;
    text-align: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 197, 246, 0.36));
    border: 1px dashed rgba(24, 39, 54, 0.18);
}

.empty-state p {
    max-width: 460px;
    margin: 12px auto 0;
    color: var(--account-muted, var(--9));
    line-height: 1.6;
}

.orders-empty-state .btn {
    margin-top: 16px;
}

.table-wrap {
    overflow-x: auto;
}

.customers-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 18px;
}

.customers-table thead th {
    padding: 14px 16px;
    text-align: left;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(191, 239, 228, 0.72));
    color: var(--8);
}

.customers-table tbody td {
    padding: 14px 16px;
    border-top: 1px solid rgba(24, 39, 54, 0.08);
    background: rgba(255, 255, 255, 0.78);
}

.order-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    background: rgba(24, 39, 54, 0.08);
    color: var(--8);
}

.order-status-paid {
    background: rgba(28, 152, 237, 0.14);
    color: #0d47a1;
}

.order-status-completed {
    background: rgba(191, 239, 228, 0.85);
    color: #1b5e20;
}

.order-status-unpaid {
    background: rgba(255, 183, 0, 0.18);
    color: #8a5a00;
}

.order-status-cancelled {
    background: rgba(255, 49, 49, 0.12);
    color: #b3261e;
}

.site-account .btn {
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    border-width: 0;
}

.site-account .btn-primary {
    background: linear-gradient(135deg, var(--3), #ff5b97);
    box-shadow: 0 14px 28px rgba(255, 17, 103, 0.18);
}

.site-account .btn-primary:hover,
.site-account .btn-primary:focus-visible {
    background: linear-gradient(135deg, #ff0a61, #ff4c8b);
}

.site-account .btn-secondary {
    background: rgba(24, 39, 54, 0.12);
    color: var(--8);
}

.site-account .btn-secondary:hover,
.site-account .btn-secondary:focus-visible {
    background: rgba(24, 39, 54, 0.18);
    color: var(--8);
}

/* ==========================================================================
   New Top Navigation Layout
   ========================================================================== */
.account-top-navigation {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(24, 39, 54, 0.08);
    position: sticky;
    top: 0;
    z-index: 90;
    margin-bottom: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Holds only the tab buttons so the scrollbar/overflow is scoped to them -
   Shop/Log out used to sit inside the same scrolling row (see .nav-actions
   below), which meant they scrolled out of reach on narrow screens instead
   of staying reachable. */
.nav-tabs-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
}

.nav-tab-btn {
    background: transparent;
    border: none;
    padding: 15px 18px;
    font-family: var(--garet);
    font-size: 14px;
    font-weight: 700;
    color: var(--9);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: color 0.3s ease, background 0.2s ease;
}

/* Icons only render on the mobile app-tile layout (see the max-width:768px
   block below) - desktop keeps the plain text tabs. This base block is
   deliberately placed BEFORE that media query in the file (it used to sit
   much later, under "New Top Navigation Layout") - an unconditional rule
   and a mobile-media-query rule have the same specificity, so whichever one
   is LATER in the file wins regardless of viewport. With this block after
   the media query, its unconditional "display:none" / "display:flex" /
   "white-space:nowrap" etc were silently overriding every mobile-only
   override below (the icon grid, the tile background, the wrapped
   white-space) even on phones. */
.nav-tab-icon {
    display: none;
}

.nav-tab-btn:hover,
.nav-tab-btn.active {
    color: var(--8);
}

.nav-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 18px;
    right: 18px;
    height: 3px;
    background: var(--3);
    border-radius: 999px;
}

.nav-shop-btn {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--3), #ff5b97);
    border: none;
    padding: 10px 18px;
    border-radius: 12px;
    font-family: var(--garet);
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(255, 17, 103, 0.18);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.nav-shop-btn:hover,
.nav-shop-btn:focus-visible {
    background: linear-gradient(135deg, #ff0a61, #ff4c8b);
    color: #ffffff;
    transform: translateY(-1px);
}

.nav-logout-btn {
    background: rgba(24, 39, 54, 0.05);
    border: none;
    padding: 10px 18px;
    border-radius: 12px;
    font-family: var(--garet);
    font-size: 14px;
    font-weight: 700;
    color: #c62828;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.3s ease;
}

.nav-logout-btn:hover {
    background: rgba(198, 40, 40, 0.1);
}

@media (max-width: 1100px) {
    .account-header,
    .account-grid {
        grid-template-columns: 1fr;
    }

    .profiles-layout,
    .overview-grid,
    .form-panel-row,
    .customization-grid,
    .profile-theme-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .site-account {
        padding-top: 0;
    }

    .account-page {
        margin-top: 0;
    }

    .account-header,
    .account-grid {
        padding: 0 14px;
    }

    .account-header-panel,
    .section-card,
    .profile-card,
    .customizer-block {
        padding: 20px;
        border-radius: 20px;
    }

    .section-heading,
    .occasion-banner,
    .saved-profile-top,
    .meta-row,
    .header-progress-top,
    .profile-progress-copy {
        flex-direction: column;
        align-items: flex-start;
    }

    .occasion-banner {
        align-items: stretch;
    }

    .account-form-grid,
    .occasion-grid {
        grid-template-columns: 1fr;
    }

    .saved-profile-actions {
        justify-items: start;
    }

    .saved-profile-actions .section-copy {
        text-align: left;
    }

    .form-row-wide {
        grid-column: auto;
    }

    .saved-profile-footer,
    .form-actions {
        justify-content: flex-start;
    }

    .portal-links .btn,
    .site-account .btn {
        width: 100%;
    }

    .menu-link {
        align-items: flex-start;
    }

    .menu-link small,
    .meta-value,
    .tab-link small {
        text-align: left;
        max-width: 100%;
    }

    .account-top-navigation {
        margin-bottom: 20px;
    }

    .nav-container {
        flex-wrap: wrap;
        padding: 10px 14px;
        gap: 10px;
    }

    /* A 2-column wrapping grid of icon-over-label tiles instead of a
       horizontal-scroll row - 5 tab labels never fit one line on a phone
       width without shrinking past readable, so this lays them out as an
       app-style tile grid that's entirely visible with no side-scrolling
       (last tab spans full width so the odd one out isn't half-empty). */
    .nav-tabs-scroll {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        overflow: visible;
    }

    .nav-tab-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 12px 8px 10px;
        border-radius: 16px;
        background: rgba(24, 39, 54, 0.04);
        text-align: center;
        white-space: normal;
        line-height: 1.2;
        font-size: 12.5px;
    }

    .nav-tab-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
    }

    .nav-tab-icon svg {
        width: 100%;
        height: 100%;
    }

    .nav-tab-btn:last-child {
        grid-column: 1 / -1;
    }

    .nav-tab-btn.active {
        background: linear-gradient(135deg, rgba(255, 17, 103, 0.14), rgba(191, 239, 228, 0.75));
        box-shadow: 0 8px 18px rgba(24, 39, 54, 0.08);
    }

    .nav-tab-btn.active .nav-tab-icon {
        color: var(--3);
    }

    .nav-tab-btn.active::after {
        content: none;
    }

    /* Shop/Log out get their own full-width row below the tabs instead of
       riding along inside the scrolling tab row, where reaching them meant
       scrolling all the way past every tab first. */
    .nav-actions {
        width: 100%;
        margin-left: 0;
        gap: 8px;
    }

    .nav-shop-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .nav-logout-form {
        flex: 0 0 auto;
    }

    .tab-link {
        flex-direction: column;
        align-items: flex-start;
    }

    .event-row {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-remove-event {
        align-self: flex-start;
    }

    .profile-modal {
        padding: 12px;
    }

    .profile-modal-dialog {
        max-height: calc(100vh - 24px);
        padding: 16px;
        border-radius: 22px;
    }

    .profile-modal-actions {
        justify-content: flex-start;
        bottom: -16px;
        margin: 20px -16px -16px;
        padding: 14px 16px 16px;
    }

    .profile-modal-header {
        top: -16px;
        margin: -16px -16px 14px;
        padding: 16px 16px 12px;
    }

    .profile-step-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Background and text chooser controls */
.theme-choices .bg-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 2px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    padding: 0;
}

.theme-choices .bg-btn:focus-visible {
    box-shadow: 0 0 0 4px rgba(28, 152, 237, 0.12);
}

.theme-choices .bg-btn.active {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(24, 39, 54, 0.08);
}

.theme-choices .bg-btn[data-bg="pink"] {
    background: linear-gradient(135deg, var(--6), var(--3));
}

.theme-choices .bg-btn[data-bg="blue"] {
    background: linear-gradient(135deg, var(--14), var(--16));
}

.theme-choices .bg-btn[data-bg="yellow"] {
    background: linear-gradient(135deg, rgba(255, 235, 56, 0.24), var(--11));
}

.theme-choices .bg-btn[data-bg="light-peach"] {
    background: linear-gradient(135deg, var(--1), #fff);
}

.theme-choices .text-btn {
    min-width: 36px;
    height: 28px;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.theme-choices .text-btn.active {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(24, 39, 54, 0.08);
}

.theme-choices .text-btn[data-text="dark"] {
    background: #182736;
    color: #fff;
}

.theme-choices .text-btn[data-text="light"] {
    background: #fff;
    color: #182736;
}

/* Disabled = would clash with the current display mode (e.g. light text on
   a light background, or dark text on a dark background) */
.theme-choices .text-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Add-profile modal action buttons (Back / Next / Save / Cancel) reuse the
   site-wide .btn-primary / .btn-secondary treatment further up this file
   (gradient pink primary, subtle gray secondary) instead of flattening every
   button to the same look. */

/* Ensure the account-level CSS variables are used by children */
.site-account {
    --account-bg: unset;
    --account-text: unset;
}

/* Special characters inside terms: use Roboto Condensed */
.special-char {
    font-family: 'Roboto Condensed', sans-serif;
}

/* ==========================================================================
   Layout Containers & Customization Items
   ========================================================================== */
.account-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 18px 50px;
}

.account-tab-panel {
    display: none;
}

.account-tab-panel.active {
    display: block;
    animation: fadeIn 0.4s ease forwards;
}

.customizer-block {
    margin-top: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(24, 39, 54, 0.06);
}

.customizer-block h4 {
    margin: 0 0 12px 0;
    font-family: var(--garet);
    font-size: 15px;
}

.theme-choices {
    display: flex;
    gap: 12px;
    align-items: center;
}

.mode-btn {
    background: #ffffff;
    border: 1px solid rgba(24, 39, 54, 0.15);
    padding: 10px 20px;
    border-radius: 12px;
    font-family: var(--garet);
    font-size: 13px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s ease;
}

.mode-btn.active {
    background: var(--8);
    color: #ffffff;
    border-color: var(--8);
}

.bg-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bg-btn:hover {
    transform: scale(1.08);
}

.bg-btn.active {
    transform: scale(1.1);
    outline: 3px solid var(--8);
    outline-offset: 3px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Color Mode Profiles (Light / Dark) Overrides
   ========================================================================== */

/* Dark Mode Defaults */
.site-account[data-color-mode="dark"] {
    --account-text: #eef2f6;
    --account-muted: rgba(224, 228, 232, 0.76);
    --dusty-charcoal: #eef2f6;
    --charcoal: #eef2f6;
    background: linear-gradient(180deg, #12161a, #171c20 38%, #121416 100%);
}

.site-account[data-color-mode="dark"] .account-top-navigation {
    background: rgba(22, 25, 28, 0.9);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-account[data-color-mode="dark"] .card,
.site-account[data-color-mode="dark"] .section-card,
.site-account[data-color-mode="dark"] .account-header-panel,
.site-account[data-color-mode="dark"] .customizer-block,
.site-account[data-color-mode="dark"] .form-panel,
.site-account[data-color-mode="dark"] .recipient-form,
.site-account[data-color-mode="dark"] .saved-profile-card,
.site-account[data-color-mode="dark"] .empty-state,
.site-account[data-color-mode="dark"] .customers-table tbody td,
.site-account[data-color-mode="dark"] .customers-table thead th,
.site-account[data-color-mode="dark"] .occasion-item,
.site-account[data-color-mode="dark"] .overview-stat,
.site-account[data-color-mode="dark"] .budget-slider-wrap {
    background: rgba(24, 29, 33, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.site-account[data-color-mode="dark"] input,
.site-account[data-color-mode="dark"] select,
.site-account[data-color-mode="dark"] textarea,
.site-account[data-color-mode="dark"] .tag-input-wrap,
.site-account[data-color-mode="dark"] .event-type-input,
.site-account[data-color-mode="dark"] .event-date-input {
    background: rgba(17, 21, 24, 0.92);
    color: #eef2f6;
    border-color: rgba(255, 255, 255, 0.08);
}

.site-account[data-color-mode="dark"] h1,
.site-account[data-color-mode="dark"] h2,
.site-account[data-color-mode="dark"] h3,
.site-account[data-color-mode="dark"] h4,
.site-account[data-color-mode="dark"] .nav-tab-btn.active {
    color: #ffffff;
}

.site-account[data-color-mode="dark"] .mode-btn,
.site-account[data-color-mode="dark"] .profile-theme-btn,
.site-account[data-color-mode="dark"] .theme-choices .text-btn {
    background: #25292e;
    border-color: rgba(255,255,255,0.1);
    color: #ffffff;
}

.site-account[data-color-mode="dark"] .mode-btn.active,
.site-account[data-color-mode="dark"] .profile-theme-btn.active {
    background: #ffffff;
    color: #121416;
}

.site-account[data-color-mode="dark"] .profile-theme-btn small,
.site-account[data-color-mode="dark"] .account-header-panel small,
.site-account[data-color-mode="dark"] .section-copy,
.site-account[data-color-mode="dark"] .form-panel-header p,
.site-account[data-color-mode="dark"] .saved-profile-top p,
.site-account[data-color-mode="dark"] .empty-state p,
.site-account[data-color-mode="dark"] .overview-stat p {
    color: rgba(224, 228, 232, 0.76);
}

/* ==========================================================================
   Custom Profile Palettes (Theme Comments Followed by Theme Specific CSS)
   ========================================================================== */

/* Theme 1 - green
   --9 was #4caf50, a light green used as body/muted text on white and
   pastel cards (~2.7:1 contrast, fails WCAG AA). Darkened to keep the
   hue but stay readable. */
.site-account[data-theme-profile="theme-green"] {
    --3: #2e7d32;
    --8: #1b5e20;
    --9: #3d7a41;
}
.site-account[data-theme-profile="theme-green"] .nav-tab-btn.active::after {
    background: #2e7d32;
}

/* Theme 2 - pink
   --3/--9 were too light for text use (#ec407a ~3.9:1, #f48fb1 ~1.7:1 on
   white/pink cards). Darkened while staying pink. */
.site-account[data-theme-profile="theme-pink"] {
    --3: #c2185b;
    --8: #880e4f;
    --9: #ad1457;
}
.site-account[data-theme-profile="theme-pink"] .nav-tab-btn.active::after {
    background: #c2185b;
}

/* Theme 3 - blue
   --3/--9 were too light for text use (#1c98ed ~2.5:1, #64b5f6 ~2.1:1 on
   white/pink cards). Darkened while staying blue. */
.site-account[data-theme-profile="theme-blue"] {
    --3: #1565c0;
    --8: #0d47a1;
    --9: #1976d2;
}
.site-account[data-theme-profile="theme-blue"] .nav-tab-btn.active::after {
    background: #1565c0;
}

/* Theme 4 - peach
   --3/--9 were too light for text use (#e64a19 ~4.2:1 borderline,
   #ffab91 ~1.9:1 on white/pink cards). Darkened while staying peach/terracotta. */
.site-account[data-theme-profile="theme-peach"] {
    --3: #bf360c;
    --8: #5d4037;
    --9: #a1440f;
}
.site-account[data-theme-profile="theme-peach"] .nav-tab-btn.active::after {
    background: #bf360c;
}

@media (max-width: 768px) {
    /* The mobile active-tab tile (rgba(255,17,103,.14) + mint) reads as
       muddy on the dark-mode card surface - swap it for a plain light
       overlay so it stays legible against dark backgrounds too. */
    .site-account[data-color-mode="dark"] .nav-tab-btn.active {
        background: rgba(255, 255, 255, 0.12);
    }

    .site-account[data-color-mode="dark"] .nav-tab-btn.active .nav-tab-icon {
        color: #ffffff;
    }
}

/* Recent Orders table -> stacked cards on phone. Each <td> already carried a
   data-label attribute (added at some point for exactly this, but never
   wired up to any CSS) - reused here to reproduce each column as a labelled
   row instead of leaving the customer to scroll a table sideways. Placed
   after the dark-mode .customers-table rule above (same selector specificity)
   so these overrides still win in dark mode at phone widths. */
@media (max-width: 768px) {
    .table-wrap {
        overflow-x: visible;
    }

    .customers-table thead {
        display: none;
    }

    .customers-table,
    .customers-table tbody,
    .customers-table tr {
        display: block;
        width: 100%;
    }

    .customers-table {
        border-radius: 0;
    }

    .customers-table tbody tr {
        margin-bottom: 14px;
        padding: 4px 16px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.86);
        border: 1px solid rgba(24, 39, 54, 0.08);
        box-shadow: 0 12px 26px rgba(24, 39, 54, 0.06);
    }

    .customers-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .customers-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 0;
        border-top: 1px solid rgba(24, 39, 54, 0.08);
        background: transparent;
    }

    .customers-table td:first-child {
        border-top: 0;
    }

    .customers-table td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--account-muted, var(--9));
        flex: 0 0 auto;
    }

    .customers-table td[data-label="Order"] {
        font-weight: 700;
        color: var(--8);
    }

    /* Actions reads as a footer strip - item count + shop badge on the left,
       the View button pinned to the right - rather than another label/value
       pair, since a bare "Actions:" label adds nothing the button doesn't
       already say. */
    .customers-table td.actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .customers-table td.actions::before {
        content: none;
    }

    .customers-table td.actions .btn {
        margin-left: auto;
    }

    .site-account[data-color-mode="dark"] .customers-table tbody tr {
        background: rgba(24, 29, 33, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    }

    .site-account[data-color-mode="dark"] .customers-table tbody td {
        background: transparent;
    }
}