/* =========================================
   0. DESIGN TOKENS (Fallbacks)
   ========================================= */
:root {
    /* Semantic colour system. Tenant config may override the brand tokens at runtime. */
    --brand-primary: #E87424;
    --brand-primary-hover: #B85B1E;
    --surface-page: #fdfcf8;
    --surface-panel: #ffffff;
    --text-primary: #333333;
    --text-secondary: #666666;
    --status-success: #22543d;
    --status-warning: #b7791f;
    --status-danger: #c53030;

    /* Transitional aliases for components migrated in later delivery slices. */
    --primary-gold: var(--brand-primary);
    --primary-gold-hover: var(--brand-primary-hover);
    --pickup-blue: #4a90e2;
    --delivery-green: #4caf50;
    --dark-bg: #1a1a1a;
    --white: var(--surface-panel);
    --grey-text: var(--text-secondary);
    --text-color: var(--text-primary);
    --error: var(--status-danger);
    --success: var(--status-success);
    --warning: var(--status-warning);

    /* Icon filter default (platform orange for rasters when no tenant theme is active).
       JS (injectTheme + clientConfig) will override with hue-matched for client primaryColor so ALL icons match. */
    --icon-filter: brightness(0) saturate(100%) invert(50%) sepia(89%) saturate(1608%) hue-rotate(347deg) brightness(95%) contrast(91%);
    
    /* SPACING SYSTEM (consistent scale) */
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-3xl: 32px;
    --spacing-4xl: 40px;
    
    /* BUTTON SIZES (minimum accessible height 48px) */
    --button-height: 48px;
    
    /* SHADOWS */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);

    /* Premium SaaS tokens */
    --text-muted: var(--grey-text);
    --text-strong: var(--text-color);
    --surface: var(--surface-panel);
    --border-subtle: #e5e5e5;
    --primary-color: var(--brand-primary);
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;

    /* Inventory cards - uniform collapsed size for clean SaaS grid */
    --inventory-card-collapsed-min-height: 136px;
}

.fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

/* =========================================
   1. CORE DEFAULTS
   ========================================= */
body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--surface-page);
    margin: 0;
    color: var(--text-muted);
    line-height: 1.4;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.2px;
}

[data-theme="dark"] {
    --surface-page: #0f172a;
    --surface-panel: #172033;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --white: var(--surface-panel);
    --surface: var(--surface-panel);
    --text-color: var(--text-primary);
    --grey-text: var(--text-secondary);
    --text-muted: var(--text-secondary);
    --text-strong: var(--text-primary);
    --border-subtle: rgba(255, 255, 255, 0.14);
    --off-white-bg: #1f2937;
    --off-white-border: rgba(255, 255, 255, 0.16);
}

[data-theme="dark"] body {
    background-color: var(--surface-page);
}

[data-theme="dark"] .box,
[data-theme="dark"] .property-option,
[data-theme="dark"] .option,
[data-theme="dark"] .quote-route-card,
[data-theme="dark"] .quick-lead-panel input,
[data-theme="dark"] .quick-lead-panel textarea,
[data-theme="dark"] .input-group input,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .inventory-card,
[data-theme="dark"] .live-summary-body,
[data-theme="dark"] .live-summary-toggle {
    background: #172033;
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text-strong);
}

[data-theme="dark"] .card-label {
    background: #111827;
    color: var(--text-strong);
}

/* Native form controls can retain a light-mode foreground after the widget is
   switched to dark mode. Set both the standard colour and WebKit text fill so
   address, date and demo-entry text remains visible in every supported engine. */
[data-theme="dark"] .quick-lead-panel input,
[data-theme="dark"] .quick-lead-panel textarea,
[data-theme="dark"] .input-group input,
[data-theme="dark"] input[type="date"] {
    color-scheme: dark;
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc;
    caret-color: #f8fafc;
    opacity: 1;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #aebdd0 !important;
    -webkit-text-fill-color: #aebdd0;
    opacity: 1;
}

[data-theme="dark"] .premium-bundle-icon,
[data-theme="dark"] .premium-room-icon {
    background: #253044;
    color: #dbeafe;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Utility Classes for Clean UI */
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.text-left { text-align: left; }
.mt-20 { margin-top: 20px; }

body, .property-option, .inventory-card, .option, .tab, .key-option, .banner-overlay, .modal-content {
    word-break: break-word;
    overflow-wrap: anywhere;
}

button,
.button-primary,
.button-secondary,
.quote-route-card,
.inventory-card,
.option,
.key-option {
    min-width: 0;
}

.button-primary,
.button-secondary,
.quote-route-card strong,
.quote-route-card span,
.inventory-card-title,
.option-subtext,
.key-info,
.card-label {
    white-space: normal;
}

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

/* Tooltip styling for abbreviations */
abbr[title] {
    text-decoration: underline dotted var(--primary-gold);
    cursor: help;
}

.hidden {
    display: none !important;
}

.quote-route-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 30px auto 22px;
    max-width: 1040px;
}

.quote-choice-header {
    margin-inline: auto;
    max-width: 760px;
}

.quote-choice-kicker {
    display: inline-flex;
    margin-bottom: 12px;
    color: var(--client-primary, var(--primary-gold));
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.quote-choice-reassurance {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 18px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.quote-choice-reassurance span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.quote-choice-reassurance span::before {
    content: "✓";
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--delivery-green) 13%, transparent);
    color: var(--delivery-green);
    font-size: 0.7rem;
    font-weight: 900;
}

.quote-route-card {
    min-height: 264px;
    border: 1px solid color-mix(in srgb, var(--client-primary, var(--primary-gold)) 20%, var(--border-subtle));
    border-radius: 18px;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--client-primary, var(--primary-gold)) 5%, transparent), transparent 48%),
        var(--surface);
    color: var(--text-color);
    padding: 24px 56px 23px 24px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 12px 36px rgba(17, 24, 39, 0.07);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.quote-route-card::before {
    content: "→";
    position: absolute;
    right: 22px;
    top: 24px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--client-primary, var(--primary-gold)) 10%, var(--surface));
    color: var(--client-primary, var(--primary-gold));
    font-size: 1rem;
    font-weight: 800;
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.quote-route-card:hover,
.quote-route-card:focus-visible,
.quote-route-card.is-selected {
    transform: translateY(-2px);
    border-color: var(--client-primary, var(--primary-gold));
    box-shadow: 0 18px 42px color-mix(in srgb, var(--client-primary, var(--primary-gold)) 22%, rgba(17, 24, 39, 0.12));
    outline: none;
}

.quote-route-card:hover::before,
.quote-route-card:focus-visible::before,
.quote-route-card.is-selected::before {
    transform: translateX(3px);
    background: color-mix(in srgb, var(--client-primary, var(--primary-gold)) 18%, var(--surface));
}

.quote-route-icon {
    width: 42px;
    height: 42px;
    display: grid !important;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--client-primary, var(--primary-gold)) 11%, var(--surface));
    color: var(--client-primary, var(--primary-gold)) !important;
}

.quote-route-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.quote-route-icon-whatsapp {
    background: color-mix(in srgb, #25d366 13%, var(--surface));
    color: #168a44 !important;
}

.quote-route-card strong,
.quote-route-card span,
.quote-route-card small {
    display: block;
}

.quote-route-card small {
    color: var(--client-primary, var(--primary-gold));
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 7px;
    text-transform: uppercase;
}

.quote-route-card strong {
    margin-bottom: 8px;
    color: var(--text-strong);
    font-size: 1.13rem;
    line-height: 1.25;
}

.quote-route-card span {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.route-steps {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.route-steps li {
    position: relative;
    padding-left: 24px;
    color: var(--text-color);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.3;
}

.route-steps li::before {
    content: counter(route-step);
    counter-increment: route-step;
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--client-primary, var(--primary-gold)) 16%, transparent);
    color: var(--client-primary, var(--primary-gold));
    font-size: 0.62rem;
    font-weight: 900;
}

.quote-route-card {
    counter-reset: route-step;
}

.quote-route-card.is-maintenance-disabled,
.quote-route-card:disabled {
    cursor: not-allowed;
    opacity: 0.58;
    filter: grayscale(0.25);
    transform: none !important;
    box-shadow: none;
}

.quote-route-card.is-maintenance-disabled::after {
    content: "Temporarily unavailable";
    position: absolute;
    top: 14px;
    right: 14px;
    max-width: 150px;
    border-radius: 999px;
    padding: 5px 9px;
    background: rgba(17, 24, 39, 0.08);
    color: var(--text-strong);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.maintenance-note {
    display: block;
    margin-top: 12px;
    color: var(--error);
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.35;
}

.quick-lead-panel {
    border: 1px solid color-mix(in srgb, var(--primary-gold) 28%, var(--border-subtle));
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(17, 24, 39, 0.11);
    margin: 24px auto 0;
    max-width: 900px;
    padding: clamp(22px, 4vw, 38px);
    text-align: left;
}

.quick-lead-heading {
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 24px;
    padding-bottom: 20px;
}

.quick-lead-step {
    display: block;
    margin-bottom: 6px;
    color: var(--client-primary, var(--primary-gold));
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.quick-lead-panel h2 {
    color: var(--text-strong);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    margin: 0 0 6px;
}

.quick-lead-heading p {
    color: var(--text-muted);
    margin: 0;
}

.quick-lead-whatsapp-notice {
    display: grid;
    gap: 4px;
    margin-bottom: 24px;
    border: 1px solid color-mix(in srgb, #25d366 30%, var(--border-subtle));
    border-radius: 12px;
    background: color-mix(in srgb, #25d366 7%, var(--surface));
    padding: 14px 16px 14px 48px;
    position: relative;
}

.quick-lead-whatsapp-notice[hidden] {
    display: none;
}

.quick-lead-whatsapp-notice::before {
    content: "✓";
    position: absolute;
    left: 16px;
    top: 16px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
}

.quick-lead-whatsapp-notice strong {
    color: var(--text-strong);
    font-size: 0.9rem;
}

.quick-lead-whatsapp-notice span {
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.quick-lead-section {
    margin-top: 22px;
}

.quick-lead-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.quick-lead-section-heading strong {
    color: var(--text-strong);
    font-size: 0.95rem;
}

.quick-lead-section-heading span {
    color: var(--text-muted);
    font-size: 0.76rem;
}

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

.quick-lead-field {
    display: grid;
    gap: 7px;
}

.quick-lead-field > span {
    color: var(--text-strong);
    font-size: 0.8rem;
    font-weight: 750;
}

.quick-lead-panel input,
.quick-lead-panel textarea {
    width: 100%;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 13px 14px;
    font: inherit;
    color: var(--text-color);
    background: var(--surface);
    min-height: 48px;
}

.quick-lead-panel input:focus,
.quick-lead-panel textarea:focus {
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-gold) 18%, transparent);
    outline: none;
}

.quick-lead-panel textarea {
    resize: vertical;
    min-height: 110px;
}

.quick-lead-message-field {
    margin-top: 16px;
}

.quick-lead-actions {
    align-items: center;
    border-top: 1px solid var(--border-subtle);
    margin-top: 28px;
    padding-top: 22px;
}

.quick-lead-actions .button-primary {
    min-width: 210px;
}

.quick-lead-privacy {
    margin: 14px 0 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.45;
    text-align: center;
}

.quick-lead-confirmation {
    animation: fadeIn 0.5s ease;
    margin: 0 auto;
    max-width: 700px;
    padding: clamp(44px, 8vw, 80px) 24px;
    text-align: center;
}

.quick-lead-whatsapp-link {
    margin-top: 18px;
    text-decoration: none;
}

@media (max-width: 720px) {
    .quote-route-grid,
    .quick-lead-grid {
        grid-template-columns: 1fr;
    }

    .quote-route-card {
        min-height: 0;
    }

    .quick-lead-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .quick-lead-actions {
        display: grid;
    }

    .quick-lead-actions .button-primary,
    .quick-lead-actions .button-secondary {
        width: 100%;
    }
}

/* Global micro-interactions for interactive elements */
.property-option, .option, .tab, .key-option, .inventory-card, .assembly-item-card {
  transition: var(--transition-base);
}

button:hover, .option:hover, .tab:hover, .key-option:hover {
  transform: scale(1.01);
}
/* inventory-card hover is handled in the premium block (bg + shadow, no scale to protect independent heights) */

/* Ensure consistent font across all form elements */
input, button, select, textarea {
    font-family: inherit;
    transition: var(--transition-base);
}

.container {
    max-width: 1250px;
    margin: auto;
    padding: 40px 20px;
    position: relative; /* Allows absolute positioning of client branding */
}

.theme-toggle {
    position: absolute;
    top: 14px;
    right: 18px;
    z-index: 210;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    color: var(--text-strong);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.theme-toggle:hover {
    border-color: var(--primary-gold);
    transform: translateY(-1px);
}

.theme-toggle-icon {
    font-size: 16px;
    line-height: 1;
}

/* Client Branding - Top Left Corner */
.client-branding {
    position: absolute;
    top: 14px;
    left: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 200;
    max-width: 260px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(4px);
}

.client-branding.has-client-logo {
    background: var(--dark-bg, #18231A);
    border-color: color-mix(in srgb, var(--primary-gold) 36%, transparent);
}

.client-branding img {
    max-height: 38px;
    max-width: 140px;
    object-fit: contain;
    display: block;
}

.client-branding .company-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--primary-gold);
    white-space: normal;
    overflow: visible;
    line-height: 1.15;
    max-width: 150px;
}

/* When only the company name is shown (no logo) */
.client-branding .company-name:only-child {
    max-width: 200px;
    font-size: 14.5px;
}

.client-branding.has-client-logo .company-name {
    color: #fff;
}

.beta-banner {
    position: absolute;
    top: 60px;
    right: 18px;
    z-index: 200;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Smaller on mobile / embedded small views */
@media (max-width: 480px) {
    .client-branding {
        top: 8px;
        left: 10px;
        padding: 4px 8px;
        max-width: 180px;
    }
    .client-branding img {
        max-height: 32px;
        max-width: 110px;
    }
    .client-branding .company-name {
        font-size: 12.5px;
        max-width: 110px;
    }
    .beta-banner {
        top: 52px;
        right: 10px;
        font-size: 11px;
    }
    .theme-toggle {
        top: 8px;
        right: 10px;
        min-height: 34px;
        padding: 6px 9px;
        font-size: 12px;
    }
}

h1, h2, h3 {
    color: var(--text-color);
}

/* Ensure steps are hidden by default to prevent "falling" onto one page */
.step-content {
    display: none;
}

.error-container {
    padding: 20px;
    background: #fff5f5;
    border: 1px solid #feb2b2;
    border-radius: 8px;
    color: var(--error);
    text-align: center;
}

.form-status {
    flex-basis: 100%;
    min-height: 1.5em;
    margin: 8px 0 0;
    color: var(--grey-text);
    font-size: 14px;
    text-align: center;
}

.form-status[data-status="error"] {
    color: var(--error);
    font-weight: 600;
}

/* Progress Indicator Styling */
.progress-indicator-container {
    max-width: 600px;
    margin: 0 auto 30px;
    padding: 0 20px;
}

/* =========================================
   2. PAGE HEADERS (Circle & Title)
   ========================================= */
.header-section {
    text-align: center;
    margin-bottom: 40px;
}

.icon-circle {
    background-color: var(--primary-gold);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.icon-circle.client-logo-circle,
.premium-app-icon.client-logo-icon {
    background: var(--dark-bg, #18231A) !important;
    border: 1px solid color-mix(in srgb, var(--primary-gold) 35%, transparent);
    overflow: hidden;
    padding: 0;
}

.client-header-logo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: inherit;
    background: transparent;
    box-sizing: border-box;
    padding: 10px;
}

.premium-app-icon.client-logo-icon .client-header-logo {
    width: 100%;
    height: 100%;
}

.off-white-circle {
    background-color: var(--off-white-bg, #f2f0e4) !important;
    border: 1px solid var(--off-white-border, #e0dcb8);
}

.success-circle {
    background-color: var(--success, #27ae60) !important;
    border: none;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
}

.tick-mark {
    color: white;
    font-size: 40px;
    font-weight: bold;
    line-height: 1;
}

.item-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* =========================================
   3. STEP PROGRESS BAR
   ========================================= */
.steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border-subtle, #e5e5e5);
    padding-bottom: 15px;
}

.progress-text {
    text-align: right;
    font-size: 12px;
    margin-bottom: 10px;
    font-weight: bold;
}

.progress-bar-inner {
    height: 4px;
    background: var(--primary-gold);
    transition: width 0.3s ease;
}

.step {
    flex: 1;
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.2px;
    transition: var(--transition-base);
}

.step.active {
    color: var(--primary-color, var(--primary-gold));
    border-bottom: 2px solid var(--primary-color, var(--primary-gold));
    margin-bottom: -18px;
    font-weight: 600;
}

.step-header {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 1rem;
  letter-spacing: 0.2px;
}

/* =========================================
   4. CARDS & GRID (Property Selection)
   ========================================= */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-3xl);
    margin-top: var(--spacing-xl);
}

.property-option {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--border-subtle, #e5e5e5);
    background: var(--surface, #fff);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: var(--text-muted);
    transition: 0.2s ease;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    overflow: hidden;
    position: relative;
}

.property-option:hover {
    background: color-mix(in srgb, var(--primary-color, var(--primary-gold)) 6%, transparent);
    transform: translateY(-2px) scale(1.01);
}

.property-option:hover .img-circle {
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04);
}

/* Circular image container */
.card-image-wrapper {
    padding: 32px 20px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-circle {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--image-circle-bg, #f0f0f0);
    overflow: hidden; /* Crucial: clips the image to the circle shape */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    border: 3px solid var(--off-white-border, #e8e6df);
}

.img-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Scales the image to fill the circle without distortion */
}

.card-label {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.35;
    background: var(--white, #fff);
    border-top: 1px solid var(--off-white-border, #f0f0f0);
    padding: 0.9rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--grey-text);
    text-align: center;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    border-radius: 0 0 10px 10px; /* subtle for appeal */
    /* clean, modern, centered text - icons removed */
}

/* Property Card Tags */
.card-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.pickup-tag { background-color: var(--pickup-blue); }
.delivery-tag { 
    background-color: var(--delivery-green); 
    left: auto; 
    right: 10px; 
}

/* =========================================
   5. SELECTION STATES (The Magic)
   ========================================= */
/* Green State - Pickup */
.pickup-selected {
    border-color: var(--pickup-blue) !important;
    background-color: var(--pickup-selected-bg, rgba(74, 144, 226, 0.05)) !important;
    box-shadow: 0 0 15px var(--pickup-selected-shadow, rgba(74, 144, 226, 0.2)) !important;
}

/* Blue State - Delivery */
.delivery-selected {
    border-color: var(--delivery-green) !important;
    background-color: var(--delivery-selected-bg, rgba(76, 175, 80, 0.05)) !important;
    box-shadow: 0 0 15px var(--delivery-selected-shadow, rgba(76, 175, 80, 0.2)) !important;
}

/* Primary color accent for selected state appeal (per design request) */
.pickup-selected .card-label,
.delivery-selected .card-label {
  font-weight: 600;
  color: var(--primary-gold);
}

/* Combined Selection State - Split Colors */
.pickup-selected.delivery-selected {
    background: linear-gradient(to right, var(--pickup-selected-bg, rgba(74, 144, 226, 0.05)) 50%, var(--delivery-selected-bg, rgba(76, 175, 80, 0.05)) 50%) !important;
    border-color: transparent !important;
    box-shadow: 0 0 15px rgba(0,0,0,0.1) !important;
    position: relative;
}

/* Simulating the split border for the card */
.pickup-selected.delivery-selected::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(to right, var(--pickup-blue) 50%, var(--delivery-green) 50%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Premium selected state using primary colour */
.property-option.selected {
  border-color: var(--primary-color, var(--primary-gold));
  background: color-mix(in srgb, var(--primary-color, var(--primary-gold)) 12%, transparent);
  color: var(--primary-color, var(--primary-gold));
  font-weight: 600;
}

/* Sync circle border with selection colors */
.pickup-selected .img-circle {
    border-color: var(--pickup-blue);
    box-shadow: 0 0 0 6px var(--pickup-selected-border, rgba(74, 144, 226, 0.12));
}

.delivery-selected .img-circle {
    border-color: var(--delivery-green);
    box-shadow: 0 0 0 6px var(--delivery-selected-border, rgba(76, 175, 80, 0.12));
}

/* Circle border for combined state */
.pickup-selected.delivery-selected .img-circle {
    border: 3px solid transparent !important;
    background-image: linear-gradient(white, white), linear-gradient(to right, var(--pickup-blue) 50%, var(--delivery-green) 50%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.08);
}

/* Access Option Selected States */
.option.selected-pickup-access {
    background-color: var(--pickup-selected-bg, rgba(74, 144, 226, 0.05)) !important;
    border-color: var(--pickup-blue) !important;
    box-shadow: 0 0 15px var(--pickup-selected-shadow, rgba(74, 144, 226, 0.2)) !important;
}

.option.selected-delivery-access {
    background-color: var(--delivery-selected-bg, rgba(76, 175, 80, 0.05)) !important;
    border-color: var(--delivery-green) !important;
    box-shadow: 0 0 15px var(--delivery-selected-shadow, rgba(76, 175, 80, 0.2)) !important;
}

/* =========================================
   6. BOXES & FORMS
   ========================================= */
.box {
    background: var(--white, white);
    border-radius: 15px;
    padding: 2rem;
    border: 1px solid #eee;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.header-card {
    text-align: center;
}

.header-card h1 {
    margin-bottom: 2px;
}

.header-subtext {
    margin: 0;
    text-align: center;
}

.pickup-access-box {
    background-color: var(--pickup-tint-bg, rgba(74, 144, 226, 0.02)) !important;
    border-left: 5px solid var(--pickup-blue) !important;
}

.delivery-access-box {
    background-color: var(--delivery-tint-bg, rgba(76, 175, 80, 0.02)) !important;
    border-left: 5px solid var(--delivery-green) !important;
}

.access-sub-header {
    text-align: left;
    margin: 20px 0 10px;
    font-size: 16px;
    color: var(--grey-text);
}

/* Fix for Google Places Autocomplete dropdown z-index and appearance */
.pac-container {
    z-index: 10000 !important;
    border-radius: 0 0 12px 12px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    font-family: inherit;
    max-width: calc(100vw - 24px);
}

@media (max-width: 600px) {
    .pac-container {
        z-index: 2147483647 !important;
        font-size: 16px;
        touch-action: manipulation;
    }

    .pac-item {
        min-height: 44px;
        padding: 9px 12px;
        line-height: 1.35;
    }
}

/* 
   STOPS THE GREYING OUT: 
   Modern browsers apply a grey/yellow background when they "detect" 
   an address. This forces the background to stay white.
*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

.input-group input {
    width: 100%;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label {
    font-weight: 700;
    font-size: 13px;
    color: var(--grey-text);
    text-transform: none;
}

.options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.option {
    padding: var(--spacing-xl);
    background: white;
    border-radius: 12px;
    border: 2px solid #eee;
    cursor: pointer;
    text-align: center;
    font-weight: 600;
    transition: all 0.2s ease;
}

.option:hover {
    border-color: var(--primary-gold);
    background: white;
}

.option.selected-package {
    border-color: var(--primary-gold);
    background-color: #fdfcf8;
    box-shadow: 0 0 0 1px var(--primary-gold);
}

.option-subtext {
    display: block;
    font-size: 13px;
    font-weight: normal;
    color: var(--grey-text);
    margin-top: 0;
    line-height: 1.3;
}

.floor-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--grey-text);
}

#pickupFloor {
    border: 2px solid var(--pickup-blue);
    background-color: var(--pickup-input-bg, rgba(74, 144, 226, 0.08));
    padding: 12px;
}

#deliveryFloor {
    border: 2px solid var(--delivery-green);
    background-color: var(--delivery-input-bg, rgba(76, 175, 80, 0.08));
    padding: 12px;
}

/* =========================================
   7. INVENTORY & TABS
   ========================================= */
.tab-bar {
    margin-bottom: 25px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}

.tab {
    padding: 12px 25px;
    border: 1px solid #ddd;
    border-radius: 30px;
    background: white;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 600;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: max-content;
    width: auto;
}

.tab.active {
    background: var(--primary-gold);
    color: white;
    border-color: var(--primary-gold);
}

.tab-badge {
    background: white;
    color: var(--primary-gold);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 800;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tab.active .tab-badge {
    background: white;
    color: var(--primary-gold);
}

/* =========================================
   INVENTORY CARDS — PREMIUM SAAS DESIGN SYSTEM
   ========================================= */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg); /* 16px */
    margin-bottom: var(--spacing-3xl);
    align-items: start; /* Critical: each card keeps its own height; siblings in same row do not stretch */
}

.tab-bar {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 14px;
    margin-bottom: var(--spacing-lg);
    scrollbar-width: thin;
}

.premium-room-tab {
    flex: 0 0 168px;
    min-height: 68px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-strong);
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.025);
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.premium-room-tab:hover,
.premium-room-tab.active {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 7%, var(--surface));
    color: #0f172a;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.premium-room-name {
    display: block;
    max-width: 100%;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.15;
    color: #0f172a;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.premium-room-count {
    display: block;
    max-width: 100%;
    font-size: 0.74rem;
    color: var(--text-muted);
    font-weight: 600;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.premium-room-tab.active .premium-room-name {
    color: #0f172a;
}

.premium-room-tab.active .premium-room-count {
    color: var(--primary-color);
}

.premium-inventory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.premium-bundle-card {
    border-radius: 12px;
}

#step-2 {
    background: #f7f8fb;
}

#step-2 .header-section {
    margin-bottom: 18px;
}

.premium-inventory-topbar {
    display: grid;
    grid-template-columns: minmax(92px, auto) 1fr minmax(112px, auto);
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding: 12px 0;
    border-bottom: 1px solid #dfe4ec;
}

.premium-inventory-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    color: #0f172a;
}

.premium-inventory-brand h1 {
    margin: 0;
    color: #0f172a;
    font-size: 1.08rem;
    font-weight: 850;
    line-height: 1.2;
}

.premium-inventory-brand p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 650;
}

.premium-app-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 10px 20px color-mix(in srgb, var(--primary-color) 24%, transparent);
}

.premium-app-icon svg,
.premium-action-icon,
.premium-search-icon,
.premium-inline-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.premium-nav-btn,
.premium-danger-btn {
    min-height: 40px;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid #dfe4ec;
    background: #fff;
    color: #475569;
    font-size: 0.86rem;
    font-weight: 800;
    cursor: pointer;
}

.premium-danger-btn {
    justify-self: end;
    border-color: #fecaca;
    color: #b91c1c;
}

.premium-nav-btn:hover,
.premium-danger-btn:hover,
.premium-clear-room:hover,
.premium-summary-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary-color) 45%, #dfe4ec);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.premium-search-container {
    position: relative;
    margin-bottom: 20px !important;
}

.premium-search-container input {
    width: 100%;
    height: 48px;
    padding: 0 84px 0 44px;
    border: 1px solid #dfe4ec;
    border-radius: 14px;
    background: #fff;
    color: #0f172a;
    font-size: 0.94rem;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.035);
}

.premium-search-container input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.premium-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.premium-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 800;
    transform: translateY(-50%);
    cursor: pointer;
}

.premium-room-tab {
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
}

.premium-room-icon {
    grid-row: 1 / span 2;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eef1f6;
    color: var(--text-muted);
    font-weight: 800;
    font-size: 0.82rem;
}

.premium-room-icon .premium-inline-icon {
    width: 19px;
    height: 19px;
}

.premium-room-tab.active .premium-room-icon {
    background: color-mix(in srgb, var(--primary-color) 14%, white);
    color: var(--primary-color);
}

.premium-inventory-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 22px 0 8px;
    padding: 16px 18px;
    border: 1px solid #dfe4ec;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.04);
}

.premium-inventory-status-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.premium-inventory-tools {
    position: relative;
    flex: 0 0 auto;
}

.premium-inventory-tools summary {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid #dfe4ec;
    border-radius: 12px;
    background: #fff;
    color: #334155;
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

.premium-inventory-tools summary::-webkit-details-marker {
    display: none;
}

.premium-inventory-tools summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 160ms ease;
}

.premium-inventory-tools[open] summary::after {
    transform: rotate(225deg) translate(-1px, -1px);
}

.premium-inventory-tools summary small {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 600;
}

.premium-inventory-tools .premium-inventory-status-actions {
    position: absolute;
    z-index: 5;
    top: calc(100% + 8px);
    right: 0;
    width: max-content;
    padding: 10px;
    border: 1px solid #dfe4ec;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
}

.premium-inventory-status h3,
.premium-section-title h3,
.premium-summary-panel h3 {
    margin: 0;
    color: #0f172a;
    font-weight: 800;
}

.premium-inventory-status p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 0.86rem;
}

.premium-import-room,
.premium-clear-room,
.premium-summary-btn {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #dfe4ec;
    border-radius: 12px;
    background: #fff;
    color: #475569;
    font-weight: 700;
    cursor: pointer;
}

.premium-import-room {
    border-color: color-mix(in srgb, var(--primary-color) 28%, #dfe4ec);
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 7%, #fff);
}

.premium-clear-room {
    border-color: #fecaca;
    color: #b91c1c;
    background: #fff7f7;
}

.premium-inventory-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 28px;
    align-items: start;
    margin-top: 12px;
}

.premium-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.premium-section-title span {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
}

.premium-inventory-grid {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    gap: 16px;
    align-items: start;
}

.premium-bundle-card.inventory-card {
    min-height: 70px;
    padding: 14px 16px;
    border-color: #dfe4ec;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
    gap: 0;
}

.premium-bundle-card.inventory-card.expanded {
    border-color: color-mix(in srgb, var(--primary-color) 45%, #dfe4ec);
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.premium-bundle-card .inventory-card-header {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.premium-bundle-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f1f4f8;
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 900;
}

.premium-bundle-icon .premium-inline-icon {
    width: 19px;
    height: 19px;
}

.premium-bundle-card.active-inventory-card .premium-bundle-icon {
    background: color-mix(in srgb, var(--primary-color) 14%, white);
    color: var(--primary-color);
}

.premium-bundle-card .inventory-card-title {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    color: #0f172a;
    font-size: 0.94rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.premium-bundle-card .inventory-card-title span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.premium-bundle-card .inventory-card-title small {
    margin: 0;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: none;
}

.premium-bundle-card .tab-badge {
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.76rem;
}

.premium-view-btn {
    grid-column: 2 / -1;
    justify-self: start;
    min-height: 30px;
    height: auto;
    padding: 0 10px;
    min-width: 54px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    white-space: normal;
    line-height: 1.2;
}

.premium-view-btn:hover {
    border-color: #dfe4ec;
    background: #f8fafc;
}

.premium-bundle-card .group-content {
    margin-top: 12px;
}

.premium-bundle-card .sub-items-list {
    gap: 0;
    padding: 0;
    border-top: 1px solid #edf0f5;
}

.premium-bundle-card .inventory-sub-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border: 0;
    border-radius: 12px;
    background: #fff;
    padding: 10px 6px;
}

.premium-bundle-card .inventory-sub-item + .inventory-sub-item {
    border-top: 1px solid #f1f4f8;
}

.premium-bundle-card .inventory-sub-item.active {
    border: 1px solid color-mix(in srgb, var(--primary-color) 35%, #dfe4ec);
    background: color-mix(in srgb, var(--primary-color) 4%, white);
    padding: 9px 10px;
}

.premium-bundle-card .sub-item-info {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.premium-bundle-card .inventory-sub-item .inventory-controls {
    justify-self: start;
}

.premium-sub-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.premium-bundle-card .sub-item-name {
    color: #0f172a;
    font-weight: 750;
    line-height: 1.25;
}

.premium-bundle-card .sub-item-cuft {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 700;
}

.premium-bundle-card .sub-group {
    padding: 8px 0;
}

.premium-bundle-card .sub-group-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 4px;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: uppercase;
}

.premium-bundle-card .sub-group-header strong {
    flex: 0 0 auto;
    color: var(--primary-color);
    font-size: 0.7rem;
}

.premium-flag {
    width: fit-content;
    margin-top: 2px;
    padding: 2px 5px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--primary-color) 16%, white);
    color: var(--primary-color);
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
}

.premium-flag-warn {
    background: #fff1e7;
    color: #d35400;
}

.premium-summary-panel {
    position: sticky;
    top: 18px;
    padding: 18px;
    border: 1px solid #dfe4ec;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.06);
}

.premium-summary-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 14px 0;
}

.premium-summary-stats > div {
    min-height: 80px;
    padding: 12px;
    border: 1px solid #dfe4ec;
    border-radius: 14px;
    background: #fff;
}

.premium-summary-stats span,
.premium-summary-panel h4,
.premium-summary-progress span {
    display: block;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.premium-summary-stats strong {
    display: block;
    margin-top: 4px;
    color: #0f172a;
    font-size: 1.8rem;
    line-height: 1;
}

.premium-summary-stats small {
    color: #64748b;
}

.premium-summary-progress {
    margin: 12px 0 16px;
}

.premium-summary-progress strong {
    float: right;
    color: #0f172a;
    font-size: 0.82rem;
}

.premium-summary-progress div {
    clear: both;
    height: 6px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.premium-summary-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary-color);
}

.premium-summary-rooms {
    overflow: hidden;
    margin: 8px 0 16px;
    border: 1px solid #dfe4ec;
    border-radius: 14px;
}

.premium-summary-room {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 5px;
    padding: 10px 12px;
    align-items: center;
    color: #0f172a;
}

.premium-summary-room + .premium-summary-room {
    border-top: 1px solid #edf0f5;
}

.premium-summary-room strong {
    color: #0f172a;
}

.premium-summary-room small {
    color: #94a3b8;
}

.premium-empty-summary {
    padding: 12px;
    color: #64748b;
}

.premium-summary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.premium-summary-btn {
    width: 100%;
    min-height: 42px;
    margin-top: 0;
}

@media (max-width: 1100px) {
    .premium-inventory-workspace {
        grid-template-columns: 1fr;
    }

    .premium-summary-panel {
        position: static;
    }

    .premium-inventory-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 680px) {
    .premium-inventory-topbar {
        grid-template-columns: 1fr auto;
    }

    .premium-inventory-brand {
        grid-column: 1 / -1;
        grid-row: 1;
        order: -1;
    }

    .premium-inventory-tools {
        width: 100%;
    }

    .premium-inventory-tools summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
    }

    .premium-inventory-tools summary small {
        grid-column: 1;
        grid-row: 2;
    }

    .premium-inventory-tools summary::after {
        grid-column: 2;
        grid-row: 1 / 3;
    }

    .premium-inventory-tools .premium-inventory-status-actions {
        position: static;
        width: 100%;
        margin-top: 8px;
        box-shadow: none;
    }

    .premium-room-tab {
        flex-basis: 190px;
    }

    .premium-bundle-card .inventory-card-header {
        grid-template-columns: 34px minmax(0, 1fr) auto;
    }

    .premium-bundle-card .inventory-card-header .tab-badge {
        grid-column: 3;
    }

    .premium-view-btn {
        grid-column: 2 / span 2;
        padding-left: 0;
    }

    .premium-summary-stats {
        grid-template-columns: 1fr;
    }

    .premium-summary-actions {
        grid-template-columns: 1fr;
    }
}

.inventory-card {
    /* Premium base for ALL inventory cards (main + materials in packing step) */
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--surface);
    transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    overflow: hidden;
}

/* Inventory card layout */
.inventory-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 1rem 1.2rem; /* 16px 19.2px — premium spacing scale */
    align-items: stretch;
    text-align: left;
}

/* UNIFORM collapsed size for clean, consistent grid look (user requirement)
   All cards start the same height. Only the opened group card grows.
   When closed, it snaps back to this exact uniform size. */
.inventory-card:not(.expanded) {
    min-height: var(--inventory-card-collapsed-min-height);
    /* Distribute content nicely: title/badge top, controls/button bottom */
    justify-content: space-between;
}

.inventory-card:hover {
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 30%, var(--border-subtle));
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}

.inventory-card.active-inventory-card {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 5%, var(--surface));
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

/* Expanded state — soft elevation + stronger accent (only this card grows) */
.inventory-card.expanded {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    min-height: auto;           /* allow this one card to grow taller than the uniform baseline */
    justify-content: flex-start; /* natural top-to-bottom flow for the open content */
}

/* Premium typography for card text */
.inventory-card-title {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: var(--text-strong);
    line-height: 1.3;
    margin-bottom: 0;
}

.inventory-card-title small,
.inventory-card small {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.82em;
    letter-spacing: 0.1px;
}

/* When card expanded, title pops */
.inventory-card.expanded .inventory-card-title {
    color: var(--primary-color);
    font-weight: 600;
}

.inventory-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md); /* 12px */
}

/* Header row for cleaner premium layout */
.inventory-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* Content area below header (qty controls, toggle buttons) */
.card-content {
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Group expansion content — smooth auto-height animation container */
.group-content {
    overflow: hidden;
    transition: max-height 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    max-height: 0;
    margin-top: 4px;
}

.inventory-card.expanded .group-content {
    /* JS sets the precise px value; this ensures open state allows natural height */
    max-height: 1200px; /* safety cap for very large groups */
}

/* Clean sub-item rows inside expanded groups (layout improvement: no nested full cards) */
.sub-items-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm); /* 8px */
    padding-top: 4px;
}

.inventory-sub-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--text-muted) 3%, var(--surface));
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    gap: 12px;
    font-size: 0.95rem;
    transition: all 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.inventory-sub-item.active {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 8%, var(--surface));
}

.sub-item-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.sub-item-name {
    font-weight: 500;
    color: var(--text-strong);
    line-height: 1.25;
}

.sub-item-cuft {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: 0.3px;
}

/* Tighter controls for sub rows */
.inventory-sub-item .inventory-controls {
    gap: 6px;
}

.inventory-sub-item .inventory-controls button {
    width: 28px;
    height: 28px;
    font-size: 15px;
    background: #f0f0eb;
}

.inventory-sub-item .inventory-controls .plus-btn {
    background-color: var(--primary-gold);
    color: white;
}

.inventory-sub-item .inventory-qty-input {
    width: 42px;
    padding: 3px 4px;
    font-size: 13px;
    height: auto;
    border-color: #d8d8d3;
}

.assembly-input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.assembly-label {
    display: block;
    font-size: 11px;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--grey-text);
}

.inventory-qty-input {
    width: 50px;
    padding: 5px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-weight: bold;
    font-family: inherit;
}

/* Remove arrows/spinners from the number input */
.inventory-qty-input::-webkit-outer-spin-button,
.inventory-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.inventory-controls button {
    background: #eee;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%; /* Circular buttons */
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-controls button:hover {
    background: var(--primary-gold);
    color: white;
}

.inventory-controls .plus-btn {
    background-color: var(--primary-gold);
    color: white;
}

.assembly-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.assembly-item-card {
    background: #f4f4f4;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px 20px;
    justify-content: space-between;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.assembly-item-name {
    font-weight: 600;
    flex-grow: 1;
}

.assembly-controls-group {
    display: flex;
    gap: 20px;
}

/* =========================================
   8. BUTTONS
   ========================================= */
.button-primary {
  padding: 0.75rem 1.2rem;
  border-radius: 10px;
  background: var(--primary-color, var(--primary-gold));
  color: white;
  font-weight: 600;
  font-size: 1rem;
  transition: var(--transition-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  height: auto;
  min-height: 48px;
}

.button-primary:hover {
  background: color-mix(in srgb, var(--primary-color, var(--primary-gold)) 85%, black);
  transform: scale(1.01);
}

.navigation-buttons {
    gap: 20px;
    margin-top: 40px;
}

input, select, textarea {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle, #e5e5e5);
  background: var(--surface, #fff);
  font-size: 1rem;
  color: var(--text-strong);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--primary-color, var(--primary-gold));
  outline: none;
  background: color-mix(in srgb, var(--primary-color, var(--primary-gold)) 6%, transparent);
}

.navigation-buttons .button-primary {
    width: auto;
    min-width: 400px;
    margin-top: 0;
}

.button-secondary {
  padding: 0.75rem 1.2rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle, #e5e5e5);
  background: var(--surface, #fff);
  color: var(--text-strong);
  font-weight: 500;
  transition: var(--transition-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  height: auto;
  min-height: 48px;
}

.button-secondary:hover {
  background: rgba(0,0,0,0.04);
  transform: scale(1.01);
}

.button-primary:disabled,
.button-secondary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none; /* Stops hover transforms and color changes when disabled */
}

/* =========================================
   9. QUOTE REVIEW LAYOUT
   ========================================= */
.quote-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.quote-summary-grid .box {
    margin-bottom: 0;
}

.box ul { list-style: none; padding: 0; margin: 10px 0; }
.box ul li { padding: 5px 0; border-bottom: 1px dashed #eee; }
.box ul li:last-child { border-bottom: none; }

.total-box {
    background: #1a1a1a !important;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    border: none !important;
    position: relative;
    overflow: hidden;
    animation: fadeIn 0.6s ease-out forwards;
}

.fragile-badge {
    font-size: 10px;
    background: #fff5f5;
    color: var(--error);
    border: 1px solid #ffc9c9;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 10px;
}

.total-box .badge {
    background: rgba(191, 175, 112, 0.1);
    color: var(--primary-gold);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 10px;
    letter-spacing: 1px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Unified size for all new inline SVG icons (class="icon icon-xxx"). */
svg.icon {
  width: 30px;
  height: 30px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Ensure spacing and alignment when SVG icons are placed inline before text (replaces old webp gap) */
h3 > svg.icon,
h4 > svg.icon,
p > svg.icon,
.floor-label > svg.icon,
.access-sub-header > svg.icon {
  margin-right: 0.35em;
}

/* Raster icons (webp) get client primary color from the collection via dynamic filter.
   All icon webps use this to follow primary via the generated hue filter (from primaryColor). */
img.tint-raster {
  filter: var(--icon-filter, none) !important;
}

.quote-price-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: start;
    gap: 12px;
    width: 100%;
    margin-bottom: 10px;
    color: #eee;
}

.quote-price-row > span {
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
}

.quote-price-row > strong {
    color: var(--primary-gold);
    white-space: nowrap;
    text-align: right;
}

.quote-price-row--divider {
    padding-top: 10px;
    border-top: 1px solid #555;
}

.quote-price-row--small {
    font-size: 13px;
}

.quote-price-row--warning,
.quote-price-row--warning > strong {
    color: var(--warning);
}

.quote-price-row--total {
    padding-top: 10px;
    margin-bottom: 0;
    border-top: 1px solid #555;
    font-size: clamp(1.15rem, 5vw, 1.5rem);
}

.back-to-inventory {
    margin-top: 10px;
    font-size: 13px;
    color: var(--primary-gold);
    text-decoration: underline;
    cursor: pointer;
    display: inline-block;
    transition: color 0.2s;
}

.back-to-inventory:hover {
    color: var(--primary-gold-hover);
}

/* =========================================
   10. MODAL STYLES
   ========================================= */
.modal {
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

/* Prevent scrolling when modal is open */
body.modal-open { overflow: hidden; }

.modal-content {
    background: var(--surface);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    max-width: 550px;
    width: 90%;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.materials-dialog {
    text-align: center;
    width: min(92vw, 480px);
}

.materials-dialog h2 {
    margin: 0 0 10px;
    line-height: 1.2;
}

.materials-dialog p {
    margin: 0 auto;
    max-width: 38ch;
    color: var(--grey-text);
    font-size: 0.98rem;
    line-height: 1.55;
}

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

.materials-dialog-actions .button-primary,
.materials-dialog-actions .button-secondary {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0 !important;
    white-space: normal;
}

.materials-dialog-decline {
    background: var(--off-white-bg, #eee);
    color: var(--grey-text);
}

.modal-row {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}

.modal-row:last-child {
    border-bottom: none;
}

.inventory-import-modal-content {
    max-width: 680px;
    text-align: left;
}

.inventory-import-copy {
    margin: 6px 0 18px;
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.5;
}

.inventory-import-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border: 1px dashed color-mix(in srgb, var(--primary-color) 42%, #cbd5e1);
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary-color) 5%, #fff);
    color: #0f172a;
    cursor: pointer;
}

.inventory-import-dropzone span {
    font-weight: 800;
}

.inventory-import-dropzone small,
.inventory-import-status {
    color: #64748b;
    font-size: 0.82rem;
}

.inventory-import-dropzone input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.inventory-import-label {
    display: block;
    margin: 18px 0 8px;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.inventory-import-textarea {
    width: 100%;
    min-height: 170px;
    resize: vertical;
    padding: 14px;
    border: 1px solid #dfe4ec;
    border-radius: 14px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    line-height: 1.45;
}

.inventory-import-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.inventory-import-status {
    min-height: 20px;
    margin-top: 10px;
}

.inventory-import-preview {
    display: grid;
    gap: 8px;
    max-height: 230px;
    overflow: auto;
    margin-top: 10px;
}

.inventory-import-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #dfe4ec;
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    font-size: 0.88rem;
}

.inventory-import-row span,
.inventory-import-row strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.inventory-import-row small {
    color: var(--primary-color);
    font-weight: 800;
}

.inventory-import-row.unmatched {
    border-color: #fecaca;
    background: #fffafa;
}

.inventory-import-row.unmatched strong,
.inventory-import-row.unmatched small {
    color: #b91c1c;
}

.inventory-import-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
}

.uneven-warning {
    background-color: rgba(191, 175, 112, 0.08);
    border-left: 4px solid var(--primary-gold);
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 4px;
}

/* =========================================
   11. PRO TIP SECTION
   ========================================= */
.pro-tip-container {
    background: var(--pro-tip-bg, rgba(191, 175, 112, 0.05));
    border: 1px solid var(--pro-tip-border, rgba(191, 175, 112, 0.25));
    border-radius: 12px;
    padding: 20px;
    margin: 40px 0 10px;
    animation: fadeIn 0.8s ease-out forwards;
}

.pro-tip-content {
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
}

.pro-tip-text strong {
    display: block;
    color: var(--primary-gold);
    font-size: 15px;
    margin-bottom: 2px;
}

.pro-tip-text p {
    margin: 0;
    font-size: 14px;
    color: var(--grey-text);
    line-height: 1.4;
}

/* =========================================
   12. STEP 4 REFINEMENTS
   ========================================= */
.banner-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    height: 220px; /* Stretched slightly upwards */
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.45); /* Slightly darker for punchy white text */
    color: white;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.banner-card img {
    height: 220px;
    width: 100%;
    object-fit: cover;
    display: block;
}

.banner-overlay h2 { color: white; margin: 0; font-size: 24px; }
.banner-overlay p { color: white; margin: 5px 0 0 0; font-size: 15px; opacity: 0.9; }

.key-option {
    gap: 15px;
    border: 1px solid #ddd;
    padding: 1.5rem;
    border-radius: 10px;
    cursor: pointer;
    background: white;
    transition: all 0.2s ease;
}

.key-option:hover {
    border-color: var(--primary-gold);
}

.key-option input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-gold);
    margin: 0;
}

.key-option:has(input:checked) {
    border-color: var(--primary-gold);
    background-color: #fdfcf8;
    box-shadow: 0 0 0 1px var(--primary-gold);
}

.key-info {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 0; /* Brings title and subtext closer together */
}

.extras-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    background: var(--surface-panel, #fff);
    box-shadow: var(--shadow-card, 0 12px 34px rgba(15, 23, 42, 0.07));
}

.extras-card::before {
    content: none;
}

.extras-card-header {
    display: grid;
    gap: 5px;
    margin: 0 0 24px;
    text-align: left;
}

.extras-card-header h3 {
    margin: 0;
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.extras-card-header p {
    max-width: 620px;
    margin: 0;
    color: var(--grey-text);
    font-size: 0.95rem;
}

.extras-card-kicker {
    color: var(--primary-gold);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.extras-card .address-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.extras-card .key-option {
    position: relative;
    min-height: 118px;
    border-width: 2px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
    background: var(--surface-panel, #fff);
}

.extras-card .key-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.09);
}

.extras-card .key-option:has(input:checked) {
    background: color-mix(in srgb, var(--client-primary, var(--primary-gold)) 7%, var(--surface-panel, #fff));
}

.extras-option-grid,
.extras-specialist-grid {
    margin-bottom: 25px;
}

.extras-specialist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 15px;
}

.extras-specialist-grid .key-option {
    padding: 1rem;
}

.storage-extra-card {
    background: var(--surface-panel, #fff);
}

.address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.logistics-summary-card {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--client-primary, var(--primary-gold)) 8%, #fff), #fff 42%),
        white;
    display: flex;
    flex-direction: column;
    color: var(--text-color);
}

.skinny-item-card {
    background: #ffffff;
    border: 1px solid #eee;
    padding: 10px 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}

.item-name { flex: 1; font-weight: 600; }
.item-qty { font-weight: 800; color: var(--primary-gold); margin-left: 15px; }
.item-assembly-info { font-size: 12px; color: #888; margin: 0 15px; font-style: italic; }

.logistics-pill-card {
    background:
        linear-gradient(145deg, var(--dark-bg), color-mix(in srgb, var(--client-primary, var(--primary-gold)) 28%, var(--dark-bg)));
    color: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18);
}

.log-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 600;
}

.log-value {
    color: #fff;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 900;
}

.waste-inventory-status,
.waste-summary-panel {
    border-color: color-mix(in srgb, var(--delivery-green, #4caf50) 22%, var(--border-subtle));
}

.waste-total-chip {
    display: grid;
    gap: 2px;
    min-width: 160px;
    padding: 12px 16px;
    border-radius: 10px;
    background:
        linear-gradient(135deg, var(--client-primary, var(--primary-gold)), color-mix(in srgb, var(--delivery-green, #4caf50) 52%, var(--client-primary, var(--primary-gold))));
    color: #fff;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--client-primary, var(--primary-gold)) 22%, transparent);
}

.waste-total-chip span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 800;
}

.waste-total-chip strong {
    color: #fff;
    font-size: 1.35rem;
}

.waste-bundle-card .group-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.waste-bundle-card.expanded .group-content {
    max-height: none;
}

.waste-sub-item .sub-item-cuft {
    color: var(--primary-color, var(--primary-gold));
    font-weight: 800;
}

.waste-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.waste-bundle-card .inventory-card-title span,
.waste-sub-item .sub-item-name {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.waste-sub-item {
    align-items: flex-start;
    gap: 10px;
}

.waste-sub-item .sub-item-info {
    width: 100%;
}

.waste-sub-item .inventory-controls {
    width: 100%;
    justify-content: flex-end;
}

/* Insurance Selector Enhancements */
#insurance-selector .key-option {
    margin-bottom: 12px;
    border-width: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem;
}

#insurance-selector .key-option:hover {
    background-color: #fdfcf8;
}

#insurance-selector .key-info p {
    margin: 2px 0 0 0;
    font-size: 12px;
}

/* =========================================
   Insurance Tier Cards (NEW)
   ========================================= */
.insurance-tiers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 25px 0;
    grid-auto-rows: 1fr;
}

.insurance-tier-card {
    background: white;
    border: 2px solid #eee;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 180px;
    position: relative;
}

.insurance-tier-card:hover {
    border-color: var(--primary-gold);
    box-shadow: 0 4px 12px rgba(191, 175, 112, 0.1);
}

.insurance-tier-card.selected {
    border-color: var(--primary-gold);
    background: linear-gradient(135deg, rgba(191, 175, 112, 0.05) 0%, rgba(191, 175, 112, 0.02) 100%);
    box-shadow: 0 4px 12px rgba(191, 175, 112, 0.15);
}

.insurance-tier-card.recommended {
    border-color: #eee;
}

.insurance-tier-card input[type="radio"] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    accent-color: var(--primary-gold);
}

.insurance-tier-badge {
    display: inline-block;
    background: var(--primary-gold);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.insurance-tier-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-color);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.insurance-tier-price {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-gold);
    margin-bottom: 10px;
}

.insurance-tier-coverage {
    font-size: 13px;
    color: var(--grey-text);
    margin-bottom: 10px;
}

.insurance-tier-benefits {
    font-size: 12px;
    color: var(--grey-text);
    line-height: 1.4;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.insurance-tier-benefits li {
    list-style: none;
    padding: 2px 0;
}

.insurance-tier-benefits li:before {
    content: "✓ ";
    color: var(--primary-gold);
    font-weight: 800;
    margin-right: 4px;
}

/* =========================================
   Alignment Standardization
   ========================================= */
/* Ensure all buttons have consistent minimum height */
.button-primary,
.button-secondary {
    min-height: var(--button-height);
    display: flex;
}

/* Standardize navigation buttons */
.navigation-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-top: var(--spacing-4xl);
    flex-wrap: wrap;
}

.quote-decision-note {
    display: grid;
    gap: 4px;
    margin: var(--spacing-4xl) auto 0;
    max-width: 680px;
    text-align: center;
}

.quote-decision-note span {
    color: var(--grey-text);
    font-size: 14px;
}

.quote-decision-actions {
    margin-top: var(--spacing-lg);
}

.quote-decision-actions .form-status,
#quoteSubmitActions .form-status {
    flex-basis: 100%;
}

.navigation-buttons .button-primary {
    min-width: auto;
    flex: 1 1 auto;
    max-width: 100%;
}

.navigation-buttons .button-secondary {
    margin-bottom: 0;
}

/* Modal buttons consistency */
.modal-buttons {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    flex-wrap: wrap;
    justify-content: center;
}

.modal-buttons .button-primary,
.modal-buttons .button-secondary {
    flex: 1 1 auto;
    min-width: 140px;
    margin: 0 !important;
}

.modal-buttons.materials-dialog-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.modal-buttons.materials-dialog-actions .button-primary,
.modal-buttons.materials-dialog-actions .button-secondary {
    min-width: 0;
}

/* Standardize key-option cards height */
.key-option {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-lg);
}

/* Inventory grid rows size naturally.
   Uniform collapsed size is controlled by --inventory-card-collapsed-min-height + the :not(.expanded) rule above.
   Only the opened group card is allowed to exceed that height. */
.inventory-grid {
    grid-auto-rows: auto;
}

/* Standardize option cards */
.option {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Address grid cards equal height */
.address-grid {
    align-items: stretch;
}

.address-grid .key-option {
    display: flex;
    align-items: center;
}

/* Assembly item cards */
.assembly-item-card {
    min-height: 60px;
    display: flex;
    align-items: center;
}

/* Modal content buttons grid (for service buttons) */
#inventory-empty-modal .modal-content > div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#inventory-empty-modal .modal-content .button-primary,
#inventory-empty-modal .modal-content .button-secondary {
    margin: 0 !important;
    width: 100%;
}

/* =========================================
   Standardized Utility Classes
   ========================================= */
/* Universal card standardization - equal height grid */
.cards-uniform {
    display: grid;
    grid-auto-rows: 1fr;
    gap: 16px; /* consistent spacing scale */
}

/* Ensure all buttons in containers are same height */
.buttons-uniform {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

.buttons-uniform > button {
    flex: 1 1 auto;
    min-width: 120px;
    min-height: var(--button-height);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile-first card standardization */
@media (max-width: 768px) {
    .cards-uniform {
        grid-template-columns: 1fr;
    }
    
    .buttons-uniform > button {
        width: 100%;
        flex: 1 1 100%;
    }
}

.logistics-pill-card .log-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
}

.logistics-pill-card .log-header,
.logistics-pill-card .log-header span {
    color: rgba(255, 255, 255, 0.82);
}

/* =========================================
   13. MOBILE RESPONSIVENESS
   ========================================= */
/* Tablet and Small Desktops */
@media (max-width: 1024px) {
    .container { max-width: 950px; }
}

@media (max-width: 768px) {
    .steps { flex-wrap: wrap; row-gap: 10px; justify-content: center; }
    .tab {
        max-width: 100%;
    }
    .options { gap: 14px; }
    .inventory-grid { gap: 12px; }
    .banner-card, .banner-card img { height: 180px; }
    .banner-overlay { padding: 1.5rem; }
    .pro-tip-content { flex-direction: column; gap: 12px; }
    .inventory-controls { flex-wrap: wrap; justify-content: center; gap: 10px; }
    .premium-inventory-status-actions {
        justify-content: stretch;
    }
    .premium-inventory-status-actions button {
        flex: 1 1 140px;
    }
    .inventory-import-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

@media (max-width: 480px) {
    .address-grid { gap: 12px; }
    .card-label { padding: 12px; }
    .steps { font-size: 12px; }
    .banner-card, .banner-card img { height: 140px; }
    .banner-overlay h2 { font-size: 18px; }
    .inventory-import-actions {
        flex-direction: column;
    }
    .inventory-import-actions button {
        width: 100%;
    }
    .banner-overlay p, .banner-overlay h2 { line-height: 1.2; }
}

@media (max-width: 420px) {
    .input-group { gap: 10px; }
    .option { padding: 10px 8px; }
}

/* Strong responsive overrides for inline grid and fixed-width content */
@media (max-width: 900px) {
    .tab-bar {
        flex-wrap: nowrap;
        overflow-y: hidden;
    }
    .tab { flex: 0 0 auto; min-width: 140px; }
    .address-grid, .grid, .options, .inventory-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; }
    .card-label { font-size: 18px; }
    .img-circle { width: 180px; height: 180px; }
    .card-image-wrapper { padding: 25px 15px 10px; }
    .assembly-item-card { min-width: 0; }
    .assembly-item-card { flex-wrap: wrap; gap: 10px; }
    .key-option { align-items: flex-start; }
    .extras-card > div[style*="display: grid"], .logistics-summary-card > div[style*="display: grid"], .box > div[style*="display: grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .container { padding: 20px 15px; }
    .grid, .options, .inventory-grid, .extras-card > div[style*="display: grid"], .logistics-summary-card > div[style*="display: grid"], .box > div[style*="display: grid"] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 12px !important;
    }
    .address-grid { grid-template-columns: 1fr !important; }
    .tab { min-width: 120px; }
    .card-label { font-size: 16px; }
    .img-circle { width: 140px; height: 140px; }
    .card-image-wrapper { padding: 18px 10px 5px; }
    .option { padding: 14px 10px; font-size: 14px; }
    .inventory-card { padding: 14px; }
    .navigation-buttons { gap: 12px; }
    .key-option { flex-direction: column; align-items: stretch; }
    .key-option input[type="radio"], .key-option input[type="checkbox"] { margin-bottom: 10px; }
    #insCustomValue { width: 100% !important; }
    input[type="number"] { max-width: 100%; }
    .step { font-size: 12px; }
    .option-subtext { font-size: 12px; }
}

@media (max-width: 420px) {
    .img-circle { width: 110px; height: 110px; }
    .card-label { font-size: 14px; padding: 10px; }
    .option { padding: 12px 8px; }
    .tab {
        min-width: 110px;
    }
    .steps { font-size: 11px; }
    .button-secondary { padding: 12px 16px; }
    .navigation-buttons { gap: 10px; }
}

/* Ultra-mobile breakpoint for small phones (iPhone SE, etc.) */
@media (max-width: 375px) {
    .container { padding: 16px 12px; }
    .icon-circle { margin-bottom: 16px; }
    .grid, .options, .inventory-grid { grid-template-columns: 1fr; gap: 8px; }
    .img-circle { width: 80px; height: 80px; }
    .card-label { font-size: 13px; padding: 8px; }
    .card-image-wrapper { padding: 12px 8px 5px; }
    .tab { min-width: 100px; font-size: 11px; }
    .option { padding: 10px 6px; font-size: 12px; min-height: 80px; }
    .inventory-card { padding: 10px; font-size: 12px; }
    /* on 1-col ultra mobile, we can relax the uniform min-height a little for density */
    .inventory-card:not(.expanded) {
        min-height: 118px;
    }
    .inventory-qty-input { padding: 4px; font-size: 12px; }
    .button-primary, .button-secondary { height: 44px; padding: 10px 12px; font-size: 13px; }
    .button-primary { margin-top: var(--spacing-lg); }
    .button-secondary { margin-bottom: var(--spacing-lg); }
    .navigation-buttons { gap: 8px; margin-top: 24px; }
    .banner-card, .banner-card img { height: 120px; }
    .banner-overlay { padding: 1rem; }
    .banner-overlay h2 { font-size: 16px; }
    .input-group input { padding: 10px 12px; font-size: 13px; }
    .key-option { min-height: 60px; padding: 0.8rem; }
    .steps { font-size: 10px; }
    .step { font-size: 11px; }
    .option-subtext { font-size: 11px; }
}

/* Premium inventory mobile hardening: readable text, no squeezed columns. */
#step-2 .premium-inventory-brand h1,
#step-2 .premium-room-name,
#step-2 .premium-inventory-status h3,
#step-2 .premium-section-title h3,
#step-2 .premium-summary-panel h3,
#step-2 .premium-bundle-card .inventory-card-title,
#step-2 .premium-bundle-card .inventory-card-title span,
#step-2 .premium-bundle-card .inventory-card-title small,
#step-2 .premium-bundle-card .sub-item-name,
#step-2 .premium-summary-room span {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

#step-2 .premium-bundle-card .inventory-card-title span,
#step-2 .premium-room-name,
#step-2 .premium-summary-room span {
    min-width: 0;
}

#step-2 .premium-room-tab,
#step-2 .premium-room-tab.active,
#step-2 .premium-room-tab:hover {
    color: var(--text-strong);
}

#step-2 .premium-room-name,
#step-2 .premium-room-count {
    display: block;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

#step-2 .premium-room-name {
    color: var(--text-strong);
}

#step-2 .premium-room-tab.active .premium-room-name {
    color: var(--text-strong);
}

#step-2 .premium-summary-room {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
}

@media (max-width: 680px) {
    #step-2 .premium-inventory-topbar {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    #step-2 .premium-inventory-brand {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-content: flex-start;
    }

    #step-2 .premium-nav-btn,
    #step-2 .premium-danger-btn {
        width: 100%;
        min-width: 0;
    }

    #step-2 .premium-inventory-status {
        margin-top: 14px;
        padding: 14px;
    }

    #step-2 .premium-room-tab {
        flex: 0 0 210px;
        min-width: 210px;
    }

    #step-2 .premium-bundle-card.inventory-card {
        min-height: auto;
        padding: 13px;
    }

    #step-2 .premium-bundle-card .inventory-card-header {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 8px;
    }

    #step-2 .premium-view-btn {
        grid-column: 2 / span 2;
        min-height: 32px;
    }

    #step-2 .premium-bundle-card .inventory-sub-item {
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: stretch;
    }

    #step-2 .premium-bundle-card .inventory-sub-item .inventory-controls {
        justify-content: flex-start;
        flex-wrap: nowrap;
        width: 100%;
    }

    #step-2 .premium-bundle-card .inventory-sub-item .inventory-controls button {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
    }

    #step-2 .premium-bundle-card .inventory-sub-item .inventory-qty-input {
        flex: 0 0 58px;
        width: 58px;
        height: 38px;
    }
}

@media (max-width: 420px) {
    #step-2 .premium-inventory-brand h1 {
        font-size: 0.98rem;
    }

    #step-2 .premium-inventory-brand p {
        font-size: 0.72rem;
    }

    #step-2 .premium-app-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    #step-2 .premium-search-container input {
        height: 46px;
        padding-right: 68px;
        font-size: 0.86rem;
    }

    #step-2 .premium-search-clear {
        padding: 0 9px;
        font-size: 0.72rem;
    }

    #step-2 .premium-room-tab {
        flex-basis: 198px;
        min-width: 198px;
    }

    #step-2 .premium-bundle-card .inventory-card-header {
        grid-template-columns: 32px minmax(0, 1fr) auto;
    }

    #step-2 .premium-bundle-icon,
    #step-2 .premium-room-icon {
        width: 32px;
        height: 32px;
    }

    #step-2 .premium-bundle-card .inventory-card-title {
        font-size: 0.86rem;
    }

    #step-2 .premium-summary-room {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    #step-2 .premium-summary-room small {
        grid-column: 1 / -1;
    }
}

/* =========================================
   Conversion-focused quote flow polish
   ========================================= */
.guided-step-copy {
    margin: 10px auto 0;
    max-width: 680px;
    color: color-mix(in srgb, var(--text-color) 72%, var(--grey-text));
    font-size: 0.98rem;
    line-height: 1.5;
}

.step-enter {
    opacity: 0;
    transform: translateY(10px);
}

.step-enter.step-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease;
}

.progress-indicator-container {
    position: relative;
    z-index: 1;
    padding: 2px 0 16px;
    background: transparent;
    backdrop-filter: none;
}

.progress-text {
    display: flex;
    justify-content: space-between;
    color: var(--grey-text);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 8px;
}

.progress-bar-bg {
    height: 8px !important;
    background: rgba(17, 24, 39, 0.08) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.progress-bar-inner {
    background: linear-gradient(90deg, var(--client-primary, var(--primary-gold)), color-mix(in srgb, var(--client-primary, var(--primary-gold)) 72%, white)) !important;
    transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.property-option,
.option,
.key-option,
.quote-route-card,
.button-primary,
.button-secondary {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.property-option:hover,
.option:hover,
.key-option:hover {
    transform: translateY(-2px);
}

.button-primary:active,
.button-secondary:active,
.property-option:active,
.option:active,
.key-option:active {
    transform: translateY(1px) scale(0.99);
}

.input-group input.field-invalid,
.quick-lead-panel input.field-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08);
    background: #fffafa;
}

.input-group input.field-valid {
    border-color: color-mix(in srgb, var(--delivery-green) 65%, #d1fae5);
}

.address-entry {
    gap: 10px;
}

.address-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.manual-address-toggle {
    border: 1px solid color-mix(in srgb, var(--client-primary, var(--primary-gold)) 35%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--client-primary, var(--primary-gold)) 10%, var(--off-white-bg, #f5f6f7));
    color: var(--text-color);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    padding: 8px 10px;
    white-space: nowrap;
}

.manual-address-toggle:hover,
.manual-address-toggle:focus-visible {
    background: color-mix(in srgb, var(--client-primary, var(--primary-gold)) 16%, var(--off-white-bg, #f5f6f7));
    outline: 2px solid color-mix(in srgb, var(--client-primary, var(--primary-gold)) 35%, transparent);
    outline-offset: 2px;
}

.manual-address-summary {
    background: color-mix(in srgb, var(--off-white-bg, #f5f6f7) 88%, white) !important;
    cursor: default;
}

.manual-address-fields {
    display: grid;
    gap: 10px;
    margin-top: 4px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--off-white-bg, #f5f6f7) 88%, transparent);
}

.manual-address-fields[hidden] {
    display: none;
}

/* The free WordPress package has no Places or Maps connection. Keep its
   address journey explicitly manual instead of showing inactive search UI. */
.free-wordpress-edition .manual-address-toggle,
.free-wordpress-edition .manual-address-summary {
    display: none;
}

.manual-address-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.7fr);
    gap: 10px;
}

.inline-field-error {
    display: block;
    min-height: 18px;
    margin-top: 6px;
    color: #b91c1c;
    font-size: 12px;
    font-weight: 700;
    opacity: 1;
    animation: fadeIn 160ms ease;
}

.section-inline-error {
    min-height: 20px;
    margin: 0 0 12px;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
}

.section-inline-error:empty {
    margin: 0;
}

@media (max-width: 520px) {
    .address-label-row,
    .manual-address-row {
        grid-template-columns: 1fr;
    }

    .address-label-row {
        display: grid;
    }

    .manual-address-toggle {
        justify-self: start;
    }
}

/* =========================================
   Premium dark-mode hardening
   ========================================= */
[data-theme="dark"] .client-branding {
    background: color-mix(in srgb, var(--surface-panel) 92%, transparent);
    border-color: var(--border-subtle);
}

[data-theme="dark"] .beta-banner,
[data-theme="dark"] .premium-search-clear,
[data-theme="dark"] .premium-room-icon,
[data-theme="dark"] .premium-bundle-icon,
[data-theme="dark"] .premium-flag,
[data-theme="dark"] .skinny-item-card,
[data-theme="dark"] .logistics-summary-card,
[data-theme="dark"] .extras-card,
[data-theme="dark"] .storage-extra-card,
[data-theme="dark"] .inventory-import-dropzone,
[data-theme="dark"] .inventory-import-textarea,
[data-theme="dark"] .inventory-import-row,
[data-theme="dark"] .premium-summary-stats > div,
[data-theme="dark"] .premium-view-btn:hover {
    background: color-mix(in srgb, var(--surface-panel) 86%, var(--surface-page)) !important;
    border-color: var(--border-subtle);
    color: var(--text-strong);
}

[data-theme="dark"] #step-2,
[data-theme="dark"] .progress-indicator-container {
    background: var(--surface-page);
}

[data-theme="dark"] .tab {
    background: var(--surface-panel);
    border-color: var(--border-subtle);
    color: var(--text-strong);
}

[data-theme="dark"] .tab:hover,
[data-theme="dark"] .tab:focus-visible {
    border-color: color-mix(in srgb, var(--primary-color, var(--primary-gold)) 48%, var(--border-subtle));
    background: color-mix(in srgb, var(--primary-color, var(--primary-gold)) 12%, var(--surface-panel));
    color: var(--text-strong);
    outline: none;
}

[data-theme="dark"] .tab.active {
    background: var(--primary-color, var(--primary-gold));
    border-color: var(--primary-color, var(--primary-gold));
    color: #111827;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary-color, var(--primary-gold)) 24%, transparent);
}

[data-theme="dark"] .tab-badge,
[data-theme="dark"] .tab.active .tab-badge {
    background: color-mix(in srgb, var(--surface-page) 86%, #000);
    color: var(--primary-color, var(--primary-gold));
}

[data-theme="dark"] .premium-room-tab,
[data-theme="dark"] .premium-bundle-card.inventory-card,
[data-theme="dark"] .premium-bundle-card.inventory-card.expanded,
[data-theme="dark"] .premium-summary-panel,
[data-theme="dark"] .premium-inventory-status,
[data-theme="dark"] .premium-inventory-tools summary,
[data-theme="dark"] .premium-inventory-tools .premium-inventory-status-actions,
[data-theme="dark"] .premium-import-room,
[data-theme="dark"] .premium-clear-room,
[data-theme="dark"] .premium-summary-btn,
[data-theme="dark"] .premium-nav-btn,
[data-theme="dark"] .premium-danger-btn,
[data-theme="dark"] .premium-search-container input,
[data-theme="dark"] .premium-bundle-card .inventory-sub-item,
[data-theme="dark"] .key-option,
[data-theme="dark"] .insurance-tier-card,
[data-theme="dark"] .assembly-item-card {
    background: var(--surface-panel);
    border-color: var(--border-subtle);
    color: var(--text-strong);
}

[data-theme="dark"] .premium-room-tab:hover,
[data-theme="dark"] .premium-room-tab.active,
[data-theme="dark"] .premium-bundle-card .inventory-sub-item.active,
[data-theme="dark"] .key-option:has(input:checked),
[data-theme="dark"] #insurance-selector .key-option:hover,
[data-theme="dark"] .insurance-tier-card:hover,
[data-theme="dark"] .insurance-tier-card.selected {
    background: color-mix(in srgb, var(--primary-color, var(--primary-gold)) 12%, var(--surface-panel));
    border-color: color-mix(in srgb, var(--primary-color, var(--primary-gold)) 48%, var(--border-subtle));
}

[data-theme="dark"] .premium-room-name,
[data-theme="dark"] .premium-room-tab.active .premium-room-name,
[data-theme="dark"] .premium-inventory-brand,
[data-theme="dark"] .premium-inventory-brand h1,
[data-theme="dark"] .premium-inventory-status h3,
[data-theme="dark"] .premium-section-title h3,
[data-theme="dark"] .premium-summary-panel h3,
[data-theme="dark"] .premium-summary-stats strong,
[data-theme="dark"] .premium-summary-progress strong,
[data-theme="dark"] .premium-bundle-card .inventory-card-title,
[data-theme="dark"] .premium-bundle-card .sub-item-name,
[data-theme="dark"] .inventory-import-label,
[data-theme="dark"] .key-info,
[data-theme="dark"] .insurance-tier-title,
[data-theme="dark"] .assembly-item-name {
    color: var(--text-strong);
}

/* Keep native quantity dropdowns legible as well as the surrounding cards.
   Chromium and Safari can otherwise retain a light-mode option palette while
   inheriting a muted foreground in dark mode. */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] select option {
    color-scheme: dark;
    background-color: #111827;
    color: var(--text-strong);
}

[data-theme="dark"] .inventory-qty-input,
[data-theme="dark"] .fragile-bulk-input {
    border-color: rgba(255, 255, 255, 0.28) !important;
    background-color: #111827 !important;
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc;
    opacity: 1;
}

[data-theme="dark"] .assembly-label,
[data-theme="dark"] .modal-row,
[data-theme="dark"] .premium-view-btn,
[data-theme="dark"] .premium-summary-panel h4,
[data-theme="dark"] .premium-summary-room,
[data-theme="dark"] .premium-summary-room strong,
[data-theme="dark"] .premium-empty-summary,
[data-theme="dark"] .premium-inventory-tools summary small {
    color: var(--text-strong);
}

[data-theme="dark"] .option:hover,
[data-theme="dark"] .property-option:hover,
[data-theme="dark"] .option.selected-package {
    background: color-mix(in srgb, var(--primary-color, var(--primary-gold)) 10%, var(--surface-panel));
    color: var(--text-strong);
}

[data-theme="dark"] .premium-room-count,
[data-theme="dark"] .premium-inventory-brand p,
[data-theme="dark"] .premium-inventory-status p,
[data-theme="dark"] .premium-section-title span,
[data-theme="dark"] .premium-bundle-card .inventory-card-title small,
[data-theme="dark"] .premium-bundle-card .sub-item-cuft,
[data-theme="dark"] .premium-bundle-card .sub-group-header,
[data-theme="dark"] .premium-summary-stats span,
[data-theme="dark"] .premium-summary-stats small,
[data-theme="dark"] .inventory-import-copy,
[data-theme="dark"] .inventory-import-dropzone small,
[data-theme="dark"] .inventory-import-status,
[data-theme="dark"] .item-assembly-info,
[data-theme="dark"] .log-header {
    color: var(--text-muted);
}

[data-theme="dark"] .premium-bundle-card .sub-items-list,
[data-theme="dark"] .premium-bundle-card .inventory-sub-item + .inventory-sub-item,
[data-theme="dark"] .modal-row,
[data-theme="dark"] .box ul li,
[data-theme="dark"] .premium-inventory-topbar {
    border-color: var(--border-subtle);
}

[data-theme="dark"] .inventory-controls button,
[data-theme="dark"] .inventory-sub-item .inventory-controls button {
    background: color-mix(in srgb, var(--surface-page) 68%, var(--surface-panel));
    color: var(--text-strong);
}

[data-theme="dark"] .inventory-controls .plus-btn,
[data-theme="dark"] .inventory-sub-item .inventory-controls .plus-btn,
[data-theme="dark"] .inventory-controls button:hover,
[data-theme="dark"] .inventory-sub-item .inventory-controls button:hover {
    background: var(--primary-color, var(--primary-gold));
    color: #111827;
}

[data-theme="dark"] .extras-card {
    background: var(--surface-panel) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .extras-card .key-option {
    background: var(--surface-panel) !important;
    border-color: var(--border-subtle);
    color: var(--text-strong);
}

[data-theme="dark"] .extras-card-header h3,
[data-theme="dark"] .extras-card .key-info strong,
[data-theme="dark"] .extras-card label,
[data-theme="dark"] .extras-card .key-title {
    color: var(--text-strong);
}

[data-theme="dark"] .extras-card-header p,
[data-theme="dark"] .extras-card .key-info small,
[data-theme="dark"] .extras-card .subtext {
    color: var(--text-muted);
}

[data-theme="dark"] .logistics-pill-card {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--surface-page) 82%, #000), color-mix(in srgb, var(--primary-color, var(--primary-gold)) 32%, var(--surface-page))) !important;
    border-color: color-mix(in srgb, var(--primary-color, var(--primary-gold)) 28%, var(--border-subtle));
    color: #fff;
}

[data-theme="dark"] .logistics-pill-card .log-header,
[data-theme="dark"] .logistics-pill-card .log-value {
    color: #fff;
}

[data-theme="dark"] .logistics-pill-card .log-header span {
    color: rgba(255, 255, 255, 0.78);
}

[data-theme="dark"] .waste-total-chip {
    background:
        linear-gradient(135deg, var(--primary-color, var(--primary-gold)), color-mix(in srgb, var(--delivery-green, #4caf50) 48%, var(--primary-color, var(--primary-gold))));
    color: #fff;
}

[data-theme="dark"] .input-group input.field-invalid,
[data-theme="dark"] .quick-lead-panel input.field-invalid,
[data-theme="dark"] .quick-lead-panel textarea.field-invalid {
    background: color-mix(in srgb, var(--error) 12%, var(--surface-panel)) !important;
    border-color: color-mix(in srgb, var(--error) 70%, var(--border-subtle)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 18%, transparent);
}

[data-theme="dark"] .manual-address-summary,
[data-theme="dark"] .manual-address-fields,
[data-theme="dark"] .smart-rec-card.neutral,
[data-theme="dark"] .live-summary-toggle,
[data-theme="dark"] .live-summary-body {
    background: var(--surface-panel) !important;
    border-color: var(--border-subtle);
}

.shake-soft {
    animation: shakeSoft 180ms ease;
}

@keyframes shakeSoft {
    0%, 100% { transform: translateX(0); }
    35% { transform: translateX(-3px); }
    70% { transform: translateX(3px); }
}

#step-4 {
    position: relative;
    padding-right: min(360px, 32vw);
}

.live-summary-panel {
    position: absolute;
    top: 54px;
    right: 0;
    width: min(330px, 30vw);
    text-align: left;
    z-index: 20;
}

.live-summary-body {
    position: sticky;
    top: 82px;
    border: 1px solid rgba(191, 175, 112, 0.24);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 50px rgba(17, 24, 39, 0.12);
    backdrop-filter: blur(14px);
    padding: 16px;
}

.live-summary-toggle {
    display: none;
}

.live-summary-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-color);
}

.live-summary-heading span {
    font-weight: 900;
}

.live-summary-heading small {
    color: var(--grey-text);
    font-weight: 700;
}

.live-summary-row {
    display: grid;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.live-summary-row span {
    color: var(--grey-text);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.live-summary-row strong {
    color: var(--text-color);
    font-size: 13px;
    line-height: 1.35;
}

.smart-recommendations {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.smart-rec-card {
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(20, 184, 166, 0.08));
    padding: 12px;
}

.smart-rec-card.neutral {
    background: rgba(248, 250, 252, 0.9);
}

.smart-rec-card strong,
.smart-rec-card span {
    display: block;
}

.smart-rec-card strong {
    color: var(--text-color);
    font-size: 13px;
    margin-bottom: 4px;
}

.smart-rec-card span {
    color: var(--grey-text);
    font-size: 12px;
    line-height: 1.4;
}

.premium-get-quote-cta {
    min-width: 260px;
    min-height: 64px;
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    border: 0;
    background: linear-gradient(135deg, var(--primary-gold), color-mix(in srgb, var(--primary-gold) 68%, #38bdf8));
    box-shadow: 0 14px 35px rgba(191, 175, 112, 0.32);
}

.premium-get-quote-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(191, 175, 112, 0.42);
}

.premium-get-quote-cta span {
    font-size: 18px;
    font-weight: 900;
}

.premium-get-quote-cta small {
    font-size: 12px;
    font-weight: 800;
    opacity: 0.88;
}

.cta-trust-stack {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    width: 100%;
    margin-top: 12px;
    color: var(--grey-text);
    font-size: 12px;
    font-weight: 800;
}

.cta-trust-stack span::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--delivery-green);
    vertical-align: 1px;
}

@media (max-width: 980px) {
    #step-4 {
        padding-right: 0;
    }

    .live-summary-panel {
        position: static;
        width: 100%;
        margin: 14px 0 18px;
    }

    .live-summary-body {
        display: none;
        position: static;
    }

    .live-summary-panel.is-open .live-summary-body {
        display: block;
        animation: fadeIn 180ms ease;
    }

    .live-summary-toggle {
        display: flex;
        width: 100%;
        min-height: 48px;
        align-items: center;
        justify-content: space-between;
        border: 1px solid rgba(191, 175, 112, 0.24);
        border-radius: 12px;
        background: #fff;
        color: var(--text-color);
        font-weight: 900;
        padding: 12px 14px;
        box-shadow: var(--shadow-sm);
    }

    .live-summary-toggle::after {
        content: "+";
        font-size: 20px;
        color: var(--primary-gold);
    }

    .live-summary-panel.is-open .live-summary-toggle::after {
        content: "-";
    }
}

@media (max-width: 560px) {
    .guided-step-copy {
        font-size: 0.9rem;
    }

    .premium-get-quote-cta {
        width: 100%;
        min-width: 0;
    }

    .cta-trust-stack {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Small-screen and embedded-iframe hardening */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

img,
video,
canvas,
iframe {
    max-width: 100%;
}

.step-content,
.box,
.header-section,
.progress-indicator-container,
.premium-inventory-workspace,
.premium-inventory-main,
.premium-summary-panel,
.inventory-grid,
.premium-inventory-grid,
.quote-route-grid,
.grid,
.navigation-buttons,
.modal-content {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 860px) {
    body {
        padding: 0;
    }

    .step-content {
        width: min(100%, 100vw);
        padding-left: clamp(12px, 4vw, 20px);
        padding-right: clamp(12px, 4vw, 20px);
    }

    .client-branding,
    .theme-toggle,
    .beta-banner {
        position: static;
        margin: 8px 12px;
        width: fit-content;
        max-width: calc(100vw - 24px);
    }

    .theme-toggle {
        margin-left: auto;
    }

    .progress-indicator-container {
        padding: 0 12px;
    }

    .steps {
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .step {
        flex: 0 0 auto;
        min-width: 82px;
        white-space: nowrap;
    }

    .grid,
    .quote-route-grid,
    .premium-inventory-grid,
    .inventory-grid,
    .service-toggle-grid {
        grid-template-columns: 1fr !important;
    }

    .premium-inventory-topbar,
    .premium-inventory-workspace,
    .quote-summary-grid {
        grid-template-columns: 1fr !important;
    }

    .premium-inventory-topbar {
        gap: 10px;
    }

    .premium-inventory-brand {
        justify-content: flex-start;
    }

    .premium-danger-btn,
    .premium-nav-btn,
    .premium-import-room,
    .premium-clear-room {
        width: 100%;
        min-width: 0;
        white-space: normal;
    }

    .premium-summary-btn {
        min-width: 0;
        white-space: normal;
    }

    .button-primary,
    .button-secondary {
        width: 100%;
    }

    .premium-inventory-status,
    .premium-inventory-status-actions,
    .navigation-buttons,
    .modal-buttons,
    .buttons-uniform {
        align-items: stretch !important;
        flex-direction: column;
        width: 100%;
    }

    .inventory-card,
    .premium-bundle-card,
    .inventory-sub-item,
    .assembly-item-card,
    .quote-route-card,
    .property-option,
    .option {
        width: 100%;
    }

    .premium-bundle-card,
    .inventory-sub-item,
    .property-option {
        min-width: 0;
    }

    .inventory-card-header,
    .inventory-sub-item,
    .assembly-item-card {
        align-items: stretch;
        flex-direction: column;
    }

    .inventory-controls {
        align-self: stretch;
        display: grid;
        grid-template-columns: 40px minmax(54px, 1fr) 40px;
        gap: 8px;
    }

    #step-2 .premium-bundle-card .inventory-sub-item {
        grid-template-columns: minmax(0, 1fr) max-content;
        align-items: center;
    }

    #step-2 .premium-bundle-card .inventory-sub-item .inventory-controls {
        width: auto;
        grid-template-columns: 38px 52px 38px;
    }

    .inventory-controls button {
        width: 40px;
        height: 40px;
    }

    .inventory-qty-input {
        width: 100%;
        min-height: 40px;
    }

    .premium-search-container input {
        height: auto;
        min-height: 48px;
        padding-right: 76px;
    }

    .modal {
        align-items: flex-start;
        padding: 10px;
    }

    .modal-content {
        max-height: calc(100dvh - 20px);
        padding: 18px;
        width: 100%;
    }

    .materials-dialog {
        align-self: flex-end;
        border-radius: 18px 18px 12px 12px;
        padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
    }

    .materials-dialog .icon-circle {
        width: 58px;
        height: 58px;
        margin-bottom: 14px;
    }

    .materials-dialog h2 {
        font-size: 1.3rem;
    }

    .materials-dialog p {
        font-size: 0.94rem;
        max-width: 31ch;
    }

    .materials-dialog-actions {
        grid-template-columns: 1fr;
        margin-top: 20px;
    }

    .materials-dialog-actions .button-primary,
    .materials-dialog-actions .button-secondary {
        min-height: 50px;
    }

    #modal-assembly-list,
    #inventory-import-preview,
    .recent-activity-panel {
        max-width: 100%;
        overflow-x: auto;
    }
}

@media (max-width: 420px) {
    .step-header {
        font-size: 1.05rem;
        line-height: 1.25;
    }

    .header-section {
        margin-bottom: 22px;
    }

    .icon-circle {
        width: 60px;
        height: 60px;
    }

    .premium-section-title,
    .premium-inventory-status {
        padding: 12px;
    }

    .quote-route-card,
    .property-option,
    .inventory-card,
    .box {
        border-radius: 10px;
    }

    .quote-price-row {
        gap: 10px;
        font-size: 0.9rem;
    }
}

/* Shared hosted-renderer containment and free manual-address controls. */
.banner-card img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.free-wordpress-edition .manual-address-toggle,
.free-wordpress-edition .manual-address-summary {
    display: none !important;
}