/* ============================================================
   Nanmayil — Account pages (Editorial Luxury)
   Covers: customer-dashboard, profile, track-order, corporate-orders
   ------------------------------------------------------------
   Loaded LAST; overrides skin on top of each page's inline style
   block without touching markup or page-specific JS.
   ============================================================ */

body { background: var(--color-canvas) !important; color: var(--color-ink); font-family: var(--font-body); }

/* ============================================================
   DASHBOARD + PROFILE — shared container/sections
   ============================================================ */
.dashboard-container {
    max-width: 1200px;
    margin: 0 auto !important;
    padding: clamp(var(--space-8), 5vw, var(--space-12)) var(--container-gutter) var(--space-12) !important;
}
body:has(#profile-form) .dashboard-container { max-width: 640px !important; }

.welcome-section,
.dashboard-section {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: clamp(var(--space-5), 2.5vw, var(--space-7)) !important;
    margin-bottom: var(--space-5) !important;
    box-shadow: var(--shadow-sm) !important;
    position: relative;
    transition: border-color var(--duration-base), box-shadow var(--duration-base);
}
.welcome-section::before,
.dashboard-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--color-brand), var(--color-accent));
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    opacity: 0.85;
}

.welcome-section h1,
.welcome-section h2,
.dashboard-section h1,
.dashboard-section h2 {
    font-family: var(--font-display) !important;
    font-weight: var(--weight-regular) !important;
    font-size: clamp(var(--text-2xl), 2.2vw + 0.5rem, var(--text-4xl)) !important;
    color: var(--color-ink) !important;
    letter-spacing: var(--tracking-tight) !important;
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-2) !important;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    position: relative;
    text-wrap: balance;
}
.welcome-section h1::after,
.welcome-section h2::after,
.dashboard-section h1::after,
.dashboard-section h2::after {
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    width: 48px;
    height: 2px;
    background: var(--color-accent);
}

#welcome-message {
    font-family: var(--font-body) !important;
    font-size: var(--text-base) !important;
    color: var(--color-ink-soft) !important;
    line-height: var(--leading-relaxed);
    margin-top: var(--space-3);
}

/* ---- User details grid ------------------------------- */
.user-details {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: var(--space-4) !important;
    margin-top: var(--space-4) !important;
}
.detail-item {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-3) var(--space-4) !important;
    background: var(--color-canvas-alt) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    transition: border-color var(--duration-fast), transform var(--duration-fast);
}
.detail-item:hover { border-color: var(--color-border-strong) !important; transform: translateY(-1px); }
.detail-label {
    font-family: var(--font-body) !important;
    font-size: var(--text-2xs) !important;
    font-weight: var(--weight-semibold) !important;
    letter-spacing: var(--tracking-widest) !important;
    text-transform: uppercase !important;
    color: var(--color-ink-mute) !important;
}
.detail-value {
    font-family: var(--font-body) !important;
    font-size: var(--text-base) !important;
    color: var(--color-ink) !important;
    font-weight: var(--weight-medium) !important;
    word-break: break-word;
}

/* ---- Orders table ----------------------------------- */
#orders-list table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    margin-top: var(--space-4);
}
#orders-list thead th {
    text-align: left;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-ink-mute);
    padding: var(--space-3);
    background: var(--color-canvas-alt);
    border-bottom: 1px solid var(--color-border);
}
#orders-list tbody td {
    padding: var(--space-3);
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
#orders-list tbody tr:last-child td { border-bottom: 0; }
#orders-list tbody tr { transition: background var(--duration-fast); }
#orders-list tbody tr:hover { background: var(--color-canvas-alt); }

/* ---- Order cards (mobile) ---------------------------- */
.order-card {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-5) !important;
    margin-bottom: var(--space-3) !important;
    transition: border-color var(--duration-fast), box-shadow var(--duration-base);
}
.order-card:hover { border-color: var(--color-border-strong) !important; box-shadow: var(--shadow-sm); }
.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px dashed var(--color-border);
}
.order-card-id {
    font-family: var(--font-display) !important;
    font-weight: var(--weight-semibold) !important;
    font-size: var(--text-lg) !important;
    color: var(--color-ink) !important;
    letter-spacing: var(--tracking-snug);
}
.order-card-status,
.status-paid,
.status-delivered,
.status-shipped,
.status-pending,
.status-cancelled {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px !important;
    border-radius: var(--radius-full) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-2xs) !important;
    font-weight: var(--weight-semibold) !important;
    letter-spacing: var(--tracking-wide) !important;
    text-transform: uppercase !important;
    border: 1px solid currentColor;
    background: transparent !important;
}
.order-card-status.paid,
.order-card-status.delivered,
.status-paid,
.status-delivered { color: var(--color-success) !important; background: rgba(40, 117, 82, 0.08) !important; }
.order-card-status.shipped,
.status-shipped { color: var(--color-info) !important; background: rgba(45, 90, 133, 0.08) !important; }
.order-card-status.pending,
.status-pending { color: var(--color-warning) !important; background: rgba(176, 117, 27, 0.08) !important; }
.order-card-status.cancelled,
.status-cancelled { color: var(--color-danger) !important; background: rgba(176, 54, 54, 0.08) !important; }

.order-card-details { display: flex; flex-direction: column; gap: var(--space-2); }
.order-card-row {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-body);
    font-size: var(--text-sm);
}
.order-card-label {
    color: var(--color-ink-mute) !important;
    font-size: var(--text-xs) !important;
    letter-spacing: var(--tracking-wide) !important;
    text-transform: uppercase !important;
    font-weight: var(--weight-semibold) !important;
}
.order-card-value { color: var(--color-ink) !important; font-weight: var(--weight-medium); }
.order-card-amount {
    font-family: var(--font-display) !important;
    font-weight: var(--weight-semibold) !important;
    font-size: var(--text-lg) !important;
    color: var(--color-ink) !important;
}
.order-card-items {
    color: var(--color-ink-soft) !important;
    font-size: var(--text-sm);
}

/* ---- Empty state ------------------------------------ */
.empty-state {
    text-align: center;
    padding: clamp(var(--space-8), 5vw, var(--space-12)) var(--space-5) !important;
    color: var(--color-ink-soft) !important;
}
.empty-state-icon {
    font-size: 3rem !important;
    color: var(--color-accent) !important;
    opacity: 0.5;
    margin-bottom: var(--space-3);
    display: inline-block;
}
.empty-state h3,
.empty-state .empty-title {
    font-family: var(--font-display) !important;
    font-weight: var(--weight-semibold) !important;
    font-size: var(--text-xl) !important;
    color: var(--color-ink) !important;
    margin: 0 0 var(--space-2) !important;
}
.empty-state p {
    font-family: var(--font-body) !important;
    font-size: var(--text-sm) !important;
    color: var(--color-ink-mute) !important;
    max-width: 44ch;
    margin: 0 auto var(--space-4) !important;
    line-height: var(--leading-relaxed);
}

/* ---- Buttons --------------------------------------- */
.dashboard-container .btn,
.dashboard-container button.btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px !important;
    padding: 0 var(--space-5) !important;
    background: var(--color-brand) !important;
    color: var(--color-ink-inverse) !important;
    border: 0 !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-semibold) !important;
    letter-spacing: var(--tracking-wide) !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition:
        background var(--duration-fast),
        transform var(--duration-fast),
        box-shadow var(--duration-base);
}
.dashboard-container .btn:hover {
    background: var(--color-brand-strong) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-brand);
}
.dashboard-container .btn-danger {
    background: var(--color-danger) !important;
}
.dashboard-container .btn-danger:hover {
    background: #8A2A2A !important;
    box-shadow: 0 8px 20px rgba(176, 54, 54, 0.25);
}

/* ---- Profile form ----------------------------------- */
#profile-form .form-group {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-4) !important;
}
#profile-form label {
    font-family: var(--font-body) !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--weight-semibold) !important;
    letter-spacing: var(--tracking-wide) !important;
    text-transform: uppercase !important;
    color: var(--color-ink-soft) !important;
}
#profile-form input {
    height: 46px !important;
    padding: 0 var(--space-4) !important;
    background: var(--color-canvas) !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-sm) !important;
    color: var(--color-ink) !important;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
}
#profile-form input:focus-visible {
    outline: none !important;
    border-color: var(--color-brand) !important;
    background: var(--color-surface) !important;
    box-shadow: var(--shadow-focus) !important;
}

.message {
    font-family: var(--font-body) !important;
    font-size: var(--text-sm) !important;
    padding: var(--space-3) var(--space-4) !important;
    border-radius: var(--radius-md) !important;
    margin: var(--space-3) 0 !important;
    display: none;
}
.message:not(:empty) { display: block; }
.message.success {
    color: var(--color-success) !important;
    background: rgba(40, 117, 82, 0.08) !important;
    border: 1px solid rgba(40, 117, 82, 0.22) !important;
    border-left: 3px solid var(--color-success) !important;
}
.message.error {
    color: var(--color-danger) !important;
    background: rgba(176, 54, 54, 0.06) !important;
    border: 1px solid rgba(176, 54, 54, 0.22) !important;
    border-left: 3px solid var(--color-danger) !important;
}

/* ============================================================
   TRACK ORDER
   ============================================================ */
.tracking-hero {
    background:
        radial-gradient(800px 500px at 50% 0%, rgba(201, 169, 97, 0.16), transparent 60%),
        linear-gradient(135deg, #0C3A2C, #0F4C3A 50%, #0C3A2C) !important;
    color: #fff !important;
    padding: clamp(var(--space-10), 8vw, var(--space-16)) var(--container-gutter) clamp(var(--space-8), 6vw, var(--space-12)) !important;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.tracking-hero::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 56px;
    height: 2px;
    background: var(--color-accent);
}
.tracking-hero h1,
.tracking-hero .hero-title {
    font-family: var(--font-display) !important;
    font-weight: var(--weight-regular) !important;
    font-size: clamp(var(--text-4xl), 4vw + 1rem, var(--text-6xl)) !important;
    letter-spacing: var(--tracking-tight) !important;
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-3) !important;
    text-wrap: balance;
    color: #fff !important;
}
.tracking-hero p,
.tracking-hero .hero-subtitle {
    font-family: var(--font-body) !important;
    font-size: var(--text-base) !important;
    color: rgba(255, 255, 255, 0.82) !important;
    max-width: 58ch;
    margin: 0 auto !important;
}

.tracker-container {
    max-width: 680px;
    margin: -60px auto 0 !important;
    padding: 0 var(--container-gutter) var(--space-12) !important;
    position: relative;
    z-index: 2;
}
@media (max-width: 640px) { .tracker-container { margin-top: -36px !important; } }

.tracker-card {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: clamp(var(--space-6), 4vw, var(--space-8)) !important;
    box-shadow: var(--shadow-xl) !important;
    position: relative;
    overflow: hidden;
}
.tracker-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-brand), var(--color-accent));
}

.tracking-form-group {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-4) !important;
}
.tracking-label {
    font-family: var(--font-body) !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--weight-semibold) !important;
    letter-spacing: var(--tracking-wide) !important;
    text-transform: uppercase !important;
    color: var(--color-ink-soft) !important;
}
.tracking-input {
    height: 48px !important;
    padding: 0 var(--space-4) !important;
    background: var(--color-canvas) !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-sm) !important;
    color: var(--color-ink) !important;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
}
.tracking-input:focus-visible {
    outline: none !important;
    border-color: var(--color-brand) !important;
    background: var(--color-surface) !important;
    box-shadow: var(--shadow-focus) !important;
}

.tracking-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100% !important;
    min-height: 52px !important;
    padding: 0 var(--space-6) !important;
    background: var(--color-brand) !important;
    color: var(--color-ink-inverse) !important;
    border: 0 !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-semibold) !important;
    letter-spacing: var(--tracking-widest) !important;
    text-transform: uppercase !important;
    cursor: pointer;
    box-shadow: var(--shadow-brand);
    transition: background var(--duration-fast), transform var(--duration-fast);
}
.tracking-btn:not(:disabled):hover {
    background: var(--color-brand-strong) !important;
    transform: translateY(-1px);
}

#tracking-error-msg {
    font-family: var(--font-body) !important;
    font-size: var(--text-sm) !important;
    color: var(--color-danger) !important;
    padding: var(--space-3) var(--space-4);
    background: rgba(176, 54, 54, 0.06);
    border: 1px solid rgba(176, 54, 54, 0.22);
    border-left: 3px solid var(--color-danger);
    border-radius: var(--radius-sm);
    margin-top: var(--space-3);
    display: none;
}
#tracking-error-msg:not(:empty) { display: block; }

/* ---- Timeline --------------------------------------- */
.tracking-result-section {
    margin-top: var(--space-6) !important;
    padding-top: var(--space-6) !important;
    border-top: 1px solid var(--color-border);
}
.timeline-container {
    position: relative;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--space-4);
    padding: var(--space-5) 0;
    margin-bottom: var(--space-5);
}
.timeline-progress-line {
    position: absolute;
    top: calc(var(--space-5) + 20px);
    left: 16%;
    right: 16%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}
.timeline-progress-line::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--color-brand), var(--color-accent));
    width: var(--progress-width, 0%);
    transition: width var(--duration-slow) var(--ease-editorial);
}
.timeline-step {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    position: relative;
    z-index: 1;
}
.timeline-icon-wrap {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--color-surface) !important;
    border: 2px solid var(--color-border) !important;
    border-radius: 50% !important;
    color: var(--color-ink-mute) !important;
    transition: border-color var(--duration-base), background var(--duration-base), color var(--duration-base);
}
.timeline-step.active .timeline-icon-wrap,
.timeline-step[data-active="1"] .timeline-icon-wrap {
    background: var(--color-brand) !important;
    border-color: var(--color-brand) !important;
    color: var(--color-ink-inverse) !important;
}
.timeline-step.done .timeline-icon-wrap,
.timeline-step[data-done="1"] .timeline-icon-wrap {
    background: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: var(--color-ink-inverse) !important;
}
.timeline-label {
    font-family: var(--font-body) !important;
    font-size: var(--text-2xs) !important;
    font-weight: var(--weight-semibold) !important;
    letter-spacing: var(--tracking-wide) !important;
    text-transform: uppercase !important;
    color: var(--color-ink-mute) !important;
    text-align: center;
}
.timeline-step.active .timeline-label,
.timeline-step.done .timeline-label { color: var(--color-ink) !important; }

.status-message-box {
    background: var(--color-canvas-alt) !important;
    border: 1px solid var(--color-border) !important;
    border-left: 3px solid var(--color-brand) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-4) var(--space-5) !important;
    margin-top: var(--space-4) !important;
}
.status-headline {
    font-family: var(--font-display) !important;
    font-weight: var(--weight-semibold) !important;
    font-size: var(--text-lg) !important;
    color: var(--color-ink) !important;
    margin: 0 0 var(--space-1) !important;
}
.status-description {
    font-family: var(--font-body) !important;
    font-size: var(--text-sm) !important;
    color: var(--color-ink-soft) !important;
    line-height: var(--leading-relaxed);
    margin: 0 !important;
}

.tracking-link-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-4) !important;
    background: transparent !important;
    color: var(--color-brand) !important;
    border: 1px solid var(--color-brand) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--weight-semibold) !important;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none !important;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.tracking-link-btn:hover {
    background: var(--color-brand) !important;
    color: var(--color-ink-inverse) !important;
}

/* ============================================================
   CORPORATE ORDERS
   ============================================================ */
.corporate-hero {
    background:
        linear-gradient(135deg, rgba(12, 58, 44, 0.92), rgba(15, 76, 58, 0.85)),
        radial-gradient(700px 500px at 70% 30%, rgba(201, 169, 97, 0.25), transparent 60%) !important;
    color: #fff !important;
    padding: clamp(var(--space-12), 8vw, var(--space-20)) var(--container-gutter) !important;
    text-align: center;
    position: relative;
}
.corporate-hero .hero-title {
    font-family: var(--font-display) !important;
    font-weight: var(--weight-regular) !important;
    font-size: clamp(var(--text-4xl), 4vw + 1rem, var(--text-6xl)) !important;
    letter-spacing: var(--tracking-tight) !important;
    line-height: var(--leading-tight);
    color: #fff !important;
    margin: 0 0 var(--space-3) !important;
    text-wrap: balance;
}
.corporate-hero .hero-subtitle {
    font-family: var(--font-body) !important;
    font-size: var(--text-lg) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    max-width: 60ch;
    margin: 0 auto !important;
    line-height: var(--leading-relaxed);
}

.props-container,
.value-props-section {
    max-width: var(--container-xl);
    margin: 0 auto !important;
    padding: clamp(var(--space-10), 6vw, var(--space-12)) var(--container-gutter) !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--space-5) !important;
}
@media (max-width: 820px) { .props-container, .value-props-section { grid-template-columns: 1fr !important; } }

.prop-card {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-6) !important;
    text-align: center !important;
    transition: transform var(--duration-base) var(--ease-editorial), box-shadow var(--duration-base), border-color var(--duration-base);
}
.prop-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-border-strong) !important;
    box-shadow: var(--shadow-lg) !important;
}
.prop-icon {
    font-size: 1.8rem !important;
    color: var(--color-accent-deep) !important;
    margin-bottom: var(--space-3) !important;
    display: inline-block;
}
.prop-title {
    font-family: var(--font-display) !important;
    font-weight: var(--weight-semibold) !important;
    font-size: var(--text-xl) !important;
    color: var(--color-ink) !important;
    margin: 0 0 var(--space-2) !important;
    letter-spacing: var(--tracking-snug);
}
.prop-desc {
    font-family: var(--font-body) !important;
    font-size: var(--text-sm) !important;
    color: var(--color-ink-soft) !important;
    line-height: var(--leading-relaxed) !important;
    margin: 0 !important;
}

.inquiry-section {
    max-width: 820px;
    margin: 0 auto !important;
    padding: 0 var(--container-gutter) clamp(var(--space-12), 8vw, var(--space-16)) !important;
}
.form-container {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: clamp(var(--space-6), 4vw, var(--space-8)) !important;
    box-shadow: var(--shadow-md) !important;
    position: relative;
    overflow: hidden;
}
.form-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-brand), var(--color-accent));
}

.form-section-title {
    font-family: var(--font-display) !important;
    font-weight: var(--weight-semibold) !important;
    font-size: var(--text-xl) !important;
    color: var(--color-ink) !important;
    margin: var(--space-5) 0 var(--space-4) !important;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    letter-spacing: var(--tracking-snug);
}
.form-container > .form-section-title:first-child { margin-top: 0 !important; }

.form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-4) !important;
}
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr !important; } }
.form-group.full-width { grid-column: 1 / -1; }

.form-label {
    font-family: var(--font-body) !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--weight-semibold) !important;
    letter-spacing: var(--tracking-wide) !important;
    text-transform: uppercase !important;
    color: var(--color-ink-soft) !important;
    margin-bottom: 6px !important;
    display: block;
}

.form-control {
    width: 100%;
    box-sizing: border-box;
    height: 46px !important;
    padding: 0 var(--space-4) !important;
    background: var(--color-canvas) !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-sm) !important;
    color: var(--color-ink) !important;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
}
textarea.form-control { height: auto !important; min-height: 100px; padding: var(--space-3) var(--space-4) !important; resize: vertical; }
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231A1A1A' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    background-size: 12px;
    padding-right: var(--space-10) !important;
    cursor: pointer;
}
.form-control:hover { border-color: var(--color-ink-mute) !important; }
.form-control:focus-visible {
    outline: none !important;
    border-color: var(--color-brand) !important;
    background: var(--color-surface) !important;
    box-shadow: var(--shadow-focus) !important;
}

.radio-group {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--space-2) !important;
    margin-top: 4px;
}
.radio-label {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: var(--space-2) var(--space-4) !important;
    background: var(--color-canvas) !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--radius-full) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-sm) !important;
    color: var(--color-ink) !important;
    cursor: pointer;
    transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast);
}
.radio-label:hover { border-color: var(--color-brand) !important; }
.radio-label input[type="radio"] { accent-color: var(--color-brand); }
.radio-label:has(input:checked) {
    border-color: var(--color-brand) !important;
    background: rgba(15, 76, 58, 0.06) !important;
    color: var(--color-brand) !important;
    font-weight: var(--weight-semibold);
}

.submit-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100% !important;
    min-height: 54px !important;
    padding: 0 var(--space-6) !important;
    margin-top: var(--space-5) !important;
    background: var(--color-brand) !important;
    color: var(--color-ink-inverse) !important;
    border: 0 !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-semibold) !important;
    letter-spacing: var(--tracking-widest) !important;
    text-transform: uppercase !important;
    cursor: pointer;
    box-shadow: var(--shadow-brand);
    transition: background var(--duration-fast), transform var(--duration-fast);
}
.submit-btn:not(:disabled):hover {
    background: var(--color-brand-strong) !important;
    transform: translateY(-1px);
}

.form-error {
    font-family: var(--font-body) !important;
    font-size: var(--text-sm) !important;
    color: var(--color-danger) !important;
    padding: var(--space-3) var(--space-4) !important;
    background: rgba(176, 54, 54, 0.06) !important;
    border: 1px solid rgba(176, 54, 54, 0.22) !important;
    border-left: 3px solid var(--color-danger) !important;
    border-radius: var(--radius-sm) !important;
    margin: var(--space-3) 0 !important;
    display: none;
}
.form-error:not(:empty) { display: block; }

/* ---- Success state --------------------------------- */
.success-state {
    display: none !important;
    text-align: center;
    padding: clamp(var(--space-8), 6vw, var(--space-12)) var(--space-5) !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    position: relative;
    overflow: hidden;
}
.success-state::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-success), var(--color-accent));
}
.success-state.active { display: block !important; }
.success-icon {
    font-size: 3rem !important;
    color: var(--color-success) !important;
    margin-bottom: var(--space-3);
    display: inline-block;
}
.success-title {
    font-family: var(--font-display) !important;
    font-weight: var(--weight-regular) !important;
    font-size: clamp(var(--text-2xl), 2vw + 0.5rem, var(--text-4xl)) !important;
    color: var(--color-ink) !important;
    margin: 0 0 var(--space-3) !important;
    letter-spacing: var(--tracking-tight);
}
.success-desc {
    font-family: var(--font-body) !important;
    font-size: var(--text-base) !important;
    color: var(--color-ink-soft) !important;
    line-height: var(--leading-relaxed) !important;
    max-width: 58ch;
    margin: 0 auto var(--space-5) !important;
}
.whatsapp-btn {
    display: inline-flex !important;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6) !important;
    background: #25D366 !important;
    color: #fff !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-semibold) !important;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
    transition: transform var(--duration-fast), box-shadow var(--duration-base);
}
.whatsapp-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.4);
}