/*
 *  customer.css
 *
 *  Modern luxury styling for The Fascinate Customer Web Portal.
 *  Uses the warm ivory & rich tailored gold aesthetic matching the
 *  brand and mobile apps, with state-of-the-art responsiveness,
 *  mobile app-style bottom navigation, luxury typography, and
 *  bespoke tailoring order tracker components.
 */

:root {
    /* Brand values come from ../css/brand.css (shared with admin);
       customer pages keep using these --c-* names. Warn tokens stay
       amber on purpose so warnings never look like branding. */
    --c-bg: var(--tf-bg);
    --c-surface: #ffffff;
    --c-surface-2: #faf7f2;
    --c-surface-warm: #fcfaf6;
    --c-border: var(--tf-border);
    --c-border-subtle: var(--tf-border-subtle);
    --c-border-gold: var(--tf-gold-border);
    --c-ink: var(--tf-ink);
    --c-ink-soft: var(--tf-ink-soft);
    --c-ink-faint: var(--tf-ink-faint);
    
    --c-accent: var(--tf-gold-fill);
    --c-accent-dark: var(--tf-gold-text);
    --c-accent-light: var(--tf-gold-tint);
    --c-accent-subtle: var(--tf-gold-tint-soft);
    
    --c-ok: #15803d;
    --c-ok-bg: #dcfce7;
    --c-ok-border: #bbf7d0;
    
    --c-warn: #b45309;
    --c-warn-bg: #fef3c7;
    --c-warn-border: #fde68a;
    
    --c-bad: #b91c1c;
    --c-bad-bg: #fee2e2;
    --c-bad-border: #fecaca;
    
    --c-info: #1d4ed8;
    --c-info-bg: #dbeafe;
    --c-info-border: #bfdbfe;
    
    --c-ready: #6d28d9;
    --c-ready-bg: #ede9fe;
    --c-ready-border: #ddd6fe;

    --c-shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --c-shadow-md: 0 4px 16px -2px rgba(32, 28, 23, 0.06);
    --c-shadow-lg: 0 10px 25px -3px rgba(32, 28, 23, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-ink);
    font-family: var(--tf-font-sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* ===== Shell (Sidebar + Canvas) ===== */

.c-shell {
    display: flex;
    min-height: 100vh;
    background: var(--c-bg);
}

/* ===== Left Sidebar (Matching Admin Panel) ===== */

.c-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: #1e1b18; /* Rich deep charcoal luxury tailoring background matching admin */
    color: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    z-index: 60;
}

.c-sidebar::-webkit-scrollbar {
    width: 5px;
}

.c-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
}

.c-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px 24px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 16px;
}

/* The app icon (gold TF monogram), same as the admin sidebar's brand. */
.c-sidebar-brand-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    /* Thin gold ring + faint warm glow, so the black tile stands off the
       dark sidebar (matches the monogram's own gold). */
    box-shadow: 0 0 0 1px rgba(212, 170, 96, 0.45), 0 0 14px rgba(212, 170, 96, 0.22);
}

.c-sidebar-brand-text {
    display: flex;
    flex-direction: column;
}

.c-sidebar-brand-name {
    font-family: var(--tf-font-serif);
    font-size: 19px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.2px;
    line-height: 1.2;
}

.c-sidebar-brand-sub {
    font-size: 10.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

.c-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-height: 0;
}

.c-sidebar-nav-group {
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    padding: 6px 12px 6px;
}

.c-sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.c-sidebar-nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.c-sidebar-nav-link.is-active {
    background: var(--c-accent);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(180, 83, 9, 0.35);
}

.c-sidebar-nav-icon {
    font-size: 16px;
    width: 20px;
    height: 20px;
    text-align: center;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.c-sidebar-nav-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.c-sidebar-nav-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-badge-pill {
    background: var(--c-bad);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    border-radius: var(--r-sm);
    padding: 1px 7px;
    line-height: 1.3;
    margin-left: auto;
}

.c-sidebar-bottom {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    /* Pinned to the bottom of the (scrolling) sidebar -- nav links scroll
       behind it. The negative margin + matching padding cover .c-sidebar's
       own 24px bottom padding so nothing peeks out underneath. */
    position: sticky;
    bottom: -24px;
    margin-bottom: -24px;
    padding-bottom: 24px;
    background: #1e1b18;
    z-index: 1;
}

.c-sidebar-logout {
    color: rgba(255, 255, 255, 0.6);
}

.c-sidebar-logout:hover {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
}

/* ===== Main Canvas & Sticky Topbar ===== */

.c-main-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.c-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    background: #ffffff;
    border-bottom: 1px solid var(--c-border);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.c-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.c-topbar-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--c-ink);
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* ===== Segmented Language Toggle [ EN | ગુ ] ===== */

.c-lang-toggle {
    display: inline-flex;
    align-items: center;
    height: 36px;
    box-sizing: border-box;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 3px;
    gap: 2px;
}

.c-lang-toggle a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    box-sizing: border-box;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: var(--r-sm);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    color: var(--c-ink-soft);
    transition: all 0.15s ease;
}

.c-lang-toggle a.is-active {
    background: var(--c-accent);
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.c-lang-toggle a:not(.is-active):hover {
    color: var(--c-ink);
}

/* ===== Topbar User Menu Pill & Popup (Matching Admin Panel) ===== */

.c-user-menu-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.c-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 3px 12px 3px 4px;
    border-radius: var(--r-md);
    background: #ffffff;
    border: 1px solid var(--c-border);
    color: var(--c-ink);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.c-user-pill:hover,
.c-user-pill.is-active,
.c-user-pill[aria-expanded="true"] {
    background: #fdfbf7;
    border-color: var(--c-accent);
    box-shadow: 0 2px 8px rgba(180, 83, 9, 0.15);
    transform: translateY(-1px);
}

.c-user-pill[aria-expanded="true"] .c-user-chevron {
    transform: rotate(90deg);
}

.c-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--tf-gold-fill), var(--tf-gold-deep));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.c-user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.c-user-avatar-initials {
    font-size: 11.5px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-user-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--c-ink-soft);
}

.c-user-name {
    color: var(--c-ink);
    font-weight: 700;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-role-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    background: var(--tf-gold-tint);
    color: var(--tf-gold-text);
    border: 1px solid var(--tf-gold-border);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.c-user-chevron {
    font-size: 16px;
    line-height: 1;
    color: var(--c-ink-soft);
    opacity: 0.6;
    margin-left: 2px;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.c-user-menu-popup {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 200px;
    background: #ffffff;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
    z-index: 1000;
    flex-direction: column;
    overflow: hidden;
    padding: 6px;
    animation: cPopupFade 0.15s ease-out;
}

@keyframes cPopupFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.c-user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--c-ink);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: background 0.12s ease;
}

.c-user-menu-item:hover {
    background: var(--c-surface-2);
}

.c-user-menu-item-danger {
    color: var(--c-bad);
}

.c-user-menu-item-danger:hover {
    background: var(--c-bad-bg);
}

.c-user-menu-icon {
    font-size: 15px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* ===== Content Area ===== */

.c-content,
.c-main {
    flex: 1;
    max-width: 860px;
    width: 100%;
    margin: 0;
    margin-right: auto;
    padding: 28px 32px 60px;
    box-sizing: border-box;
}

.c-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.c-page-head .c-page-title {
    display: none; /* Page title already prominent in sticky topbar */
}

.c-page-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin: 0;
    color: var(--c-ink);
}

.c-page-sub {
    font-size: 14px;
    color: var(--c-ink-soft);
    margin: 0;
}

/* ===== Luxury Cards ===== */

.c-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: var(--c-shadow-sm);
    transition: box-shadow 0.2s ease;
}

.c-card:hover {
    box-shadow: var(--c-shadow-md);
}

.c-card-title {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--c-ink);
}

.c-card-sub {
    color: var(--c-ink-soft);
    font-size: 13px;
    margin: 0 0 16px;
}

/* ===== Invoice Pattern Table Styling (Garments & Fabric Details) ===== */

.c-invoice-card {
    padding: 0;
    overflow: hidden;
}

.c-invoice-card-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
}

.c-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.c-table,
table.items {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    background: #ffffff;
}

table.c-table th,
table.items th {
    background: #c4984f !important; /* Lighter warm luxury gold brand header */
    color: #ffffff !important;
    text-align: left;
    padding: 11px 18px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border: none !important;
    border-radius: 0 !important;
}

table.c-table th.num,
table.c-table td.num,
table.c-table th.c-num,
table.c-table td.c-num,
table.items th.num,
table.items td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

table.c-table td,
table.items td {
    padding: 12px 18px;
    border-bottom: 1px solid #efe7d8;
    color: var(--c-ink);
    font-size: 14px;
    vertical-align: middle;
}

table.c-table tbody tr:hover td,
table.items tbody tr:hover td {
    background: #fdfaf6;
}

table.c-table tfoot td,
table.items tfoot td {
    padding: 12px 18px;
    background: #faf7f2;
    border-top: 2px solid #cfc3ad;
    font-size: 14px;
}

.c-table-total-label {
    text-align: right;
    font-weight: 700;
    color: var(--c-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
}

.c-table-total-val {
    font-weight: 800;
    color: var(--c-accent-dark, var(--tf-gold-text));
    font-size: 15px;
}

/* ===== KPI Stats Grid ===== */

.c-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.c-stat-box {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: var(--c-shadow-sm);
}

.c-stat-lbl {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--c-ink-soft);
    margin-bottom: 6px;
}

.c-stat-val {
    font-size: 24px;
    font-weight: 800;
    color: var(--c-ink);
    letter-spacing: -0.5px;
}

.c-stat-sub {
    font-size: 12px;
    color: var(--c-ink-faint);
    margin-top: 2px;
}

.c-stat-box.is-clickable {
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    user-select: none;
}

.c-stat-box.is-clickable:hover {
    border-color: var(--c-accent);
    transform: translateY(-2px);
    box-shadow: var(--c-shadow-md);
}

.c-stat-box.is-clickable.is-active {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.22);
}

/* ===== Customer Profile Hero ===== */

.c-profile-hero {
    background: linear-gradient(135deg, #ffffff 0%, var(--c-surface-warm) 100%);
    border: 1px solid var(--c-border);
    border-radius: 18px;
    padding: 26px 24px;
    margin-bottom: 24px;
    box-shadow: var(--c-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.c-profile-hero-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.c-profile-avatar-wrap {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 3px solid var(--c-accent-light);
    box-shadow: var(--c-shadow-md);
    background: var(--c-accent);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.c-profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-profile-avatar-initials {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.c-profile-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.c-profile-name {
    font-size: 22px;
    font-weight: 800;
    margin: 0;
    color: var(--c-ink);
}

.c-profile-badge {
    font-size: 11.5px;
    font-weight: 700;
    border-radius: var(--r-sm);
    padding: 2px 9px;
}

.c-profile-meta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--c-ink-soft);
    font-size: 13.5px;
}

.c-linked-acc-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--tf-gold-tint-soft);
    border: 1px solid var(--tf-gold-border);
    color: var(--tf-gold-text);
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--r-sm);
    padding: 3px 12px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.c-linked-acc-pill:hover {
    background: var(--tf-gold-tint);
}

.c-profile-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.c-btn-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-accent);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(180, 83, 9, 0.25);
    transition: all 0.15s ease;
}

.c-btn-edit:hover {
    background: var(--c-accent-dark);
}

.c-btn-signout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    color: #b91c1c;
    border: 1px solid #fecaca;
    font-size: 13.5px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.c-btn-signout:hover {
    background: #fee2e2;
}

/* ===== Profile Two-Column Rows ===== */

.c-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.c-profile-rows {
    display: flex;
    flex-direction: column;
}

.c-profile-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--c-border-subtle);
    font-size: 14px;
}

.c-profile-row.c-profile-row-stack {
    /* "No profile linked yet" block (profile.php): heading, text and
       buttons stacked full-width, not squeezed into the label/value grid. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.c-profile-row-stack .c-btn {
    white-space: nowrap;
}
.c-profile-row:last-child {
    border-bottom: none;
}

.c-profile-lbl {
    color: var(--c-ink-soft);
    font-weight: 500;
    text-align: left;
}

.c-profile-val {
    font-weight: 600;
    color: var(--c-ink);
    text-align: left;
    word-break: break-word;
}

/* ===== Birthday Special Offer Perks ===== */

.c-birthday-perk-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 24px;
    border-radius: 16px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.c-birthday-perk-card.is-missing {
    background: linear-gradient(135deg, var(--tf-gold-tint-soft) 0%, var(--tf-gold-tint) 40%, var(--tf-gold-border) 100%);
    border: 1.5px solid var(--tf-gold);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15);
}

.c-birthday-perk-card.is-active {
    background: linear-gradient(135deg, #ffffff 0%, #faf7f2 100%);
    border: 1.5px solid var(--tf-border);
    box-shadow: var(--c-shadow-sm);
}

.c-birthday-perk-icon {
    font-size: 34px;
    line-height: 1;
    flex-shrink: 0;
}

.c-birthday-perk-content {
    flex: 1;
    min-width: 0;
}

.c-birthday-perk-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    background: #d97706;
    color: #ffffff;
    margin-bottom: 5px;
}

.c-birthday-perk-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--tf-gold-deep);
    margin: 0 0 3px;
    line-height: 1.3;
}

.c-birthday-perk-card.is-active .c-birthday-perk-title {
    color: var(--c-ink);
}

.c-birthday-perk-desc {
    font-size: 13px;
    color: var(--tf-gold-text);
    margin: 0;
    line-height: 1.4;
}

.c-birthday-perk-card.is-active .c-birthday-perk-desc {
    color: var(--c-ink-soft);
}

.c-birthday-perk-btn {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 18px;
    background: var(--tf-gold-fill);
    color: #ffffff;
    border: 1px solid var(--tf-gold-fill-hover);
    border-radius: var(--r-md);
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(180, 83, 9, 0.25);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.c-birthday-perk-btn:hover {
    background: var(--tf-gold-fill-hover);
    color: #ffffff;
    transform: translateY(-1px);
}

.c-birthday-date-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #ffffff;
    border: 1px solid #d9cfc0;
    border-radius: var(--r-sm);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--c-ink);
    white-space: nowrap;
}

.c-birthday-add-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tf-gold-fill);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    padding: 3px 10px;
    background: var(--tf-gold-tint);
    border: 1px solid var(--tf-gold-border);
    border-radius: var(--r-md);
    transition: all 0.15s ease;
}

.c-birthday-add-link:hover {
    background: var(--tf-gold-border);
    transform: translateX(2px);
}

.c-birthday-active-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--tf-gold-text);
    background: var(--tf-gold-tint);
    border: 1px solid var(--tf-gold-border);
    border-radius: var(--r-sm);
    padding: 2px 8px;
    margin-left: 8px;
    vertical-align: middle;
}

.c-birthday-field-callout {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
    padding: 10px 14px;
    background: var(--tf-gold-tint-soft);
    border: 1.5px solid var(--tf-gold-border);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--tf-gold-text);
    line-height: 1.4;
}

@media (max-width: 640px) {
    .c-birthday-perk-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 18px 16px;
    }
    .c-birthday-perk-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== Edit Profile Screen Avatar ===== */

.c-edit-avatar-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    background: var(--c-surface-warm);
    border-radius: 14px;
    border: 1px solid var(--c-border);
    margin-bottom: 24px;
}

.c-edit-avatar-preview {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--c-accent);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #ffffff;
    box-shadow: var(--c-shadow-md);
}

.c-edit-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-field-hint {
    font-size: 12px;
    color: var(--c-ink-faint);
    margin-top: 4px;
}

/* ===== Bills & Orders Cards ===== */

/* Segmented Filter Bar (Parity with Notifications Pattern) */
.c-bill-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0 24px;
    flex-wrap: wrap;
}

.c-bill-segmented {
    display: inline-flex;
    align-items: center;
    background: #f3eee6;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 3px;
    gap: 3px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.c-bill-tab-btn {
    background: transparent;
    border: none;
    text-decoration: none;
    padding: 6px 16px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.15s ease;
    font-family: inherit;
}

.c-bill-tab-btn.is-active {
    background: #ffffff;
    color: var(--c-ink);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.c-bill-tab-btn:not(.is-active):hover {
    color: var(--c-ink);
}

.c-bill-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    line-height: 1;
}

.c-bill-tab-badge.has-progress {
    background: var(--c-accent);
    color: #ffffff;
}

.c-bill-tab-badge.has-ready {
    background: #16a34a;
    color: #ffffff;
}

.c-balance-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--r-sm);
    font-size: 12.5px;
    color: #991b1b;
}

.c-balance-pill-lbl {
    font-weight: 600;
    color: #b91c1c;
}

.c-balance-pill-val {
    font-weight: 800;
    color: #991b1b;
}

.c-bill-sections-wrap {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.c-bill-section {
    display: flex;
    flex-direction: column;
}

.c-bill-section-spaced {
    margin-top: 6px;
}

.c-bill-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 4px;
}

.c-bill-section-title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--c-ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}

.c-bill-section-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.c-bill-section-dot.c-dot-progress {
    background: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.16);
}

.c-bill-section-dot.c-dot-completed {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16);
}

.c-bill-section-badge {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--c-ink);
    background: var(--c-surface-warm);
    border: 1px solid var(--c-border);
    padding: 2px 8px;
    border-radius: var(--r-sm);
    letter-spacing: normal;
}

.c-bill-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.c-bill-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--c-shadow-sm);
    transition: all 0.2s ease;
}

.c-bill-card:hover {
    border-color: #d9cfc0;
    box-shadow: var(--c-shadow-md);
    transform: translateY(-1px);
}

.c-bill-link {
    display: block;
    padding: 18px 20px;
    text-decoration: none;
    color: inherit;
}

.c-bill-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.c-bill-no {
    font-weight: 800;
    font-size: 17px;
    color: var(--c-ink);
}

.c-bill-amount {
    font-weight: 800;
    font-size: 18px;
    color: var(--c-accent);
}

.c-bill-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--c-ink-soft);
    font-size: 13px;
    margin-top: 6px;
}

/* ===== Customer Bills Table Listing ===== */

.c-bill-table-wrap {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--c-shadow-sm);
    margin-top: 10px;
    margin-bottom: 24px;
}

.c-bill-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    background: #ffffff;
    min-width: 680px;
}

.c-bill-table th {
    background: #faf7f2;
    color: var(--tf-gold-deep);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 12px 16px;
    border-bottom: 2px solid #efe7d8;
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.c-bill-table td {
    padding: 13px 16px;
    border-bottom: 1px solid #f3ece1;
    color: var(--c-ink);
    vertical-align: middle;
    white-space: nowrap;
    font-size: 13.5px;
}

.c-bill-row {
    transition: background 0.15s ease;
    cursor: pointer;
}

.c-bill-row:hover td {
    background: #fdfaf6;
}

.c-bill-row:active td {
    background: #fdf2e2;
}

.c-bill-row:last-child td {
    border-bottom: none;
}

.c-bill-table-link {
    font-weight: 800;
    color: var(--c-accent);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.15s ease;
}

.c-bill-table-link:hover {
    color: var(--c-accent-dark, var(--tf-gold-text));
    text-decoration: underline;
}

.c-bill-bal-badge {
    display: inline-block;
    font-weight: 800;
    color: #b91c1c;
    background: #fef2f2;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #fecaca;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.c-table-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--c-accent);
    background: #fdf5ea;
    padding: 5px 12px;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid #f6e3c5;
    transition: all 0.15s ease;
}

.c-table-open-btn:hover {
    background: var(--c-accent);
    color: #ffffff;
    border-color: var(--c-accent);
}

.c-bill-table-total td {
    background: #faf7f2;
    border-top: 2px solid #cfc3ad;
    font-size: 13.5px;
    padding: 12px 16px;
}

.c-bill-total-label {
    text-align: right;
    font-weight: 700;
    color: var(--c-ink-soft);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Scrollbar styling for smooth swiping */
.c-bill-table-wrap::-webkit-scrollbar {
    height: 6px;
}

.c-bill-table-wrap::-webkit-scrollbar-track {
    background: #fdfaf6;
}

.c-bill-table-wrap::-webkit-scrollbar-thumb {
    background: #d8cbb8;
    border-radius: 999px;
}

/* ===== Status Chips ===== */

.c-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.c-pill {
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--r-sm);
    padding: 3px 10px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.c-pill-ok { background: var(--c-ok-bg); color: var(--c-ok); border: 1px solid var(--c-ok-border); }
.c-pill-warn { background: var(--c-warn-bg); color: var(--c-warn); border: 1px solid var(--c-warn-border); }
.c-pill-bad { background: var(--c-bad-bg); color: var(--c-bad); border: 1px solid var(--c-bad-border); }
.c-pill-info { background: var(--c-info-bg); color: var(--c-info); border: 1px solid var(--c-info-border); }
.c-pill-ready { background: var(--c-ready-bg); color: var(--c-ready); border: 1px solid var(--c-ready-border); }

/* ===== Visual Order Progress Tracker ===== */

.c-tracker-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 16px 10px;
    margin-bottom: 24px;
}

.c-tracker-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 2;
    flex: 1;
    text-align: center;
}

.c-tracker-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f3eee6;
    border: 2px solid #d9cfc0;
    color: var(--tf-ink-faint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    transition: all 0.2s ease;
}

.c-tracker-step.is-done .c-tracker-dot {
    background: var(--c-ok);
    border-color: var(--c-ok);
    color: #ffffff;
}

.c-tracker-step.is-active .c-tracker-dot {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #ffffff;
    box-shadow: 0 0 0 4px var(--c-accent-light);
}

.c-tracker-lbl {
    font-size: 12px;
    font-weight: 700;
    color: var(--c-ink-soft);
}

.c-tracker-step.is-done .c-tracker-lbl,
.c-tracker-step.is-active .c-tracker-lbl {
    color: var(--c-ink);
}

.c-tracker-line {
    position: absolute;
    top: 31px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: var(--tf-border);
    z-index: 1;
}

/* ===== Dual Stepper (Delivery & Payment) for Bill Progress ===== */
.c-stepper-wrap {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 20px 18px 22px;
    box-shadow: var(--c-shadow-sm);
    margin-bottom: 20px;
}

.c-stepper-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.c-stepper-group {
    max-width: 100%;
    margin: 20px 0;
}

.c-stepper-group + .c-stepper-group {
    margin-top: 20px;
}

.c-stepper-label {
    margin: 0 0 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--c-ink-soft);
}

.c-stepper {
    display: flex;
    padding: 4px 4px 0;
}

.c-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    text-align: center;
    min-width: 0;
}

.c-step::before {
    content: '';
    position: absolute;
    top: 14px;
    left: -50%;
    width: 100%;
    height: 2.5px;
    background: var(--c-border);
    z-index: 0;
}

.c-step:first-child::before {
    display: none;
}

.c-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    background: var(--c-surface-2);
    color: var(--c-ink-faint);
    border: 2px solid var(--c-border);
    position: relative;
    z-index: 1;
    transition: all 0.2s ease;
}

.c-step-lbl {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--c-ink-soft);
    line-height: 1.25;
}

.c-step.is-done .c-step-dot,
.c-step.is-done::before {
    background: var(--c-accent);
}

.c-step.is-done .c-step-dot {
    border-color: var(--c-accent);
    color: #ffffff;
}

.c-step.is-done .c-step-lbl {
    color: var(--c-ink);
}

.c-step.is-active::before {
    background: var(--c-accent);
}

.c-step.is-active .c-step-dot {
    background: #ffffff;
    border-color: var(--c-accent);
    color: var(--c-accent-dark);
    box-shadow: 0 0 0 3px rgba(184, 134, 59, 0.2);
}

.c-step.is-active .c-step-lbl {
    color: var(--c-accent-dark);
    font-weight: 700;
}

.c-step.is-repair::before {
    background: #f59e0b;
}

.c-step.is-repair .c-step-dot {
    background: #fffbeb;
    border-color: #f59e0b;
    color: #b45309;
}

.c-step.is-repair .c-step-lbl {
    color: #b45309;
    font-weight: 700;
}

.c-step.is-cancelled::before {
    background: var(--c-bad);
}

.c-step.is-cancelled .c-step-dot {
    background: var(--c-bad-bg);
    border-color: var(--c-bad);
    color: var(--c-bad);
}

.c-step.is-cancelled .c-step-lbl {
    color: var(--c-bad);
    font-weight: 700;
}

.c-stepper-divider {
    height: 0;
    border-top: 1px dashed var(--c-border);
    margin: 20px 0;
    max-width: 100%;
}

/* ===== Customer Bill Cards & KV Rows ===== */
.c-kv-list {
    display: flex;
    flex-direction: column;
}

.c-kv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--c-border-subtle);
    font-size: 13.5px;
}

.c-kv-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.c-kv-row:first-child {
    padding-top: 0;
}

.c-kv-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--c-ink-soft);
    font-weight: 500;
}

.c-kv-val {
    color: var(--c-ink);
    font-weight: 600;
    text-align: right;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ===== Customer Bill Amounts Table ===== */
.c-amount-table {
    display: flex;
    flex-direction: column;
}

.c-amount-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    font-size: 13.5px;
    color: var(--c-ink-soft);
}

.c-amount-row strong {
    font-variant-numeric: tabular-nums;
    color: var(--c-ink);
}

.c-amount-row.is-discount {
    color: #059669;
}

.c-amount-row.is-discount strong {
    color: #059669;
}

.c-amount-row.is-subtotal {
    font-weight: 600;
    border-top: 1px dashed var(--c-border-subtle);
    border-bottom: 1px dashed var(--c-border-subtle);
    margin: 4px 0;
    padding: 10px 0;
}

.c-amount-row.is-grand-total {
    border-top: 2px solid var(--c-border);
    padding-top: 14px;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--c-ink);
}

.c-amount-row.is-grand-total strong {
    font-size: 18px;
    font-weight: 800;
    color: var(--c-ink);
}

.c-amount-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 12px;
}

.c-amount-banner.is-due {
    background: rgba(217, 119, 6, 0.08);
    border: 1px solid rgba(217, 119, 6, 0.25);
    color: #92400e;
}

.c-amount-banner.is-due strong {
    color: #b45309;
    font-size: 16px;
    font-weight: 800;
}

.c-amount-banner.is-settled {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.c-amount-banner.is-settled strong {
    color: #059669;
    font-size: 15px;
    font-weight: 800;
}

/* ===== What's Next Card ===== */
.c-next-card {
    background: var(--c-surface-warm);
    border: 1px solid var(--c-border-gold);
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 20px;
    box-shadow: var(--c-shadow-sm);
}

.c-next-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.c-next-card-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--c-ink);
}

.c-next-card-desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--c-ink-soft);
    margin: 0 0 16px;
}

.c-next-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* ===== Fashion Feed Cards ===== */

.c-feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.c-post {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--c-shadow-sm);
    display: flex;
    flex-direction: column;
}

.c-post-image {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
    background: #f3eee6;
}

.c-post-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.c-post-text {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--c-ink);
    line-height: 1.5;
}

.c-post-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    color: var(--c-ink-soft);
    font-size: 12px;
    border-top: 1px solid var(--c-border-subtle);
    padding-top: 10px;
}

/* ===== Notifications Filter Bar & Segmented Controls ===== */

.c-notif-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.c-notif-segmented {
    display: inline-flex;
    align-items: center;
    background: #f3eee6;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 3px;
    gap: 3px;
}

.c-notif-tab-btn {
    background: transparent;
    border: none;
    text-decoration: none;
    padding: 6px 16px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.c-notif-tab-btn.is-active {
    background: #ffffff;
    color: var(--c-ink);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.c-notif-tab-btn:not(.is-active):hover {
    color: var(--c-ink);
}

.c-notif-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    line-height: 1;
}

.c-notif-tab-badge.has-unread {
    background: #e11d48;
    color: #ffffff;
}

/* ===== Notifications List ===== */

.c-notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.c-notif {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--c-shadow-sm);
    transition: all 0.2s ease;
}

.c-notif.c-notif-unread {
    border-left: 4px solid var(--c-accent);
    background: #fffdfa;
}

.c-notif-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-accent);
    display: inline-block;
}

.c-notif-body {
    display: block;
    padding: 16px 18px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.c-notif-body:hover {
    background: var(--c-surface-2);
}

.c-notif-text {
    margin: 0 0 6px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--c-ink);
}

.c-notif-time {
    color: var(--c-ink-soft);
    font-size: 12px;
}

/* ===== Contact Us Section ===== */

.c-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.c-contact-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--c-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.c-contact-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* ===== Form Controls ===== */

.c-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.c-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.c-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--c-ink-soft);
}

.c-input,
select.c-input,
textarea.c-input {
    width: 100%;
    padding: 11px 14px;
    font-size: 14.5px;
    font-family: inherit;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-surface);
    color: var(--c-ink);
    transition: all 0.15s ease;
}

.c-input:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.16);
}

.c-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.c-search-row .c-input {
    width: 280px;
    max-width: 100%;
    padding: 9px 13px;
    font-size: 13.5px;
}

.c-search-row .c-btn {
    padding: 9px 16px;
    font-size: 13.5px;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .c-search-row {
        width: 100%;
        flex-wrap: wrap;
    }
    .c-search-row .c-input {
        width: 100%;
        flex: 1 1 100%;
    }
}

.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-surface);
    color: var(--c-ink);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.c-btn:hover {
    border-color: var(--c-accent);
}

.c-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.c-btn:disabled:hover {
    border-color: var(--c-border);
}

.c-btn-primary {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(180, 83, 9, 0.2);
}

.c-btn-primary:hover {
    background: var(--c-accent-dark);
    border-color: var(--c-accent-dark);
}

.c-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--c-ink-soft);
}

.c-btn-ghost:hover {
    background: var(--c-surface-2);
    color: var(--c-ink);
}

/* ===== Messages & Empty States ===== */

.c-alert {
    background: var(--c-bad-bg);
    color: var(--c-bad);
    border: 1px solid var(--c-bad-border);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
}

.c-notice {
    background: var(--c-ok-bg);
    color: var(--c-ok);
    border: 1px solid var(--c-ok-border);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
}

.c-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 18px;
    padding: 50px 24px;
    text-align: center;
    color: var(--c-ink-soft);
    box-shadow: var(--c-shadow-sm);
}

.c-empty-icon { font-size: 40px; margin-bottom: 12px; line-height: 1; }
.c-empty-title { font-size: 18px; font-weight: 800; color: var(--c-ink); margin: 0 0 8px; text-align: center; }
.c-empty p { margin: 0; max-width: 480px; text-align: center; line-height: 1.6; }

/* ==========================================================================
   Customer Portal Auth & Sign-in (.c-auth-*)
   ========================================================================== */
.c-auth-body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Same gradient as admin/login.php's .admin-login-body (--a-bg-alt /
       --a-bg), hardcoded here since this stylesheet has no equivalent
       variables -- matches its muted warm tan rather than this page's
       previous brighter amber (var(--tf-gold-tint)). */
    background: radial-gradient(1200px 600px at 50% -20%, #f2e9dc, #faf6f0 60%);
    padding: 24px;
    font-family: var(--tf-font-sans);
    color: var(--c-ink);
}

.c-auth-main {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-auth-card {
    width: 100%;
    /* Narrower than the old 410px, and taller-reading padding below, so the
       card is a vertical rectangle rather than square -- matches admin
       panel's own 380px login card width. */
    max-width: 380px;
    background: #ffffff;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    padding: 44px 32px 42px;
    box-shadow: 0 20px 45px rgba(32, 28, 23, 0.08), 0 2px 6px rgba(0, 0, 0, 0.03);
    text-align: center;
    position: relative;
}

.c-auth-lang-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.c-auth-lang-picker {
    display: inline-flex;
    align-items: center;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 2px;
    font-size: 11.5px;
    font-weight: 600;
}

.c-auth-lang-opt {
    padding: 3px 9px;
    border-radius: var(--r-sm);
    color: var(--c-ink-soft);
    text-decoration: none;
    transition: all 0.15s ease;
}

.c-auth-lang-opt.is-active {
    background: #ffffff;
    color: var(--c-ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    font-weight: 700;
}

.c-auth-logo-wrap,
.c-auth-crest-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.c-auth-logo {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    border: 1.5px solid rgba(184, 134, 59, 0.25);
    display: block;
}

.c-auth-crest {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--c-accent-light, var(--tf-gold-tint));
    color: var(--c-accent-dark, var(--tf-gold-text));
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tf-gold-border);
    box-shadow: 0 2px 8px rgba(180, 83, 9, 0.1);
}

.c-auth-title {
    font-family: var(--tf-font-serif);
    font-size: 27px;
    font-weight: 800;
    color: var(--c-ink);
    margin: 0 0 9px;
    letter-spacing: -0.02em;
}

.c-auth-tagline {
    /* Matches admin/login.php's .admin-login-sub exactly: same size, weight
       (none, i.e. normal), letter-spacing, and color. */
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #55504a;
    margin-bottom: 31px;
}

.c-auth-tabs {
    display: flex;
    align-items: center;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 3px;
    gap: 3px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}

.c-auth-tab {
    flex: 1;
    padding: 8px 16px;
    border-radius: var(--r-sm);
    border: none;
    background: transparent;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--c-ink-soft);
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: center;
    font-family: inherit;
}

.c-auth-tab:hover {
    color: var(--c-ink);
}

.c-auth-tab.is-active {
    background: var(--c-accent);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(180, 83, 9, 0.25);
}

.c-auth-switch-prompt {
    font-size: 13px;
    color: var(--c-ink-soft);
    margin: 14px 0 6px;
    text-align: center;
}

.c-auth-switch-prompt a {
    color: var(--c-accent-dark);
    font-weight: 700;
    text-decoration: none;
    margin-left: 4px;
}

.c-auth-switch-prompt a:hover {
    text-decoration: underline;
}

.c-auth-google-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-bottom: 20px;
}

.c-auth-divider {
    display: flex;
    align-items: center;
    margin: 32px 0;
    /* Admin panel's --a-ink-soft/--a-border, matching admin/login.php's
       "or sign in with email" divider look. */
    color: #55504a;
    font-size: 11.5px;
}

.c-auth-divider::before,
.c-auth-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #e7ded0;
}

.c-auth-divider span {
    padding: 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.c-auth-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: left;
    margin-bottom: 18px;
}

.c-auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.c-auth-submit {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 10px;
    margin-top: 4px;
    box-shadow: 0 4px 14px rgba(180, 83, 9, 0.22);
}

.c-auth-footer {
    margin-top: 29px;
    padding-top: 24px;
    border-top: 1px solid var(--c-border);
}

.c-auth-help {
    font-size: 12.5px;
    color: var(--c-ink-soft);
    margin: 0 0 18px;
    line-height: 1.45;
}

.c-auth-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    gap: 12px;
    flex-wrap: wrap;
}

.c-auth-help-link,
.c-auth-back-link {
    /* Admin panel's theme gold (--a-accent in admin.css), not this page's
       own --c-accent-dark -- matches the admin Sign In button's color. */
    color: #b8863b;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease;
}

.c-auth-help-link:hover,
.c-auth-back-link:hover {
    text-decoration: underline;
}

/* WhatsApp help reason picker (login.php): centered card on desktop,
   bottom sheet on phones. */
.c-help-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.c-help-sheet[hidden] { display: none; }
.c-help-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(32, 28, 23, 0.45);
}
.c-help-sheet-panel {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: var(--c-surface);
    border-radius: 16px;
    padding: 20px 20px 22px;
    box-shadow: var(--c-shadow-lg);
    text-align: left;
}
.c-help-sheet-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-ink);
    margin-bottom: 15px;
}
.c-help-sheet-title + .c-help-sheet-sub {
    margin-top: -10px;
}
.c-help-sheet-sub {
    font-size: 12.5px;
    color: var(--c-ink-soft);
    margin: 4px 0 14px;
    line-height: 1.45;
}
.c-help-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 9px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-ink);
    text-align: left;
    cursor: pointer;
}
.c-help-option:hover,
.c-help-option:focus-visible {
    border-color: #b8863b;
    background: var(--c-accent-subtle);
    outline: none;
}
.c-help-option.is-suggested {
    border-color: #b8863b;
}
.c-help-cancel {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 10px;
    background: none;
    border: none;
    font: inherit;
    font-size: 13px;
    color: var(--c-ink-soft);
    cursor: pointer;
}

/* "How to sign in" guide (login.php) -- reuses the .c-help-sheet dialog. */
.c-auth-howto-link {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin: -8px auto 24px;
    padding: 9px 14px 9px 12px;
    background: #fdf8ee;
    border: 1px solid #f0e2c4;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(184, 134, 59, 0.14);
    font: inherit;
    color: #b8863b;
    text-align: left;
    cursor: pointer;
    transition: box-shadow 0.15s ease, background 0.15s ease;
}
.c-auth-howto-link:hover {
    background: #fbf2de;
    box-shadow: 0 3px 12px rgba(184, 134, 59, 0.22);
}
.c-auth-howto-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
.c-auth-howto-text {
    display: flex;
    align-items: baseline;
    gap: 5px;
    line-height: 1.25;
    white-space: nowrap;
}
.c-auth-howto-en {
    font-size: 13px;
    font-weight: 600;
}
.c-auth-howto-gu {
    font-size: 12px;
    color: #a47a3c;
}
/* Smallest phones (iPhone SE / 320-360px): stays on one line. */
@media (max-width: 360px) {
    .c-auth-howto-link { gap: 6px; padding: 8px 10px; }
    .c-auth-howto-icon { width: 16px; height: 16px; }
    .c-auth-howto-text { gap: 4px; }
    .c-auth-howto-en { font-size: 12px; }
    .c-auth-howto-gu { font-size: 11px; }
}
.c-howto-panel {
    max-height: 88vh;
    overflow-y: auto;
}
.c-howto-lang {
    display: inline-flex;
    padding: 3px;
    margin-bottom: 14px;
    background: var(--c-border-subtle);
    border-radius: var(--r-md);
}
.c-howto-lang button {
    padding: 5px 14px;
    border: none;
    border-radius: var(--r-sm);
    background: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-ink-soft);
    cursor: pointer;
}
.c-howto-lang button.is-active {
    background: var(--c-surface);
    color: var(--c-ink);
    box-shadow: var(--c-shadow-sm);
}
.c-howto-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}
.c-howto-steps li {
    display: flex;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--c-border-subtle);
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-ink);
}
.c-howto-steps li:last-child { border-bottom: none; }
.c-howto-steps small {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--c-ink-soft);
}
.c-howto-num {
    flex: 0 0 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--c-accent-light);
    color: var(--c-accent-dark);
    font-size: 12.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.c-howto-tip {
    margin: 11px 0 0;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--c-ink);
    background: var(--c-accent-subtle);
    border: 1px solid var(--c-border-gold);
    border-radius: 10px;
}
.c-howto-wa {
    display: block;
    width: 100%;
    margin-top: 13px;
    padding: 10px;
    background: none;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #047857;
    cursor: pointer;
}
.c-howto-ok {
    width: 100%;
    justify-content: center;
    margin-top: 11px;
}

/* Not-yet-linked prompts (customer_layout.php): top banner, welcome
   dialog (reuses .c-help-sheet) and the dot on "My Bills". */
.c-link-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    padding: 12px 16px;
    background: #fdf8ee;
    border: 1px solid #f0e2c4;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(184, 134, 59, 0.10);
    font-size: 14px;
    line-height: 1.45;
    color: var(--c-ink);
}
.c-link-banner[hidden] { display: none; }
.c-link-banner.is-pending {
    background: var(--c-surface);
    border-color: var(--c-border);
    box-shadow: none;
    color: var(--c-ink-soft);
    font-size: 13px;
}
.c-link-banner-text { flex: 1; min-width: 200px; }
.c-link-banner-btn {
    flex-shrink: 0;
    font-size: 13px;
    padding: 7px 16px;
}
.c-link-banner-close {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: var(--c-ink-faint);
    cursor: pointer;
    padding: 0 2px;
}
.c-link-welcome { text-align: center; }
.c-link-welcome .c-help-sheet-title { margin-bottom: 8px; }
.c-link-welcome-icon { font-size: 36px; line-height: 1; margin-bottom: 10px; }
.c-link-welcome-text {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--c-ink-soft);
}
.c-link-welcome-go { width: 100%; justify-content: center; }
.c-nav-link-dot {
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-radius: 50%;
    background: #e0a84f;
    box-shadow: 0 0 0 3px rgba(224, 168, 79, 0.22);
    flex-shrink: 0;
}

/* Request Profile Link form (inc/profile_request_form.php) -- reuses the
   .c-help-sheet dialog above. */
.c-help-sheet-panel .c-label {
    display: block;
    margin-bottom: 6px;
}
.c-help-sheet-panel .c-pr-bill-label {
    margin-top: 18px;
}
.c-pr-phone {
    display: flex;
    gap: 8px;
}
.c-pr-phone select {
    flex: 0 0 88px;
    width: 88px;
    min-width: 0;
}
.c-pr-phone input {
    flex: 1;
    min-width: 0;
}
.c-pr-optional {
    font-weight: 400;
    color: var(--c-ink-faint);
}
.c-pr-hint {
    font-size: 12px;
    color: var(--c-ink-soft);
    margin-top: 4px;
}

@media (max-width: 480px) {
    .c-help-sheet {
        align-items: flex-end;
        padding: 0;
    }
    .c-help-sheet-panel {
        max-width: none;
        border-radius: 16px 16px 0 0;
        padding-bottom: calc(22px + env(safe-area-inset-bottom));
    }
    .c-auth-body {
        padding: 16px;
        align-items: flex-start;
        padding-top: 36px;
    }
    .c-auth-card {
        padding: 28px 20px 26px;
    }
    .c-auth-title {
        font-size: 24px;
    }
}

/* ===== Footer ===== */

.c-footer {
    border-top: 1px solid var(--c-border);
    background: #ffffff;
    padding: 24px 20px;
    font-size: 13px;
    color: var(--c-ink-soft);
}

.c-footer-inner {
    max-width: 860px;
    margin: 0;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.c-footer-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.c-footer-links a {
    color: var(--c-ink-soft);
    text-decoration: none;
    font-weight: 600;
}

.c-footer-links a:hover {
    color: var(--c-accent);
}

/* ===== Mobile Bottom Navigation Bar ===== */

.c-mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .c-shell {
        display: block;
    }

    .c-sidebar {
        display: none !important;
    }

    .c-topbar {
        padding: 10px 14px;
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
        gap: 8px;
    }

    .c-topbar-left {
        gap: 8px;
        min-width: 0;
        flex: 1;
    }

    .c-topbar-title {
        font-size: 18px;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .c-topbar-right {
        gap: 6px;
        flex-shrink: 0;
    }

    .c-lang-toggle a {
        padding: 5px 10px;
        font-size: 12px;
    }

    .c-user-meta .c-role-badge {
        display: none !important;
    }

    .c-user-name {
        max-width: 75px;
    }

    .c-content,
    .c-main {
        padding: 16px 14px calc(76px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }

    table.c-table th,
    table.items th {
        padding: 8px 10px;
        font-size: 11px;
    }

    table.c-table td,
    table.items td {
        padding: 9px 10px;
        font-size: 12.5px;
    }

    table.c-table tfoot td,
    table.items tfoot td {
        padding: 9px 10px;
        font-size: 12.5px;
    }

    .c-bill-table-wrap {
        border-radius: 12px;
        margin-bottom: 16px;
    }

    .c-bill-table th,
    .c-bill-table td {
        padding: 10px 12px;
        font-size: 12.5px;
    }

    .c-bill-table th {
        font-size: 11px;
    }

    .c-table-open-btn {
        padding: 4px 9px;
        font-size: 11.5px;
    }

    .c-mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        padding: 0 4px env(safe-area-inset-bottom, 0px);
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(226, 232, 240, 0.85);
        z-index: 100;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 -3px 14px rgba(32, 28, 23, 0.05);
        box-sizing: border-box;
    }

    .c-mobile-tab-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        flex: 1;
        min-width: 0;
        height: 100%;
        text-decoration: none;
        color: #6b645b;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: -0.15px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-tap-highlight-color: transparent;
        padding-top: 3px;
    }

    /* Modern top indicator accent bar on the active tab */
    .c-mobile-tab-item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%) scaleX(0);
        width: 46px;
        height: 3px;
        background: var(--c-accent);
        border-radius: 0 0 3px 3px;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .c-mobile-tab-item.is-active::before {
        transform: translateX(-50%) scaleX(1);
    }

    .c-mobile-tab-icon-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px 12px;
        border-radius: 14px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .c-mobile-tab-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        line-height: 1;
    }

    .c-mobile-tab-icon svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        stroke-width: 2;
        transition: stroke 0.2s ease, transform 0.2s ease;
    }

    .c-mobile-tab-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        padding: 0 1px;
        text-align: center;
        line-height: 1.15;
        transition: color 0.2s ease, font-weight 0.2s ease;
    }

    /* Active Tab: distinct cognac warm pill + bold accent styling */
    .c-mobile-tab-item.is-active {
        color: var(--c-accent);
    }

    .c-mobile-tab-item.is-active .c-mobile-tab-icon-wrap {
        background: #fdf4ea;
        box-shadow: 0 1px 3px rgba(180, 83, 9, 0.09);
    }

    .c-mobile-tab-item.is-active .c-mobile-tab-icon svg {
        stroke: var(--c-accent);
        stroke-width: 2.3;
        transform: scale(1.06);
    }

    .c-mobile-tab-item.is-active .c-mobile-tab-label {
        color: var(--c-accent);
        font-weight: 700;
    }

    /* Inactive Tab Hover & Tap states */
    .c-mobile-tab-item:not(.is-active):hover {
        color: var(--c-ink);
    }

    .c-mobile-tab-item:not(.is-active):hover .c-mobile-tab-icon-wrap {
        background: rgba(0, 0, 0, 0.03);
    }

    /* Notification & Chat Unread Badge */
    .c-mobile-badge {
        position: absolute;
        top: -1px;
        right: 4px;
        background: #e11d48;
        color: #ffffff;
        font-size: 9px;
        font-weight: 800;
        border-radius: 999px;
        padding: 0 4px;
        line-height: 1.3;
        min-width: 14px;
        text-align: center;
        box-shadow: 0 1px 3px rgba(225, 29, 72, 0.4);
        border: 1.5px solid #ffffff;
    }

    .c-comments-modal-card {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        margin-top: auto !important;
        max-height: 85dvh !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    .c-comments-list {
        max-height: calc(85dvh - 125px) !important;
    }
}

@media (max-width: 640px) {
    /* Form inputs prevent iOS Safari auto-zoom */
    .c-input,
    select.c-input,
    textarea.c-input {
        font-size: 16px;
    }

    /* 2x2 KPI Summary Grid matching iOS */
    .c-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 18px !important;
    }

    .c-stat-box {
        padding: 12px 14px !important;
        border-radius: 12px !important;
    }

    .c-stat-lbl {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }

    .c-stat-val {
        font-size: 20px !important;
    }

    .c-stat-sub {
        font-size: 10.5px !important;
        margin-top: 2px !important;
    }

    /* Order Details & Dual Progress Steppers */
    .c-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 18px;
    }

    .c-page-head > div:last-child {
        width: 100%;
        justify-content: space-between;
    }

    .c-stepper-wrap {
        padding: 16px 10px 18px;
        border-radius: 14px;
    }

    .c-stepper-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .c-stepper-group {
        width: 100%;
    }

    .c-step {
        gap: 6px;
    }

    .c-step-dot {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .c-step::before {
        top: 12px;
        height: 2px;
    }

    .c-step-lbl {
        font-size: 9.5px;
        word-break: break-word;
        line-height: 1.15;
    }

    .c-kv-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 9px 0;
    }

    .c-kv-label {
        font-size: 12px;
    }

    .c-kv-val {
        text-align: left;
        justify-content: flex-start;
        flex-wrap: wrap;
        width: 100%;
        font-size: 13px;
        gap: 6px;
    }

    .c-amount-table .c-amount-row {
        font-size: 13px;
        padding: 7px 0;
    }

    .c-amount-banner {
        padding: 12px 14px;
        font-size: 13px;
    }

    .c-next-card {
        padding: 18px 14px;
    }

    .c-next-actions {
        flex-direction: column;
        gap: 8px;
    }

    .c-next-actions .c-btn {
        width: 100%;
        justify-content: center;
    }

    /* Lookbook Feed & Story Actions */
    .c-category-bar {
        padding: 0 0 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .c-category-bar::-webkit-scrollbar {
        display: none;
    }

    .c-offer-carousel {
        padding: 0 0 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .c-offer-card {
        scroll-snap-align: start;
        flex: 0 0 85vw;
        max-width: 320px;
    }

    .c-insta-feed {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        gap: 16px;
        box-sizing: border-box;
    }

    .c-insta-card {
        border-radius: 14px;
        border: 1px solid var(--c-border);
        box-shadow: 0 2px 10px rgba(0,0,0,0.02);
        margin-bottom: 0;
        background: #ffffff;
        overflow: hidden;
        box-sizing: border-box;
    }

    #cInstaFeed .c-insta-media,
    .c-insta-feed-listing .c-insta-media {
        width: 100% !important;
        margin: 0 0 10px !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        aspect-ratio: 1 / 1 !important;
    }

    .c-insta-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    .c-insta-header {
        padding: 10px 14px;
    }

    .c-insta-actions {
        padding: 8px 14px 6px;
        gap: 6px;
        flex-wrap: nowrap;
    }

    .c-insta-details {
        padding: 0 14px 14px;
    }

    .c-insta-actions-left {
        gap: 6px;
        flex-shrink: 0;
    }

    .c-insta-actions-right {
        justify-content: flex-end;
        gap: 6px;
        flex-shrink: 1;
        min-width: 0;
    }

    .c-insta-btn {
        font-size: 18px;
        padding: 3px;
    }
    .c-insta-btn .c-ico {
        width: 23px;
        height: 23px;
    }

    .c-insta-btn-request,
    .c-insta-btn-wa {
        font-size: 11.5px;
        height: 32px;
        padding: 0 10px;
        gap: 5px;
        min-width: 0;
    }
    .c-insta-btn-request .c-ico,
    .c-insta-btn-wa .c-ico {
        width: 14px;
        height: 14px;
    }

    /* Phones: icons on the first line, the two buttons sharing the second
       line in equal halves with their full labels. */
    .c-insta-actions {
        flex-wrap: wrap;
        row-gap: 10px;
    }
    .c-insta-actions-right {
        width: 100%;
    }
    .c-insta-btn-request,
    .c-insta-btn-wa {
        justify-content: center;
        height: 36px;
        font-size: 12.5px;
        padding: 0 14px;
    }
    .c-insta-btn-request { flex: 1 1 auto; }
    .c-insta-btn-wa { flex: 0 0 auto; }
    .c-insta-btn-request span:last-child,
    .c-insta-btn-wa span:last-child {
        white-space: nowrap;
    }

    .c-insta-caption-wrap {
        padding: 6px 12px 12px;
        font-size: 13px;
    }

    /* Mobile: only one line of caption before "...more", instead of
       desktop's 3-line clamp -- same $hasLongText gate on the PHP side
       decides whether a caption is long enough to clamp at all, this
       just changes how much of it shows on a narrow screen. */
    .c-insta-caption.is-clamped {
        -webkit-line-clamp: 1;
    }

    .c-insta-likes-tags-row {
        flex-wrap: nowrap;
    }

    .c-insta-likes {
        flex-shrink: 0;
    }

    .c-insta-tags {
        overflow: hidden;
        flex-wrap: nowrap;
        min-width: 0;
    }

    .c-modal-card {
        max-width: calc(100vw - 28px);
        margin: auto;
    }

    .c-toast {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        max-width: calc(100vw - 32px);
    }

    /* Notifications Segmented Controls */
    .c-notif-filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .c-notif-segmented {
        width: 100%;
        justify-content: center;
    }

    .c-notif-tab-btn {
        flex: 1;
        justify-content: center;
        padding: 7px 10px;
        font-size: 12.5px;
    }

    .c-notif-filter-bar form,
    .c-notif-filter-bar button {
        width: 100%;
        justify-content: center;
    }

    /* Denser notification cards so more fit on a phone screen */
    .c-notif-list {
        gap: 8px;
    }

    .c-notif-body {
        padding: 12px 14px;
    }

    .c-notif-header {
        margin-bottom: 4px;
    }

    .c-notif-badge {
        font-size: 10px;
        padding: 2px 7px;
    }

    .c-notif-text {
        font-size: 13.5px;
        line-height: 1.35;
        margin: 0 0 4px;
    }
}

@media (max-width: 540px) {
    /* Narrow Phone Header (iPhone SE, mini, 360px Android) */
    .c-topbar-title {
        font-size: 16.5px;
    }

    .c-user-pill {
        padding: 2px 4px;
        gap: 0;
        background: transparent;
        border: none;
    }

    .c-user-meta,
    .c-user-chevron {
        display: none !important;
    }

    .c-user-avatar {
        width: 32px;
        height: 32px;
    }

    .c-user-avatar-initials {
        font-size: 12px;
    }

    /* Profile screen hero & rows */
    .c-profile-hero {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 18px 16px;
        gap: 16px;
    }

    .c-profile-hero-left {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        width: 100%;
    }

    .c-profile-avatar-wrap {
        width: 64px;
        height: 64px;
        flex-shrink: 0;
    }

    .c-profile-avatar-initials {
        font-size: 22px;
    }

    .c-profile-hero-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        min-width: 0;
        flex: 1;
    }

    .c-profile-name-row {
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
        flex-wrap: wrap;
    }

    .c-profile-name {
        font-size: 19px;
    }

    .c-profile-meta-row {
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
        font-size: 13px;
    }

    .c-profile-hero-actions {
        width: 100%;
        flex-direction: row;
    }

    .c-profile-hero-actions .c-btn-edit,
    .c-profile-hero-actions .c-btn-signout {
        width: 100%;
        justify-content: center;
    }

    .c-profile-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 0;
    }

    .c-profile-lbl {
        min-width: unset;
        font-size: 12px;
    }

    .c-profile-val {
        text-align: left;
        word-break: break-word;
    }
}

/* ===== Notification Badges & Deep-Linking ===== */

.c-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 8px;
}

.c-notif-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: var(--r-sm);
    line-height: 1.2;
}

.c-notif-tag-bill {
    background: var(--tf-gold-tint);
    color: var(--tf-gold-text);
    border: 1px solid var(--tf-gold-border);
}

.c-notif-tag-offer {
    background: #ffedd5;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

.c-notif-tag-post {
    background: #ede9fe;
    color: #6b21a8;
    border: 1px solid #ddd6fe;
}

.c-notif-tag-general {
    background: #f3eee6;
    color: #4b5563;
    border: 1px solid #e7ded0;
}

.c-notif-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--c-accent);
}

/* ===== Category Filter Chips Bar ===== */

.c-category-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 16px;
    margin-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.c-category-bar::-webkit-scrollbar {
    display: none;
}

.c-category-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: var(--r-md);
    background: #ffffff;
    border: 1px solid var(--c-border);
    color: var(--c-ink-soft);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.c-category-chip:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.c-category-chip.is-active {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(180, 83, 9, 0.25);
}

/* ===== Active Offers Carousel ===== */

.c-offer-carousel-wrap {
    margin-bottom: 24px;
    background: #ffffff;
    border: 1px solid var(--c-border);
    border-radius: 16px; /* --c-radius was never defined, so these came out square */
    padding: 16px 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.c-offer-carousel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.c-offer-carousel-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--c-ink);
}

.c-offer-carousel-count {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    background: var(--tf-gold-tint);
    color: var(--tf-gold-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.c-offer-carousel {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    /* Room inside the scroll box for each card's drop shadow -- the box
       clips anything outside it, which left a hard-edged light patch to
       the right of and below the card. The negative margins keep the
       cards where they were. */
    padding: 4px 16px 20px 4px;
    margin: -4px -16px -14px -4px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.c-offer-card {
    position: relative;
    flex: 0 0 280px;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: #1e1b18;
    color: #ffffff;
    scroll-snap-align: start;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(255,255,255,0.1);
    text-decoration: none;
}

.c-offer-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.2);
}

.c-offer-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.c-offer-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.2) 100%);
    z-index: 2;
}

.c-offer-card-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.c-offer-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.c-offer-gold-badge {
    background: var(--c-accent);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: var(--r-sm);
    text-transform: uppercase;
}

.c-offer-expiry-badge {
    background: rgba(0,0,0,0.6);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    backdrop-filter: blur(4px);
}

.c-offer-bottom-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}

.c-offer-card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 3px;
    line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.c-offer-card-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.c-offer-chevron {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}

/* ===== Offer Details Modal ===== */

.c-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.c-modal-backdrop.is-open {
    display: flex;
}

.c-modal-card {
    background: #ffffff;
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    position: relative;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: modalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.c-modal-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #ffffff;
    border: none;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(4px);
    transition: background 0.15s ease;
}

.c-modal-close-btn:hover {
    background: rgba(0,0,0,0.8);
}

.c-modal-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: #1e1b18;
}

.c-modal-body {
    padding: 20px;
    overflow-y: auto;
}

.c-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--c-ink);
    margin: 0 0 6px;
}

.c-modal-desc {
    font-size: 13.5px;
    color: var(--c-ink-soft);
    line-height: 1.5;
    margin: 0 0 16px;
}

.c-promo-box {
    background: #fbfaf8;
    border: 1.5px dashed var(--c-accent);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.c-promo-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 18px;
    font-weight: 800;
    color: var(--c-accent-dark);
    letter-spacing: 0.08em;
}

.c-modal-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    color: var(--c-ink-soft);
    margin-bottom: 16px;
}

.c-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ===== Instagram-Style Feed Posts ===== */

.c-insta-feed {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-sizing: border-box;
}

.c-insta-card {
    width: 100%;
    background: #ffffff;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    position: relative;
    box-sizing: border-box;
}

.c-insta-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-border-subtle);
}

.c-insta-author {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
    color: var(--c-ink);
}

.c-insta-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--c-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.c-insta-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-insta-author-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--c-ink);
    display: flex;
    align-items: center;
    gap: 6px;
}

.c-insta-time {
    font-size: 12px;
    color: var(--c-ink-soft);
}

.c-insta-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f3eee6;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
}

/* Feeds Listing: image spans the card's full width, edge to edge. */
#cInstaFeed .c-insta-media,
.c-insta-feed-listing .c-insta-media {
    width: 100%;
    margin: 0 0 10px;
    border-radius: 0;
    box-shadow: none;
    border: none;
}

.c-insta-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

.c-heart-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: #ffffff;
    font-size: 80px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s ease;
    opacity: 0;
    z-index: 10;
}

.c-heart-burst.is-active {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.95;
}

.c-insta-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 6px;
    gap: 10px;
    flex-wrap: wrap;
}

.c-insta-actions-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.c-insta-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.c-insta-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    color: var(--c-ink);
    transition: transform 0.15s ease, color 0.15s ease;
}

.c-insta-btn:hover {
    transform: scale(1.1);
}

.c-insta-btn:active {
    transform: scale(0.9);
}

.c-insta-btn .c-ico {
    width: 25px;
    height: 25px;
    display: block;
}
.c-insta-btn:hover { color: var(--c-accent); }
.c-insta-btn-heart.is-liked,
.c-insta-btn-heart.is-liked:hover {
    color: #e11d48;
}
.c-insta-btn-heart.is-liked .c-ico {
    fill: currentColor;
    animation: c-heart-pop 0.3s ease;
}
@keyframes c-heart-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
}
.c-heart-icon { display: inline-flex; }

.c-insta-btn-request .c-ico,
.c-insta-btn-wa .c-ico {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.c-insta-btn-request {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    box-sizing: border-box;
    background: var(--c-accent);
    color: #ffffff;
    border: none;
    padding: 0 16px;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(180, 83, 9, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.c-insta-btn-request:hover {
    background: var(--c-accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(180, 83, 9, 0.35);
}

.c-insta-btn-request:active {
    transform: scale(0.97);
}

.c-insta-btn-wa {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    box-sizing: border-box;
    background: #1fa855;
    color: #ffffff;
    padding: 0 16px;
    border-radius: var(--r-md);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.15s ease, transform 0.15s ease;
}

.c-insta-btn-wa:hover {
    background: #178a45;
    transform: translateY(-1px);
}

.c-insta-comments-preview {
    margin-top: 6px;
}

.c-insta-comments-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-ink-soft);
    cursor: pointer;
    transition: color 0.15s ease;
}

.c-insta-comments-link:hover {
    color: var(--c-accent);
    text-decoration: underline;
}

/* ===== Comments Modal ===== */
.c-comments-modal-card {
    background: #ffffff;
    border-radius: 20px;
    max-width: 520px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
    animation: cModalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.c-comments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-border);
    background: #fafafa;
}

.c-comments-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.c-comments-count-badge {
    font-size: 12px;
    font-weight: 700;
    color: var(--c-accent);
    background: rgba(180, 83, 9, 0.1);
    padding: 2px 8px;
    border-radius: var(--r-sm);
}

.c-comments-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    min-height: 180px;
    max-height: 420px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.c-comment-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.c-comment-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--tf-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--tf-ink-soft);
    flex-shrink: 0;
    overflow: hidden;
}

.c-comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-comment-body {
    flex: 1;
    min-width: 0;
    background: #faf7f2;
    border: 1px solid #f3eee6;
    border-radius: 14px;
    padding: 10px 14px;
}

.c-comment-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    gap: 8px;
}

.c-comment-author {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-ink);
}

.c-comment-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.c-comment-time {
    font-size: 11px;
    color: var(--c-ink-soft);
}

.c-comment-delete {
    background: none;
    border: none;
    color: var(--tf-ink-faint);
    font-size: 11.5px;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease;
}

.c-comment-delete:hover {
    color: #ef4444;
}

.c-comment-text {
    font-size: 13px;
    line-height: 1.45;
    color: var(--c-ink);
    word-break: break-word;
}

.c-comments-empty {
    text-align: center;
    padding: 36px 16px;
    color: var(--c-ink-soft);
}

.c-comments-empty-icon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.6;
}

.c-comments-composer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--c-border);
    background: #ffffff;
}

.c-comments-input {
    flex: 1;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 9px 16px;
    font-size: 13px;
    color: var(--c-ink);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.c-comments-input:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.12);
}

.c-comments-send-btn {
    background: var(--c-accent);
    color: #ffffff;
    border: none;
    border-radius: var(--r-md);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.c-comments-send-btn:hover {
    background: var(--c-accent-dark);
}

.c-comments-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Toast Component */
.c-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(17, 24, 39, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: var(--r-md);
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.c-toast.is-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.c-toast-link {
    color: #fde047;
    text-decoration: underline;
    font-weight: 700;
    margin-left: 4px;
}

.c-insta-meta {
    padding: 0 16px 14px;
}

.c-insta-likes-tags-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.c-insta-likes {
    margin-bottom: 0;
}

.c-insta-likes-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--c-ink);
    cursor: pointer;
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease;
}

.c-insta-likes-btn:hover {
    color: var(--c-accent-dark);
    text-decoration: underline;
}

.c-liker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--c-border);
    transition: background 0.15s ease;
}

.c-liker-item:last-child {
    border-bottom: none;
}

.c-liker-item:hover {
    background: #fafaf9;
}

.c-liker-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--c-accent-light);
    color: var(--c-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--c-border);
}

.c-liker-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-liker-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.c-liker-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-liker-time {
    font-size: 12px;
    color: var(--c-ink-soft);
}

.c-liker-you-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    background: var(--c-accent-light);
    color: var(--c-accent-dark);
    flex-shrink: 0;
}


.c-insta-caption {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--c-ink);
    margin-bottom: 4px;
    word-break: break-word;
}

.c-insta-caption-box {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}
.c-insta-caption-box .c-insta-caption {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}
.c-insta-caption.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.c-insta-more-btn {
    display: inline-block;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink-soft);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.c-insta-more-btn[hidden] { display: none; }
.c-insta-more-btn:hover {
    color: var(--c-accent);
    text-decoration: underline;
}

.c-post-tap-hint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--r-sm);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Fullscreen Lightbox Image Viewer */
.c-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.94);
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    touch-action: pan-x pan-y;
    animation: cFadeIn 0.2s ease-out;
}

.c-lightbox.is-open {
    display: flex;
}

.c-lightbox-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, transparent 100%);
    z-index: 10;
}

.c-lightbox-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.c-lightbox-btn {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff !important;
    border-radius: var(--r-md);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.15s ease;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
}

.c-lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.c-lightbox-btn:active {
    transform: scale(0.96);
}

.c-lightbox-close {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
}

.c-lightbox-img-wrap {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 16px 24px;
    box-sizing: border-box;
}

.c-lightbox-img {
    max-width: 100%;
    max-height: calc(100vh - 120px);
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
    user-select: none;
    -webkit-user-select: none;
    cursor: zoom-in;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.c-lightbox-img.is-zoomed {
    transform: scale(2);
    cursor: zoom-out;
}

.c-insta-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.c-insta-tag-chip {
    font-size: 11.5px;
    padding: 3px 9px;
    border-radius: var(--r-sm);
    background: #f3eee6;
    color: #4b5563;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}

.c-insta-tag-chip:hover {
    background: #e7ded0;
    color: var(--c-ink);
}

/* ===== Contact Us Enhancements ===== */

.c-contact-container {
    max-width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.c-contact-hero {
    background: #ffffff;
    border: 1px solid var(--c-border);
    border-radius: 16px; /* --c-radius was never defined, so these came out square */
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.c-hero-crest {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.18) 0%, rgba(180, 83, 9, 0.05) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-accent);
    margin-bottom: 12px;
}

.c-hero-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--c-ink);
    margin: 0 0 4px;
}

.c-hero-tagline {
    font-size: 11px;
    font-weight: 800;
    color: var(--c-accent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.c-hero-sub {
    font-size: 13.5px;
    color: var(--c-ink-soft);
    line-height: 1.5;
    margin: 0 auto;
    max-width: 440px;
}

.c-quick-action-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

@media (max-width: 640px) {
    .c-quick-action-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .c-quick-action-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .c-quick-action-grid .c-quick-tile:last-child {
        grid-column: 1 / -1;
    }
    .c-quick-tile {
        padding: 10px 4px;
    }
    .c-tile-title {
        white-space: normal;
        font-size: 11.5px;
    }
}

.c-quick-tile {
    background: #ffffff;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 12px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--c-ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

.c-quick-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border-color: var(--c-accent);
}

.c-tile-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 6px;
}

.c-tile-title {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2px;
    white-space: nowrap;
}

.c-tile-sub {
    font-size: 10px;
    color: var(--c-ink-soft);
    line-height: 1.1;
    white-space: nowrap;
}

.c-contact-section {
    padding: 18px 20px;
}

.c-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.c-section-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--c-ink);
    margin: 0;
}

.c-open-today-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #dcfce7;
    color: #15803d;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: var(--r-sm);
    letter-spacing: 0.02em;
}

.c-open-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16a34a;
}

.c-open-today-badge.is-closed {
    background: #f3eee6;
    color: var(--tf-ink-soft);
}

.c-open-dot.is-closed {
    background: var(--tf-ink-faint);
}

.c-hours-today-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #fbfaf8;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--c-border);
}

.c-hours-today-row:hover {
    background: #f8f6f0;
}

.c-weekly-schedule {
    margin-top: 10px;
    border-top: 1px solid var(--c-border-subtle);
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.c-schedule-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--c-ink-soft);
    padding: 6px 10px;
    border-radius: 6px;
}

.c-schedule-row.is-today {
    background: var(--c-accent-light);
    color: var(--c-accent-dark);
    font-weight: 700;
}

.c-map-frame-wrap {
    width: 100%;
    height: 220px;
    background: #e7ded0;
    position: relative;
}

.c-map-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.c-social-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.c-social-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--c-ink);
    border: 1px solid var(--c-border);
    background: #ffffff;
    transition: all 0.15s ease;
}

.c-social-row:hover {
    border-color: var(--c-accent);
    background: #fbfaf8;
    transform: translateX(2px);
}

.c-social-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.c-social-info {
    flex: 1;
}

.c-social-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--c-ink);
}

.c-social-sub {
    font-size: 11.5px;
    color: var(--c-ink-soft);
}

.c-social-arrow {
    color: var(--c-ink-soft);
    font-size: 14px;
}

/* ===== 1:1 Customer Chat ===== */

.c-notif-tag-message {
    background: #ccfbf1;
    color: #0f766e;
    border: 1px solid #99f6e4;
}

.c-chat-wrapper {
    max-width: 100%;
    margin: 0;
    background: #ffffff;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 170px);
    min-height: 480px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}

@media (max-width: 768px) {
    .c-chat-wrapper {
        height: calc(100vh - 145px);
        height: calc(100dvh - 54px - 58px - env(safe-area-inset-bottom, 0px) - 24px);
        min-height: 380px;
        border-radius: 12px;
    }
    .c-chat-header {
        padding: 10px 12px;
    }
    .c-chat-partner-name {
        font-size: 13.5px;
    }
    .c-chat-partner-status {
        font-size: 10px;
    }
    .c-chat-header-actions {
        gap: 6px;
    }
    .c-chat-header-btn {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }
    .c-chat-btn-lbl-full {
        display: none;
    }
    .c-chat-btn-lbl-short {
        display: inline;
    }
    .c-chat-messages {
        padding: 12px 10px;
        gap: 10px;
    }
    .c-chat-bubble {
        max-width: 85%;
        padding: 8px 12px;
    }
    .c-chat-composer {
        padding: 8px 10px;
        gap: 8px;
    }
    .c-chat-input {
        padding: 8px 14px;
        font-size: 16px;
    }
    .c-chat-send-btn {
        width: 36px;
        height: 36px;
    }
}

@media (min-width: 769px) {
    .c-chat-btn-lbl-short {
        display: none;
    }
}

.c-chat-threads-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #ffffff;
    border-bottom: 1px solid var(--c-border);
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: thin;
}

.c-chat-thread-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 6px;
    border-radius: 20px;
    background: #f3eee6;
    color: var(--c-ink);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    transition: all 0.15s ease;
    white-space: nowrap;
    border: 1px solid var(--c-border);
}

.c-chat-thread-pill:hover {
    background: var(--tf-border);
    color: var(--c-ink);
}

.c-chat-thread-pill.is-active {
    background: #c4984f;
    border-color: #b5883d;
    color: #ffffff;
}

.c-chat-thread-pill-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.c-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--c-border);
    background: #fbfaf8;
    flex-shrink: 0;
}

.c-chat-partner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.c-chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1c1917;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1.5px solid var(--c-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.c-chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.c-chat-partner-name {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--c-ink);
    display: flex;
    align-items: center;
    gap: 4px;
}

.c-chat-partner-status {
    font-size: 11.5px;
    color: #15803d;
    display: flex;
    align-items: center;
    gap: 5px;
}

.c-chat-partner-status.is-offline {
    color: var(--c-ink-soft, #6b645b);
}

.c-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
}

.c-status-dot.is-offline {
    background: var(--tf-ink-faint);
}

.c-chat-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.c-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f8f6f0;
    scroll-behavior: smooth;
}

.c-chat-empty {
    text-align: center;
    padding: 40px 16px;
    margin: auto;
}

.c-chat-empty-icon {
    font-size: 40px;
    margin-bottom: 8px;
}

.c-chat-row {
    display: flex;
    width: 100%;
}

.c-chat-row.is-mine {
    justify-content: flex-end;
}

.c-chat-row.is-theirs {
    justify-content: flex-start;
}

.c-chat-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 14px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    word-break: break-word;
}

.c-chat-bubble.is-mine {
    background: #f6eedb;
    color: #451a03;
    border: 1px solid #ebd7b3;
    border-bottom-right-radius: 3px;
}

.c-chat-bubble.is-theirs {
    background: #ffffff;
    color: var(--c-ink);
    border: 1px solid var(--c-border);
    border-bottom-left-radius: 3px;
}

.c-chat-text {
    font-size: 13.5px;
    line-height: 1.45;
}

.c-chat-time {
    font-size: 10.5px;
    margin-top: 4px;
    text-align: right;
}

.c-chat-bubble.is-mine .c-chat-time {
    color: #854d0e;
    opacity: 0.85;
}

.c-chat-bubble.is-theirs .c-chat-time {
    color: var(--c-ink-soft);
    opacity: 0.75;
}

/* Chat Post Preview Card (Lookbook references in bubbles) */
.c-chat-post-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    margin-bottom: 8px;
    transition: background 0.15s ease;
}

.c-chat-post-thumb {
    width: 44px;
    height: 44px;
    border-radius: 7px;
    object-fit: cover;
    flex-shrink: 0;
}

.c-chat-post-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.c-chat-post-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.25;
}

.c-chat-post-caption {
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-chat-post-action {
    margin-top: 2px;
}

.c-chat-post-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    text-decoration: none;
    line-height: 1.3;
    transition: all 0.15s ease;
}

/* Sent message bubble (.is-mine: soft warm champagne / tailored ivory) */
.c-chat-bubble.is-mine .c-chat-post-preview {
    background: #ffffff;
    border: 1px solid #e7d1ab;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.c-chat-bubble.is-mine .c-chat-post-thumb {
    border: 1px solid var(--c-border);
}

.c-chat-bubble.is-mine .c-chat-post-label {
    color: var(--c-accent-dark) !important;
}

.c-chat-bubble.is-mine .c-chat-post-caption {
    color: var(--c-ink);
}

.c-chat-bubble.is-mine .c-chat-post-btn {
    background: var(--c-accent-light);
    color: var(--c-accent-dark) !important;
    border: 1px solid var(--tf-gold-border);
}

.c-chat-bubble.is-mine .c-chat-post-btn:hover {
    background: #fde8b8;
    color: var(--c-accent-dark) !important;
}

/* Received message bubble (.is-theirs: clean white background #ffffff) */
.c-chat-bubble.is-theirs .c-chat-post-preview {
    background: #faf7f2;
    border: 1px solid var(--c-border);
}

.c-chat-bubble.is-theirs .c-chat-post-thumb {
    border: 1px solid var(--c-border);
}

.c-chat-bubble.is-theirs .c-chat-post-label {
    color: var(--c-accent-dark) !important; /* deep rich amber: >7:1 contrast on white */
}

.c-chat-bubble.is-theirs .c-chat-post-caption {
    color: var(--c-ink);
}

.c-chat-bubble.is-theirs .c-chat-post-btn {
    background: #ffffff;
    color: var(--c-accent-dark) !important;
    border: 1px solid var(--c-border);
}

.c-chat-bubble.is-theirs .c-chat-post-btn:hover {
    background: var(--c-surface-2);
    border-color: var(--c-border-strong);
    color: var(--c-accent) !important;
}

/* Quick replies -- same shape as the admin panel's .admin-chat-quick-replies */
.c-chat-quick-replies {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--c-surface-2);
    border-top: 1px solid var(--c-border);
    overflow-x: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

.c-quick-reply-btn {
    background: #ffffff;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--c-ink);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.c-quick-reply-btn:hover {
    background: var(--c-accent-light);
    border-color: var(--c-accent);
    color: var(--c-accent-dark);
}

.c-chat-composer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--c-border);
    background: #ffffff;
    flex-shrink: 0;
}

.c-chat-input {
    flex: 1;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 10px 18px;
    font-size: 13.5px;
    background: #fbfaf8;
    color: var(--c-ink);
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.c-chat-input:focus {
    border-color: var(--c-accent);
    background: #ffffff;
}

.c-chat-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--c-accent);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease, background 0.15s ease;
}

.c-chat-send-btn:hover {
    background: var(--c-accent-dark);
    transform: scale(1.05);
}

.c-chat-send-btn:active {
    transform: scale(0.95);
}

/* ===== Mobile Topbar Menu Button & Navigation Drawer ===== */

.c-mobile-menu-btn,
.c-topbar-back-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--c-border);
    background: #ffffff;
    color: var(--c-ink);
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.15s ease;
    padding: 0;
    text-decoration: none;
}

.c-mobile-menu-btn:hover,
.c-topbar-back-btn:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
    background: #fdf5ea;
}

.c-mobile-menu-btn:active,
.c-topbar-back-btn:active {
    background: #f3eee6;
    transform: scale(0.96);
}

@media (max-width: 768px) {
    .c-mobile-menu-btn,
    .c-topbar-back-btn {
        display: inline-flex;
    }
    .c-subpage-back-link {
        display: none !important;
    }
}

/* Mobile Slide-out Drawer */
.c-mobile-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.c-mobile-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.c-mobile-drawer {
    width: 310px;
    max-width: 85vw;
    background: #ffffff;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.c-mobile-drawer-backdrop.is-open .c-mobile-drawer {
    transform: translateX(0);
}

.c-drawer-head {
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafaf9;
}

.c-drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 14.5px;
    letter-spacing: 0.04em;
    color: var(--c-ink);
    text-decoration: none;
}

.c-drawer-brand-logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--c-border);
}

.c-drawer-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--c-border);
    background: #ffffff;
    color: var(--c-ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    transition: all 0.15s ease;
}

.c-drawer-close:hover {
    background: #f3eee6;
    color: var(--c-ink);
}

.c-drawer-profile {
    padding: 14px 18px;
    border-bottom: 1px solid var(--c-border-subtle);
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.c-drawer-profile:hover {
    background: #fcfcfb;
}

.c-drawer-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--c-border);
    background: #1e1b18;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
}

.c-drawer-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-drawer-profile-info {
    flex: 1;
    min-width: 0;
}

.c-drawer-user-name {
    font-weight: 800;
    font-size: 15px;
    color: var(--c-ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-drawer-user-role {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--tf-gold-text);
    background: var(--tf-gold-tint);
    border: 1px solid var(--tf-gold-border);
    padding: 2px 8px;
    border-radius: var(--r-sm);
    display: inline-block;
    margin-top: 3px;
}

.c-drawer-chevron {
    font-size: 20px;
    color: var(--c-ink-soft);
    line-height: 1;
}

.c-drawer-profile-actions {
    padding: 8px 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #ffffff;
    border-bottom: 1px solid var(--c-border);
}

.c-drawer-sublink {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--c-border);
    background: #fafaf9;
    color: var(--c-ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}

.c-drawer-sublink:hover,
.c-drawer-sublink.is-active {
    background: #f4f4f5;
    color: var(--c-accent);
    border-color: #d9cfc0;
}

.c-drawer-nav {
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.c-drawer-section-lbl {
    padding: 6px 12px 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-ink-soft);
}

.c-drawer-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--c-ink);
    font-weight: 600;
    font-size: 14px;
    transition: background 0.15s ease;
}

.c-drawer-nav-link:hover,
.c-drawer-nav-link.is-active {
    background: #f4f4f5;
    color: var(--c-accent);
    font-weight: 700;
}

.c-drawer-nav-icon {
    font-size: 18px;
    width: 24px;
    height: 24px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.c-drawer-nav-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.c-drawer-badge {
    margin-left: auto;
    background: var(--c-accent);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}

.c-drawer-footer {
    padding: 14px 18px;
    border-top: 1px solid var(--c-border);
    background: #fafaf9;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}

.c-drawer-lang-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--c-ink-soft);
}

.c-drawer-website-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--c-ink);
    text-decoration: none;
    font-weight: 700;
    font-size: 13.5px;
    background: #faf7f2;
    border: 1px solid var(--c-border);
    transition: background 0.15s ease;
    margin-bottom: 8px;
}

.c-drawer-website-link:hover {
    background: #f3eee6;
}

.c-drawer-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    color: #dc2626;
    text-decoration: none;
    font-weight: 700;
    font-size: 13.5px;
    background: #fef2f2;
    border: 1px solid #fee2e2;
    transition: background 0.15s ease;
}

.c-drawer-logout:hover {
    background: #fee2e2;
}

/* Smallest phones (320-360px): feed action buttons still fit on one line. */
@media (max-width: 360px) {
    .c-insta-btn-request,
    .c-insta-btn-wa {
        font-size: 11.5px;
        padding: 0 10px;
        gap: 5px;
    }
}

/* ===== My Bills cards (index.php) -- replaces the wide table ===== */
.c-bill-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.c-bill-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    box-shadow: var(--c-shadow-sm);
    color: var(--c-ink);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.c-bill-card:hover {
    border-color: var(--c-border-gold);
    box-shadow: var(--c-shadow-md);
    transform: translateY(-1px);
}
.c-bill-card.is-cancelled { opacity: 0.7; }
.c-bill-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.c-bill-card-no {
    font-size: 16px;
    font-weight: 800;
    color: var(--c-accent-dark);
}
.c-bill-card-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 12.5px;
    color: var(--c-ink-soft);
}
.c-bill-card-dates strong { color: var(--c-ink); font-weight: 600; }
.c-bill-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--c-border-subtle);
}
.c-bill-card-amount {
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.c-bill-card.is-cancelled .c-bill-card-amount { text-decoration: line-through; color: var(--c-ink-soft); }
.c-bill-card-muted { font-size: 13px; font-weight: 600; color: var(--c-ink-faint); }

/* My Bills: single current/latest bill view (index.php $latestBillOnly) */
.c-bill-latest .c-bill-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 480px)); }
.c-bill-latest-note { margin: 14px 0 0; font-size: 13px; color: var(--c-ink-soft); }
.c-bill-latest-note a { color: var(--c-accent-dark); font-weight: 600; text-decoration: none; }

/* Feed post header: the shop name/logo is a link to Contact Us. */
a.c-insta-author { text-decoration: none; color: inherit; }
a.c-insta-author:hover .c-insta-author-name { text-decoration: underline; }

/* Safari data-detector links (phone/date/address auto-links) -- keep the
   surrounding text's own colour and look, never default blue/underline. */
a[x-apple-data-detectors],
a[href^="x-apple-data-detectors:"] {
    color: inherit !important;
    text-decoration: none !important;
    font: inherit !important;
}


/* ==========================================================================
   2026 design refinements -- same language as the admin panel (admin.css's
   matching block): gold selected tab on a tinted track, soft-tint status
   pills, quieter tables. Kept together at the end so they win over the
   older per-component rules above.
   ========================================================================== */

/* Segmented tabs (My Bills, Notifications, sign-in): selected = brand gold
   fill + white text, same as the admin panel's selected tab. */
.c-bill-tab-btn.is-active,
.c-notif-tab-btn.is-active,
.c-auth-tab.is-active {
    background: var(--tf-gold-fill);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(127, 91, 34, 0.35);
}
.c-bill-tab-btn.is-active:hover,
.c-notif-tab-btn.is-active:hover,
.c-auth-tab.is-active:hover { background: var(--tf-gold-fill-hover); color: #ffffff; }
.c-bill-tab-btn:not(.is-active):hover,
.c-notif-tab-btn:not(.is-active):hover,
.c-auth-tab:not(.is-active):hover { background: rgba(255, 255, 255, 0.6); color: var(--c-ink); }
/* Count bubble inside the gold tab: white chip so the number stays readable. */
.c-bill-tab-btn.is-active .c-bill-tab-badge,
.c-notif-tab-btn.is-active .c-notif-tab-badge { background: #ffffff; color: var(--tf-gold-text); }

/* Status pills: ~10% tint, darker text, faint ring (was a 100-level fill
   plus a 200-level border). */
.c-pill { font-weight: 600; font-size: 11.5px; padding: 2px 8px; line-height: 1.45; border: none; }
.c-pill-ok { background: rgba(21, 128, 61, 0.09); color: #166534; box-shadow: inset 0 0 0 1px rgba(21, 128, 61, 0.22); }
.c-pill-warn { background: rgba(217, 119, 6, 0.1); color: #92400e; box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.26); }
.c-pill-bad { background: rgba(185, 28, 28, 0.08); color: #991b1b; box-shadow: inset 0 0 0 1px rgba(185, 28, 28, 0.22); }
.c-pill-info { background: rgba(29, 78, 216, 0.08); color: #1e40af; box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.2); }
.c-pill-ready { background: rgba(109, 40, 217, 0.08); color: #5b21b6; box-shadow: inset 0 0 0 1px rgba(109, 40, 217, 0.2); }

/* My Bills table: hairline borders, muted small headers, gentle hover. */
.c-bill-table-wrap { border-color: rgba(32, 28, 23, 0.09); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(32, 28, 23, 0.03); }
.c-bill-table th {
    background: #fbf9f6;
    color: var(--tf-ink-faint);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(32, 28, 23, 0.08);
}
.c-bill-table td { border-bottom-color: rgba(32, 28, 23, 0.06); }
.c-bill-row:hover td { background: #faf6ef; }

/* Bill items table keeps its gold invoice header, in the readable gold:
   white on #c4984f was ~2.6:1, white on --tf-gold-fill is 4.8:1. */
table.c-table th,
table.items th { background: var(--tf-gold-fill) !important; }
table.c-table td,
table.items td { border-bottom-color: rgba(32, 28, 23, 0.06); }

.c-auth-explanation { font-size: 0.82rem; line-height: 1.6; text-align: center; margin: 14px 0; color: var(--c-ink-soft, #55504a); }

/* Top bar: fully rounded (pill) language switch, account chip and role
   badge, matching the admin header. !important on the language switch:
   its markup carries inline border-radius styles. */
.c-lang-toggle,
.c-lang-toggle a { border-radius: 999px !important; }
.c-user-pill { border-radius: 999px; padding: 3px 14px 3px 3px; }
.c-role-badge { border-radius: 999px; }

/* Sidebar + phone drawer: each page gets its own colourful tile (white icon
   on a gradient), same look as the admin sidebar's .admin-nav-tile. The
   -4px margin keeps the row height and label alignment unchanged. */
.c-sidebar-nav-icon.c-nav-tile,
.c-drawer-nav-icon.c-nav-tile {
    width: 28px;
    height: 28px;
    margin: -4px;
    border-radius: 8px;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.c-drawer-nav-icon.c-nav-tile { margin: -2px; }
.c-nav-tile svg { width: 16px; height: 16px; stroke-width: 2.2; }
.c-nav-tile.is-tile-feed { background: linear-gradient(135deg, #a78bfa 0%, #6d28d9 100%); }
.c-nav-tile.is-tile-chat { background: linear-gradient(135deg, #34d399 0%, #059669 100%); }
.c-nav-tile.is-tile-bills { background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%); }
.c-nav-tile.is-tile-notifications { background: linear-gradient(135deg, #fb923c 0%, #dc2626 100%); }
.c-nav-tile.is-tile-contact { background: linear-gradient(135deg, #60a5fa 0%, #1d4ed8 100%); }
.c-nav-tile.is-tile-profile { background: linear-gradient(135deg, #22d3ee 0%, #0e7490 100%); }

/* Feed category chips: smaller pills, each with its own tint and a soft
   tinted shadow -- same palette as the admin Dashboard's shortcut pills
   (.d2-shortcut). The selected chip fills with its own colour. The bar's
   padding/negative margin give the shadows room inside its scroll box. */
.c-category-bar { padding: 4px 4px 14px; margin: -4px -4px 8px; gap: 8px; }
.c-category-chip {
    --chip-bg: #ffffff;
    --chip-fg: var(--c-ink-soft);
    height: 32px;
    box-sizing: border-box;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--chip-bg);
    border: 1px solid color-mix(in srgb, var(--chip-fg) 20%, transparent);
    color: var(--chip-fg);
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(32, 28, 23, 0.06), 0 3px 8px color-mix(in srgb, var(--chip-fg) 14%, transparent);
    transition: transform .12s ease, box-shadow .12s ease;
}
.c-category-chip:hover {
    color: var(--chip-fg);
    border-color: color-mix(in srgb, var(--chip-fg) 35%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(32, 28, 23, 0.08), 0 6px 14px color-mix(in srgb, var(--chip-fg) 20%, transparent);
}
.c-category-chip.is-tone-brand { --chip-bg: #f6ecd9; --chip-fg: #8a6420; }
.c-category-chip.is-tone-ready { --chip-bg: #ebe6f7; --chip-fg: #574a9e; }
.c-category-chip.is-tone-ok    { --chip-bg: #e5f3e8; --chip-fg: #256d3a; }
.c-category-chip.is-tone-info  { --chip-bg: #e5eef7; --chip-fg: #26567f; }
.c-category-chip.is-tone-warn  { --chip-bg: #fbeeda; --chip-fg: #9a6b16; }
.c-category-chip.is-tone-rose  { --chip-bg: #fbe4ee; --chip-fg: #a3285f; }
.c-category-chip.is-active,
.c-category-chip.is-active:hover {
    background: var(--chip-fg);
    border-color: var(--chip-fg);
    color: #ffffff;
}

/* Offer cards with no image (or one that fails to load): a warm brown-to-
   gold card with a soft glow and a faint TF monogram, not flat black. */
.c-offer-card.is-no-image {
    background:
        radial-gradient(circle at 88% 12%, rgba(232, 184, 96, 0.38) 0%, rgba(232, 184, 96, 0) 46%),
        linear-gradient(135deg, #2b2016 0%, #4a3420 55%, #8a6428 100%);
}
.c-offer-card.is-no-image::before {
    content: "";
    position: absolute;
    right: -18px;
    top: 50%;
    width: 150px;
    height: 150px;
    transform: translateY(-50%) rotate(-12deg);
    background: url("/LiveWebsite/images/icon/logo-mark-96.png") center / contain no-repeat;
    opacity: 0.16;
    border-radius: 24px;
    z-index: 1;
    pointer-events: none;
}
.c-offer-card.is-no-image .c-offer-card-overlay {
    background: linear-gradient(to top, rgba(20, 14, 8, 0.55) 0%, rgba(20, 14, 8, 0) 60%);
}

/* ===== Offer details popup (feed.php) -- same layout as the iOS app's
   OfferDetailView: picture, title, description, dates, T&C, then the code
   (tap to copy) beside a server-backed Redeem. ===== */
.c-offer-used-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 999px;
    background: #e5f3e8;
    color: #256d3a;
}
.c-offer-detail .c-offer-detail-media { display: block; background: #f3eee6; }
.c-offer-detail .c-offer-detail-media img {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: contain;
}
.c-offer-detail-hero {
    position: relative;
    height: 132px;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 12%, rgba(232, 184, 96, 0.38) 0%, rgba(232, 184, 96, 0) 46%),
        linear-gradient(135deg, #2b2016 0%, #4a3420 55%, #8a6428 100%);
}
.c-offer-detail-hero::before {
    content: "";
    position: absolute;
    right: -14px;
    top: 50%;
    width: 150px;
    height: 150px;
    transform: translateY(-50%) rotate(-12deg);
    background: url("/LiveWebsite/images/icon/logo-mark-96.png") center / contain no-repeat;
    opacity: 0.18;
    border-radius: 24px;
}
.c-offer-detail-hero span {
    position: absolute;
    left: 20px;
    bottom: 16px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--tf-gold-fill, #946a29);
    color: #ffffff;
}
.c-offer-detail-body { padding: 20px 20px 22px; }
.c-offer-detail-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--tf-gold-text, #7a5a20);
}
.c-offer-detail-desc {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--c-ink);
    white-space: pre-line;
}
.c-offer-detail-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.c-offer-detail-chip {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fbeeda;
    color: #9a6b16;
}
.c-offer-detail-terms {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    background: #fbfaf8;
}
.c-offer-detail-terms summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--tf-gold-text, #7a5a20);
}
.c-offer-detail-terms p {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--c-ink-soft);
    white-space: pre-line;
}
.c-offer-detail-redeem { text-align: center; margin-bottom: 14px; }
.c-offer-detail-hint { margin: 0 0 10px; font-size: 13px; color: var(--c-ink-soft); }
.c-offer-detail-code-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.c-offer-detail-code {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--tf-gold-fill, #946a29);
    color: #ffffff;
    font: 800 19px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(148, 106, 41, 0.3);
}
.c-offer-detail-code.is-used { background: #8a8378; box-shadow: none; opacity: 0.75; }
.c-offer-detail-code.is-copied { background: #256d3a; }
.c-offer-detail-redeem-btn { height: 44px; padding: 0 22px; }
.c-offer-detail-used { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: #256d3a; }
.c-offer-detail-confirm {
    margin-top: 12px;
    padding: 14px;
    border-radius: 12px;
    background: #fbeeda;
    color: #6b4a10;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    text-align: left;
}
.c-offer-detail-confirm strong { font-size: 14px; }
.c-offer-detail-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.c-offer-detail-result:empty { display: none; }
.c-offer-detail-result {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    text-align: left;
}
.c-offer-detail-result.is-ok   { background: #e5f3e8; color: #256d3a; }
.c-offer-detail-result.is-info { background: #e5eef7; color: #26567f; }
.c-offer-detail-result.is-warn { background: #fbeeda; color: #9a6b16; }
.c-offer-detail-result.is-bad  { background: #f8e2e0; color: #9a3227; }
.c-offer-detail-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #059669;
    text-decoration: none;
}
.c-offer-detail-wa:hover { text-decoration: underline; }

/* ===== Button corners: ONE place =====
   Every button style in the customer portal takes its corners from --r-btn
   (css/brand.css). Change that value to restyle them all. Round icon buttons
   (.c-modal-close-btn, .c-chat-send-btn) stay circles. Add any new button
   class to this list. */
:is(
    .c-btn,
    .c-btn-edit,
    .c-btn-signout,
    .c-birthday-perk-btn,
    .c-bill-tab-btn,
    .c-table-open-btn,
    .c-notif-tab-btn,
    .c-howto-lang button,
    .c-insta-btn-request,
    .c-insta-btn-wa,
    .c-comments-send-btn,
    .c-lightbox-btn,
    .c-chat-post-btn,
    .c-quick-reply-btn,
    .c-topbar-back-btn,
    .c-offer-detail-redeem-btn,
    .c-offer-detail-code
) {
    border-radius: var(--r-btn, 9999px);
}