/* ================= Brandit Design Generator Theme v9.9.20 ================= */
/* Complete CSS File - All Changes Integrated + Consistent Gradients */
/* FIXED: Modal behavior, Button responsiveness, Preview display, Invoice styling */
/* FIXED: Title display for desktop/mobile, Business profile positioning */
/* FIXED: History spacing, Flyer UI, Button consistency, Upload unification */
/* FIXED: Footer layout for logged-in and guest views, Footer visibility */
/* FIXED: Navigation drag prevention, Auth modal UX, Profile grid layout */
/* FIXED: History performance, Delete icons, Account/Credits layout */
/* MAINTAINED: Consistent gradient theme, All existing layouts, Responsive design */
/* v9.9.20: Weekly Content card styles, Product preprocessing UI, Enhanced admin */

:root {
    --brandit-primary: #4208cc;
    --brandit-secondary: #d40253;
    --brandit-accent: #8b5cf6;
    --brandit-success: #10b981;
    --brandit-warning: #f59e0b;
    --brandit-error: #ef4444;
    --brandit-dark: #1e293b;
    --brandit-light: #f8fafc;
    
    --bg-main: #ffffff;
    --bg-soft: #f6f7f9;
    --bg-card: #ffffff;
    --border-soft: rgba(0,0,0,0.08);
    --border-light: rgba(0,0,0,0.04);

    --text-main: #000000;
    --text-secondary: #1e293b;
    --text-muted: #666666;

    /* Consistent Brand Gradient - Used throughout the plugin */
    --brand-gradient: linear-gradient(135deg, #4208cc, #d40253);
    --brand-gradient-hover: linear-gradient(135deg, #d40253, #4208cc);
    --success-gradient: linear-gradient(135deg, #10b981, #059669);
    --warning-gradient: linear-gradient(135deg, #f59e0b, #d97706);
    --accent-gradient: linear-gradient(135deg, #8b5cf6, var(--brandit-accent));
    --whatsapp-gradient: linear-gradient(90deg, #7B61FF, #00D4FF);
    --close-gradient: linear-gradient(135deg, #ff4444, #cc0000);
    --delete-gradient: linear-gradient(135deg, #ef4444, #dc2626);
    --product-gradient: linear-gradient(135deg, #f8fafc, #e2e8f0);
    
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;

    /* ---- Standardized form spacing (Flyer form is the reference) ---- */
    /* One consistent vertical rhythm for every form on desktop & mobile. */
    --bd-field-gap: 8px;     /* label ↔ input ↔ helper text ↔ validation */
    --bd-group-gap: 18px;    /* gap between consecutive form groups */
    --radius-xs: 8px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
    --shadow-xl: 0 20px 50px rgba(0,0,0,0.15);
    --shadow-brand: 0 8px 24px rgba(66, 8, 204, 0.3);
    --shadow-card: 0 10px 30px rgba(0,0,0,0.08);
    --shadow-delete: 0 4px 12px rgba(239, 68, 68, 0.3);
    --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-float: 0 8px 20px rgba(0,0,0,0.25);

    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --sidebar-width: 280px;
    --top-nav-height: 70px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ====================================================== */
/* ========== PASSWORD VISIBILITY TOGGLE STYLES ========= */
/* ====================================================== */

.password-input-wrapper {
    position: relative;
    width: 100%;
}

.password-input-wrapper input {
    width: 100%;
    padding-right: 45px !important;
}

.password-toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #666;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: auto;
    transition: var(--transition);
    border-radius: 4px;
}

.password-toggle-btn:hover {
    color: var(--brandit-primary);
    background: rgba(66, 8, 204, 0.05);
}

.password-toggle-btn:focus {
    outline: 2px solid var(--brandit-primary);
    outline-offset: 2px;
}

.password-toggle-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.brandit-form-group.compact .password-input-wrapper input {
    padding: 10px 40px 10px 12px !important;
}

.brandit-form-group.compact .password-toggle-btn {
    right: 8px;
    font-size: 16px;
}

/* ====================================================== */
/* ========== NAVIGATION FLICKER PREVENTION ============= */
/* ====================================================== */

.brandit-content-container {
    transition: opacity 0.15s ease;
}

.brandit-content-container.navigating {
    opacity: 0.5;
    pointer-events: none;
}

/* ====================================================== */
/* ========== ROUNDED CORNERS FOR ALL INPUTS =========== */
/* ====================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="color"],
select,
textarea,
.brandit-form-group input,
.brandit-form-group select,
.brandit-form-group textarea,
.brandit-form-field input,
.brandit-form-field select,
.brandit-form-field textarea,
.form-control,
.brandit-select,
.business-profile-form-modal input,
.business-profile-form-modal select,
.business-profile-form-modal textarea {
    border-radius: 12px !important;
}

input[type="color"] {
    border-radius: 8px !important;
    padding: 4px !important;
    height: 44px !important;
}

.brandit-file-upload,
.upload-box,
.upload-box-small {
    border-radius: 16px !important;
}

select {
    border-radius: 12px !important;
}

/* ============================================================ */
/* CONSISTENT, VISIBLE DROPDOWN CHEVRON for every <select>      */
/* A single embedded SVG chevron (the same clean purple line     */
/* icon used by the flyer wizard's sub-sector field) replaces the */
/* inconsistent native OS arrow across all browsers, screens and  */
/* modals.                                                        */
/* ============================================================ */
select,
.brandit-select,
.brandit-form-group select,
.brandit-form-field select,
.form-control[as="select"],
.business-profile-form-modal select,
.brandit-logo-modal select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 1.5L7 6.5L13 1.5' stroke='%234208cc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px 8px !important;
    padding-right: 38px !important;
    cursor: pointer;
}
/* Remove IE/Edge legacy arrow */
select::-ms-expand { display: none; }

.brandit-logo-modal input,
.brandit-logo-modal select,
.brandit-logo-modal textarea {
    border-radius: 12px !important;
}

.business-profile-form-modal .brandit-file-upload {
    border-radius: 16px !important;
}

/* (Color swatches use the shared .brandit-color-input styling everywhere —
   including the business profile modal — so the picker is identical to the
   business-card desktop picker across all screens and on mobile.) */

/* ====================================================== */
/* ========== HELPER TEXT STYLES ======================= */
/* ====================================================== */

.brandit-helper-text {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    transition: opacity 0.15s ease;
    line-height: 1.4;
}

.brandit-form-group .brandit-helper-text,
.form-group .brandit-helper-text,
.brandit-form-field .brandit-helper-text {
    margin-top: 0;
    padding-left: 2px;
}

.brandit-contact-section .brandit-helper-text {
    margin-top: 4px;
    font-size: 11px;
}

.brandit-invoice-section .brandit-helper-text {
    margin-top: 4px;
    font-size: 11px;
}

/* ====================================================== */
/* ========== REQUIRED FIELD INDICATORS ================ */
/* ====================================================== */

.brandit-required-indicator {
    color: var(--brandit-error);
    margin-left: 4px;
    font-weight: 600;
}

.brandit-optional-indicator {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
    margin-left: 6px;
}

.required-star {
    color: var(--brandit-error);
    margin-left: 2px;
    font-weight: 600;
}

.optional-badge {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 400;
    margin-left: 8px;
}

/* ====================================================== */
/* ========== DISABLED FIELD STYLING =================== */
/* ====================================================== */

.brandit-form-group input:disabled,
.brandit-form-group textarea:disabled,
.brandit-form-group select:disabled,
.form-group input:disabled,
.form-group textarea:disabled,
.form-group select:disabled,
.brandit-form-field input:disabled,
.brandit-form-field textarea:disabled,
.brandit-form-field select:disabled {
    background: var(--bg-soft);
    opacity: 0.7;
    cursor: not-allowed;
    border-color: var(--border-soft);
}

.brandit-form-group input:disabled:hover,
.brandit-form-group textarea:disabled:hover,
.form-group input:disabled:hover,
.form-group textarea:disabled:hover,
.brandit-form-field input:disabled:hover,
.brandit-form-field textarea:disabled:hover {
    border-color: var(--border-soft);
}

/* ====================================================== */
/* ========== DROPDOWN SETUP BUSINESS OPTION ============ */
/* ====================================================== */

#business-profile-select option[value="__setup_new__"] {
    color: var(--brandit-primary) !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, rgba(66, 8, 204, 0.05), rgba(212, 2, 83, 0.05)) !important;
    border-top: 2px solid var(--border-light) !important;
    padding: 12px 16px !important;
    margin-top: 4px !important;
}

#business-profile-select option[value="__setup_new__"]:checked {
    background: var(--brand-gradient) !important;
    color: white !important;
}

.brandit-setup-business-option,
#business-profile-select option[value="__setup_new__"] {
    color: var(--brandit-primary) !important;
    font-weight: 600;
    border-top: 1px solid var(--border-light);
    padding-top: 10px;
    margin-top: 6px;
    background: linear-gradient(135deg, rgba(66, 8, 204, 0.03), rgba(212, 2, 83, 0.03));
}

/* ====================================================== */
/* ========== DROPDOWN MENU STYLES ===================== */
/* ====================================================== */

.brandit-profile-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    color: var(--text-muted);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.brandit-profile-menu-btn:hover {
    background: var(--bg-soft);
    color: var(--brandit-primary);
}

.brandit-profile-dropdown-menu {
    background: var(--bg-main);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
    min-width: 180px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    animation: dropdownFadeIn 0.2s ease-out;
}

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

.brandit-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 14px;
    color: var(--text-secondary);
}

.brandit-dropdown-item:hover {
    background: var(--bg-soft);
}

.brandit-dropdown-edit {
    color: var(--brandit-primary);
}

.brandit-dropdown-edit:hover {
    background: rgba(66, 8, 204, 0.05);
}

.brandit-dropdown-delete {
    color: var(--brandit-error);
}

.brandit-dropdown-delete:hover {
    background: rgba(239, 68, 68, 0.05);
}

.brandit-dropdown-item span {
    font-size: 16px;
}

/* ====================================================== */
/* ========== SPACING FIXES - NO EXTRA GAPS ============= */
/* ====================================================== */

.brandit-main-layout {
    display: flex;
    min-height: 100vh;
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

.brandit-main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    background: var(--bg-soft);
    transition: margin-left 0.3s ease;
    width: calc(100% - var(--sidebar-width));
    position: relative;
    padding-top: 0 !important;
    display: flex;
    flex-direction: column;
}

.brandit-content-container {
    padding: 20px 32px !important;
    max-width: 1400px;
    margin: 0 auto;
    flex: 1;
    width: 100%;
}

.brandit-form-header-wrapper {
    margin-bottom: 24px;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.brandit-top-navbar {
    background: var(--bg-main);
    border-bottom: 1px solid var(--border-soft);
    padding: 0 32px;
    height: var(--top-nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 99;
    margin-bottom: 0 !important;
    width: 100%;
}

/* ====================================================== */
/* ========== DESKTOP TOP NAVBAR TAB DISPLAY =========== */
/* ====================================================== */

.brandit-current-tab-desktop {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-main);
}

.brandit-current-tab-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* ====================================================== */
/* ========== MOBILE PAGE TITLE ======================== */
/* ====================================================== */

.brandit-mobile-page-title {
    display: none;
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 20px;
    padding-top: 60px;
    text-align: center;
    line-height: 1.3;
}

/* SINGLE TITLE PER BREAKPOINT (covers every screen, incl. weekly content which
   has no in-form <h2>):
     - Desktop  >=1025px : top navbar tab is the title.
     - Tablet/mobile <=1024px : the mobile page-title bar is the title.
   The in-form <h2 class="brandit-desktop-title"> is therefore hidden at every
   breakpoint to avoid a duplicate. Colors are forced dark below regardless. */
.brandit-desktop-title {
    display: none !important;
}

.brandit-form-title,
.brandit-desktop-title {
    color: #111827 !important;
}

/* ============================================================== */
/* THEME-PROOF DARK HEADINGS (guest + logged-in)                  */
/* Some host themes force headings white via their own stylesheet. */
/* Force every heading and title inside the plugin's own roots to  */
/* be dark so titles never disappear on light backgrounds. The     */
/* genuine white-on-dark elements (banner, hero, profile/credits   */
/* panels) are re-asserted as white immediately after this block,  */
/* so they keep their intended white text.                         */
/* ============================================================== */
.brandit-main-content h1,
.brandit-main-content h2,
.brandit-main-content h3,
.brandit-main-content h4,
.brandit-main-content h5,
.brandit-main-content h6,
.brandit-guest-view h1,
.brandit-guest-view h2,
.brandit-guest-view h3,
.brandit-guest-view h4,
.brandit-guest-view h5,
.brandit-guest-view h6,
.brandit-form-title,
.brandit-mobile-page-title,
.brandit-current-tab-desktop,
.brandit-current-tab-desktop span,
.brandit-section-title,
.brandit-history-header h2,
.brandit-history-header h3 {
    color: #111827 !important;
}

/* --- White-on-dark exceptions (must come AFTER the rule above) --- */
.brandit-dashboard-banner-content h2,
.brandit-dashboard-banner-content h2 *,
.brandit-guest-hero h1,
.brandit-guest-hero-left h1,
.brandit-profile-fullname,
.brandit-password-section h3,
.brandit-credits-balance h3,
.brandit-guest-auth-bar h1,
.brandit-guest-auth-bar h2,
.brandit-guest-auth-bar h3,
.brandit-guest-auth-bar h4 {
    color: #ffffff !important;
}

/* ====================================================== */
/* ========== BUSINESS PROFILE CONTAINER ================ */
/* ====================================================== */

.brandit-business-profile-container {
    margin-bottom: 24px;
}

.brandit-business-profile-container > div {
    background: linear-gradient(135deg, rgba(66, 8, 204, 0.03), rgba(212, 2, 83, 0.03));
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-bottom: 20px;
    position: relative;
}

.brandit-business-profile-container .business-profile-label {
    position: absolute;
    top: -12px;
    left: 16px;
    background: var(--bg-main);
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brandit-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ====================================================== */
/* ========== NEW BUSINESS PROFILE SECTION ============== */
/* ====================================================== */

.brandit-business-profile-section {
    background: linear-gradient(135deg, rgba(66, 8, 204, 0.03), rgba(212, 2, 83, 0.03));
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-bottom: 24px;
}

.brandit-business-profile-fullwidth {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.brandit-select-fullwidth {
    width: 100% !important;
    min-width: 100% !important;
}

/* ====================================================== */
/* ========== BUSINESS PROFILE GRID LAYOUT ============== */
/* ====================================================== */

.brandit-profiles-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 20px !important;
}

@media (min-width: 1200px) {
    .brandit-profiles-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .brandit-profiles-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

.brandit-profile-card {
    background: var(--bg-main);
    border-radius: var(--radius-md);
    padding: 20px;
    border: 1px solid var(--border-light);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.brandit-profile-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--brandit-primary);
    transform: translateY(-2px);
}

.brandit-profile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.brandit-profile-card-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
    border: 2px solid var(--brandit-primary);
}

.brandit-profile-card-avatar {
    width: 48px;
    height: 48px;
    background: var(--brand-gradient);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 20px;
}

.brandit-profile-card-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: var(--transition);
    color: var(--text-muted);
}

.brandit-profile-card-menu-btn:hover {
    background: var(--bg-soft);
    color: var(--brandit-primary);
}

.brandit-profile-card-body {
    flex: 1;
    margin-bottom: 12px;
}

.brandit-profile-card-body h4 {
    margin: 0;
    font-size: 16px;
    color: #000;
    font-weight: 600;
}

.brandit-profile-card-body p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.brandit-profile-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.brandit-profile-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.brandit-profile-card-colors {
    display: flex;
    gap: 8px;
}

.brandit-profile-color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.brandit-profile-default-badge {
    background: var(--brandit-success);
    color: white;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
    margin-left: 8px;
}

/* ====================================================== */
/* ========== PROMPT CHAT WINDOW ======================= */
/* ====================================================== */

.brandit-prompt-chat-window {
    position: relative;
    margin-bottom: 20px;
}

.brandit-prompt-chat-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.brandit-prompt-chat-hint {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

/* ====================================================== */
/* ========== FLYER RESULT SECTION ====================== */
/* ====================================================== */

.brandit-flyer-result {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid var(--border-soft);
}

/* ====================================================== */
/* ========== RESULT GALLERY OVERLAY BUTTONS =========== */
/* ====================================================== */

.brandit-result-overlay button {
    padding: 10px 20px;
    border-radius: 30px;
    border: none;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: white;
    white-space: nowrap;
    flex: 0 1 auto;
    min-height: 40px;
}

.brandit-result-view {
    background: var(--brand-gradient);
}

.brandit-result-view:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-brand);
}

.brandit-result-download {
    background: var(--success-gradient);
}

.brandit-result-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.brandit-result-overlay .brandit-share-btn { background: linear-gradient(135deg, #25D366, #128C7E); }
.brandit-result-overlay .brandit-share-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4); }
.brandit-share-btn { white-space: nowrap; }

/* ====================================================== */
/* ========== FLYER PROCESSING - PROGRESS BAR ONLY ====== */
/* ====================================================== */

.flyer-processing {
    text-align: center;
    padding: 32px 20px;
    margin-top: 20px;
    display: none;
}

.flyer-processing .progress-container {
    background: rgba(66, 8, 204, 0.08);
    border-radius: 20px;
    height: 6px;
    max-width: 500px;
    margin: 16px auto;
    overflow: hidden;
}

.flyer-processing .progress-bar {
    width: 0%;
    height: 100%;
    background: var(--brand-gradient);
    border-radius: 20px;
    transition: width 0.5s ease;
}

.flyer-processing .loader-message {
    font-size: 14px;
    color: var(--text-main);
    font-weight: 500;
    margin: 0 0 8px;
}

.flyer-processing .brandit-loader-subtitle {
    font-size: 11px;
    color: var(--brandit-success);
    font-weight: 500;
    margin-top: 8px;
}

.flyer-processing .brandit-premium-loader .brandit-loader-spinner {
    display: none !important;
}

.flyer-processing .brandit-premium-loader .brandit-loader-ring,
.flyer-processing .brandit-premium-loader .brandit-loader-dot {
    display: none !important;
}

.flyer-processing .brandit-premium-loader {
    padding: 16px 20px;
    background: transparent;
}

.flyer-processing .brandit-premium-loader .brandit-progress-container {
    display: none;
}

.brandit-profile-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.brandit-profile-section-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--brandit-primary);
}

.brandit-profile-section-body {
    width: 100%;
}

.brandit-profile-dropdown-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.brandit-profile-dropdown-row select {
    flex: 1;
    min-width: 200px;
}

#profile-prefill-indicator {
    display: none;
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(16, 185, 129, 0.08);
    border-radius: 8px;
    border-left: 3px solid var(--brandit-success);
}

#profile-prefill-indicator span {
    font-size: 13px;
    color: var(--brandit-success);
    font-weight: 500;
}

@media (max-width: 768px) {
    .brandit-profile-dropdown-row {
        flex-direction: column;
    }
    
    .brandit-profile-dropdown-row select,
    .brandit-profile-dropdown-row button {
        width: 100%;
    }
}

/* ====================================================== */
/* ========== DASHBOARD BANNER ========================= */
/* ====================================================== */

.brandit-dashboard-banner {
    display: flex;
    align-items: center;
    gap: 28px;
    background: linear-gradient(120deg, #efe9fc 0%, #f6f0fb 55%, #fdeef6 100%);
    border: 1px solid #ece6fb;
    border-radius: 20px;
    padding: 26px 32px;
    margin-top: 0 !important;
    margin-bottom: 24px;
    animation: slideDownBanner 0.4s ease-out;
}
.brandit-db-banner-art { flex: 0 0 auto; width: 200px; }
.brandit-db-banner-art svg { width: 100%; height: auto; display: block; }
.brandit-db-banner-copy {
    flex: 1 1 auto;
    font-size: 20px;
    line-height: 1.5;
    color: #1f2937;
    font-weight: 500;
}
.brandit-db-banner-copy strong { color: var(--brandit-primary, #4208cc); font-weight: 800; }
.brandit-db-banner-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.brandit-dashboard-banner #setup-business-profile-btn,
.brandit-db-banner-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #4208cc, #6d28d9) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 30px;
    padding: 15px 30px !important;
    font-size: 16px !important;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(66, 8, 204, 0.25);
    white-space: nowrap;
    transition: var(--transition);
}
.brandit-dashboard-banner #setup-business-profile-btn:hover,
.brandit-db-banner-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(66, 8, 204, 0.3);
    color: #fff !important;
}
.brandit-db-banner-note { font-size: 13px; color: #9ca3af; font-weight: 500; }

/* ---- Merged flyer Background section (Solid Color / Upload Image toggle) ---- */
.bfw-bg-section {
    background: #f7f6fb;
    border: 1px solid #ececf5;
    border-radius: 14px;
    padding: 20px;
    margin-top: 10px;
}
.bfw-bg-head { display: flex; align-items: baseline; gap: 6px; }
.bfw-bg-title { font-size: 15px; font-weight: 700; color: var(--brandit-primary, #4208cc); }
.bfw-bg-optional { font-size: 13px; color: #9ca3af; font-weight: 500; }
.bfw-bg-sub { font-size: 13px; color: #6b7280; margin: 4px 0 14px; }
.bfw-bg-toggle {
    display: flex;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #e6e2f2;
    border-radius: 12px;
    padding: 6px;
}
.bfw-bg-tab {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border: 1.5px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #4b5563;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.bfw-bg-tab svg { flex-shrink: 0; }
.bfw-bg-tab .bd-icon { display: inline-flex; align-items: center; line-height: 0; }
.bfw-bg-tab .bd-icon svg { width: 18px; height: 18px; }
.brandit-photo-option-emoji .bd-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.brandit-photo-option-emoji .bd-icon svg { width: 30px; height: 30px; }
.bfw-bg-tab.active {
    background: #f4efff;
    border-color: var(--brandit-primary, #7c3aed);
    color: var(--brandit-primary, #6d28d9);
}
.bfw-bg-tab-short { display: none; }
.bfw-bg-panel { margin-top: 14px; }
.bfw-bg-hint { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: #6b7280; margin-top: 10px; }
@media (max-width: 600px) {
    .bfw-bg-section { padding: 16px; }
    .bfw-bg-tab { padding: 12px 8px; font-size: 13px; gap: 6px; }
    .bfw-bg-tab-full { display: none; }
    .bfw-bg-tab-short { display: inline; }
}
.brandit-dashboard-partnership {
    text-align: center;
    font-size: 13px;
    color: #6b7280;
    margin: 28px 0 6px;
}
.brandit-dashboard-partnership a {
    color: var(--brandit-primary, #4208cc);
    font-weight: 600;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .brandit-dashboard-banner {
        gap: 14px;
        padding: 20px;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    /* Mobile: hide the illustration, keep only the copy + button */
    .brandit-db-banner-art { display: none; }
    .brandit-db-banner-copy { flex: 1 1 100%; font-size: 16px; }
    .brandit-db-banner-actions { flex: 1 1 100%; }
    .brandit-dashboard-banner #setup-business-profile-btn,
    .brandit-db-banner-btn { width: 100%; padding: 14px 20px !important; }
}

#brandit-dynamic-content {
    margin-top: 0 !important;
    padding-top: 20px !important;   /* consistent gap below the sticky header (desktop) */
}
@media (max-width: 768px) {
    #brandit-dynamic-content { padding-top: 16px !important; }  /* adjusted for mobile */
}

#brandit-dynamic-content > *:first-child {
    margin-top: 0 !important;
}

.brandit-form-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 0;
    flex-wrap: wrap;
}

.brandit-form-subtitle {
    width: 100%;
    flex-basis: 100%;
    margin: 6px 0 0;
    font-size: 15px;
    color: var(--text-muted);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    display: none;
}

.brandit-free-gen-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--brandit-success);
    color: #fff;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 10px;
    white-space: nowrap;
    vertical-align: middle;
}
.brandit-free-gen-badge.is-warning { background: var(--brandit-warning); }

@media (max-width: 1024px) {
    .brandit-form-subtitle { display: block; }
}

@media (max-width: 768px) {
    .brandit-free-gen-badge {
        margin-left: 0;
        margin-top: 6px;
        font-size: 11px;
        padding: 5px 12px;
    }
}

.brandit-mode-toggle {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
    background: var(--bg-soft);
    padding: 6px;
    border-radius: var(--radius-lg);
    width: fit-content;
}

.brandit-mode-toggle-wrapper {
    margin-bottom: 28px;
}

.brandit-generator-view {
    background: var(--bg-soft);
    min-height: 100vh;
    padding: 20px 32px 40px;
}

/* ====================================================== */
/* ========== UNIFIED FLYER SELECT DROPDOWNS =========== */
/* ====================================================== */

.brandit-flyer-select,
#flyer-type-select,
#brandit-flyer-industry,
#brandit-flyer-subsector,
#event-type-select,
#specify-select,
#flyer-dimension-select,
#flyer-mood,
#business-profile-select {
    width: 100% !important;
    padding: 14px 40px 14px 16px !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--border-soft) !important;
    font-size: 15px !important;
    background: var(--bg-main) !important;
    min-height: 48px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 1.5L7 6.5L13 1.5' stroke='%234208cc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px 8px !important;
    transition: var(--transition) !important;
}

.brandit-flyer-select:focus,
#flyer-type-select:focus,
#brandit-flyer-industry:focus,
#brandit-flyer-subsector:focus,
#event-type-select:focus,
#specify-select:focus,
#flyer-dimension-select:focus,
#flyer-mood:focus,
#business-profile-select:focus {
    outline: none !important;
    border-color: var(--brandit-primary) !important;
    box-shadow: 0 0 0 3px rgba(66, 8, 204, 0.1) !important;
}

/* ====================================================== */
/* ========== IMPROVED LABEL SPACING =================== */
/* ====================================================== */

.brandit-form-group,
.form-group,
.brandit-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--bd-field-gap);
    margin-bottom: var(--bd-group-gap);
}

.brandit-form-group label,
.form-group label,
.brandit-form-field label {
    margin-bottom: 0;            /* rely on the flex gap for a single rhythm */
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.4;
}

.brandit-form-group.compact {
    margin-bottom: 18px;
    gap: 8px;
}

.brandit-form-group.compact label {
    margin-bottom: 4px;
    font-size: 13px;
}

.brandit-form-group.compact input {
    padding: 10px 12px;
    font-size: 14px;
}

.brandit-form-group.full-width {
    grid-column: span 2;
}

/* ====================================================== */
/* ========== INVOICE FORM SPECIFIC SPACING ============= */
/* ====================================================== */

.brandit-invoice-section {
    margin-bottom: 28px;
    padding: 24px;
    border-radius: var(--radius-md);
    background: var(--bg-soft);
    border: 1px solid var(--border-light);
}

.brandit-invoice-section h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--text-main);
}

.brandit-invoice-section .brandit-form-field {
    margin-bottom: 20px;
}

.brandit-invoice-section .brandit-form-field label {
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ====================================================== */
/* ========== CONTACT SECTION STYLES ==================== */
/* ====================================================== */

.brandit-contact-section {
    margin-top: 8px;
    margin-bottom: 28px;
    padding: 22px;
    background: linear-gradient(135deg, rgba(66, 8, 204, 0.02), rgba(212, 2, 83, 0.02));
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    position: relative;
}

.brandit-contact-section::before {
    content: '📋 Contact Information';
    position: absolute;
    top: -12px;
    left: 16px;
    background: var(--bg-main);
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brandit-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.brandit-contact-section .form-group {
    margin-bottom: 20px;
}

.brandit-contact-section .form-group label {
    margin-bottom: 8px;
    font-weight: 500;
}

/* ====================================================== */
/* ========== PRODUCTS SECTION STYLES =================== */
/* ====================================================== */

.products-section {
    background: linear-gradient(135deg, rgba(66, 8, 204, 0.02), rgba(212, 2, 83, 0.02));
    border-radius: var(--radius-md);
    padding: 22px;
    margin-bottom: 28px;
    border: 1px solid var(--border-light);
}

.products-section label {
    font-weight: 600;
    margin-bottom: 18px;
    display: block;
    color: var(--brandit-primary);
}

.product-details-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-name-input,
.product-price-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-soft);
    font-size: 14px;
    transition: var(--transition);
    background: var(--bg-main);
}

/* ====================================================== */
/* ========== PRODUCT CARD UPDATED ====================== */
/* ====================================================== */

.product-card {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 16px;
    margin-bottom: 16px;
    align-items: center;
    padding: 16px;
    background: var(--bg-main);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.product-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--brandit-primary);
}

.product-image-col {
    min-width: 120px;
}

.product-image-upload {
    border: 2px dashed var(--brandit-primary);
    border-radius: 16px !important;
    padding: 28px 16px;
    text-align: center;
    background: var(--bg-soft);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.product-image-upload:hover {
    background: var(--bg-main);
    border-color: var(--brandit-secondary);
}

.product-image-upload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
}

.product-image-upload .upload-icon {
    font-size: 28px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brandit-primary);
}

.product-image-upload .upload-icon svg {
    width: 36px;
    height: 36px;
    stroke: var(--brandit-primary);
}

.product-image-upload .upload-text {
    font-size: 13px;
    color: var(--text-muted);
    display: block;
    text-align: center;
    line-height: 1.4;
}

.product-image-preview {
    position: relative;
    display: inline-block;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    background: white;
}

.product-image-preview:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.product-image-preview img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 2px solid var(--brandit-primary);
    display: block;
}

.remove-product-preview {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--close-gradient);
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    z-index: 10;
}

.remove-product-preview:hover {
    transform: scale(1.15);
    box-shadow: var(--shadow-md);
    background: linear-gradient(135deg, #ff0000, #990000);
}

.product-name-input,
.product-price-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1.5px solid var(--border-soft);
    font-size: 14px;
    transition: var(--transition);
    background: var(--bg-main);
    min-height: 44px;
}

.product-name-input:focus,
.product-price-input:focus {
    outline: none;
    border-color: var(--brandit-primary);
    box-shadow: 0 0 0 3px rgba(66, 8, 204, 0.1);
}

.product-delete-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-product-btn {
    background: var(--close-gradient);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-product-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-delete);
}

@media (max-width: 768px) {
    .product-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .product-image-col {
        min-width: 100%;
    }
    
    .product-image-upload {
        min-height: 100px;
    }
    
    .product-delete-col {
        justify-content: flex-end;
    }
}

/* ====================================================== */
/* ========== SPEAKER CARD STYLING ====================== */
/* ====================================================== */

.speaker-card {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 16px;
    margin-bottom: 16px;
    align-items: center;
    padding: 16px;
    background: var(--bg-main);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.speaker-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--brandit-primary);
}

.speaker-image-col {
    min-width: 120px;
}

.speaker-image-upload {
    border: 2px dashed var(--brandit-primary);
    border-radius: 16px;
    padding: 28px 16px;
    text-align: center;
    background: var(--bg-soft);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.speaker-image-upload:hover {
    background: var(--bg-main);
    border-color: var(--brandit-secondary);
}

.speaker-image-upload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
}

.speaker-image-upload .upload-icon {
    font-size: 28px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brandit-primary);
}

.speaker-image-upload .upload-icon svg {
    width: 36px;
    height: 36px;
    stroke: var(--brandit-primary);
}

.speaker-image-upload .upload-text {
    font-size: 13px;
    color: var(--text-muted);
    display: block;
    text-align: center;
    line-height: 1.4;
}

.speaker-image-preview {
    position: relative;
    display: inline-block;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    background: white;
}

.speaker-image-preview:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.speaker-image-preview img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 2px solid var(--brandit-primary);
    display: block;
}

.remove-speaker-preview {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--close-gradient);
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    z-index: 10;
}

.remove-speaker-preview:hover {
    transform: scale(1.15);
    box-shadow: var(--shadow-md);
    background: linear-gradient(135deg, #ff0000, #990000);
}

.speaker-details-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.speaker-details-col .bfw-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1.5px solid var(--border-soft);
    font-size: 14px;
    transition: var(--transition);
    background: var(--bg-main);
    min-height: 44px;
}

.speaker-details-col .bfw-input:focus {
    outline: none;
    border-color: var(--brandit-primary);
    box-shadow: 0 0 0 3px rgba(66, 8, 204, 0.1);
}

.speaker-delete-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-speaker-btn {
    background: var(--close-gradient);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-speaker-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-delete);
}

@media (max-width: 768px) {
    .speaker-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .speaker-image-col {
        min-width: 100%;
    }
    
    .speaker-image-upload {
        min-height: 100px;
    }
    
    .speaker-delete-col {
        justify-content: flex-end;
    }
}

/* ====================================================== */
/* ========== PHOTOS SECTION STYLES ===================== */
/* ====================================================== */

.photos-section {
    background: var(--bg-soft);
    border-radius: var(--radius-md);
    padding: 22px;
    margin-bottom: 28px;
    border: 1px solid var(--border-light);
}

.photos-section label {
    font-weight: 600;
    margin-bottom: 18px;
    display: block;
}

.photo-row {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 16px;
    margin-bottom: 16px;
    align-items: center;
    padding: 12px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

.photo-upload-col {
    min-width: 120px;
}

.photo-preview-small {
    margin-top: 8px;
    position: relative;
    display: inline-block;
}

.photo-preview-small img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 2px solid var(--brandit-primary);
}

.remove-photo-preview {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--close-gradient);
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-photo-btn,
.photo-delete-col .remove-photo-btn {
    background: var(--close-gradient);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: var(--transition);
}

.remove-photo-btn:hover,
.photo-delete-col .remove-photo-btn:hover {
    transform: scale(1.05);
}

/* ====================================================== */
/* ========== COLOR PICKER GROUP STYLES ================= */
/* ====================================================== */

.brandit-color-picker-group {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
}

.brandit-color-input-wrapper {
    flex: 1;
    min-width: 120px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.brandit-color-input {
    width: 48px;
    min-width: 48px;
    flex: 0 0 48px;
    height: 44px !important;
    padding: 4px !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--border-soft);
    cursor: pointer;
}

.brandit-color-hex-input {
    flex: 1;
    min-width: 0;
}

.color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    border: 1px solid var(--border-light);
}

.color-preview-bar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.color-input-group {
    flex: 1;
    display: flex;
    gap: 8px;
    align-items: center;
}

.color-input {
    width: 50px;
    height: 40px;
    border-radius: 8px;
    border: 1.5px solid var(--border-soft);
    cursor: pointer;
}

.color-hex-input {
    flex: 1;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1.5px solid var(--border-soft);
    font-size: 14px;
    font-family: monospace;
}

/* ====================================================== */
/* ========== GLOBAL FONT CONSISTENCY ================== */
/* ====================================================== */

body,
.brandit-container,
.brandit-guest-view,
.brandit-logo-generator-widget,
input,
select,
textarea,
button {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif !important;
    color: #666;
}

/* These specific elements sit on dark/gradient panels and need white text.
   NOTE: do NOT blanket all h1-h6 white — that turns readable titles invisible
   on light backgrounds. Keep this list explicit. */
.brandit-profile-fullname,
.brandit-password-section h3,
.brandit-credits-balance h3 {
    color: white !important;
    font-weight: 600 !important;
}

.brandit-dashboard-card h3,
.brandit-guest-card h3,
.brandit-logo-header h3,
.brandit-invoice-section h4,
.brandit-history-header h2 {
    color: #111827 !important;
    font-weight: 600 !important;
}

/* ============================================================== */
/* Form Screen Titles - BLACK and LEFT-ALIGNED (Desktop + Mobile) */
/* ============================================================== */
.brandit-form-title {
    color: #111827 !important;
    text-align: left !important;
}

.brandit-form-header-wrapper {
    text-align: left !important;
}

.invoice-preview h2,
.invoice-preview h3,
.invoice-preview h4,
.invoice-preview strong,
.invoice-preview .company-details-title,
.invoice-preview .bill-to-title,
.invoice-preview .payment-title,
.invoice-preview .notes-title {
    color: #000000 !important;
    font-weight: 600 !important;
}

.invoice-preview,
.invoice-preview p,
.invoice-preview span,
.invoice-preview td,
.invoice-preview .company-details-text,
.invoice-preview .bill-to-text,
.invoice-preview .payment-text,
.invoice-preview .notes-text {
    color: #666666 !important;
}

.invoice-preview thead tr th {
    background: var(--brand-gradient) !important;
    color: white !important;
    font-weight: 600 !important;
}

.brandit-dashboard-banner-content h2 {
    color: white !important;
}

.brandit-guest-hero h1 {
    font-size: 48px;
    color: white !important;
}

/* ====================================================== */
/* ========== HEADER LOGO STYLES ======================= */
/* ====================================================== */

.brandit-header-logo {
    height: 50px;
    width: auto;
    max-height: 55px;
}

/* ====================================================== */
/* ========== DROPDOWN ARROW SPACING =================== */
/* ====================================================== */

select,
.brandit-form-group select,
.brandit-invoice-form select,
.brandit-business-card-form select,
.brandit-flyer-form select,
.flyer-form-container select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 1.5L7 6.5L13 1.5' stroke='%234208cc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 8px;
    padding-right: 40px !important;
}

select::-ms-expand {
    display: none;
}

/* ====================================================== */
/* ========== HIDE EMPTY PREVIEW CONTAINERS ============ */
/* ====================================================== */

.brandit-upload-preview-grid:empty,
.brandit-partner-logos-preview:empty,
#brandit-bc-upload-preview:empty,
#brandit-flyer-logo-preview:empty,
#brandit-flyer-background-preview:empty,
#brandit-flyer-foreground-preview:empty,
#brandit-flyer-partner-preview:empty,
#brandit-invoice-logo-preview:empty,
.brandit-prompt-file-list:empty,
.upload-preview-grid:empty {
    display: none !important;
}

.brandit-upload-preview-grid:not(:empty),
.brandit-partner-logos-preview:not(:empty),
#brandit-bc-upload-preview:not(:empty),
#brandit-flyer-logo-preview:not(:empty),
#brandit-flyer-background-preview:not(:empty),
#brandit-flyer-foreground-preview:not(:empty),
#brandit-flyer-partner-preview:not(:empty),
#brandit-invoice-logo-preview:not(:empty),
.brandit-prompt-file-list:not(:empty),
.upload-preview-grid:not(:empty) {
    display: flex !important;
}

/* ====================================================== */
/* ========== PROMPT UPLOAD - INLINE WITH TEXTAREA ===== */
/* ====================================================== */

.brandit-prompt-upload-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 18px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border-soft);
    cursor: pointer;
    transition: var(--transition);
}

.brandit-prompt-upload-wrapper:hover {
    border-color: var(--brandit-primary);
    background: rgba(66, 8, 204, 0.02);
}

.brandit-prompt-upload-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.brandit-prompt-upload-text {
    font-size: 13px;
    color: var(--text-muted);
    flex: 1;
}

.brandit-prompt-file-input {
    display: none;
}

.brandit-prompt-file-list {
    margin-top: 16px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

/* ====================================================== */
/* ========== MODE TOGGLE BUTTON OUTLINES ============== */
/* ====================================================== */

.brandit-mode-btn {
    padding: 12px 28px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    background: transparent;
    border: 2px solid transparent;
    color: var(--text-muted);
    transition: var(--transition);
    min-height: 44px;
}

.brandit-mode-btn.active {
    background: var(--brand-gradient) !important;
    color: white !important;
    border: 2px solid #4208cc !important;
    outline: 3px solid rgba(66, 8, 204, 0.3) !important;
    outline-offset: 2px !important;
    box-shadow: 0 4px 12px rgba(66, 8, 204, 0.4) !important;
    transform: scale(1.02);
}

.brandit-mode-btn:not(.active) {
    background: transparent;
    color: var(--text-muted);
    border: 2px solid rgba(66, 8, 204, 0.25) !important;
    opacity: 0.9;
}

.brandit-mode-btn:not(.active):hover {
    background: rgba(66, 8, 204, 0.05);
    color: var(--brandit-primary);
    border-color: var(--brandit-primary) !important;
    opacity: 1;
}

.brandit-mode-btn:focus-visible {
    outline: 3px solid var(--brandit-primary) !important;
    outline-offset: 2px !important;
    border: 2px solid #4208cc !important;
}

.brandit-mode-btn:focus {
    outline: none;
}

/* ====================================================== */
/* ========== FORM ELEMENTS STYLING ==================== */
/* ====================================================== */

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.form-control {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--border-soft);
    font-size: 15px;
    transition: var(--transition);
    background: var(--bg-main);
    min-height: 48px;
}

.form-control:focus {
    outline: none;
    border-color: var(--brandit-primary);
    box-shadow: 0 0 0 3px rgba(66, 8, 204, 0.1);
}

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

/* ====================================================== */
/* ========== UNIFIED UPLOAD BOX STYLES ================= */
/* ====================================================== */

.upload-box,
.brandit-file-upload {
    border: 2px dashed var(--brandit-primary);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    background: var(--bg-soft);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    margin-bottom: 0;
}

/* Icon + label sit side by side (e.g. "Upload logo" beside the upload icon). */
#brandit-bc-logo-upload-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
#brandit-bc-logo-upload-area .upload-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--brandit-primary);
}
#brandit-bc-logo-upload-area .upload-icon {
    line-height: 0;
}

.upload-box:hover,
.brandit-file-upload:hover {
    background: var(--bg-main);
    border-color: var(--brandit-secondary);
}

.upload-box input[type="file"],
.brandit-file-upload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-box .upload-icon,
.brandit-file-upload .brandit-upload-icon,
.brandit-upload-icon {
    font-size: 36px;
    margin-bottom: 8px;
    display: block;
    color: var(--brandit-primary);
}

.upload-box .upload-text,
.brandit-file-upload .brandit-upload-text,
.brandit-upload-text {
    font-size: 13px;
    color: var(--text-muted);
    display: block;
    text-align: center;
}

.upload-box-small {
    border: 2px dashed var(--brandit-primary);
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    background: var(--bg-soft);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.upload-box-small:hover {
    background: var(--bg-main);
    border-color: var(--brandit-secondary);
}

.upload-box-small input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-box-small .upload-icon {
    font-size: 28px;
    margin-bottom: 4px;
    display: block;
    color: var(--brandit-primary);
}

.upload-box-small .upload-text {
    font-size: 12px;
    color: var(--text-muted);
}

/* ====================================================== */
/* ========== GENERATE BUTTON STYLES =================== */
/* ====================================================== */

.btn-create-designs {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 16px 36px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    min-width: 220px;
    margin: 20px auto 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-create-designs:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    background: linear-gradient(135deg, #059669, #047857);
}

.form-actions {
    text-align: center;
    padding: 8px 0 16px;
}

/* ====================================================== */
/* ========== SIDEBAR STYLES =========================== */
/* ====================================================== */

.brandit-sidebar {
    width: var(--sidebar-width);
    background: var(--bg-main);
    border-right: 1px solid var(--border-soft);
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    transition: transform 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.brandit-sidebar-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.brandit-sidebar-header {
    padding: 24px;
    border-bottom: 1px solid var(--border-soft);
    text-align: center;
}

.brandit-sidebar-header .brandit-header-logo {
    max-width: 180px;
    height: auto;
    margin: 0 auto;
    display: block;
}

.brandit-sidebar-nav {
    flex: 1;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.brandit-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    font-weight: 500;
    cursor: pointer;
    min-height: 48px;
}

.brandit-nav-item:hover {
    background: rgba(66, 8, 204, 0.05);
    color: var(--brandit-primary);
}

.brandit-nav-item.active {
    background: linear-gradient(135deg, rgba(66, 8, 204, 0.1), rgba(212, 2, 83, 0.1));
    color: var(--brandit-primary);
    font-weight: 600;
}

.brandit-nav-item .nav-text {
    font-size: 15px;
    flex: 1;
}

.brandit-nav-item .nav-count {
    margin-left: auto;
    font-size: 12px;
    background: rgba(66, 8, 204, 0.1);
    padding: 2px 8px;
    border-radius: 20px;
    color: var(--brandit-primary);
}

.brandit-sidebar-footer {
    padding: 20px;
    border-top: 1px solid var(--border-soft);
    margin-top: auto;
}

.brandit-sidebar-logout-btn {
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: 1px solid var(--brandit-error);
    color: var(--brandit-error);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
}

.brandit-sidebar-logout-btn .brandit-sidebar-icon {
    width: 24px;
    height: 24px;
    margin: 0;
}

.brandit-sidebar-logout-btn:hover {
    background: var(--close-gradient);
    color: white;
    transform: translateY(-2px);
}

.brandit-sidebar-logout-btn:hover .brandit-sidebar-icon {
    filter: brightness(0) invert(1);
}

/* ====================================================== */
/* ========== TOP NAVBAR STYLES ======================== */
/* ====================================================== */

.brandit-navbar-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

.brandit-credit-display {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-soft);
    padding: 8px 20px;
    border-radius: 50px;
    white-space: nowrap;
}

.brandit-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.brandit-credit-amount {
    font-weight: 700;
    font-size: 16px;
    color: var(--brandit-primary);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.brandit-credit-icon {
    height: 18px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ====================================================== */
/* ========== CONSISTENT GRADIENT STYLING =============== */
/* ====================================================== */

.brandit-generate-btn,
.brandit-prompt-generate-btn,
.brandit-card-btn,
.brandit-purchase-btn,
.brandit-modal-download,
.brandit-add-credits-btn,
.brandit-guest-card-btn,
.brandit-guest-signup-btn,
.brandit-guest-promo-signup,
.brandit-empty-state-btn,
#brandit-login-submit,
#brandit-signup-submit,
#brandit-forgot-submit,
#brandit-verify-submit,
#brandit-reset-submit,
#auth-prompt-signup-btn,
.success-download-btn,
#save-business-profile-btn,
#bp-modal-save-btn,
#add-business-profile-btn,
#add-new-profile-from-manage-btn,
.brandit-profile-edit-btn,
.manage-profile-edit-btn,
.brandit-dropdown-edit,
#toggle-delete-mode,
#add-product-btn,
.brandit-business-add-btn,
.brandit-setup-business-btn {
    background: var(--brand-gradient) !important;
    color: white !important;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    min-height: 44px;
    white-space: nowrap;
}

.brandit-generate-btn:hover:not(:disabled),
.brandit-prompt-generate-btn:hover:not(:disabled),
.brandit-card-btn:hover,
.brandit-purchase-btn:hover,
.brandit-modal-download:hover,
.brandit-add-credits-btn:hover,
.brandit-guest-card-btn:hover,
.brandit-guest-signup-btn:hover,
.brandit-guest-promo-signup:hover,
.brandit-empty-state-btn:hover,
.success-download-btn:hover,
#save-business-profile-btn:hover,
#bp-modal-save-btn:hover,
#add-business-profile-btn:hover,
#add-new-profile-from-manage-btn:hover,
.brandit-profile-edit-btn:hover,
.manage-profile-edit-btn:hover,
#toggle-delete-mode:hover,
#add-product-btn:hover,
.brandit-business-add-btn:hover,
.brandit-setup-business-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-brand) !important;
}

.brandit-add-credits-btn {
    padding: 8px 20px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    min-height: 40px;
}

/* Delete buttons gradient */
.brandit-remove-image,
.brandit-remove-flyer-logo,
.brandit-remove-background-photo,
.brandit-remove-foreground-photo,
.brandit-remove-partner-logo,
.brandit-remove-prompt-file,
.brandit-remove-invoice-logo,
.remove-photo-preview,
.brandit-remove-item,
.brandit-profile-delete-btn,
.manage-profile-delete-btn,
.brandit-dropdown-delete,
#bulk-delete-btn,
.remove-product-preview,
.remove-product-btn,
.brandit-history-delete-btn {
    background: var(--close-gradient) !important;
    color: white !important;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    min-height: 44px;
}

.remove-photo-preview,
.remove-product-preview,
.brandit-remove-image,
.brandit-remove-flyer-logo,
.brandit-remove-background-photo,
.brandit-remove-foreground-photo,
.brandit-remove-partner-logo,
.brandit-remove-prompt-file,
.brandit-remove-invoice-logo {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 26px;
    height: 26px;
    min-height: 26px;
    border-radius: 50%;
    padding: 0;
    font-size: 14px;
    font-weight: bold;
}

.remove-photo-btn,
.remove-product-btn,
.brandit-remove-item {
    min-width: 36px;
    min-height: 36px;
    border-radius: 8px;
    padding: 0;
    font-size: 18px;
    font-weight: bold;
}

.brandit-profile-delete-btn:hover,
.manage-profile-delete-btn:hover,
.brandit-dropdown-delete:hover,
#bulk-delete-btn:hover:not(:disabled),
.remove-product-preview:hover,
.remove-product-btn:hover,
.brandit-history-delete-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-delete) !important;
}

/* Outlined secondary buttons */
.brandit-history-action-btn,
.brandit-history-cancel-btn,
.brandit-modal-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
    min-height: 44px;
    white-space: nowrap;
    background: var(--bg-main);
    color: var(--text-secondary);
    border: 1.5px solid var(--border-soft);
}

.brandit-history-action-btn:hover,
.brandit-history-cancel-btn:hover,
.brandit-modal-close-btn:hover {
    border-color: var(--brandit-primary);
    color: var(--brandit-primary);
    background: rgba(66, 8, 204, 0.05);
    transform: translateY(-1px);
}

.brandit-history-action-btn.active-delete-mode {
    background: var(--brand-gradient) !important;
    color: white !important;
    border-color: transparent !important;
}

/* ====================================================== */
/* ========== DASHBOARD BANNER WITH ROBOT ============== */
/* ====================================================== */

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

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

.brandit-dashboard-banner-content {
    flex: 1;
}

.brandit-dashboard-banner-content h2 {
    font-size: 24px;
    margin-bottom: 8px;
    font-weight: 600;
    color: white !important;
}

.brandit-dashboard-banner-content p {
    font-size: 14px;
    opacity: 0.9;
    margin: 0;
}

.brandit-dashboard-robot img {
    max-width: 160px;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    display: block;
}

/* ====================================================== */
/* ========== DASHBOARD CARDS - FIXED LAYOUT =========== */
/* ====================================================== */

.brandit-dashboard-cards {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 28px !important;
    justify-content: center !important;
    margin-bottom: 40px;
}

.brandit-dashboard-card {
    background: var(--bg-main);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    transition: var(--transition);
    border: 1px solid var(--border-light);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    flex: 1 1 calc(25% - 28px) !important;
    min-width: 240px !important;
    max-width: 280px !important;
    display: flex;
    flex-direction: column;
}

.brandit-dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--brand-gradient);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.brandit-dashboard-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.brandit-dashboard-card:hover::before {
    transform: scaleX(1);
}

.brandit-card-icon img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin-bottom: 20px;
}

.brandit-dashboard-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--text-main);
}

.brandit-dashboard-card p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 24px;
    flex: 1;
}

.brandit-card-btn {
    padding: 12px 28px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 15px;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    min-height: 44px;
}

/* ====================================================== */
/* ========== GUEST VIEW - MODERN SAAS LANDING PAGE ===== */
/* ====================================================== */

.brandit-guest-view {
    background: #f7f7fb;
    min-height: 100vh;
    overflow-x: hidden;
}

.brandit-guest-auth-bar {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    max-width: 90%;
    width: auto;
    border-radius: 12px;
    padding: 12px 24px;
    box-shadow: var(--shadow-lg);
    animation: slideDown 0.4s ease-out;
}

.brandit-guest-auth-bar.success {
    background: var(--success-gradient);
    color: white;
}

.brandit-guest-auth-bar.info {
    background: var(--warning-gradient);
    color: white;
}

.brandit-guest-auth-bar.error {
    background: var(--close-gradient);
    color: white;
}

.brandit-guest-auth-bar.fade-out {
    animation: fadeOut 0.5s ease forwards;
}

@keyframes fadeOut {
    to { opacity: 0; transform: translateX(100%); }
}

.brandit-guest-header {
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.brandit-guest-header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brandit-guest-logo img {
    height: 50px;
    width: auto;
    max-height: 55px;
}

.brandit-guest-nav-buttons {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
}

.brandit-guest-login-link {
    color: var(--brandit-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: var(--transition);
    padding: 8px 16px;
    border-radius: 30px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

.brandit-guest-login-link:hover {
    background: rgba(66, 8, 204, 0.05);
}

.brandit-guest-signup-btn {
    padding: 12px 28px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(66, 8, 204, 0.2);
    min-height: 44px;
}

.brandit-guest-hero {
    background: linear-gradient(135deg, #6a00ff, #4000cc);
    padding: 80px 32px 120px;
    position: relative;
    overflow: visible;
}

.brandit-guest-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.brandit-guest-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.brandit-guest-hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.brandit-guest-hero-left {
    flex: 1;
    color: white;
}

.brandit-guest-hero-left h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.brandit-guest-hero-left p {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.95;
    max-width: 550px;
    color: rgba(255,255,255,0.9);
}

.brandit-guest-hero-right {
    flex: 1;
    display: flex;
    justify-content: center;
}

.brandit-guest-hero-robot {
    width: 100%;
    max-width: 320px;
}

.brandit-hero-robot-img {
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    animation: float 4s ease-in-out infinite;
    display: block;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.brandit-guest-cards-wrapper {
    position: relative;
    margin-top: -60px;
    margin-bottom: 60px;
    z-index: 10;
    padding: 0 32px;
    display: flex;
    flex-wrap: wrap;
}

.brandit-guest-cards-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.brandit-guest-cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
}
/* Guard: some themes/page builders inject stray <p>/<br> between the cards
   (e.g. wpautop wrapping HTML comments), which would occupy a grid cell and
   create an empty column. Only the cards themselves should be grid items. */
.brandit-guest-cards-grid > p,
.brandit-guest-cards-grid > br { display: none !important; }

.brandit-guest-card {
    background: var(--bg-main);
    border-radius: 24px;
    padding: 32px 24px;
    text-align: center;
    transition: var(--transition);
    border: 1px solid var(--border-light);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    flex: 1 1 calc(25% - 28px);
    min-width: 240px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
}

.brandit-guest-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--brand-gradient);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.brandit-guest-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
}

.brandit-guest-card:hover::before {
    transform: scaleX(1);
}

.brandit-guest-card-icon {
    margin-bottom: 24px;
}

.brandit-guest-card-icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.brandit-guest-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-main);
}

.brandit-guest-card p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 24px;
    flex: 1;
}

.brandit-guest-card-btn {
    padding: 12px 20px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 14px;
    width: 100%;
    margin-top: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 44px;
}

/* ====================================================== */
/* ========== GUEST PROMO SECTION ====================== */
/* ====================================================== */

.brandit-guest-promo {
    padding: 48px 32px;
    background: var(--bg-soft);
}

.brandit-guest-promo-container {
    max-width: 1200px;
    margin: 0 auto;
}

.brandit-guest-promo-card {
    background: linear-gradient(135deg, #a0d8ef, #caa6ff);
    border-radius: 28px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.brandit-guest-promo-left {
    flex: 1.5;
    position: relative;
    overflow: hidden;
    align-self: stretch;
}

.brandit-guest-promo-image {
    position: relative;
    height: 100%;
    min-height: 290px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brandit-guest-promo-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.brandit-guest-promo-success {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-md);
}

.brandit-guest-promo-success .success-icon {
    width: 48px;
    height: 48px;
    background: var(--brandit-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    font-weight: bold;
}

.brandit-guest-promo-success .success-text {
    flex: 1;
}

.brandit-guest-promo-success .success-text strong {
    display: block;
    font-size: 16px;
    color: var(--text-main);
    margin-bottom: 4px;
}

.brandit-guest-promo-success .success-text span {
    font-size: 13px;
    color: var(--text-muted);
}

.brandit-guest-promo-success .success-download-btn {
    padding: 10px 20px;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
    min-height: 40px;
}

.brandit-guest-promo-right {
    flex: 1;
    padding: 36px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brandit-guest-promo-right h2 {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--text-main);
    letter-spacing: -0.02em;
}

.brandit-guest-promo-right p {
    font-size: 15px;
    color: rgb(31, 30, 30);
    line-height: 1.55;
    margin-bottom: 22px;
}

.brandit-guest-promo-buttons {
    display: flex;
    gap: 18px;
    align-items: center;
}

.brandit-guest-promo-signup {
    padding: 12px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    min-height: 44px;
}

.brandit-guest-promo-login {
    color: var(--brandit-secondary, #d40253);
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    padding: 8px 12px;
    border-radius: 50px;
    transition: var(--transition);
    background: transparent;
    display: inline-flex;
    align-items: center;
}

.brandit-guest-promo-login:hover {
    background: transparent;
    transform: translateX(2px);
}

/* ====================================================== */
/* ========== FORM STYLES ============================== */
/* ====================================================== */

.brandit-form-container,
.brandit-business-card-form,
.brandit-invoice-form {
    max-width: 100%;
    background: var(--bg-main);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
}

.brandit-form-field input,
.brandit-form-field select,
.brandit-form-field textarea,
.brandit-business-name-field input,
.brandit-invoice-form input,
.brandit-invoice-form select,
.brandit-business-card-form input,
.brandit-business-card-form select,
.brandit-prompt-textarea,
.brandit-form-container input,
.brandit-form-container select {
    width: 100%;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1.5px solid var(--border-soft);
    background: var(--bg-main);
    font-size: 15px;
    transition: var(--transition);
    height: 56px;
}

.brandit-form-field textarea,
.brandit-invoice-form textarea,
.brandit-business-card-form textarea,
.brandit-prompt-textarea {
    height: auto;
    min-height: 120px;
    resize: vertical;
}

.brandit-form-field input:focus,
.brandit-form-field select:focus,
.brandit-form-field textarea:focus,
.brandit-prompt-textarea:focus {
    outline: none;
    border-color: var(--brandit-primary);
    box-shadow: 0 0 0 3px rgba(66, 8, 204, 0.1);
}

.brandit-generate-btn,
.brandit-prompt-generate-btn {
    width: 100%;
    max-width: 400px;
    margin: 24px auto 0;
    display: block;
    padding: 16px 24px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 16px;
    min-height: 56px;
}

.brandit-generate-btn:disabled,
.brandit-prompt-generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.brandit-intelligence-notice {
    background: linear-gradient(135deg, rgba(66, 8, 204, 0.05), rgba(212, 2, 83, 0.05));
    border-radius: var(--radius-sm);
    padding: 16px 24px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 3px solid var(--brandit-primary);
}

.brandit-intelligence-icon {
    font-size: 28px;
}

.brandit-intelligence-text {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ====================================================== */
/* ========== BUSINESS PROFILES GRID LAYOUT ============ */
/* ====================================================== */

@media (min-width: 769px) {
    .brandit-profiles-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    
    @media (min-width: 1200px) {
        .brandit-profiles-grid {
            grid-template-columns: repeat(3, 1fr) !important;
        }
    }
}

.brandit-business-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.brandit-business-title-section {
    margin-bottom: 28px;
}

.brandit-section-main-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

/* ====================================================== */
/* ========== MODAL STYLES ============================= */
/* ====================================================== */

.brandit-logo-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
}

.brandit-logo-modal.active {
    display: flex;
}

/* When any modal/overlay is open, lock the page behind it so there is a single
   scrollbar (the overlay's own) instead of two — fixes the login/signup/setup
   screens showing both the overlay scrollbar and a second, non-functioning
   page scrollbar. Locking the body is not enough: a tall page still lets the
   <html> element scroll, so we lock it as well. */
body.brandit-modal-open {
    overflow: hidden !important;
}
html:has(body.brandit-modal-open) {
    overflow: hidden !important;
}

.brandit-logo-modal-content {
    background: var(--bg-main);
    border-radius: var(--radius-lg);
    max-width: 900px;
    width: 95%;
    max-height: 90vh;
    position: relative;
    overflow-y: auto;
    pointer-events: auto;
}

#brandit-login-modal .brandit-logo-modal-content,
#brandit-signup-modal .brandit-logo-modal-content,
#brandit-forgot-password-modal .brandit-logo-modal-content,
#brandit-verify-code-modal .brandit-logo-modal-content,
#brandit-reset-password-modal .brandit-logo-modal-content,
#brandit-verify-email-modal .brandit-logo-modal-content,
#manage-profiles-modal .brandit-logo-modal-content {
    max-width: 380px !important;
}

.business-profile-form-modal .brandit-logo-modal-content {
    max-width: 600px !important;
}

.brandit-logo-modal-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--bg-soft);
    min-height: 300px;
}

.brandit-logo-modal-image-container img {
    max-width: 100%;
    max-height: 500px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.brandit-logo-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.brandit-logo-modal-close:hover {
    background: var(--brandit-error);
    transform: scale(1.1);
}

.brandit-modal-actions {
    display: flex;
    gap: 16px;
    padding: 28px;
    border-top: 1px solid var(--border-light);
    flex-wrap: wrap;
}

.brandit-modal-download {
    padding: 14px 24px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    flex: 1;
    min-height: 48px;
}

.brandit-invoice-preview-actions {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 20px 28px;
    border-top: 1px solid var(--border-light);
    flex-wrap: wrap;
}

.brandit-invoice-preview-actions button {
    min-width: 140px;
    padding: 14px 24px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    min-height: 48px;
}

.brandit-invoice-preview-actions button:first-child {
    color: white;
    border: none;
    background: var(--brand-gradient) !important;
}

.brandit-invoice-preview-actions button:last-child {
    background: var(--bg-soft);
    border: 1px solid var(--border-soft);
    color: var(--text-main);
}

.brandit-invoice-preview-actions button:last-child:hover {
    background: rgba(66, 8, 204, 0.05);
    border-color: var(--brandit-primary);
}

.brandit-auth-form {
    padding: 32px;
}

.brandit-auth-form h3 {
    margin: 0 0 24px;
    text-align: center;
    color: var(--text-main);
    font-size: 24px;
}

/* ====================================================== */
/* ========== AUTH ENHANCEMENTS ======================== */
/* ====================================================== */

.brandit-auth-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--brandit-error);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    text-align: center;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
    border-left: 3px solid var(--brandit-error);
}

.brandit-auth-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--brandit-success);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    text-align: center;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
    border-left: 3px solid var(--brandit-success);
}

.brandit-auth-loading {
    background: rgba(66, 8, 204, 0.1);
    color: var(--brandit-primary);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    text-align: center;
    margin-bottom: 16px;
    font-size: 13px;
}

.brandit-spinner-small {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: brandit-spin 0.6s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

@keyframes brandit-spin {
    to { transform: rotate(360deg); }
}

.brandit-auth-form input:focus {
    outline: none;
    border-color: var(--brandit-primary) !important;
    box-shadow: 0 0 0 3px rgba(66, 8, 204, 0.1) !important;
}

.brandit-auth-form a {
    color: var(--brandit-primary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.brandit-auth-form a:hover {
    text-decoration: underline;
    color: var(--brandit-secondary);
}

.brandit-forgot-password-link {
    text-align: center;
    margin-top: 12px;
    padding-top: 8px;
}

.brandit-forgot-password-link a {
    font-size: 13px;
    color: var(--text-muted);
}

.brandit-forgot-password-link a:hover {
    color: var(--brandit-primary);
}

.brandit-auth-form .brandit-form-group.compact {
    margin-bottom: 16px;
}

.brandit-auth-form .brandit-form-group.compact label {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}

.brandit-auth-form .brandit-form-group.compact input {
    padding: 12px 14px;
    font-size: 14px;
}

/* ====================================================== */
/* ========== PREMIUM LOADER STYLES ===================== */
/* ====================================================== */

.brandit-premium-loader {
    text-align: center;
    padding: 48px 20px;
    background: var(--bg-main);
    border-radius: var(--radius-lg);
}

.brandit-loader-spinner {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
}

.brandit-loader-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--brandit-primary);
    border-right-color: var(--brandit-secondary);
    animation: loaderSpin 1s linear infinite;
}

.brandit-loader-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: var(--brand-gradient);
    border-radius: 50%;
    animation: loaderPulse 1.5s ease-in-out infinite;
}

@keyframes loaderSpin {
    to { transform: rotate(360deg); }
}

@keyframes loaderPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

.brandit-premium-loader .loader-message {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 20px;
    min-height: 24px;
    transition: opacity 0.3s ease;
}

.brandit-premium-loader .brandit-progress-container {
    background: rgba(66, 8, 204, 0.08);
    border-radius: 20px;
    height: 4px;
    max-width: 400px;
    margin: 0 auto 16px;
    overflow: hidden;
}

.brandit-premium-loader .brandit-progress-bar {
    width: 0%;
    height: 100%;
    background: var(--brand-gradient);
    border-radius: 20px;
    transition: width 0.4s ease;
}

.brandit-loader-subtitle {
    font-size: 12px;
    color: var(--brandit-success);
    font-weight: 500;
    margin-top: 8px;
}

/* ====================================================== */
/* ========== TOAST NOTIFICATION ======================== */
/* ====================================================== */

.brandit-toast {
    position: fixed;
    top: 80px;
    right: 20px;
    color: white;
    padding: 14px 20px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    animation: toastSlideIn 0.3s ease;
    max-width: 400px;
}

.brandit-toast-exit {
    animation: toastSlideOut 0.4s ease forwards;
}

@keyframes toastSlideIn {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes toastSlideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(120%); opacity: 0; }
}

.toast-icon {
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ====================================================== */
/* ========== RESULT GALLERY =========================== */
/* ====================================================== */

.brandit-result-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.brandit-result-card {
    background: var(--bg-main);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-light);
    transition: var(--transition);
    cursor: pointer;
}

.brandit-result-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brandit-primary);
}

.brandit-result-image {
    position: relative;
    aspect-ratio: 1;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.brandit-result-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    transition: transform 0.3s ease;
}

.brandit-result-card:hover .brandit-result-image img {
    transform: scale(1.05);
}

.brandit-result-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px;
    flex-wrap: wrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.brandit-result-card:hover .brandit-result-overlay {
    opacity: 1;
}

.brandit-result-info {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border-light);
}

.brandit-result-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-main);
}

.brandit-result-badge {
    font-size: 11px;
    font-weight: 500;
    color: var(--brandit-success);
    background: rgba(16, 185, 129, 0.08);
    padding: 3px 10px;
    border-radius: 20px;
}

/* ====================================================== */
/* ========== HISTORY SECTION ========================== */
/* ====================================================== */

.brandit-history-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-soft);
    overflow-x: auto;
    padding-bottom: 4px;
}

.brandit-history-tab {
    padding: 12px 24px;
    background: transparent;
    border: none;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

.brandit-history-tab:hover {
    color: var(--brandit-primary);
}

.brandit-history-tab.active {
    color: var(--brandit-primary);
    font-weight: 600;
}

.brandit-history-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--brand-gradient);
}

.brandit-tab-count {
    background: rgba(66, 8, 204, 0.1);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brandit-primary);
}

.brandit-assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 8px;
}

.brandit-asset-card {
    position: relative;
    background: var(--bg-main);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid var(--border-light);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.brandit-asset-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--brandit-primary);
}

.brandit-asset-preview {
    aspect-ratio: 1;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.brandit-asset-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 200px;
    max-height: 200px;
}

.brandit-asset-info {
    padding: 14px 16px;
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 12px;
}

.brandit-asset-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.brandit-asset-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-main);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.brandit-asset-date {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    line-height: 1.4;
}

/* ====================================================== */
/* ========== HISTORY DELETE ICON ====================== */
/* ====================================================== */

.brandit-history-item-delete {
    color: var(--brandit-error) !important;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    padding: 6px 10px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    opacity: 0.7;
}

.brandit-history-item-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626 !important;
    opacity: 1;
    transform: scale(1.1);
}

.brandit-asset-card:hover .brandit-history-item-delete {
    opacity: 1;
}

.brandit-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-main);
    border-radius: var(--radius-lg);
    margin-top: 8px;
}

.brandit-empty-state-icon {
    font-size: 56px;
    margin-bottom: 20px;
}

.brandit-empty-state h3 {
    font-size: 22px;
    margin: 0 0 10px;
    color: var(--text-main);
}

.brandit-empty-state p {
    color: var(--text-muted);
    margin-bottom: 24px;
    font-size: 15px;
}

.brandit-empty-state-btn {
    padding: 14px 32px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    min-height: 48px;
}

/* ====================================================== */
/* Unified empty-state card (Businesses + Weekly content) */
/* Same width & height, centered on desktop and mobile.   */
/* ====================================================== */
.brandit-empty-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    min-height: 380px;
    margin: 40px auto;
    padding: 48px 36px;
    background: var(--bg-main, #fff);
    border: 1px solid var(--border-light, #eef0f4);
    border-radius: var(--radius-lg, 18px);
    box-shadow: var(--shadow-card, 0 18px 50px rgba(17,24,39,0.06));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.brandit-empty-card .bd-empty-icon {
    width: 84px; height: 84px; border-radius: 22px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #ede7ff, #f6ecff);
    color: var(--brandit-primary, #4208cc);
    margin-bottom: 22px;
}
.brandit-empty-card .bd-empty-icon svg { width: 40px; height: 40px; display:block; }
.brandit-empty-card h2,
.brandit-empty-card h3 {
    margin: 0 0 10px; font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1.25;
}
.brandit-empty-card p {
    margin: 0 0 26px; color: var(--text-muted, #6b7280); font-size: 15px; line-height: 1.7; max-width: 420px;
}
.brandit-empty-card .brandit-empty-card-btn {
    background: var(--brand-gradient, linear-gradient(135deg,#4208cc,#d40253));
    color: #fff; border: none; cursor: pointer;
    padding: 13px 30px; border-radius: 30px; font-weight: 700; font-size: 15px;
    min-height: 48px; transition: var(--transition, all .2s ease);
}
.brandit-empty-card .brandit-empty-card-btn:hover { filter: brightness(1.05); }
@media (max-width: 600px) {
    .brandit-empty-card { max-width: 100%; min-height: 340px; padding: 40px 22px; margin: 24px auto; }
    .brandit-empty-card .bd-empty-icon { width: 72px; height: 72px; border-radius: 18px; }
    .brandit-empty-card .bd-empty-icon svg { width: 34px; height: 34px; }
    .brandit-empty-card h2, .brandit-empty-card h3 { font-size: 19px; }
}

/* Consistent line-icon style (material-ish): inherit colour, no fill */
.bd-icon { display: inline-block; vertical-align: middle; line-height: 0; }
.bd-icon svg { display: block; width: 100%; height: 100%; }
/* Brand-profile prompt icon now holds an SVG line icon instead of an emoji */
.brandit-bp-prompt-icon svg { width: 46px; height: 46px; color: #4208cc; }

/* ====================================================== */
/* ========== INVOICE PREVIEW STYLES =================== */
/* ====================================================== */

.brandit-invoice-preview-container {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.brandit-invoice-preview-container .invoice-preview {
    font-family: inherit;
    background: white;
    padding: 30px;
    border-radius: var(--radius-md);
}

.brandit-invoice-preview-container table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.brandit-invoice-preview-container th,
.brandit-invoice-preview-container td {
    border: 1px solid #ddd;
    padding: 10px;
}

.brandit-invoice-preview-container th {
    background: var(--brand-gradient) !important;
    color: white !important;
    font-weight: 600 !important;
}

/* ====================================================== */
/* ========== ACCOUNT & CREDITS UI ===================== */
/* ====================================================== */

.brandit-credits-page,
.brandit-profile-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 16px;
}

.brandit-credits-page .brandit-credits-balance {
    text-align: center;
    padding: 32px 24px;
    border-radius: var(--radius-lg);
    margin-bottom: 32px;
}

.brandit-credits-page .balance-amount {
    font-size: 48px;
    font-weight: 800;
    color: white;
    margin: 8px 0;
}

.brandit-profile-container {
    max-width: 600px;
    margin: 0 auto;
}

.brandit-profile-header {
    text-align: center;
    margin-bottom: 32px;
}

.brandit-profile-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 32px;
    margin: 0 auto 16px;
}

.brandit-profile-header h3 {
    font-size: 24px;
    margin-bottom: 16px;
}

.brandit-profile-info-large {
    display: grid;
    gap: 12px;
    max-width: 400px;
    margin: 0 auto;
}

.brandit-profile-info-large .info-group {
    text-align: left;
}

.brandit-profile-info-large .info-group label {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.brandit-profile-info-large .info-group input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--border-soft);
    background: var(--bg-soft);
    font-size: 15px;
}

.brandit-password-section {
    background: var(--bg-main);
    border-radius: var(--radius-lg);
    padding: 24px;
    border: 1px solid var(--border-light);
    margin-top: 24px;
}

.brandit-password-section h3 {
    margin-bottom: 20px;
}

.brandit-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.brandit-package-card {
    background: var(--bg-main);
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
    border: 1px solid var(--border-light);
    transition: var(--transition);
}

.brandit-package-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .brandit-credits-page,
    .brandit-profile-page {
        padding: 16px 12px;
    }
    
    .brandit-packages-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    .brandit-packages-grid .brandit-package-card {
        flex: none !important;
        min-width: 0 !important;
        padding: 20px 14px !important;
    }
}

/* ====================================================== */
/* ========== MOBILE MENU & SIDEBAR ==================== */
/* ====================================================== */

.brandit-mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1001;
    background: var(--brand-gradient);
    color: white;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    align-items: center;
    justify-content: center;
}

.brandit-mobile-menu-toggle.open {
    background: var(--brand-gradient);
}

.brandit-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.brandit-sidebar-overlay.open {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* ====================================================== */
/* ========== RESPONSIVE DESIGN - DESKTOP ============== */
/* ====================================================== */

@media (min-width: 1025px) {
    /* A real 4-column grid (instead of imperfect flex-basis wrapping) so every
       card in a row is the same height — which puts all icons on one line at the
       top and, with the button pinned to the bottom, all buttons on one line.
       The second row of 4 cards inherits the exact same alignment. */
    .brandit-guest-cards-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 280px)) !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 28px;
    }
    
    .brandit-guest-card {
        flex: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100% !important;   /* fill the grid cell so buttons bottom-align */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    /* Fixed icon band → every card's icon sits on the SAME horizontal line.
       Fixed title block + a flex-growing description push the button to the
       bottom, so every button lines up too. Both rows of 4 inherit this. */
    .brandit-guest-card .brandit-guest-card-icon {
        height: 90px !important;
        margin: 0 0 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
    }
    .brandit-guest-card .brandit-guest-card-icon img {
        width: 76px !important;
        height: 76px !important;
        object-fit: contain !important;
    }
    .brandit-guest-card h3 {
        min-height: 56px !important;        /* room for up to 2 title lines */
        margin: 0 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .brandit-guest-card p {
        flex: 1 1 auto !important;
        margin: 0 0 20px !important;
    }
    .brandit-guest-card .brandit-guest-card-btn {
        margin-top: auto !important;
        width: 100% !important;
    }
    
    .brandit-mobile-menu-toggle {
        display: none !important;
    }
    
    .brandit-dashboard-cards {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    
    .brandit-mobile-page-title {
        display: none !important;
    }
    
    .brandit-current-tab-desktop {
        display: flex;
    }
}

/* ====================================================== */
/* ========== RESPONSIVE DESIGN - TABLET =============== */
/* ====================================================== */

@media (max-width: 1024px) and (min-width: 769px) {
    .brandit-guest-cards-wrapper {
        margin-top: -40px;
        padding: 0 20px;
        margin-bottom: 40px;
    }
    
    .brandit-guest-cards-grid {
        flex-wrap: wrap !important;
        gap: 20px;
    }
    
    .brandit-guest-card {
        flex: 1 1 calc(50% - 20px) !important;
        min-width: 240px;
        max-width: calc(50% - 20px);
    }
    
    .brandit-dashboard-cards {
        gap: 20px !important;
    }
    
    .brandit-dashboard-card {
        flex: 1 1 calc(50% - 20px) !important;
        max-width: calc(50% - 20px) !important;
    }
    
    .brandit-guest-hero {
        padding: 60px 20px 100px;
    }
    
    .brandit-guest-hero-content {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    
    .brandit-guest-hero-left p {
        margin: 0 auto;
    }
    
    .brandit-guest-hero-left h1 {
        font-size: 36px;
    }
    
    .brandit-guest-promo-card {
        flex-direction: column;
    }
    
    .brandit-guest-promo-image {
        min-height: 0;
        height: auto;
    }
    
    .brandit-guest-promo-image img {
        height: auto;
        object-fit: contain;
        display: block;
    }
    
    .brandit-guest-promo-right {
        padding: 40px;
        text-align: center;
    }
    
    .brandit-mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    .brandit-sidebar {
        transform: translateX(-100%);
    }
    
    .brandit-sidebar.open {
        transform: translateX(0);
    }
    
    .brandit-main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .brandit-top-navbar {
        padding: 0 16px;
        justify-content: flex-end;
    }
    
    .brandit-current-tab-desktop {
        display: none;
    }
    
    .brandit-mobile-page-title {
        display: block;
    }
    
    .brandit-content-container {
        padding: 80px 16px 16px !important;
    }
}

/* ====================================================== */
/* ========== RESPONSIVE DESIGN - MOBILE =============== */
/* ====================================================== */

@media (max-width: 768px) {
    /* Tighter vertical rhythm on mobile so use forms fit better */
    :root {
        --bd-group-gap: 12px;
        --bd-field-gap: 6px;
    }
    .brandit-form-grid {
        gap: 12px !important;
    }
    .brandit-form-header-wrapper {
        margin-bottom: 14px;
    }
    .brandit-mode-toggle-wrapper {
        margin-bottom: 16px !important;
        padding: 10px 12px !important;
    }
    .brandit-form-container {
        padding-top: 0 !important;
    }
    .brandit-intelligence-notice {
        margin-bottom: 12px !important;
        padding: 10px 12px !important;
    }
    .brandit-bc-steps {
        margin-bottom: 14px !important;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    select,
    textarea {
        border-radius: 10px !important;
    }
    
    .brandit-file-upload,
    .upload-box {
        border-radius: 14px !important;
    }
    
    .brandit-form-title {
        display: block;
        font-size: 20px;
        font-weight: 600;
        color: #111827 !important;
        margin-bottom: 12px;
        text-align: left;
    }
    
    .brandit-form-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .brandit-content-container {
        padding: 16px !important;
    }
    
    .brandit-top-navbar {
        height: 60px;
        padding: 0 12px;
    }
    
    .brandit-mode-toggle {
        width: 100%;
        justify-content: center;
        gap: 8px;
        padding: 4px;
    }
    
    .brandit-mode-btn {
        padding: 10px 20px;
        font-size: 13px;
        min-height: 40px;
        flex: 1;
        text-align: center;
    }
    
    .brandit-mode-btn.active {
        border: 2px solid #4208cc !important;
        outline: 4px solid rgba(66, 8, 204, 0.4) !important;
        outline-offset: 2px !important;
        box-shadow: 0 4px 15px rgba(66, 8, 204, 0.5) !important;
    }
    
    .brandit-sidebar {
        width: 260px;
    }
    
    .brandit-sidebar-icon {
        width: 18px;
        height: 18px;
    }
    
    .brandit-nav-item {
        padding: 10px 14px;
        gap: 10px;
        min-height: 44px;
    }
    
    .brandit-nav-item .nav-text {
        font-size: 14px;
    }
    
    .brandit-sidebar-logout-btn {
        padding: 10px 14px;
        font-size: 14px;
        gap: 10px;
        min-height: 44px;
    }
    
    .brandit-sidebar-logout-btn .brandit-sidebar-icon {
        width: 18px;
        height: 18px;
    }
    
    .brandit-sidebar-nav {
        padding: 16px 12px;
        gap: 4px;
    }
    
    .brandit-sidebar-header {
        padding: 16px;
    }
    
    .brandit-sidebar-header .brandit-header-logo {
        max-width: 140px;
    }
    
    .brandit-sidebar-footer {
        padding: 16px;
    }
    
    .brandit-guest-hero {
        padding: 40px 16px 80px;
        text-align: center;
    }
    
    .brandit-guest-hero-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }
    
    .brandit-guest-hero-left {
        text-align: center;
        width: 100%;
    }
    
    .brandit-guest-hero-left h1 {
        font-size: 28px;
        text-align: center;
    }
    
    .brandit-guest-hero-left p {
        font-size: 14px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .brandit-guest-hero-right {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .brandit-guest-hero-robot {
        max-width: 200px;
        margin: 0 auto;
    }
    
    .brandit-hero-robot-img {
        max-width: 200px;
        margin: 0 auto;
    }
    
    .brandit-guest-cards-grid {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 16px !important;
    }
    
    .brandit-guest-card {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 20px !important;
    }
    
    .brandit-dashboard-cards {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .brandit-dashboard-card {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
    
    .brandit-guest-cards-wrapper {
        margin-top: -30px;
        padding: 0 16px;
        margin-bottom: 30px;
        width: 100%;
    }
    
    .brandit-dashboard-banner {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .brandit-banner-cta {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    
    .brandit-banner-cta button,
    #setup-business-profile-btn {
        width: 100%;
    }
    
    .brandit-dashboard-banner-content {
        margin-bottom: 20px;
    }
    
    .brandit-dashboard-banner-content h2 {
        font-size: 20px;
    }
    
    .brandit-dashboard-robot img {
        max-width: 120px;
        margin: 0 auto;
    }
    
    .brandit-current-tab-icon-img {
        width: 22px;
        height: 22px;
    }
    
    .brandit-top-navbar {
        padding: 0 16px;
        justify-content: flex-end;
    }
    
    .brandit-current-tab-desktop {
        display: none;
    }
    
    .brandit-mobile-page-title {
        display: block;
    }
    
    .brandit-content-container {
        padding: 60px 16px 16px !important;
    }
    
    .brandit-credit-display {
        padding: 6px 12px;
    }
    
    .brandit-credit-amount {
        font-size: 13px;
    }
    
    .brandit-add-credits-btn {
        padding: 6px 12px;
        font-size: 12px;
        min-height: 36px;
    }
    
    .brandit-user-avatar {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .brandit-form-container,
    .brandit-business-card-form,
    .brandit-invoice-form {
        padding: 20px;
    }
    
    .flyer-form-container {
        padding: 20px;
    }
    
    .brandit-form-grid,
    .form-grid-2,
    .brandit-business-details-grid,
    .brandit-invoice-type-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .brandit-form-grid > *,
    .form-grid-2 > *,
    .brandit-business-details-grid > *,
    .brandit-invoice-type-row > * {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .brandit-form-group,
    .form-group,
    .brandit-form-field {
        gap: 6px;
        margin-bottom: 16px;
    }
    
    .brandit-form-group label,
    .form-group label,
    .brandit-form-field label {
        margin-bottom: 4px;
        font-size: 13px;
    }
    
    .brandit-form-group.full-width {
        grid-column: span 1;
    }
    
    .business-profile-form-modal .brandit-form-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .business-profile-form-modal .brandit-form-grid > * {
        width: 100% !important;
    }
    
    .brandit-business-card-form .brandit-form-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .brandit-invoice-form .brandit-form-grid,
    .brandit-invoice-form .brandit-business-details-grid,
    .brandit-invoice-form .brandit-invoice-type-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .brandit-contact-section .form-grid-2 {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    #flyer-industry-fields.form-grid-2 {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .brandit-event-fields-container {
        grid-column: span 1;
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .photo-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .product-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    /* Color picker on mobile intentionally inherits the desktop styling
       (48px swatch + hex field, side by side) so it is not limited. */
    
    .brandit-section-summary {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .brandit-invoice-item-row {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
        position: relative;
    }
    
    .brandit-logo-item {
        flex-direction: column;
        text-align: center;
    }
    
    .brandit-logo-preview {
        margin: 0 auto;
    }
    
    .brandit-prompt-mode {
        padding: 20px;
    }
    
    .brandit-generate-btn,
    .brandit-prompt-generate-btn,
    .brandit-guest-card-btn,
    .brandit-card-btn,
    .brandit-purchase-btn,
    .brandit-empty-state-btn,
    .brandit-modal-download,
    .brandit-modal-close-btn,
    .btn-create-designs {
        min-height: 48px;
    }
    
    .brandit-guest-promo {
        padding: 40px 16px;
    }
    
    .brandit-guest-promo-card {
        flex-direction: column-reverse;
    }
    
    .brandit-guest-promo-image {
        min-height: 0;
        height: auto;
    }
    
    .brandit-guest-promo-image img {
        height: auto;
        object-fit: contain;
        display: block;
        width: 100%;
    }
    
    .brandit-guest-promo-right {
        padding: 32px 24px;
        text-align: center;
    }
    
    .brandit-guest-promo-right h2 {
        font-size: 24px;
    }
    
    .brandit-guest-promo-right p {
        font-size: 14px;
        margin-bottom: 24px;
    }
    
    .brandit-guest-promo-buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }
    
    .brandit-guest-promo-signup,
    .brandit-guest-promo-login {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    
    .brandit-guest-promo-success {
        left: 15px;
        right: 15px;
        padding: 12px;
        flex-wrap: wrap;
    }
    
    .brandit-guest-promo-success .success-text span {
        font-size: 11px;
    }
    
    .brandit-guest-header-container {
        height: 70px;
        padding: 0 16px;
    }
    
    .brandit-guest-logo img {
        height: 40px;
    }
    
    .brandit-guest-nav-buttons {
        gap: 12px;
    }
    
    .brandit-guest-login-link {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .brandit-guest-signup-btn {
        padding: 8px 16px;
        font-size: 13px;
        min-height: 40px;
    }
    
    .brandit-logo-modal-image-container img {
        max-height: 300px;
    }
    
    .brandit-modal-actions {
        flex-direction: column;
    }
    
    .brandit-modal-download,
    .brandit-modal-close-btn {
        min-width: 100%;
    }
    
    .brandit-assets-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    
    .brandit-history-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 14px;
    }
    
    .brandit-history-tabs {
        gap: 4px;
    }
    
    .brandit-history-tab {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .brandit-bulk-delete-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
        gap: 10px;
    }
    
    .brandit-bulk-delete-actions-group {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }
    
    .brandit-bulk-delete-actions-group button {
        width: 100%;
    }
    
    .brandit-business-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .brandit-section-main-title {
        font-size: 22px;
    }
    
    .brandit-products-header {
        display: none;
    }
    
    .mobile-product-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    
    .mobile-product-field label {
        display: block;
        font-size: 12px;
        font-weight: 500;
        color: var(--text-muted);
    }
    
    .brandit-invoice-item-row .brandit-remove-item {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    
    .item-total {
        text-align: left;
    }
    
    .brandit-mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    .brandit-sidebar {
        transform: translateX(-100%);
    }
    
    .brandit-sidebar.open {
        transform: translateX(0);
    }
    
    .brandit-main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .brandit-profiles-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .brandit-profile-card-actions {
        flex-direction: row;
    }
    
    .manage-profile-actions {
        flex-direction: column;
        gap: 6px;
    }
    
    .brandit-profile-dropdown-menu {
        min-width: 160px;
    }
    
    .password-toggle-btn {
        right: 10px;
        font-size: 16px;
    }
}

/* ====================================================== */
/* ========== RESPONSIVE DESIGN - SMALL MOBILE ========= */
/* ====================================================== */

@media (max-width: 480px) {
    .brandit-mode-btn {
        padding: 8px 14px;
        font-size: 12px;
    }
    
    .brandit-mode-toggle {
        gap: 6px;
    }
    
    .brandit-sidebar-icon {
        width: 16px;
        height: 16px;
    }
    
    .brandit-sidebar {
        width: 240px;
    }
    
    .brandit-credits-balance .balance-amount {
        font-size: 40px;
    }
    
    .brandit-packages-grid {
        gap: 16px;
    }
    
    .brandit-guest-hero-left h1 {
        font-size: 24px;
    }
    
    .brandit-guest-card {
        padding: 20px 16px;
    }
    
    .brandit-guest-card h3 {
        font-size: 18px;
    }
    
    .brandit-dashboard-card {
        padding: 24px 16px;
    }
    
    .brandit-dashboard-card h3 {
        font-size: 18px;
    }
    
    .brandit-auth-form {
        padding: 24px;
    }
    
    .brandit-auth-form h3 {
        font-size: 22px;
    }
    
    .brandit-empty-state {
        padding: 40px 16px;
    }
    
    .brandit-empty-state-icon {
        font-size: 44px;
        margin-bottom: 16px;
    }
}

/* ====================================================== */
/* ========== PREVENT HORIZONTAL SCROLLING ============= */
/* ====================================================== */

html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

.brandit-guest-view,
.brandit-logged-in-wrapper,
.brandit-main-layout {
    max-width: 100%;
    overflow-x: hidden;
}

/* ====================================================== */
/* ========== GLOBAL FOOTER ============================ */
/* ====================================================== */

.brandit-footer {
    background: #f8f9fb;
    padding: 0;
    margin: 0;
    width: 100%;
    position: relative;
    z-index: 10;
    border-top: 1px solid rgba(66, 8, 204, 0.1);
    margin-top: auto;
}

.brandit-footer-top {
    padding: 28px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.brandit-footer-top-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.brandit-footer-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.brandit-footer-logo-img {
    height: 36px;
    width: auto;
    max-height: 40px;
    display: block;
}

.brandit-footer-top-right {
    display: flex;
    align-items: center;
}

.brandit-footer-contact {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
    white-space: nowrap;
}

.brandit-footer-phone {
    color: #25D366;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.brandit-footer-phone:hover {
    color: #128C7E;
    text-decoration: underline;
}

.brandit-footer-phone::before {
    content: '💬';
    font-size: 14px;
}

.brandit-footer-bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding: 14px 40px;
    width: 100%;
    background: #f0f1f4;
}

.brandit-footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.brandit-footer-address {
    font-size: 13px;
    color: #777;
    text-align: left;
    flex: 1;
}

.brandit-footer-partnership {
    font-size: 13px;
    color: #777;
    text-align: center;
    flex: 0 0 auto;
    white-space: nowrap;
}

.brandit-footer-partnership a {
    color: var(--brandit-primary, #4208cc);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.brandit-footer-copyright {
    font-size: 12px;
    color: #999;
    text-align: right;
    flex: 1;
}

.brandit-main-content .brandit-footer {
    margin-top: 60px;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

.brandit-main-content .brandit-footer-top,
.brandit-main-content .brandit-footer-bottom-inner {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
}

@media (max-width: 1024px) {
    .brandit-footer-top {
        padding: 24px 24px;
    }
    
    .brandit-footer-bottom {
        padding: 12px 24px;
    }
}

@media (max-width: 768px) {
    .brandit-footer {
        margin-top: 40px;
    }
    
    .brandit-footer-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px 20px;
    }
    
    .brandit-footer-top-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .brandit-footer-top-right {
        width: 100%;
    }
    
    .brandit-footer-contact {
        white-space: normal;
        flex-wrap: wrap;
        font-size: 12px;
        line-height: 1.5;
    }
    
    .brandit-footer-phone {
        font-size: 13px;
    }
    
    .brandit-footer-bottom {
        padding: 12px 20px;
    }
    
    .brandit-footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        text-align: left;
    }
    
    .brandit-footer-address {
        font-size: 12px;
    }
    
    .brandit-footer-copyright {
        font-size: 11px;
        text-align: left;
    }
    
    .brandit-footer-partnership {
        font-size: 12px;
        text-align: left;
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .brandit-footer-top {
        padding: 16px 16px;
        gap: 12px;
    }
    
    .brandit-footer-logo-img {
        height: 28px;
        max-height: 32px;
    }
    
    .brandit-footer-contact {
        font-size: 11px;
        gap: 4px;
    }
    
    .brandit-footer-phone {
        font-size: 12px;
    }
    
    .brandit-footer-phone::before {
        font-size: 12px;
    }
    
    .brandit-footer-bottom {
        padding: 10px 16px;
    }
    
    .brandit-footer-bottom-inner {
        gap: 6px;
    }
    
    .brandit-footer-address {
        font-size: 11px;
    }
    
    .brandit-footer-copyright {
        font-size: 10px;
    }
}

@media (max-width: 360px) {
    .brandit-footer-top {
        padding: 14px 12px;
    }
    
    .brandit-footer-logo-img {
        height: 24px;
        max-height: 28px;
    }
    
    .brandit-footer-contact {
        font-size: 10px;
    }
    
    .brandit-footer-phone {
        font-size: 11px;
    }
    
    .brandit-footer-bottom {
        padding: 8px 12px;
    }
    
    .brandit-footer-address,
    .brandit-footer-copyright {
        font-size: 10px;
    }
}

/* ====================================================== */
/* ========== PRINT STYLES FOR INVOICE ================= */
/* ====================================================== */

/* ====================================================================== */
/* CAPTURE FREELY — users may screenshot / save / long-press / drag any    */
/* content the plugin renders. Applied across the WHOLE plugin scope       */
/* (logged-in + guest + modals) so nothing blocks right-click "Save        */
/* image", mobile long-press "Save", or selecting/copying text. The blunt  */
/* scope rule only re-enables the iOS long-press callout (harmless on       */
/* buttons); full save/drag/select permission is granted on the actual     */
/* media + text containers so intentional `user-select:none` on UI chrome  */
/* (buttons, nav, dividers) is left untouched. (Replaces old allow-list.)  */
/* ====================================================================== */
.brandit-logged-in-wrapper,
.brandit-guest-view,
.brandit-logo-modal,
.brandit-logged-in-wrapper *,
.brandit-guest-view *,
.brandit-logo-modal * {
    -webkit-touch-callout: default !important;
}

.brandit-logged-in-wrapper img,
.brandit-guest-view img,
.brandit-logo-modal img,
.brandit-logged-in-wrapper canvas,
.brandit-guest-view canvas,
.brandit-logo-modal canvas,
.brandit-logo-preview img,
#brandit-logo-modal-img,
.brandit-asset-preview img,
.brandit-result-image img,
.brandit-history-item img,
.brandit-preview-image,
.brandit-flyer-generated-preview,
#brandit-flyer-generated-preview {
    -webkit-touch-callout: default !important;
    -webkit-user-drag: auto !important;
    -webkit-user-select: auto !important;
    user-select: auto !important;
    pointer-events: auto !important;
}

@media print {
    .brandit-logo-modal-close,
    .brandit-invoice-preview-actions,
    .brandit-modal-actions {
        display: none !important;
    }
    .brandit-logo-modal {
        position: static;
        background: white;
        backdrop-filter: none;
        padding: 0;
    }
    
    .brandit-logo-modal-content {
        box-shadow: none;
        max-width: 100%;
    }
    
    .invoice-preview {
        padding: 0;
    }
}

/* ====================================================== */
/* ========== DARK MODE SUPPORT ========================= */
/* ====================================================== */

@media (prefers-color-scheme: dark) {
    .brandit-mode-btn.active {
        outline-color: rgba(66, 8, 204, 0.5) !important;
    }
    
    .brandit-mode-btn:focus-visible {
        outline-color: #4208cc !important;
    }
    
    .password-toggle-btn {
        color: #aaa;
    }
    
    .password-toggle-btn:hover {
        color: var(--brandit-primary);
    }
}

/* ====================================================== */
/* ========== HIGH CONTRAST MODE SUPPORT ================ */
/* ====================================================== */

@media (prefers-contrast: high) {
    .brandit-mode-btn.active {
        outline: 4px solid #4208cc !important;
        outline-offset: 3px !important;
        border: 2px solid white !important;
    }
    
    .brandit-mode-btn:focus-visible {
        outline: 4px solid #000000 !important;
        outline-offset: 3px !important;
    }
    
    .password-toggle-btn:focus {
        outline: 3px solid #000000 !important;
        outline-offset: 2px !important;
    }
}

/* ====================================================== */
/* ========== DISABLED BUTTON STATE (GLOBAL) ============ */
/* ====================================================== */

.brandit-generate-btn:disabled,
.brandit-prompt-generate-btn:disabled,
.brandit-card-btn:disabled,
.brandit-purchase-btn:disabled,
.brandit-guest-card-btn:disabled,
.brandit-guest-signup-btn:disabled,
.brandit-empty-state-btn:disabled,
.brandit-modal-download:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ====================================================== */
/* ========== MODEL BADGE =============================== */
/* ====================================================== */

.brandit-model-badge {
    display: inline-block;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white !important;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
    vertical-align: middle;
}

/* ====================================================== */
/* ========== UNIFIED UPLOAD PREVIEW SIZES ============== */
/* ====================================================== */

.brandit-upload-preview-grid .brandit-image-preview img,
.brandit-partner-logos-preview .brandit-image-preview img,
#brandit-bc-upload-preview .brandit-image-preview img,
#brandit-flyer-logo-preview .brandit-image-preview img,
#brandit-flyer-background-preview .brandit-image-preview img,
#brandit-flyer-partner-preview .brandit-image-preview img,
#brandit-invoice-logo-preview .brandit-image-preview img,
.brandit-prompt-file-list .brandit-image-preview img,
.upload-preview-grid .brandit-image-preview img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 2px solid var(--brandit-primary);
    display: block;
}

.brandit-image-preview img[style*="width: 110px"],
.brandit-image-preview img[style*="width:120px"],
.brandit-image-preview img[style*="width:130px"] {
    width: 80px !important;
    height: 80px !important;
}

.brandit-form-back-btn {
    color: #000000 !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 20px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: var(--transition);
    min-height: 40px;
}

.brandit-form-back-btn:hover {
    color: white !important;
    background: var(--brand-gradient);
    transform: translateX(-5px);
}

/* ====================================================== */
/* ========== CUSTOM PROMPT SECTION STYLES ============== */
/* ====================================================== */

#flyer-custom-prompt {
    resize: vertical;
    min-height: 80px;
    max-height: 200px;
    line-height: 1.6;
    transition: var(--transition);
}

#flyer-custom-prompt:focus {
    background: #fff !important;
    border-color: var(--brandit-primary) !important;
    box-shadow: 0 0 0 3px rgba(66, 8, 204, 0.1) !important;
}

#flyer-custom-prompt::placeholder {
    color: #999;
    font-style: italic;
    font-size: 12px;
}

.brandit-invoice-section:has(#flyer-custom-prompt) {
    position: relative;
    overflow: hidden;
}

.brandit-invoice-section:has(#flyer-custom-prompt)::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(66, 8, 204, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.brandit-placeholder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.brandit-placeholder-chip {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(66, 8, 204, 0.08);
    border: 1px solid rgba(66, 8, 204, 0.2);
    border-radius: 20px;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    color: var(--brandit-primary);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.brandit-placeholder-chip:hover {
    background: rgba(66, 8, 204, 0.15);
    border-color: var(--brandit-primary);
    transform: translateY(-1px);
}

.brandit-placeholder-chip:active {
    transform: scale(0.95);
}

.brandit-pro-tip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--brandit-success);
}

@media (max-width: 768px) {
    #flyer-custom-prompt {
        font-size: 12px !important;
        min-height: 60px;
    }
    
    .brandit-invoice-section:has(#flyer-custom-prompt) {
        padding: 16px !important;
    }
}

/* ====================================================== */
/* ========== SESSION TIMEOUT WARNING STYLES ============ */
/* ====================================================== */

@keyframes pulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.02); }
}

.brandit-session-warning {
    animation: slideDown 0.4s ease-out;
    max-width: 90%;
    width: auto;
    min-width: 320px;
}

.brandit-session-warning #session-extend-btn:hover {
    background: #fef3c7 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
    .brandit-session-warning {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 12px 16px;
        min-width: 280px;
    }
    
    .brandit-session-warning #session-extend-btn {
        width: 100%;
    }
}

@keyframes slideDownBrandit {
    from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes pulseWarning {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.03); }
}

@keyframes fadeInScale {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.brandit-session-warning {
    animation: slideDownBrandit 0.4s ease-out;
    max-width: 90vw;
    width: auto;
    min-width: 320px;
    backdrop-filter: blur(10px);
}

#session-extend-btn:hover {
    background: #fef3c7 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

#session-logout-now-btn:hover {
    background: rgba(255,255,255,0.3) !important;
    border-color: rgba(255,255,255,0.5) !important;
    transform: translateY(-1px);
}

.brandit-spinner-small {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: brandit-spin 0.6s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .brandit-session-warning {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 12px 16px;
        min-width: 280px;
        top: 10px;
    }
    
    #session-extend-btn,
    #session-logout-now-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .brandit-session-warning {
        min-width: 260px;
        padding: 10px 14px;
    }
    
    .brandit-session-warning > div {
        font-size: 12px;
    }
}

/* ====================================================== */
/* ========== WEEKLY CONTENT CARD STYLES ================ */
/* ====================================================== */

.weekly-day-card {
    background: var(--bg-main);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.weekly-day-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--brandit-primary);
}

.weekly-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
    -webkit-user-select: none;
}

.weekly-day-header:hover {
    background: rgba(66, 8, 204, 0.03);
}

.weekly-day-header strong {
    font-size: 15px;
    color: var(--text-main);
    font-weight: 600;
}

.weekly-day-toggle {
    font-size: 22px;
    color: var(--text-muted);
    transition: transform 0.3s ease;
    display: inline-block;
    width: 28px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    border-radius: 50%;
    background: var(--bg-soft);
    font-weight: 700;
}

.weekly-day-header:hover .weekly-day-toggle {
    background: rgba(66, 8, 204, 0.1);
    color: var(--brandit-primary);
}

.weekly-day-body {
    padding: 20px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-soft);
    animation: slideDown 0.3s ease-out;
}

.weekly-day-prompt {
    width: 100%;
    min-height: 80px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-soft);
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
    resize: vertical;
    transition: var(--transition);
    color: var(--text-main);
}

.weekly-day-prompt:focus {
    outline: none;
    border-color: var(--brandit-primary);
    box-shadow: 0 0 0 3px rgba(66, 8, 204, 0.08);
}

.weekly-day-prompt::placeholder {
    color: var(--text-muted);
    font-style: italic;
}

.weekly-product-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-main);
    border-radius: var(--radius-xs);
    margin-bottom: 8px;
    border: 1px solid var(--border-light);
    transition: var(--transition);
}

.weekly-product-row:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--brandit-primary);
}

.weekly-product-name,
.weekly-product-price {
    padding: 8px 12px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-soft);
    font-size: 13px;
    transition: var(--transition);
    width: 100%;
}

.weekly-product-name:focus,
.weekly-product-price:focus {
    outline: none;
    border-color: var(--brandit-primary);
    box-shadow: 0 0 0 3px rgba(66, 8, 204, 0.08);
}

.weekly-add-product-btn {
    background: none;
    border: 1.5px dashed var(--brandit-primary);
    color: var(--brandit-primary);
    padding: 8px 16px;
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.weekly-add-product-btn:hover {
    background: rgba(66, 8, 204, 0.05);
    border-style: solid;
    transform: translateY(-1px);
}

.weekly-remove-product-btn {
    background: var(--close-gradient);
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    transition: var(--transition);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.weekly-remove-product-btn:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-delete);
}

.weekly-no-products {
    color: var(--text-muted);
    font-size: 13px;
    padding: 8px 0;
    font-style: italic;
}

.weekly-product-preview {
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}

.weekly-product-preview img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-xs);
    border: 2px solid var(--brandit-primary);
    transition: var(--transition);
}

.weekly-product-preview:hover img {
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
}

.weekly-product-upload-trigger {
    width: 60px;
    height: 60px;
    background: var(--bg-soft);
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border-soft);
    cursor: pointer;
    transition: var(--transition);
    font-size: 24px;
}

.weekly-product-upload-trigger:hover {
    border-color: var(--brandit-primary);
    background: rgba(66, 8, 204, 0.05);
}

.weekly-day-body .brandit-form-group {
    margin-bottom: 16px;
}

.weekly-day-body .brandit-form-group label {
    font-weight: 500;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: block;
}

.weekly-day-header .saved-checkmark {
    color: var(--brandit-success);
    font-size: 18px;
    font-weight: 700;
}

.weekly-folder-card {
    background: var(--bg-main);
    transition: var(--transition);
}

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

.weekly-auto-generate-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    margin-bottom: 24px;
}

.weekly-auto-generate-wrapper input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--brandit-primary);
    cursor: pointer;
}

.weekly-auto-generate-wrapper label {
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
}

.brandit-select-fullwidth {
    width: 100%;
    padding: 14px 40px 14px 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-soft);
    font-size: 15px;
    background: var(--bg-main);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 1.5L7 6.5L13 1.5' stroke='%234208cc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    transition: var(--transition);
    cursor: pointer;
}

.brandit-select-fullwidth:focus {
    outline: none;
    border-color: var(--brandit-primary);
    box-shadow: 0 0 0 3px rgba(66, 8, 204, 0.1);
}

/* ====================================================== */
/* ========== WEEKLY CONTENT RESPONSIVE ================= */
/* ====================================================== */

@media (max-width: 768px) {
    .weekly-day-header {
        padding: 14px 16px;
    }
    
    .weekly-day-header strong {
        font-size: 14px;
    }
    
    .weekly-day-body {
        padding: 16px;
    }
    
    .weekly-product-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .weekly-product-preview img {
        width: 80px;
        height: 80px;
        margin: 0 auto;
    }
    
    .weekly-add-product-btn {
        width: 100%;
        justify-content: center;
    }
    
    .weekly-day-body .weekly-cancel-day-btn,
    .weekly-day-body .weekly-save-day-btn {
        flex: 1;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .weekly-day-toggle {
        width: 24px;
        height: 24px;
        font-size: 18px;
        line-height: 24px;
    }
    
    .weekly-day-prompt {
        font-size: 13px;
        min-height: 60px;
    }
}

/* ====================================================== */
/* ========== FOLDER CARD HOVER EFFECTS ================= */
/* ====================================================== */

.weekly-folder-card .brandit-result-card {
    transition: var(--transition);
}

.weekly-folder-card .brandit-result-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brandit-primary);
}

.weekly-generation-progress {
    margin-top: 24px;
}

.weekly-generation-progress .loader-message {
    font-size: 15px;
    color: var(--text-main);
    text-align: center;
    margin-bottom: 16px;
    font-weight: 500;
}

/* ====================================================== */
/* ========== WEEKLY CONTENT FOLDER TOGGLE STYLES ======= */
/* ====================================================== */

#weekly-folders-toggle {
    background: linear-gradient(135deg, rgba(66, 8, 204, 0.03), rgba(212, 2, 83, 0.03));
    padding: 16px 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    transition: var(--transition);
}

#weekly-folders-toggle:hover {
    background: linear-gradient(135deg, rgba(66, 8, 204, 0.06), rgba(212, 2, 83, 0.06));
    border-color: var(--brandit-primary);
}

#weekly-folders-arrow {
    transition: transform 0.3s ease;
}

.weekly-day-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--brandit-primary);
}

.weekly-generate-day-btn {
    background: var(--brand-gradient) !important;
    color: white !important;
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.weekly-generate-day-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-brand);
}

.weekly-generate-day-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.weekly-add-product-btn:hover {
    background: rgba(66, 8, 204, 0.05) !important;
    border-style: solid !important;
    transform: translateY(-1px);
}

.weekly-product-upload-trigger:hover {
    border-color: var(--brandit-primary) !important;
    background: rgba(66, 8, 204, 0.05) !important;
}

/* Admin Dashboard v9.9.20 Enhanced Styles */
    .admin-container { max-width: 1400px; margin: 0 auto; padding: 24px; }
    
    .admin-header { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        margin-bottom: 28px; 
        padding: 24px 32px;
        background: linear-gradient(135deg, #ffffff, #f8fafc);
        border-radius: 20px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.06);
        border: 1px solid rgba(0,0,0,0.04);
    }
    
    .kpi-grid { 
        display: grid; 
        grid-template-columns: repeat(5, 1fr); 
        gap: 20px; 
        margin-bottom: 28px; 
    }
    
    .kpi-card { 
        background: linear-gradient(135deg, #ffffff, #fafbfc);
        border-radius: 20px; 
        padding: 28px 24px; 
        box-shadow: 0 4px 16px rgba(0,0,0,0.04);
        border: 1px solid rgba(0,0,0,0.04);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }
    
    .kpi-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--brand-gradient);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }
    
    .kpi-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(0,0,0,0.08);
    }
    
    .kpi-card:hover::before {
        transform: scaleX(1);
    }
    
    .kpi-title { 
        font-size: 12px; 
        color: #64748b; 
        margin-bottom: 12px; 
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.8px;
    }
    
    .kpi-value { 
        font-size: 40px; 
        font-weight: 700; 
        background: linear-gradient(135deg, #4208cc, #8b5cf6); 
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent; 
        background-clip: text;
    }
    
    .kpi-value.zero { -webkit-text-fill-color: #94a3b8; }
    
    .charts-grid { 
        display: grid; 
        grid-template-columns: repeat(2, 1fr); 
        gap: 20px; 
        margin-bottom: 28px; 
    }
    
    .chart-card { 
        background: white; 
        border-radius: 20px; 
        padding: 28px 24px; 
        box-shadow: 0 4px 16px rgba(0,0,0,0.04); 
        border: 1px solid rgba(0,0,0,0.04);
    }
    
    .table-container { 
        background: white; 
        border-radius: 20px; 
        padding: 28px 24px; 
        box-shadow: 0 4px 16px rgba(0,0,0,0.04); 
        margin-bottom: 24px; 
        overflow-x: auto;
        border: 1px solid rgba(0,0,0,0.04);
    }
    
    .data-table th { 
        background: linear-gradient(135deg, rgba(66,8,204,0.04), rgba(212,2,83,0.04)); 
        font-weight: 600; 
        color: #4208cc; 
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        padding: 14px 16px;
        border-bottom: 2px solid rgba(66,8,204,0.1);
    }
    
    .data-table td {
        padding: 14px 16px;
        font-size: 14px;
        color: #334155;
    }
    
    .data-table tbody tr:hover { 
        background: rgba(66,8,204,0.02); 
    }
    
    .refresh-btn { 
        background: linear-gradient(135deg, #4208cc, #8b5cf6); 
        color: white; 
        border: none; 
        padding: 8px 20px; 
        border-radius: 30px; 
        font-weight: 600; 
        font-size: 13px;
        cursor: pointer; 
        transition: all 0.2s ease;
    }
    
    .refresh-btn:hover { 
        transform: translateY(-1px); 
        box-shadow: 0 4px 12px rgba(66,8,204,0.3); 
    }
    
    @media (max-width: 1200px) { 
        .kpi-grid { grid-template-columns: repeat(3, 1fr); } 
    }
    
    @media (max-width: 768px) { 
        .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } 
        .charts-grid { grid-template-columns: 1fr; }
        .admin-header { flex-direction: column; gap: 16px; text-align: center; }
        .kpi-card { padding: 20px 16px; }
        .kpi-value { font-size: 32px; }
        .admin-container { padding: 16px; }
    }
    
    @media (max-width: 480px) { 
        .kpi-grid { grid-template-columns: 1fr; }
    }
   /* ====================================================== */
/* ========== CREATE LOGO LINK STYLES - ENHANCED ======== */
/* ====================================================== */

.brandit-create-logo-link {
    font-size: 12px;
    color: var(--brandit-primary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 30px;
    background: rgba(66, 8, 204, 0.06);
    border: 1px solid rgba(66, 8, 204, 0.15);
    white-space: nowrap;
}

.brandit-create-logo-link:hover {
    color: var(--brandit-secondary);
    background: rgba(212, 2, 83, 0.08);
    border-color: rgba(212, 2, 83, 0.25);
    text-decoration: none;
    transform: translateX(3px);
}

.brandit-create-logo-link:active {
    transform: scale(0.97);
}

/* Loading state for the link */
.brandit-create-logo-link.loading {
    opacity: 0.6;
    cursor: wait;
    pointer-events: none;
}

@media (max-width: 768px) {
    .brandit-create-logo-link {
        font-size: 10px;
        padding: 3px 8px;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .brandit-create-logo-link {
        font-size: 9px;
        padding: 2px 6px;
    }
}
/* ====================================================== */
/* ========== EXTRA COMPACT AUTH FORM ================== */
/* ====================================================== */

.brandit-auth-form.brandit-auth-compact {
    padding: 16px 20px !important;
}

.brandit-auth-form.brandit-auth-compact h3 {
    font-size: 20px !important;
    margin-bottom: 12px !important;
}

.brandit-auth-form.brandit-auth-compact .brandit-form-group,
.brandit-auth-form.brandit-auth-compact .form-group {
    margin-bottom: 10px !important;
}

.brandit-auth-form.brandit-auth-compact label {
    font-size: 12px !important;
    margin-bottom: 3px !important;
}

.brandit-auth-form.brandit-auth-compact input,
.brandit-auth-form.brandit-auth-compact .form-control {
    padding: 8px 12px !important;
    font-size: 13px !important;
    min-height: 38px !important;
}

.brandit-auth-form.brandit-auth-compact .brandit-generate-btn {
    padding: 8px 14px !important;
    font-size: 13px !important;
    min-height: 40px !important;
    margin-top: 4px !important;
}

@media (max-width: 768px) {
    .brandit-auth-form.brandit-auth-compact {
        padding: 12px 16px !important;
    }
    
    .brandit-auth-form.brandit-auth-compact .brandit-form-group,
    .brandit-auth-form.brandit-auth-compact .form-group {
        margin-bottom: 8px !important;
    }
    
    .brandit-auth-form.brandit-auth-compact input,
    .brandit-auth-form.brandit-auth-compact .form-control {
        padding: 6px 10px !important;
        min-height: 36px !important;
    }
}
/* ====================================================== */
/* ========== AUTH MODAL STYLES - HIGHEST PRIORITY ===== */
/* ====================================================== */
/* Using !important and high specificity selectors to ensure */
/* these styles override any previous auth modal styling    */
/* ====================================================== */

/* Base Auth Modal Container - High Specificity */
#brandit-login-modal.brandit-logo-modal .brandit-auth-form,
#brandit-signup-modal.brandit-logo-modal .brandit-auth-form,
#brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form,
#brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form,
#brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form,
#brandit-verify-email-modal.brandit-logo-modal .brandit-auth-form {
    padding: 26px 28px !important;
}

/* Auth Modal Heading */
#brandit-login-modal.brandit-logo-modal .brandit-auth-form h3,
#brandit-signup-modal.brandit-logo-modal .brandit-auth-form h3,
#brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form h3,
#brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form h3,
#brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form h3,
#brandit-verify-email-modal.brandit-logo-modal .brandit-auth-form h3 {
    margin: 0 0 14px 0 !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: #000000 !important;
}

/* Auth Modal Subtitle / Promo Text */
#brandit-login-modal.brandit-logo-modal .brandit-auth-form p,
#brandit-signup-modal.brandit-logo-modal .brandit-auth-form p,
#brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form p,
#brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form p,
#brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form p {
    margin: 0 0 14px 0 !important;
    font-size: 13px !important;
    text-align: center !important;
}

/* Form Groups - Minimal Spacing */
#brandit-login-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group,
#brandit-login-modal.brandit-logo-modal .brandit-auth-form .form-group,
#brandit-signup-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group,
#brandit-signup-modal.brandit-logo-modal .brandit-auth-form .form-group,
#brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group,
#brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .form-group,
#brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group,
#brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form .form-group,
#brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group,
#brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form .form-group {
    margin-bottom: var(--bd-group-gap) !important;
    gap: var(--bd-field-gap) !important;
}

/* Labels - Left Aligned with Minimal Bottom Margin */
#brandit-login-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group label,
#brandit-login-modal.brandit-logo-modal .brandit-auth-form .form-group label,
#brandit-signup-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group label,
#brandit-signup-modal.brandit-logo-modal .brandit-auth-form .form-group label,
#brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group label,
#brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .form-group label,
#brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group label,
#brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form .form-group label,
#brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group label,
#brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form .form-group label {
    display: block !important;
    text-align: left !important;
    margin-bottom: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #312a8a !important;
    line-height: 1.2 !important;
}

/* Input Fields */
#brandit-login-modal.brandit-logo-modal .brandit-auth-form input,
#brandit-login-modal.brandit-logo-modal .brandit-auth-form .form-control,
#brandit-signup-modal.brandit-logo-modal .brandit-auth-form input,
#brandit-signup-modal.brandit-logo-modal .brandit-auth-form .form-control,
#brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form input,
#brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .form-control,
#brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form input,
#brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form .form-control,
#brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form input,
#brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form .form-control {
    width: 100% !important;
    padding: 13px 14px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    transition: all 0.25s ease !important;
    height: auto !important;
    min-height: 46px !important;
    box-sizing: border-box !important;
}

/* Input Focus State */
#brandit-login-modal.brandit-logo-modal .brandit-auth-form input:focus,
#brandit-login-modal.brandit-logo-modal .brandit-auth-form .form-control:focus,
#brandit-signup-modal.brandit-logo-modal .brandit-auth-form input:focus,
#brandit-signup-modal.brandit-logo-modal .brandit-auth-form .form-control:focus,
#brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form input:focus,
#brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .form-control:focus,
#brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form input:focus,
#brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form .form-control:focus,
#brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form input:focus,
#brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form .form-control:focus {
    outline: none !important;
    border-color: #4208cc !important;
    box-shadow: 0 0 0 2px rgba(66, 8, 204, 0.1) !important;
}

/* Password Input Wrapper */
#brandit-login-modal.brandit-logo-modal .brandit-auth-form .password-input-wrapper,
#brandit-signup-modal.brandit-logo-modal .brandit-auth-form .password-input-wrapper,
#brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .password-input-wrapper,
#brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form .password-input-wrapper,
#brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form .password-input-wrapper {
    position: relative !important;
    width: 100% !important;
}

/* Password Input - Extra Right Padding */
#brandit-login-modal.brandit-logo-modal .brandit-auth-form .password-input-wrapper input,
#brandit-signup-modal.brandit-logo-modal .brandit-auth-form .password-input-wrapper input,
#brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .password-input-wrapper input,
#brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form .password-input-wrapper input,
#brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form .password-input-wrapper input {
    padding-right: 40px !important;
}

/* Password Toggle Button */
#brandit-login-modal.brandit-logo-modal .brandit-auth-form .password-toggle-btn,
#brandit-signup-modal.brandit-logo-modal .brandit-auth-form .password-toggle-btn,
#brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .password-toggle-btn,
#brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form .password-toggle-btn,
#brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form .password-toggle-btn {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 16px !important;
    color: #666666 !important;
    padding: 4px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    transition: all 0.25s ease !important;
}

#brandit-login-modal.brandit-logo-modal .brandit-auth-form .password-toggle-btn:hover,
#brandit-signup-modal.brandit-logo-modal .brandit-auth-form .password-toggle-btn:hover,
#brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .password-toggle-btn:hover,
#brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form .password-toggle-btn:hover,
#brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form .password-toggle-btn:hover {
    color: #4208cc !important;
    background: rgba(66, 8, 204, 0.05) !important;
}

/* Submit Buttons */
#brandit-login-modal.brandit-logo-modal .brandit-auth-form .brandit-generate-btn,
#brandit-login-modal.brandit-logo-modal .brandit-auth-form #brandit-login-submit,
#brandit-signup-modal.brandit-logo-modal .brandit-auth-form .brandit-generate-btn,
#brandit-signup-modal.brandit-logo-modal .brandit-auth-form #brandit-signup-submit,
#brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .brandit-generate-btn,
#brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form #brandit-forgot-submit,
#brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form .brandit-generate-btn,
#brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form #brandit-verify-submit,
#brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form .brandit-generate-btn,
#brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form #brandit-reset-submit {
    width: 100% !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 30px !important;
    margin-top: 6px !important;
    margin-bottom: 10px !important;
    min-height: 44px !important;
    background: linear-gradient(135deg, #4208cc, #d40253) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
}

/* Forgot Password Link */
#brandit-login-modal.brandit-logo-modal .brandit-forgot-password-link,
#brandit-signup-modal.brandit-logo-modal .brandit-forgot-password-link {
    text-align: center !important;
    margin-top: 6px !important;
    padding-top: 2px !important;
}

#brandit-login-modal.brandit-logo-modal .brandit-forgot-password-link a,
#brandit-signup-modal.brandit-logo-modal .brandit-forgot-password-link a {
    font-size: 12px !important;
    color: #666666 !important;
    text-decoration: none !important;
}

#brandit-login-modal.brandit-logo-modal .brandit-forgot-password-link a:hover,
#brandit-signup-modal.brandit-logo-modal .brandit-forgot-password-link a:hover {
    color: #4208cc !important;
    text-decoration: underline !important;
}

/* Switch Account Links */
#brandit-login-modal.brandit-logo-modal .brandit-auth-form p:last-of-type,
#brandit-signup-modal.brandit-logo-modal .brandit-auth-form p:last-of-type,
#brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form p:last-of-type,
#brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form p:last-of-type,
#brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form p:last-of-type {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    font-size: 13px !important;
}

#brandit-login-modal.brandit-logo-modal .brandit-auth-form a,
#brandit-signup-modal.brandit-logo-modal .brandit-auth-form a,
#brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form a,
#brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form a,
#brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form a {
    color: #4208cc !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

#brandit-login-modal.brandit-logo-modal .brandit-auth-form a:hover,
#brandit-signup-modal.brandit-logo-modal .brandit-auth-form a:hover,
#brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form a:hover,
#brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form a:hover,
#brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form a:hover {
    text-decoration: underline !important;
}

/* ====================================================== */
/* ========== MOBILE OPTIMIZED (max-width: 768px) ======= */
/* ====================================================== */

@media (max-width: 768px) {
    /* Modal Container - Tighter Padding */
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form,
    #brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form,
    #brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form,
    #brandit-verify-email-modal.brandit-logo-modal .brandit-auth-form {
        padding: 14px 18px !important;
    }
    
    /* Heading - Smaller */
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form h3,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form h3,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form h3,
    #brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form h3,
    #brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form h3 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }
    
    /* Subtitle text */
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form p,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form p,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form p,
    #brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form p,
    #brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form p {
        font-size: 12px !important;
        margin-bottom: 10px !important;
    }
    
    /* Form Groups */
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group,
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form .form-group,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form .form-group,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .form-group {
        margin-bottom: 10px !important;
    }
    
    /* Labels */
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group label,
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form .form-group label,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group label,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form .form-group label,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group label,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .form-group label {
        font-size: 12px !important;
        margin-bottom: 2px !important;
    }
    
    /* Input Fields */
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form input,
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form .form-control,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form input,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form .form-control,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form input,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .form-control {
        padding: 8px 12px !important;
        font-size: 13px !important;
        min-height: 38px !important;
    }
    
    /* Submit Buttons */
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form .brandit-generate-btn,
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form #brandit-login-submit,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form .brandit-generate-btn,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form #brandit-signup-submit,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .brandit-generate-btn,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form #brandit-forgot-submit {
        padding: 8px 14px !important;
        font-size: 13px !important;
        min-height: 40px !important;
        margin-top: 4px !important;
        margin-bottom: 8px !important;
    }
    
    /* Forgot Password Link */
    #brandit-login-modal.brandit-logo-modal .brandit-forgot-password-link,
    #brandit-signup-modal.brandit-logo-modal .brandit-forgot-password-link {
        margin-top: 4px !important;
    }
    
    #brandit-login-modal.brandit-logo-modal .brandit-forgot-password-link a,
    #brandit-signup-modal.brandit-logo-modal .brandit-forgot-password-link a {
        font-size: 11px !important;
    }
    
    /* Switch Account Links */
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form p:last-of-type,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form p:last-of-type,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form p:last-of-type {
        margin-top: 8px !important;
        font-size: 12px !important;
    }
    
    /* Password Toggle */
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form .password-toggle-btn,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form .password-toggle-btn,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .password-toggle-btn {
        right: 6px !important;
        font-size: 14px !important;
        padding: 3px 6px !important;
    }
    
    /* Password input adjustment */
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form .password-input-wrapper input,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form .password-input-wrapper input,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .password-input-wrapper input {
        padding-right: 36px !important;
    }
}

/* ====================================================== */
/* ========== EXTRA SMALL MOBILE (max-width: 480px) ===== */
/* ====================================================== */

@media (max-width: 480px) {
    /* Modal Container - Minimal padding */
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form,
    #brandit-verify-code-modal.brandit-logo-modal .brandit-auth-form,
    #brandit-reset-password-modal.brandit-logo-modal .brandit-auth-form {
        padding: 12px 16px !important;
    }
    
    /* Heading - Smallest */
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form h3,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form h3,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form h3 {
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }
    
    /* Subtitle text */
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form p,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form p,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form p {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }
    
    /* Form Groups */
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group,
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form .form-group,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form .form-group,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .form-group {
        margin-bottom: 8px !important;
    }
    
    /* Labels */
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group label,
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form .form-group label,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group label,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form .form-group label,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .brandit-form-group label,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .form-group label {
        font-size: 11px !important;
        margin-bottom: 1px !important;
    }
    
    /* Input Fields */
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form input,
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form .form-control,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form input,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form .form-control,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form input,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .form-control {
        padding: 6px 10px !important;
        font-size: 12px !important;
        min-height: 36px !important;
    }
    
    /* Submit Buttons */
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form .brandit-generate-btn,
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form #brandit-login-submit,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form .brandit-generate-btn,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form #brandit-signup-submit,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .brandit-generate-btn,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form #brandit-forgot-submit {
        padding: 7px 12px !important;
        font-size: 12px !important;
        min-height: 38px !important;
        margin-top: 2px !important;
        margin-bottom: 6px !important;
    }
    
    /* Forgot Password Link */
    #brandit-login-modal.brandit-logo-modal .brandit-forgot-password-link,
    #brandit-signup-modal.brandit-logo-modal .brandit-forgot-password-link {
        margin-top: 3px !important;
    }
    
    #brandit-login-modal.brandit-logo-modal .brandit-forgot-password-link a,
    #brandit-signup-modal.brandit-logo-modal .brandit-forgot-password-link a {
        font-size: 10px !important;
    }
    
    /* Switch Account Links */
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form p:last-of-type,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form p:last-of-type,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form p:last-of-type {
        margin-top: 6px !important;
        font-size: 11px !important;
    }
    
    /* Password Toggle */
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form .password-toggle-btn,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form .password-toggle-btn,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .password-toggle-btn {
        right: 5px !important;
        font-size: 12px !important;
        padding: 2px 5px !important;
    }
    
    /* Password input adjustment */
    #brandit-login-modal.brandit-logo-modal .brandit-auth-form .password-input-wrapper input,
    #brandit-signup-modal.brandit-logo-modal .brandit-auth-form .password-input-wrapper input,
    #brandit-forgot-password-modal.brandit-logo-modal .brandit-auth-form .password-input-wrapper input {
        padding-right: 32px !important;
    }
}

/* ====================================================== */
/* ========== ERROR/SUCCESS MESSAGES =================== */
/* ====================================================== */

#brandit-login-modal .brandit-auth-error,
#brandit-signup-modal .brandit-auth-error,
#brandit-forgot-password-modal .brandit-auth-error,
#brandit-verify-code-modal .brandit-auth-error,
#brandit-reset-password-modal .brandit-auth-error {
    margin-bottom: 12px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    text-align: center !important;
    background: rgba(239, 68, 68, 0.08) !important;
    color: #ef4444 !important;
    border-left: 3px solid #ef4444 !important;
}

#brandit-login-modal .brandit-auth-success,
#brandit-signup-modal .brandit-auth-success,
#brandit-forgot-password-modal .brandit-auth-success,
#brandit-verify-code-modal .brandit-auth-success,
#brandit-reset-password-modal .brandit-auth-success {
    margin-bottom: 12px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    text-align: center !important;
    background: rgba(16, 185, 129, 0.08) !important;
    color: #10b981 !important;
    border-left: 3px solid #10b981 !important;
}

#brandit-login-modal .brandit-auth-loading,
#brandit-signup-modal .brandit-auth-loading,
#brandit-forgot-password-modal .brandit-auth-loading,
#brandit-verify-code-modal .brandit-auth-loading,
#brandit-reset-password-modal .brandit-auth-loading {
    margin-bottom: 12px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    text-align: center !important;
    background: rgba(66, 8, 204, 0.06) !important;
    color: #4208cc !important;
    border-left: 3px solid #4208cc !important;
}

/* Small Spinner */
.brandit-spinner-small {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: brandit-spin 0.6s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

@keyframes brandit-spin {
    to { transform: rotate(360deg); }
}
/* ====================================================== */
/* ========== ADMIN DASHBOARD CHART FIXES ============== */
/* ====================================================== */

/* Chart container fixes - prevent excessive height */
.chart-card {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    margin-bottom: 0;
    overflow: hidden;
}

.chart-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Canvas container with fixed dimensions */
.chart-canvas-container {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 250px;
    max-height: 300px;
}

.chart-canvas-container canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 250px !important;
}

/* Ensure charts don't overflow on mobile */
@media (max-width: 768px) {
    .chart-canvas-container {
        min-height: 200px;
        max-height: 250px;
    }
    
    .chart-canvas-container canvas {
        max-height: 200px !important;
    }
    
    .chart-card {
        padding: 16px;
    }
    
    .chart-card h3 {
        font-size: 14px;
        margin-bottom: 12px;
    }
}

/* KPI Cards - ensure consistent height */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.kpi-card {
    background: white;
    border-radius: 20px;
    padding: 24px 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.kpi-title {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-value {
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #4208cc, #d40253);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

/* Responsive KPI grid */
@media (max-width: 1200px) {
    .kpi-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .kpi-card {
        padding: 16px;
        min-height: 110px;
    }
    
    .kpi-value {
        font-size: 28px;
    }
    
    .kpi-title {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .kpi-value {
        font-size: 24px;
    }
}

/* Charts grid responsive */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

@media (max-width: 1024px) {
    .charts-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Table container fixes */
.table-container {
    background: white;
    border-radius: 20px;
    padding: 20px 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    margin-bottom: 24px;
    overflow-x: auto;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.table-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

/* Data table responsive */
.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
}

.data-table th,
.data-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 14px;
}

.data-table th {
    background: linear-gradient(135deg, rgba(66,8,204,0.04), rgba(212,2,83,0.04));
    font-weight: 600;
    color: #4208cc;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .table-container {
        padding: 16px;
    }
    
    .data-table th,
    .data-table td {
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* Admin header responsive */
.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding: 20px 28px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    flex-wrap: wrap;
    gap: 16px;
}

.admin-header h1 {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #4208cc, #d40253);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.admin-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .admin-header {
        flex-direction: column;
        text-align: center;
        padding: 16px 20px;
    }
    
    .admin-header h1 {
        font-size: 20px;
    }
    
    .admin-header-right {
        justify-content: center;
    }
}

/* Auto-refresh badge */
.auto-refresh-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #10b981;
    font-weight: 500;
    margin-top: 6px;
}

.auto-refresh-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.status-success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.status-failure {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.status-signup {
    background: rgba(66, 8, 204, 0.08);
    color: #4208cc;
}

/* Refresh button */
.refresh-btn {
    background: linear-gradient(135deg, #4208cc, #d40253);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.refresh-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(66, 8, 204, 0.2);
}

/* Admin container padding */
.admin-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

@media (max-width: 768px) {
    .admin-container {
        padding: 16px;
    }
}

/* Fix for chart.js canvas excessive height */
canvas {
    max-width: 100%;
    height: auto !important;
}
/* ====================================================== */
/* ========== CHATGPT STYLE PROMPT FIELD ================ */
/* ====================================================== */

.brandit-chatgpt-prompt-wrapper {
    position: relative;
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 28px;
    padding: 12px 14px;
    transition: var(--transition);
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    margin-top: 16px;
}

.brandit-chatgpt-prompt-wrapper:focus-within {
    border-color: rgba(66, 8, 204, 0.35);
    box-shadow: 0 4px 18px rgba(66, 8, 204, 0.08);
}

/* Upload previews INSIDE field */
.brandit-inline-upload-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

/* Preview chip */
.brandit-inline-upload-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
    max-width: 320px;
    padding: 12px;
    background: #f8f8f8;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px;
    transition: var(--transition);
}

.brandit-inline-upload-chip:hover {
    background: #f0f0f0;
    border-color: var(--brandit-primary);
}

.brandit-inline-upload-thumb {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    overflow: hidden;
    background: #eaeaea;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brandit-inline-upload-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brandit-inline-upload-thumb .brandit-inline-file-icon {
    font-size: 24px;
    color: var(--text-muted);
}

.brandit-inline-upload-meta {
    min-width: 0;
    flex: 1;
}

.brandit-inline-upload-name {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brandit-inline-upload-type {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Remove icon */
.brandit-inline-remove-upload {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: #000000;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    transition: var(--transition);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    padding: 0;
}

.brandit-inline-remove-upload:hover {
    transform: scale(1.12);
    background: var(--brandit-error);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

/* Input row */
.brandit-chatgpt-input-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

/* Attach icon INSIDE field */
.brandit-inline-attach-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #111827;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}

.brandit-inline-attach-btn:hover {
    background: rgba(0,0,0,0.06);
    transform: rotate(90deg);
}

.brandit-inline-attach-btn:active {
    transform: scale(0.95);
}

/* Textarea */
.brandit-chatgpt-textarea {
    flex: 1;
    border: none !important;
    outline: none !important;
    resize: none;
    background: transparent !important;
    min-height: 24px;
    max-height: 220px;
    overflow-y: auto;
    padding: 8px 0;
    font-size: 16px;
    line-height: 1.5;
    color: #111827;
    box-shadow: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif !important;
}

.brandit-chatgpt-textarea::placeholder {
    color: #9ca3af;
}

.brandit-chatgpt-textarea:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .brandit-inline-upload-chip {
        min-width: 100%;
        max-width: 100%;
    }

    .brandit-chatgpt-prompt-wrapper {
        border-radius: 22px;
        padding: 10px;
    }
    
    .brandit-inline-upload-thumb {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }
    
    .brandit-inline-upload-name {
        font-size: 13px;
    }
    
    .brandit-chatgpt-textarea {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .brandit-chatgpt-prompt-wrapper {
        border-radius: 18px;
        padding: 8px 10px;
    }
    
    .brandit-inline-upload-chip {
        padding: 10px;
    }
    
    .brandit-inline-upload-thumb {
        width: 40px;
        height: 40px;
        border-radius: 8px;
    }
    
    .brandit-inline-attach-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
}
/* ====================================================== */
/* ========== DRAG & DROP ACTIVE STATE ================== */
/* ====================================================== */

.brandit-chatgpt-prompt-wrapper.brandit-drop-active {
    border-color: var(--brandit-primary) !important;
    background: rgba(66, 8, 204, 0.03) !important;
    box-shadow: 0 0 0 3px rgba(66, 8, 204, 0.1) !important;
}

.brandit-chatgpt-prompt-wrapper.brandit-drop-active::after {
    content: 'Drop images here';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 600;
    color: var(--brandit-primary);
    pointer-events: none;
    z-index: 1;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 16px;
    border-radius: 20px;
}
/* ====================================================== */
/* ========== WEEKLY CONTENT CHATGPT PROMPT ============== */
/* ====================================================== */

.weekly-chatgpt-prompt {
    margin-top: 0;
}

.weekly-chatgpt-prompt .brandit-inline-upload-chip {
    min-width: 180px;
    max-width: 260px;
    padding: 10px;
}

.weekly-chatgpt-prompt .brandit-inline-upload-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

.weekly-chatgpt-prompt .brandit-inline-upload-name {
    font-size: 13px;
}

.weekly-chatgpt-prompt .brandit-inline-upload-type {
    font-size: 11px;
}

.weekly-chatgpt-prompt .brandit-chatgpt-textarea {
    font-size: 14px;
    min-height: 20px;
    max-height: 180px;
}

.weekly-chatgpt-prompt .brandit-inline-attach-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
}

/* Day card open state */
.weekly-day-body {
    animation: slideDown 0.3s ease-out;
}

/* Generate single day button hover */
.weekly-generate-day-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-brand);
}

.weekly-generate-day-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .weekly-chatgpt-prompt .brandit-inline-upload-chip {
        min-width: 100%;
        max-width: 100%;
        padding: 8px;
    }
    
    .weekly-chatgpt-prompt .brandit-inline-upload-thumb {
        width: 40px;
        height: 40px;
        border-radius: 8px;
    }
    
    .weekly-chatgpt-prompt .brandit-chatgpt-textarea {
        font-size: 13px;
    }
    
    .weekly-chatgpt-prompt .brandit-inline-attach-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }
}

@media (max-width: 480px) {
    .weekly-chatgpt-prompt .brandit-inline-upload-thumb {
        width: 36px;
        height: 36px;
    }
    
    .weekly-chatgpt-prompt .brandit-inline-upload-name {
        font-size: 12px;
    }
}
/* ====================================================== */
/* ENHANCED CHATGPT STYLE PROMPT FIELD - INCREASED HEIGHT */
/* ====================================================== */

.brandit-chatgpt-prompt-wrapper {
    position: relative;
    width: 100%;
    background: #ffffff;
    border: 1.5px solid rgba(0,0,0,0.12);
    border-radius: 16px;
    padding: 16px 20px;
    transition: var(--transition);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    margin-top: 8px;
}

.brandit-chatgpt-prompt-wrapper:focus-within {
    border-color: rgba(66, 8, 204, 0.4);
    box-shadow: 0 4px 20px rgba(66, 8, 204, 0.1);
}

.brandit-chatgpt-textarea {
    flex: 1;
    border: none !important;
    outline: none !important;
    resize: none;
    background: transparent !important;
    min-height: 180px !important; /* INCREASED from 24px */
    max-height: 400px !important; /* INCREASED from 220px */
    overflow-y: auto;
    padding: 12px 16px !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #111827;
    box-shadow: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif !important;
    transition: none;
}

.brandit-chatgpt-textarea::placeholder {
    color: #9ca3af;
    font-size: 14px;
    line-height: 1.5;
}

.brandit-chatgpt-textarea:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Inline upload previews */
.brandit-inline-upload-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Input row */
.brandit-chatgpt-input-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Attach button */
.brandit-inline-attach-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.1);
    background: #f8f9fb;
    color: #111827;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
    margin-top: 4px;
}

.brandit-inline-attach-btn:hover {
    background: rgba(66, 8, 204, 0.08);
    border-color: var(--brandit-primary);
    transform: rotate(90deg);
}

.brandit-inline-attach-btn:active {
    transform: scale(0.95) rotate(90deg);
}

/* Prompt hint */
.brandit-prompt-chat-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(66, 8, 204, 0.03);
    border-radius: 12px;
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
    border-left: 3px solid var(--brandit-primary);
}

/* Drop active state */
.brandit-chatgpt-prompt-wrapper.brandit-drop-active {
    border-color: var(--brandit-primary) !important;
    background: rgba(66, 8, 204, 0.03) !important;
    box-shadow: 0 0 0 3px rgba(66, 8, 204, 0.1) !important;
}

.brandit-chatgpt-prompt-wrapper.brandit-drop-active::after {
    content: 'Drop images here';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 600;
    color: var(--brandit-primary);
    pointer-events: none;
    z-index: 1;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 16px;
    border-radius: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .brandit-chatgpt-prompt-wrapper {
        border-radius: 14px;
        padding: 12px 14px;
    }
    
    .brandit-chatgpt-textarea {
        min-height: 150px !important;
        max-height: 350px !important;
        font-size: 14px !important;
        padding: 10px 12px !important;
    }
    
    .brandit-inline-attach-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }
}

@media (max-width: 480px) {
    .brandit-chatgpt-prompt-wrapper {
        border-radius: 12px;
        padding: 10px 12px;
    }
    
    .brandit-chatgpt-textarea {
        min-height: 130px !important;
        max-height: 320px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    
    .brandit-inline-attach-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
}
/* ====================================================== */
/* WEEKLY CONTENT MODE SWITCHER */
/* ====================================================== */

.brandit-weekly-mode-switcher {
    display: flex;
    gap: 8px;
    background: var(--bg-soft);
    padding: 6px;
    border-radius: var(--radius-lg);
    width: fit-content;
    max-width: 100%;
}

.brandit-weekly-mode-btn {
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    background: transparent;
    border: 2px solid transparent;
    color: var(--text-muted);
    transition: var(--transition);
    min-height: 44px;
    white-space: nowrap;
    flex: 1;
    text-align: center;
}

.brandit-weekly-mode-btn.active {
    background: var(--brand-gradient) !important;
    color: white !important;
    border: 2px solid #4208cc !important;
    outline: 3px solid rgba(66, 8, 204, 0.3) !important;
    outline-offset: 2px !important;
    box-shadow: 0 4px 12px rgba(66, 8, 204, 0.4) !important;
}

.brandit-weekly-mode-btn:not(.active):hover {
    background: rgba(66, 8, 204, 0.05);
    color: var(--brandit-primary);
    border-color: var(--brandit-primary) !important;
}

.brandit-weekly-mode-btn:focus-visible {
    outline: 3px solid var(--brandit-primary) !important;
    outline-offset: 2px !important;
}

/* AI Info Box */
.brandit-weekly-ai-info {
    padding: 20px 24px;
    background: rgba(16, 185, 129, 0.05);
    border-radius: var(--radius-md);
    border: 1px solid var(--brandit-success);
    border-left: 4px solid var(--brandit-success);
    margin-bottom: 24px;
    transition: var(--transition);
}

.brandit-weekly-ai-info h4 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
}

.brandit-weekly-ai-info p {
    margin: 0;
    font-size: 14px;
    color: #111827;
    line-height: 1.6;
}

/* Day Selector for AI Mode */
.brandit-weekly-day-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.brandit-weekly-day-option {
    padding: 12px 16px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-light);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}

.brandit-weekly-day-option:hover {
    border-color: var(--brandit-primary);
    background: rgba(66, 8, 204, 0.03);
}

.brandit-weekly-day-option:has(input:checked) {
    border-color: var(--brandit-primary) !important;
    background: rgba(66, 8, 204, 0.05);
}

/* AI Suggestions Preview */
#ai-suggestions-preview {
    margin-bottom: 24px;
    padding: 16px;
    background: rgba(66, 8, 204, 0.03);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

#ai-suggestions-preview h4 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--brandit-primary);
}

/* AI Mode specific */
.brandit-weekly-ai-mode .weekly-day-card {
    display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .brandit-weekly-mode-switcher {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .brandit-weekly-mode-btn {
        padding: 10px 16px;
        font-size: 13px;
        min-height: 40px;
    }
    
    .brandit-weekly-day-option {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }
    
    .brandit-weekly-ai-info {
        padding: 16px;
    }
    
    .brandit-weekly-ai-info h4 {
        font-size: 14px;
    }
    
    .brandit-weekly-ai-info p {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .brandit-weekly-mode-btn {
        padding: 8px 12px;
        font-size: 12px;
        min-height: 36px;
    }
    
    .brandit-weekly-day-option {
        padding: 10px 12px;
    }
}
/* ====================================================== */
/* NOTIFICATION BELL */
/* ====================================================== */

#brandit-notification-bell {
    position: relative;
    cursor: pointer;
    padding: 8px;
    transition: var(--transition);
    border-radius: 50%;
    color: var(--text-secondary);
}

#brandit-notification-bell:hover {
    background: var(--bg-soft);
    color: var(--brandit-primary);
}

#brandit-notification-bell.has-notifications {
    animation: none;
}

@keyframes bellRing {
    0%, 100% { transform: rotate(0); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-15deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(0); }
}

.notification-count {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--close-gradient);
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

/* Notification Dropdown */
.brandit-notification-dropdown {
    animation: dropdownFadeIn 0.2s ease-out;
}

.notification-item:hover {
    background: var(--bg-soft) !important;
}

/* Toggle Switch */
.brandit-toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    cursor: pointer;
}

.brandit-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.brandit-toggle-switch .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    transition: 0.3s;
    border-radius: 28px;
}

.brandit-toggle-switch input:checked + .toggle-slider {
    background: var(--brand-gradient);
}

.brandit-toggle-switch .toggle-slider-circle {
    position: absolute;
    content: '';
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 3px;
    background: white;
    transition: 0.3s;
    border-radius: 50%;
}

.brandit-toggle-switch input:checked ~ .toggle-slider-circle {
    left: 26px;
}

/* Mode Switcher Wrapper */
.brandit-weekly-mode-switcher-wrapper {
    padding: 20px;
    background: var(--bg-main);
    border-radius: var(--radius-lg);
    border: 2px solid rgba(66, 8, 204, 0.2);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}

/* AI Suggestion Edit Cards */
.ai-suggestion-card {
    transition: var(--transition);
}

.ai-suggestion-card:hover {
    border-color: var(--brandit-primary) !important;
    box-shadow: var(--shadow-sm);
}

/* Responsive */
@media (max-width: 768px) {
    .brandit-notification-dropdown {
        width: 90vw !important;
        right: 5vw !important;
        left: 5vw !important;
    }
    
    .brandit-weekly-mode-switcher-wrapper {
        padding: 16px;
    }
}
/* ====================================================== */
/* NOTIFICATION BELL - ALWAYS VISIBLE */
/* ====================================================== */

.brandit-notification-bell-btn {
    position: relative !important;
    cursor: pointer !important;
    padding: 8px !important;
    transition: var(--transition) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
    flex-shrink: 0 !important;
    margin-left: 8px !important;
    outline: none !important;
}

.brandit-notification-bell-btn:hover {
    background: var(--bg-soft) !important;
    color: var(--brandit-primary) !important;
}

.brandit-notification-bell-btn:focus-visible {
    outline: 2px solid var(--brandit-primary) !important;
    outline-offset: 2px !important;
}

.brandit-notification-bell-btn.has-notifications {
    animation: none;
}

@keyframes bellRing {
    0%, 100% { transform: rotate(0); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-15deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(0); }
}

#notification-count-badge {
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
    background: var(--close-gradient) !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 9px !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4) !important;
    pointer-events: none !important;
    line-height: 1 !important;
}

/* Navbar actions - ensure proper flex layout */
.brandit-navbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
}

/* Responsive */
@media (max-width: 768px) {
    .brandit-notification-bell-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        padding: 6px !important;
        margin-left: 4px !important;
    }
    
    .brandit-notification-bell-btn svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    #notification-count-badge {
        min-width: 16px !important;
        height: 16px !important;
        border-radius: 8px !important;
        font-size: 9px !important;
    }
}
/* ====================================================== */
/* WEEKLY CONTENT MODE SWITCHER - SIDE BY SIDE ON MOBILE */
/* ====================================================== */

.brandit-weekly-mode-switcher-wrapper {
    padding: 16px 20px;
    background: var(--bg-main);
    border-radius: var(--radius-lg);
    border: 2px solid rgba(66, 8, 204, 0.2);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}

.brandit-weekly-mode-switcher {
    display: flex;
    gap: 8px;
    background: var(--bg-soft);
    padding: 6px;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 100%;
    border: 1.5px solid rgba(66, 8, 204, 0.15);
}

.brandit-weekly-mode-btn {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    min-height: 46px;
    white-space: nowrap;
    text-align: center;
    background: transparent;
    color: var(--text-muted);
    border: 2px solid transparent;
}

.brandit-weekly-mode-btn.active {
    background: var(--brand-gradient) !important;
    color: white !important;
    border: 2px solid #4208cc !important;
    outline: 3px solid rgba(66, 8, 204, 0.3) !important;
    outline-offset: 2px !important;
    box-shadow: 0 4px 12px rgba(66, 8, 204, 0.4) !important;
}

.brandit-weekly-mode-btn:not(.active):hover {
    background: rgba(66, 8, 204, 0.05);
    color: var(--brandit-primary);
    border-color: var(--brandit-primary) !important;
}

/* ====================================================== */
/* AUTO-GENERATE & GENERATE BUTTON - SAME ROW */
/* ====================================================== */

.weekly-generate-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 16px;
    width: 100%;
    border-top: 2px solid var(--border-soft);
    padding-top: 20px;
    margin-bottom: 4px;
}

.weekly-auto-generate-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

.weekly-auto-generate-wrapper label {
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
}

.weekly-auto-generate-wrapper input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    accent-color: var(--brandit-primary);
    cursor: pointer;
}

/* ====================================================== */
/* MOBILE RESPONSIVE - BUTTONS SIDE BY SIDE */
/* ====================================================== */

@media (max-width: 768px) {
    .brandit-weekly-mode-switcher-wrapper {
        padding: 12px 14px;
    }
    
    .brandit-weekly-mode-switcher {
        gap: 6px;
        padding: 4px;
    }
    
    /* Force buttons side by side on mobile */
    .brandit-weekly-mode-btn {
        flex: 1 !important;
        font-size: 12px !important;
        padding: 10px 8px !important;
        min-height: 40px !important;
        white-space: nowrap !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Auto-generate and Generate button in same row on mobile */
    .weekly-generate-row {
        flex-wrap: nowrap !important;
        gap: 10px !important;
    }
    
    .weekly-auto-generate-wrapper label {
        font-size: 12px !important;
    }
    
    .weekly-auto-generate-wrapper input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
    }
    
    #generate-weekly-btn {
        padding: 10px 16px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 480px) {
    .brandit-weekly-mode-switcher-wrapper {
        padding: 10px 12px;
    }
    
    .brandit-weekly-mode-btn {
        font-size: 11px !important;
        padding: 8px 6px !important;
        min-height: 36px !important;
    }
    
    .weekly-generate-row {
        gap: 8px !important;
    }
    
    .weekly-auto-generate-wrapper label {
        font-size: 11px !important;
    }
    
    #generate-weekly-btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
}

/* For very small screens, keep buttons side by side */
@media (max-width: 360px) {
    .brandit-weekly-mode-btn {
        font-size: 10px !important;
        padding: 8px 4px !important;
        min-height: 34px !important;
    }
    
    .weekly-auto-generate-wrapper label {
        font-size: 10px !important;
    }
    
    #generate-weekly-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
}
/* ====================================================== */
/* CONSISTENT MODE TOGGLE BUTTONS - ALL SECTIONS */
/* ====================================================== */

/* Wrapper with outline - Used for both "Use Form/Use Single Prompt" and "Fill in Content/AI Assisted" */
.brandit-mode-toggle-wrapper,
.brandit-weekly-mode-switcher-wrapper {
    padding: 16px 20px;
    background: var(--bg-main);
    border-radius: var(--radius-lg);
    border: 2px solid rgba(66, 8, 204, 0.2);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}

/* Inner toggle container */
.brandit-mode-toggle,
.brandit-weekly-mode-switcher {
    display: flex;
    gap: 8px;
    background: var(--bg-soft);
    padding: 6px;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 100%;
    border: 1.5px solid rgba(66, 8, 204, 0.15);
}

/* Individual buttons - Same styling for both sections */
.brandit-mode-btn,
.brandit-weekly-mode-btn {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    min-height: 46px;
    white-space: nowrap;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-muted);
    border: 2px solid transparent;
}

/* Active state - Same for both sections */
.brandit-mode-btn.active,
.brandit-weekly-mode-btn.active {
    background: var(--brand-gradient) !important;
    color: white !important;
    border: 2px solid #4208cc !important;
    outline: 3px solid rgba(66, 8, 204, 0.3) !important;
    outline-offset: 2px !important;
    box-shadow: 0 4px 12px rgba(66, 8, 204, 0.4) !important;
    transform: scale(1.02);
}

/* Hover state - Same for both sections */
.brandit-mode-btn:not(.active):hover,
.brandit-weekly-mode-btn:not(.active):hover {
    background: rgba(66, 8, 204, 0.05);
    color: var(--brandit-primary);
    border-color: var(--brandit-primary) !important;
    opacity: 1;
}

/* Focus state for accessibility */
.brandit-mode-btn:focus-visible,
.brandit-weekly-mode-btn:focus-visible {
    outline: 3px solid var(--brandit-primary) !important;
    outline-offset: 2px !important;
    border: 2px solid #4208cc !important;
}

.brandit-mode-btn:focus,
.brandit-weekly-mode-btn:focus {
    outline: none;
}

/* ====================================================== */
/* RESPONSIVE - BUTTONS ALWAYS SIDE BY SIDE */
/* ====================================================== */

@media (max-width: 768px) {
    .brandit-mode-toggle-wrapper,
    .brandit-weekly-mode-switcher-wrapper {
        padding: 12px 14px;
    }
    
    .brandit-mode-toggle,
    .brandit-weekly-mode-switcher {
        gap: 6px;
        padding: 4px;
    }
    
    .brandit-mode-btn,
    .brandit-weekly-mode-btn {
        flex: 1 !important;
        font-size: 12px !important;
        padding: 10px 8px !important;
        min-height: 40px !important;
        white-space: nowrap !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .brandit-mode-btn.active,
    .brandit-weekly-mode-btn.active {
        border: 2px solid #4208cc !important;
        outline: 4px solid rgba(66, 8, 204, 0.4) !important;
        outline-offset: 2px !important;
        box-shadow: 0 4px 15px rgba(66, 8, 204, 0.5) !important;
    }
}

@media (max-width: 480px) {
    .brandit-mode-toggle-wrapper,
    .brandit-weekly-mode-switcher-wrapper {
        padding: 10px 12px;
    }
    
    .brandit-mode-btn,
    .brandit-weekly-mode-btn {
        font-size: 11px !important;
        padding: 8px 6px !important;
        min-height: 36px !important;
    }
}

@media (max-width: 360px) {
    .brandit-mode-btn,
    .brandit-weekly-mode-btn {
        font-size: 10px !important;
        padding: 8px 4px !important;
        min-height: 34px !important;
    }
}

/* ====================================================== */
/* NOTIFICATION ITEM HOVER & CLICK STYLES */
/* ====================================================== */

.notification-item {
    transition: all 0.2s ease;
}

.notification-item:hover {
    background: var(--bg-soft) !important;
}

.notification-item:active {
    transform: scale(0.99);
}

.brandit-notification-scroll::-webkit-scrollbar {
    width: 4px;
}

.brandit-notification-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.brandit-notification-scroll::-webkit-scrollbar-thumb {
    background: var(--border-soft);
    border-radius: 4px;
}
/* ====================================================== */
/* INSTANT MODAL DISPLAY - NO TRANSITIONS/ANIMATIONS */
/* ====================================================== */

.brandit-logo-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    transition: none !important;
    animation: none !important;
}

.brandit-logo-modal.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.brandit-logo-modal-content {
    background: var(--bg-main);
    border-radius: var(--radius-lg);
    max-width: 900px;
    width: 95%;
    max-height: 90vh;
    position: relative;
    overflow-y: auto;
    pointer-events: auto;
    transition: none !important;
    animation: none !important;
}

/* Google SSO Button */
.brandit-google-btn {
    width: 100%;
    padding: 10px 16px;
    background: white;
    color: #3c4043;
    border: 1.5px solid #dadce0;
    border-radius: 30px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    margin-bottom: 12px;
}

.brandit-google-btn:hover {
    background: #f8f9fa !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.brandit-google-btn:active {
    background: #e8eaed !important;
}

.brandit-google-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
}

/* Responsive */
@media (max-width: 768px) {
    .brandit-google-btn {
        font-size: 13px;
        padding: 8px 14px;
        min-height: 40px;
    }
}
/* ====================================================== */
/* GOOGLE SSO BUTTON STYLES */
/* ====================================================== */

.brandit-google-btn {
    width: 100%;
    padding: 12px 16px;
    background: white;
    color: #3c4043;
    border: 1.5px solid #dadce0;
    border-radius: 30px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    margin-bottom: 12px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.brandit-google-btn:hover {
    background: #f8f9fa !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
    border-color: #c4c7cc !important;
}

.brandit-google-btn:active {
    background: #e8eaed !important;
    box-shadow: none !important;
}

.brandit-google-btn:focus-visible {
    outline: 2px solid #4285f4;
    outline-offset: 2px;
}

.brandit-google-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.brandit-google-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    user-select: none;
}

.brandit-google-divider span:first-child,
.brandit-google-divider span:last-child {
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

.brandit-google-divider span:nth-child(2) {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 768px) {
    .brandit-google-btn {
        font-size: 13px;
        padding: 10px 14px;
        min-height: 42px;
    }
    
    .brandit-google-btn svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .brandit-google-btn {
        font-size: 12px;
        padding: 8px 12px;
        min-height: 38px;
        gap: 8px;
    }
}
/* Admin Dashboard Table Container */
.brandit-activity-dashboard .table-container {
    transition: box-shadow 0.2s ease;
}

.brandit-activity-dashboard .table-container:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Status Badge */
.brandit-activity-dashboard .status-badge {
    transition: all 0.2s ease;
}

/* Pagination Styling */
.brandit-activity-dashboard .tablenav-pages .page-numbers {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 2px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s ease;
}

.brandit-activity-dashboard .tablenav-pages .page-numbers.current {
    background: linear-gradient(135deg, #4208cc, #d40253);
    color: white;
    border-color: transparent;
}

.brandit-activity-dashboard .tablenav-pages .page-numbers:hover:not(.current) {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

/* Filter Input Focus */
.brandit-activity-dashboard select:focus,
.brandit-activity-dashboard input:focus {
    outline: none;
    border-color: #4208cc !important;
    box-shadow: 0 0 0 2px rgba(66, 8, 204, 0.1) !important;
}
/* ====================================================== */
/* LOGIN/SIGNUP MODAL INPUT TEXT VISIBILITY FIX         */
/* ====================================================== */

#brandit-login-modal input,
#brandit-signup-modal input,
#brandit-forgot-password-modal input,
#brandit-verify-code-modal input,
#brandit-reset-password-modal input,
.brandit-auth-modal input,
.brandit-auth-form input,
.brandit-auth-form .form-control {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    opacity: 1 !important;
    background-color: #ffffff !important;
}

#brandit-login-modal input::placeholder,
#brandit-signup-modal input::placeholder,
#brandit-forgot-password-modal input::placeholder,
#brandit-verify-code-modal input::placeholder,
#brandit-reset-password-modal input::placeholder,
.brandit-auth-form input::placeholder,
.brandit-auth-form .form-control::placeholder {
    color: #555555 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #555555 !important;
}

/* Ensure dropdown options are readable */
#brandit-login-modal select,
#brandit-signup-modal select {
    color: #000000 !important;
    background-color: #ffffff !important;
}
/* ====================================================== */
/* MEMORIAL FLYER MODE STYLES                           */
/* ====================================================== */

/* Hide logo section in memorial mode */
.memorial-mode .brandit-flyer-logo-upload-section,
.memorial-mode #brandit-flyer-logo-upload-area,
.memorial-mode .brandit-logo-upload-section {
    display: none !important;
}

/* Memorial portrait preview styling */
#brandit-memorial-portrait-preview {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}

#brandit-memorial-portrait-preview .brandit-image-preview {
    position: relative;
    display: inline-block;
}

/* Memorial section styling */
#memorial-service-section {
    animation: fadeIn 0.3s ease-out;
}

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

/* Memorial form group styling */
.memorial-service-group {
    border-left: 3px solid #6b7280;
    padding-left: 16px;
    margin-bottom: 20px;
}

/* Responsive memorial styles */
@media (max-width: 768px) {
    #brandit-memorial-portrait-preview img {
        width: 100px !important;
        height: 100px !important;
    }
}
/* Ensure all flyer form rows stack on mobile */
@media (max-width: 768px) {
    .form-grid-2 {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
}

/* ── Flyer Wizard (BFW) Steps CSS ─────────────────────────── */
.bfw-wizard-wrap {
    padding: 0;
}

.bfw-wizard {
    background: var(--bg-main, #fff);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 2px 16px rgba(66,8,204,0.08);
    border: 1px solid var(--border-light, #eee);
    max-width: 860px;
    margin: 0 auto;
}

/* ── Step indicator ─────────────────────────────────── */
.bfw-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.bfw-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 80px;
}

.bfw-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid #ddd;
    background: #f5f5f5;
    color: #aaa;
    transition: all 0.25s;
}

.bfw-step.active .bfw-step-num {
    background: var(--brand-gradient, linear-gradient(135deg,#4208cc,#d40253));
    border-color: #4208cc;
    color: #fff;
}

.bfw-step.done .bfw-step-num {
    background: var(--brandit-success, #22c55e);
    border-color: #22c55e;
    color: #fff;
}

.bfw-step-label {
    font-size: 11px;
    font-weight: 500;
    color: #aaa;
    text-align: center;
}

.bfw-step.active .bfw-step-label { color: #4208cc; font-weight: 700; }
.bfw-step.done  .bfw-step-label { color: #22c55e; }

.bfw-step-line {
    flex: 1;
    height: 2px;
    background: #ddd;
    margin-top: -22px;
    min-width: 24px;
    max-width: 60px;
    align-self: flex-start;
    margin-left: 4px;
    margin-right: 4px;
}

.bfw-step-line.done { background: #22c55e; }

/* ── Section title ──────────────────────────────────── */
.bfw-section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main, #1a1a2e);
    margin: 0 0 24px;
    border-bottom: 2px solid var(--border-light, #eee);
    padding-bottom: 12px;
}

/* ── Fields ─────────────────────────────────────────── */
.bfw-field {
    margin-bottom: 20px;
}

.bfw-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--brandit-primary, #4208cc);
    margin-bottom: 7px;
}

.bfw-label.bfw-required::after {
    content: " *";
    color: #ef4444;
}

.bfw-optional {
    font-weight: 400;
    color: var(--text-muted, #888);
    font-size: 11px;
}

.bfw-input, .bfw-select, .bfw-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border-light, #e5e7eb);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-main, #1a1a2e);
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.bfw-input:focus, .bfw-select:focus, .bfw-textarea:focus {
    border-color: #4208cc;
    box-shadow: 0 0 0 3px rgba(66,8,204,0.1);
}

.bfw-textarea { resize: vertical; min-height: 100px; }
.bfw-select   {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 38px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 1.5L7 6.5L13 1.5' stroke='%234208cc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 8px;
}
.bfw-select::-ms-expand { display: none; }

/* ── Grid layouts ───────────────────────────────────── */
.bfw-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.bfw-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 680px) {
    .bfw-row-2, .bfw-row-3 { grid-template-columns: 1fr; }
}

/* ── Top back button (above form fields) ──────────────── */
.bfw-top-back-row {
    margin: 0 0 16px 0;
}
.bfw-top-back-btn {
    background: transparent;
    border: 1.5px solid var(--border-light, #e5e7eb);
    color: #4208cc;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.bfw-top-back-btn:hover {
    background: rgba(66,8,204,0.06);
    border-color: #4208cc;
}

/* ── Upload areas ───────────────────────────────────── */
.bfw-upload-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px;
    border: 2px dashed #c4b5fd;
    border-radius: 10px;
    background: rgba(66,8,204,0.03);
    cursor: pointer;
    font-size: 14px;
    color: #4208cc;
    font-weight: 500;
    transition: background 0.2s, border-color 0.2s;
}

.bfw-upload-area:hover {
    background: rgba(66,8,204,0.07);
    border-color: #4208cc;
}

/* ── Image preview ──────────────────────────────────── */
.bfw-img-preview-area {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.bfw-img-preview-wrap {
    position: relative;
    display: inline-block;
}

.bfw-img-preview {
    max-height: 70px;
    max-width: 120px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #ddd;
    display: block;
}

.bfw-remove-img {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* ── Color pickers ──────────────────────────────────── */
.bfw-color-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bfw-color-input {
    width: 44px;
    height: 38px;
    border: none;
    padding: 2px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.bfw-color-hex {
    flex: 1;
    font-family: monospace;
}

/* ── Products section ───────────────────────────────── */
.bfw-products-section {
    margin-bottom: 20px;
}

.bfw-products-box {
    background: #f8f7ff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
}

.bfw-products-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-main, #1a1a2e);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.bfw-products-header-row {
    display: grid;
    grid-template-columns: 80px 1fr 100px 36px;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    padding: 0 4px;
    margin-bottom: 10px;
}

.bfw-product-row {
    display: grid;
    grid-template-columns: 80px 1fr 100px 36px;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.bfw-prod-col-img  { min-width: 0; }
.bfw-prod-col-desc { min-width: 0; }
.bfw-prod-col-price { min-width: 0; }

.bfw-product-img-upload {
    padding: 8px 6px;
    font-size: 11px;
    text-align: center;
    flex-direction: column;
    gap: 4px;
    min-height: 56px;
}

.bfw-remove-product {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s;
}

.bfw-remove-product:hover { background: #fee2e2; }

.bfw-add-product-btn {
    background: #1a1a2e;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: block;
}

.bfw-add-product-btn:hover { background: #2d2d4e; }

@media (max-width: 600px) {
    .bfw-products-header-row,
    .bfw-product-row { grid-template-columns: 60px 1fr 80px 32px; gap: 6px; }
}

/* ── Footer nav ─────────────────────────────────────── */
.bfw-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light, #eee);
    gap: 12px;
}

.bfw-footer-left, .bfw-footer-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bfw-back-btn, .bfw-back-link {
    background: none;
    border: none;
    color: var(--brandit-primary, #4208cc);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    padding: 8px 0;
}

.bfw-back-link { text-decoration: none; }
.bfw-back-link:hover { text-decoration: underline; }

.bfw-skip-btn {
    background: none;
    border: 1.5px solid var(--brandit-primary, #4208cc);
    color: var(--brandit-primary, #4208cc);
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.bfw-skip-btn:hover { background: rgba(66,8,204,0.06); }

.bfw-next-btn {
    background: var(--brand-gradient, linear-gradient(135deg,#4208cc,#d40253));
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px 28px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    min-width: 120px;
    transition: opacity 0.2s;
}
.bfw-next-btn:hover { opacity: 0.9; }

.bfw-generate-btn {
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 12px 28px !important;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    min-width: 220px;
}

/* ── Preview step ───────────────────────────────────── */
.bfw-preview-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-light, #eee);
}

.bfw-preview-section:last-of-type { border-bottom: none; }

.bfw-preview-subtitle {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main, #1a1a2e);
    margin: 0 0 16px;
}

.bfw-preview-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 12px;
}

.bfw-preview-key {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main, #1a1a2e);
    margin: 0 0 4px;
}

.bfw-preview-val {
    font-size: 13px;
    color: var(--text-muted, #666);
    margin: 0;
    word-break: break-word;
}

.bfw-edit-link {
    font-size: 12px;
    color: var(--brandit-primary, #4208cc);
    text-decoration: underline;
    cursor: pointer;
    margin-left: 8px;
}

@media (max-width: 600px) {
    .bfw-preview-grid3 { grid-template-columns: 1fr 1fr; }
    .bfw-wizard { padding: 20px 16px; }
    .bfw-steps { gap: 22px; justify-content: center; flex-wrap: wrap; padding-bottom: 8px; }
    .bfw-step-label { display: none; }
    .bfw-step { min-width: 0; flex: 0 0 auto; }
}

/* ============================================================ */
/* ADDITIONS — Coming Soon Cards, Logo Links, Mobile Steps,     */
/* Flyer Wizard Improvements, Navbar Responsiveness             */
/* ============================================================ */

/* ── Coming Soon Cards ─────────────────────────────────────── */
.brandit-coming-soon-card {
    pointer-events: none;
}
.brandit-coming-soon-card button {
    pointer-events: none;
}
.brandit-coming-soon-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: linear-gradient(135deg, #4208cc, #d40253);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    z-index: 2;
}

/* Dashboard card icon — fixed height for alignment */
.brandit-card-icon {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-bottom: 20px;
}
.brandit-card-icon img {
    width: 90px;
    height: 90px;
    object-fit: contain;
}

/* Guest card icon — same fixed height */
.brandit-guest-card-icon {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-bottom: 24px;
}
.brandit-guest-card-icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

/* ── Logo link cursor ──────────────────────────────────────── */
#brandit-sidebar-logo-link,
#brandit-guest-logo-link {
    cursor: pointer;
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.2s;
}
#brandit-sidebar-logo-link:hover,
#brandit-guest-logo-link:hover {
    opacity: 0.82;
}

/* ── Flyer wizard — chevron dropdown ─────────────────────────  */


/* ── Flyer wizard — mobile steps show only numbers ──────────── */
@media (max-width: 600px) {
    .bfw-step-label { display: none !important; }
    .bfw-step { min-width: 0; flex: 0 0 auto; }
}

/* ── Flyer wizard — top back button ─────────────────────────── */
.bfw-top-back-row { margin: 0 0 16px 0; }
.bfw-top-back-btn {
    background: transparent;
    border: 1.5px solid rgba(0,0,0,0.12);
    color: #4208cc;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.bfw-top-back-btn:hover {
    background: rgba(66,8,204,0.06);
    border-color: #4208cc;
}

/* ── Navbar responsiveness ───────────────────────────────────── */
.brandit-navbar-actions {
    flex-wrap: nowrap !important;
    min-width: 0 !important;
}
@media (max-width: 768px) {
    .brandit-credit-display { padding: 4px 10px !important; gap: 6px !important; flex-shrink: 1; }
    .brandit-credit-amount  { font-size: 12px !important; }
    .brandit-add-credits-btn { padding: 6px 10px !important; font-size: 11px !important; min-height: 34px !important; }
    .brandit-user-avatar    { width: 30px !important; height: 30px !important; font-size: 12px !important; }
    .brandit-navbar-actions { gap: 6px !important; }
}
@media (max-width: 480px) {
    .brandit-credit-display  { padding: 4px 6px !important; }
    .brandit-add-credits-btn { padding: 5px 8px !important; font-size: 10px !important; min-height: 30px !important; }
    .brandit-user-avatar     { width: 26px !important; height: 26px !important; }
    .brandit-top-navbar      { padding: 0 10px !important; }
}

/* ── Admin dashboard — users list scroll ────────────────────── */
.brandit-admin-users-scroll,
#brandit-credentials-table-wrapper {
    max-height: 520px;
    overflow-y: auto;
    overflow-x: auto;
    border-radius: 12px;
}

/* ====================================================== */
/* ===== INLINE CURRENCY + PRICE ROW (Form UX v11) ====== */
/* Currency dropdown sits on the same row, left of price.  */
/* ====================================================== */
.product-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.product-currency-input {
    flex: 0 0 auto;
    width: auto;
    min-width: 78px;
    padding: 14px 10px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-soft);
    font-size: 14px;
    background: var(--bg-main);
    transition: var(--transition);
    cursor: pointer;
}
.product-currency-input:focus {
    outline: none;
    border-color: #4208cc;
}
.product-price-row .product-price-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
@media (max-width: 480px) {
    .product-currency-input { min-width: 70px; padding: 12px 8px; }
}

/* ====================================================== */
/* ===== REFER & EARN MODAL — SOCIAL SHARE BUTTONS ====== */
/* ====================================================== */
.brandit-ref-share-btn {
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    line-height: 1;
}
.brandit-ref-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    filter: brightness(1.05);
}
.brandit-ref-share-btn:active {
    transform: translateY(0);
}
.brandit-ref-share-btn svg {
    flex: 0 0 auto;
    display: block;
}
#brandit-ref-share-row {
    align-items: stretch;
}
@media (max-width: 480px) {
    .brandit-ref-share-btn { padding: 9px 12px; font-size: 12px; }
    .brandit-ref-share-btn svg { width: 18px; height: 18px; }
}

/* ============================================================ */
/* v9.9.34 — GUEST FLYER WIZARD + MOBILE BUTTON READABILITY     */
/* ============================================================ */

/* Guest flyer wizard wrapper sits cleanly inside the guest form container */
#brandit-guest-form-container .bfw-wizard-wrap { width: 100%; }
#brandit-guest-form-container .bfw-wizard { max-width: 100%; }

/* ---- Guest landing-card buttons: never truncate the label ---- */
/* The 3 other active cards (logo, business card, invoice) + flyer had
   white-space:nowrap + ellipsis, which cut off long button text on small
   screens. Allow wrapping and auto height so the text stays readable. */
@media (max-width: 768px) {
    .brandit-guest-card-btn {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.25;
        min-height: 48px;
        height: auto;
        padding: 12px 14px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    /* 2-up card grid on tablets/large phones, 1-up on small phones */
    .brandit-guest-card {
        flex: 1 1 calc(50% - 28px);
        max-width: none;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .brandit-guest-cards-grid { gap: 16px; }
    .brandit-guest-cards-wrapper { padding: 0 16px; }
    .brandit-guest-card {
        flex: 1 1 100%;
        padding: 24px 18px;
    }
    .brandit-guest-card-btn {
        font-size: 13.5px;
        padding: 13px 12px;
        white-space: normal;
        word-break: break-word;
    }
}

/* ---- Flyer wizard: mobile layout + readable nav buttons ---- */
@media (max-width: 600px) {
    /* Stack the footer nav and let buttons size to content with readable text */
    .bfw-footer {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 10px;
    }
    .bfw-footer-left, .bfw-footer-right {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    .bfw-next-btn,
    .bfw-skip-btn,
    .bfw-generate-btn {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        white-space: normal;
        line-height: 1.2;
        min-height: 50px;
        font-size: 15px;
        padding: 13px 16px !important;
        text-align: center;
    }
    .bfw-generate-btn { min-width: 0; }
    .bfw-back-btn, .bfw-back-link { align-self: center; }

    /* Mode toggle (Use Form / Use Single Prompt): keep labels readable */
    .brandit-mode-toggle { flex-wrap: wrap; }
    .brandit-mode-btn {
        white-space: normal !important;
        line-height: 1.2;
        font-size: 13.5px !important;
        padding: 11px 10px !important;
        min-height: 46px;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    .brandit-guest-card-btn { font-size: 13px; }
    .bfw-next-btn, .bfw-skip-btn, .bfw-generate-btn { font-size: 14px; }
    .brandit-mode-btn { font-size: 12.5px !important; }
}

/* ============================================================ */
/* v9.9.35 — SMOOTHER MOBILE DROPDOWNS (logged-in + guest forms) */
/* ============================================================ */
@media (max-width: 768px) {
    /* Prevent iOS auto-zoom on focus (needs >=16px), enlarge tap targets,
       and give all form dropdowns a consistent, comfortable mobile feel. */
    .bfw-select,
    .brandit-flyer-select,
    .brandit-select,
    .brandit-logo-select,
    .brandit-select-fullwidth,
    #flyer-type-select,
    #brandit-flyer-industry,
    #brandit-flyer-subsector,
    #event-type-select,
    #specify-select,
    #flyer-dimension-select,
    #flyer-mood,
    #business-profile-select,
    #brandit-industry,
    #brandit-subsector,
    #brandit-bc-industry,
    #brandit-bc-subsector,
    select.form-control {
        font-size: 16px !important;       /* stops iOS zoom-on-focus */
        min-height: 52px !important;       /* larger, easier tap target */
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        padding-right: 44px !important;    /* room for the larger arrow */
        border-radius: 12px !important;
        background-position: right 16px center !important;
        background-size: 16px !important;
        line-height: 1.3 !important;
        -webkit-tap-highlight-color: transparent;
        transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
    }

    /* Smooth, clear focus feedback */
    .bfw-select:focus,
    .brandit-flyer-select:focus,
    .brandit-select:focus,
    .brandit-select-fullwidth:focus,
    #brandit-industry:focus,
    #brandit-subsector:focus,
    #brandit-bc-industry:focus,
    #brandit-bc-subsector:focus,
    select.form-control:focus {
        outline: none !important;
        border-color: var(--brandit-primary, #4208cc) !important;
        box-shadow: 0 0 0 3px rgba(66, 8, 204, 0.12) !important;
        background-color: #fff !important;
    }

    /* Gentle press feedback on touch */
    .bfw-select:active,
    .brandit-flyer-select:active,
    .brandit-select:active,
    select.form-control:active {
        background-color: rgba(66, 8, 204, 0.03) !important;
    }

    /* Disabled (e.g. guest "Login to select profile") reads clearly */
    .bfw-select:disabled,
    .brandit-flyer-select:disabled,
    .brandit-select:disabled,
    select.form-control:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* The dropdown options themselves: comfortable spacing where supported */
    .bfw-select option,
    .brandit-flyer-select option,
    .brandit-select option,
    select.form-control option {
        font-size: 16px;
        padding: 10px 12px;
    }

    /* Labels above dropdowns: a touch more breathing room on mobile */
    .bfw-label,
    .brandit-flyer-label,
    .brandit-form-label {
        margin-bottom: 8px;
    }
}

/* Very small phones: keep arrow clear of the text */
@media (max-width: 360px) {
    .bfw-select,
    .brandit-flyer-select,
    select.form-control {
        padding-right: 42px !important;
        background-position: right 14px center !important;
    }
}

/* ====================================================== */
/* v9.9.41 — CONSISTENCY & MOBILE FIXES                   */
/* ====================================================== */

/* #7 — Ensure EVERY select shows the same line dropdown chevron icon, on
   both logged-in and guest screens (wizard .bfw-select included). */
select,
.bfw-select,
.bfw-field select,
.brandit-flyer-wizard select,
.brandit-guest-flyer select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 1.5L7 6.5L13 1.5' stroke='%234208cc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px !important;
    padding-right: 40px !important;
}
select::-ms-expand { display: none !important; }

/* #8 & #11 — Mobile: keep generation button labels inside the button.
   Allow wrapping, center the text, and scale down so nothing overflows. */
@media (max-width: 600px) {
    /* Stack the weekly "auto-generate + Generate" row so the button no longer
       overflows the screen (the inline layout was flex nowrap + no-shrink). */
    .brandit-weekly-actions-row {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .brandit-weekly-actions-row > div {
        width: 100% !important;
        justify-content: center !important;
        white-space: normal !important;
    }
    .brandit-prompt-generate-btn,
    #brandit-prompt-generate,
    #generate-weekly-btn,
    .brandit-generate-btn {
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.25 !important;
        font-size: 14px !important;
        padding: 12px 16px !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px;
    }
    .brandit-prompt-generate-btn .brandit-btn-text,
    #brandit-prompt-generate .brandit-btn-text,
    #generate-weekly-btn .brandit-btn-text,
    .brandit-generate-btn .brandit-btn-text {
        white-space: normal !important;
        line-height: 1.25 !important;
        display: inline-block !important;
    }
}

/* ====================================================================== */
/* ===== MOBILE FIXES v26 — Flyer Wizard products + form width ========== */
/* ====================================================================== */

/*
 * TASK B — Flyer ("flyer type promotion") Add Products section.
 * On mobile the old 4-column grid (photo / description / price / delete)
 * squeezed the "Product description" and "Price" labels and fields into
 * tiny columns, distorting them. Below we mirror the Weekly Content
 * product rows: the column-header labels are hidden (the inputs already
 * carry their own placeholders) and each row becomes a flexible layout
 * with the image on the left, the description and price stacked full
 * width beside/below it, and the remove button pinned to the corner.
 */
@media (max-width: 600px) {
    /* Hide the header label row — placeholders replace it, like Weekly Content */
    .bfw-products-header-row {
        display: none !important;
    }

    .bfw-product-row {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px 10px;
        position: relative;
        padding: 10px 40px 10px 10px; /* right room for the absolute remove button */
    }

    .bfw-product-row > .bfw-prod-col-img {
        flex: 0 0 60px;
        width: 60px;
        max-width: 60px;
    }

    /* Description sits beside the image, price wraps to its own full-width line */
    .bfw-product-row > .bfw-prod-col-desc {
        flex: 1 1 140px;
        min-width: 0;
    }
    .bfw-product-row > .bfw-prod-col-price {
        flex: 1 1 100%;
        min-width: 0;
    }

    .bfw-product-row > .bfw-prod-col-desc .bfw-input,
    .bfw-product-row > .bfw-prod-col-price .bfw-input {
        width: 100%;
        box-sizing: border-box;
    }

    .bfw-product-row > .bfw-remove-product {
        position: absolute;
        top: 4px;
        right: 4px;
        margin: 0;
        flex: 0 0 auto;
    }

    .bfw-product-img-upload {
        min-height: 60px;
        padding: 6px 4px;
        width: 100%;
        box-sizing: border-box;
    }
    .bfw-product-img-preview-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/*
 * TASK C — Maximize usable form width on mobile for all four active
 * cards (Flyer, Logo, Business Card, Invoice) so the forms fill the
 * device width the way the Weekly Content view does. The design forms
 * previously stacked a 20px form padding on top of the 16px container
 * padding, leaving the fields noticeably narrower than Weekly Content.
 * Here we trim the container and form padding on small screens.
 */
@media (max-width: 600px) {
    .brandit-content-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .brandit-form-container,
    .brandit-business-card-form,
    .brandit-invoice-form,
    .flyer-form-container {
        padding: 16px 14px;
    }

    .bfw-wizard {
        padding: 16px 14px;
    }
}

@media (max-width: 400px) {
    .brandit-content-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .brandit-form-container,
    .brandit-business-card-form,
    .brandit-invoice-form,
    .flyer-form-container,
    .bfw-wizard {
        padding: 14px 10px;
    }
}

/* ====================================================================== */
/* ===== BRANDIT v28 — robot hide, prompt attach btn, search selects ==== */
/* ====================================================================== */

/* TASK 1 — Hide the dashboard banner robot on mobile (logged-in landing).
   The robot crowds the banner on small screens; the heading + CTA are the
   priority there. */
@media (max-width: 768px) {
    .brandit-dashboard-robot {
        display: none !important;
    }
}

/* TASK 2 — Single-prompt "attach reference images" icon at the BOTTOM-LEFT
   of the prompt field (both guest and logged-in, desktop and mobile).
   Scoped with :not(.weekly-chatgpt-prompt) so the Weekly Content prompt,
   which intentionally keeps its own layout, is untouched.
   The input row stacks the textarea on top and the attach button below it,
   left-aligned. */
.brandit-chatgpt-prompt-wrapper:not(.weekly-chatgpt-prompt) .brandit-chatgpt-input-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
}
.brandit-chatgpt-prompt-wrapper:not(.weekly-chatgpt-prompt) .brandit-chatgpt-input-row .brandit-chatgpt-textarea {
    order: 1;
    width: 100%;
}
.brandit-chatgpt-prompt-wrapper:not(.weekly-chatgpt-prompt) .brandit-chatgpt-input-row .brandit-inline-attach-btn {
    order: 2;
    align-self: flex-start; /* bottom-left */
    margin-top: 0;
}

/* TASK 7 — Searchable dropdown (combobox) styling.
   Renders in place of any <select> with >10 options. */
.brandit-search-select {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.brandit-ss-display {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}
.brandit-ss-display:hover {
    border-color: #22c55e;
}
.brandit-search-select.open .brandit-ss-display {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.brandit-search-select.disabled {
    opacity: 0.6;
    pointer-events: none;
}
.brandit-ss-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.brandit-ss-caret {
    flex-shrink: 0;
    width: 14px;
    height: 8px;
    font-size: 0;                 /* hide the ▾ glyph; show the line chevron instead */
    line-height: 0;
    color: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 1.5L7 6.5L13 1.5' stroke='%234208cc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 8px;
    transition: transform 0.15s ease;
}
.brandit-search-select.open .brandit-ss-caret {
    transform: rotate(180deg);
}
.brandit-ss-panel {
    position: fixed;
    z-index: 100000;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    overflow: hidden;
}
.brandit-ss-search {
    width: 100%;
    box-sizing: border-box;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    outline: none !important;
    padding: 12px 14px;
    font-size: 14px;
    background: #fafafa;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: inherit;
}
.brandit-ss-search:focus {
    background: #ffffff;
    box-shadow: none !important;
    outline: none !important;
}
.brandit-ss-list {
    max-height: 240px;
    overflow-y: auto;
}
.brandit-ss-item {
    padding: 10px 14px;
    font-size: 14px;
    color: #111827;
    cursor: pointer;
    transition: background 0.12s ease;
    white-space: normal;
    word-break: break-word;
}
.brandit-ss-item:hover {
    background: rgba(34, 197, 94, 0.12);
}
.brandit-ss-item.selected {
    background: #caf7d0;
    font-weight: 600;
    color: #0f172a;
}
.brandit-ss-empty {
    padding: 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

@media (max-width: 480px) {
    .brandit-ss-display { padding: 11px 12px; font-size: 13px; }
    .brandit-ss-list { max-height: 200px; }
}

/* ====================================================================== */
/* ===== BRANDIT v29 — remove duplicate top-right "Coming Soon" badge ==== */
/* ====================================================================== */
/* Inactive cards (guest + logged-in) carried TWO "Coming Soon" labels: a
   small badge pinned top-right AND the disabled bottom button. Remove the
   top-right badge; the bottom button already communicates the state. */
.brandit-coming-soon-badge {
    display: none !important;
}

/* ====================================================================== */
/* ===== BRANDIT v30 — Enhance Photo (options, tools, prompt) =========== */
/* ====================================================================== */

/* Two-option chooser */
.brandit-photo-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 8px;
}
.brandit-photo-option-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    padding: 22px 20px;
    border: 2px solid rgba(66, 8, 204, 0.18);
    border-radius: var(--radius-lg, 16px);
    background: var(--bg-main, #fff);
    cursor: pointer;
    transition: var(--transition, all 0.2s ease);
    font-family: inherit;
}
.brandit-photo-option-card:hover {
    border-color: var(--brandit-primary, #4208cc);
    box-shadow: 0 8px 24px rgba(66, 8, 204, 0.12);
    transform: translateY(-2px);
}
.brandit-photo-option-emoji { font-size: 28px; }
.brandit-photo-option-title { font-size: 16px; font-weight: 700; color: var(--text-main, #111827); }
.brandit-photo-option-desc { font-size: 13px; color: var(--text-muted, #6b7280); line-height: 1.5; }

/* Upload block */
.brandit-photo-upload {
    position: relative;
    border: 2px dashed rgba(66, 8, 204, 0.35);
    border-radius: var(--radius-lg, 16px);
    background: var(--bg-soft, #f7f7fb);
    padding: 22px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition, all 0.2s ease);
    margin-bottom: 18px;
}
.brandit-photo-upload:hover { border-color: var(--brandit-primary, #4208cc); background: rgba(66, 8, 204, 0.04); }
.brandit-photo-upload-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.brandit-photo-upload-text { font-size: 14px; font-weight: 600; color: var(--text-main, #111827); }
.brandit-photo-preview { position: relative; display: inline-block; }
.brandit-photo-remove {
    position: absolute; top: -10px; right: -10px;
    width: 26px; height: 26px; border-radius: 50%;
    background: #ef4444; color: #fff; border: 2px solid #fff;
    font-size: 13px; cursor: pointer; line-height: 1;
}

/* Photo tool presets */
.brandit-photo-tool-group { margin-bottom: 18px; }
.brandit-photo-tool-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--text-main, #111827); }
.brandit-photo-presets { display: flex; flex-wrap: wrap; gap: 10px; }
.brandit-photo-preset {
    padding: 10px 18px;
    border: 1.5px solid rgba(66, 8, 204, 0.2);
    border-radius: 30px;
    background: var(--bg-main, #fff);
    color: var(--text-secondary, #374151);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: var(--transition, all 0.2s ease);
    font-family: inherit;
}
.brandit-photo-preset:hover { border-color: var(--brandit-primary, #4208cc); }
.brandit-photo-preset.active {
    background: var(--brand-gradient, linear-gradient(135deg, #4208cc, #d40253));
    color: #fff;
    border-color: #4208cc;
}

@media (max-width: 600px) {
    .brandit-photo-options { grid-template-columns: 1fr; }
}

/* ====================================================================== */
/* ===== BRANDIT v31 — Enhance Photo form (Brandit Tools) =============== */
/* ====================================================================== */
.brandit-form-section { margin-bottom: 20px; }
.brandit-form-section .brandit-form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-main, #111827);
}
.brandit-form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    font-size: 14px;
    background: #fff;
    font-family: inherit;
    color: #111827;
}
.brandit-form-control:focus { outline: none; border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15); }

/* Upload drop area (flyer-style) */
.brandit-photo-drop {
    border: 2px dashed rgba(66, 8, 204, 0.35);
    border-radius: 16px;
    background: var(--bg-soft, #f7f7fb);
    padding: 26px 18px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.brandit-photo-drop:hover { border-color: var(--brandit-primary, #4208cc); background: rgba(66, 8, 204, 0.04); }
.brandit-photo-drop-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.brandit-photo-drop-text { font-size: 14px; font-weight: 600; color: var(--text-main, #111827); }

/* Uploaded thumbnails grid */
.brandit-photo-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.brandit-photo-thumb {
    position: relative;
    width: 88px; height: 88px;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid rgba(66, 8, 204, 0.25);
    background: #fff;
}
.brandit-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brandit-photo-thumb-remove {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(239, 68, 68, 0.95); color: #fff; border: none;
    font-size: 12px; line-height: 1; cursor: pointer;
}

/* Enhancement checkboxes */
.brandit-photo-checks { display: flex; flex-wrap: wrap; gap: 16px; }
.brandit-photo-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-secondary, #374151); cursor: pointer; }
.brandit-photo-check input { width: 16px; height: 16px; accent-color: var(--brandit-primary, #4208cc); }

/* Post-result CTA panel */
.brandit-photo-cta {
    text-align: center;
    margin-top: 18px;
    padding: 18px;
    background: var(--bg-soft, #f7f7fb);
    border-radius: 14px;
}

/* Mobile parity with flyer */
@media (max-width: 600px) {
    .brandit-generator-view { padding: 20px 14px !important; }
    .brandit-photo-options { grid-template-columns: 1fr; }
    .brandit-photo-thumb { width: 72px; height: 72px; }
    .brandit-result-gallery { grid-template-columns: 1fr !important; }
    .brandit-photo-checks { flex-direction: column; gap: 10px; }
}

/* ====================================================================== */
/* ===== BRANDIT v33 — Enhance Photo upload (reuses flyer bfw upload) === */
/* ====================================================================== */
.bfw-upload-area.bfw-drop-active,
.brandit-photo-drop.bfw-drop-active {
    border-color: var(--brandit-primary, #4208cc) !important;
    background: rgba(66, 8, 204, 0.06) !important;
}
/* Thumbnails grid reuses flyer preview wraps */
#brandit-phototool-thumbs.bfw-img-preview-area { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
#brandit-phototool-thumbs .bfw-img-preview-wrap { width: 96px; height: 96px; }
@media (max-width: 600px) {
    #brandit-phototool-thumbs .bfw-img-preview-wrap { width: 76px; height: 76px; }
}

/* ====================================================================== */
/* ===== BRANDIT v36 — dropdown setup option, flyer width, add-products = */
/* ====================================================================== */

/* "+ Set Up a Business" option in the smooth dropdown: bold + centered */
.brandit-ss-item.brandit-ss-setup {
    font-weight: 700;
    text-align: center;
    color: var(--brandit-primary, #4208cc);
    border-top: 1px solid var(--border-light, #eee);
}
.brandit-ss-item.brandit-ss-setup:hover { background: rgba(34, 197, 94, 0.12); }

/* Desktop: flyer wizard content width matches the guest header container (1200px) */
@media (min-width: 1025px) {
    .bfw-wizard { max-width: 1200px !important; }
}

/* Remove the connector lines between step indicators (cleaner stepper) */
.bfw-step-line { display: none !important; }
.bfw-steps { gap: 36px; }

/* Mobile: flyer "Add Products" — every field on its own row, single column */
@media (max-width: 600px) {
    .bfw-products-header-row { display: none !important; }
    .bfw-product-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        grid-template-columns: none !important;
        position: relative;
        padding: 14px 40px 14px 14px !important;
    }
    .bfw-product-row > .bfw-prod-col-img,
    .bfw-product-row > .bfw-prod-col-desc,
    .bfw-product-row > .bfw-prod-col-price {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    .bfw-product-row > .bfw-prod-col-desc .bfw-input,
    .bfw-product-row > .bfw-prod-col-price .bfw-input { width: 100%; box-sizing: border-box; }
    .bfw-product-row > .bfw-remove-product {
        position: absolute; top: 6px; right: 6px; margin: 0;
    }
    .bfw-product-img-upload { width: 100%; box-sizing: border-box; }
}

/* ====================================================================== */
/* ===== BRANDIT v39 — Contact-detail modal (weekly + flyer preview) ==== */
/* ====================================================================== */
.brandit-cdm-overlay {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; animation: branditCdmFade 0.18s ease;
}
@keyframes branditCdmFade { from { opacity: 0; } to { opacity: 1; } }
.brandit-cdm-card {
    background: #fff; border-radius: 18px; width: 100%; max-width: 520px;
    padding: 28px 30px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
    max-height: 90vh; overflow-y: auto;
}
.brandit-cdm-heading { margin: 0 0 6px; font-size: 19px; font-weight: 800; color: #0f172a; }
.brandit-cdm-sub { margin: 0 0 20px; font-size: 13.5px; color: #64748b; line-height: 1.5; }
.brandit-cdm-list { display: flex; flex-direction: column; gap: 16px; border-bottom: 1px solid #eef1f5; padding-bottom: 22px; margin-bottom: 18px; }
.brandit-cdm-item { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.brandit-cdm-check {
    width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto;
    accent-color: var(--brandit-primary, #4208cc); cursor: pointer;
}
.brandit-cdm-text { display: flex; flex-direction: column; gap: 2px; }
.brandit-cdm-title { font-size: 14.5px; font-weight: 700; color: var(--brandit-primary, #4208cc); }
.brandit-cdm-desc { font-size: 12.5px; color: #64748b; line-height: 1.45; }
.brandit-cdm-actions { display: flex; justify-content: center; gap: 14px; }
.brandit-cdm-btn { padding: 11px 26px; border-radius: 24px; font-size: 14px; font-weight: 700; cursor: pointer; border: none; }
.brandit-cdm-cancel { background: #fff; color: var(--brandit-primary, #4208cc); border: 1.5px solid var(--brandit-primary, #4208cc); }
.brandit-cdm-cancel:hover { background: rgba(66, 8, 204, 0.06); }
.brandit-cdm-proceed { background: var(--brand-gradient, linear-gradient(135deg, #4208cc, #d40253)); color: #fff; }
.brandit-cdm-proceed:hover { filter: brightness(1.05); }
@media (max-width: 600px) {
    .brandit-cdm-card { padding: 22px 18px; }
    .brandit-cdm-actions { flex-direction: column-reverse; }
    .brandit-cdm-btn { width: 100%; }
}

/* ====================================================================== */
/* ===== BRANDIT v44 — Full-screen Auth screens (login / signup) ======== */
/* Scoped to .brandit-auth-screen so other modals are unaffected.         */
/* ====================================================================== */
.brandit-logo-modal.brandit-auth-screen {
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
    /* The overlay itself is the ONE scroll container. Using flex-start (not
       stretch) lets the content define its height so tall forms scroll the
       whole screen instead of being clipped at viewport height. */
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.brandit-auth-screen .brandit-auth-wrap {
    display: grid;
    grid-template-columns: minmax(320px, 40%) 1fr;
    width: 100%;
    min-height: 100%;   /* full-bleed when short; grows (and scrolls) when tall */
}
/* LEFT — marketing panel */
.brandit-auth-promo {
    position: relative;
    background: linear-gradient(135deg, #4b18d4 0%, #7d1bc4 46%, #d81f8a 100%);
    color: #fff;
    padding: 0;                 /* the brand-section image fills the whole panel */
    overflow: hidden;
    min-height: 720px;          /* keep a tall brand panel on desktop even for short forms */
}
/* Brand-section artwork (heading, benefits, robot are baked into the image). */
.brandit-auth-promo-media {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.brandit-auth-promo-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
/* DESKTOP: keep the brand panel a consistent viewport height on every auth
   screen (login, signup, set-up-brand) so the artwork renders identically and
   is never stretched to match a tall form. The form scrolls; the panel stays
   pinned. This is what makes signup mirror login and the setup screen. */
@media (min-width: 901px) {
    .brandit-auth-screen .brandit-auth-wrap { align-items: start; }
    .brandit-auth-screen .brandit-auth-promo {
        position: sticky;
        top: 0;
        height: 100vh;
        min-height: 100vh;
        align-self: start;
    }
}
/* RIGHT — form panel */
.brandit-auth-panel {
    position: relative;
    background: #fff;
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start;
    padding: 48px 32px 56px;
    /* No inner scroll — the overlay (.brandit-auth-screen) is the single
       scroller, so the form and its submit button are always reachable. */
    overflow: visible;
}
.brandit-auth-screen .brandit-auth-panel .brandit-logo-modal-close {
    position: absolute; top: 18px; right: 22px;
    font-size: 20px; color: #9ca3af; cursor: pointer; line-height: 1; background: none;
}
.brandit-auth-logo { height: 44px; width: auto; margin: 6px 0 28px; }
.brandit-auth-card {
    width: 100%; max-width: 520px;
    border: 1px solid #eef0f4; border-radius: 16px; overflow: hidden;
    box-shadow: 0 18px 50px rgba(17,24,39,0.06);
}
.brandit-auth-card-head { position: relative; background: #f7f8fa; padding: 20px; text-align: center; border-bottom: 1px solid #eef0f4; }
/* Back control replaces the corner ✕ on the login/signup screens, sitting to
   the LEFT of the heading; tapping it returns to the guest landing page. */
.brandit-auth-back {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #4208cc;
    padding: 6px 8px;
    border-radius: 8px;
    line-height: 1;
}
.brandit-auth-back span { font-size: 18px; line-height: 1; }
.brandit-auth-back:hover { background: rgba(66, 8, 204, 0.08); }
.brandit-auth-card-head h3 { margin: 0; font-size: 24px; font-weight: 800; color: #0f1454; }
.brandit-auth-card-body { padding: 26px 30px 30px; }
/* Tight, consistent label→input spacing on every auth + business-profile
   screen. The generic .brandit-form-group adds a 10px flex `gap` that stacks
   with the label's margin (≈16px) — kill the gap here so the only spacing is
   the label's 6px, matching the reference mockups exactly. */
.brandit-auth-card-body .brandit-form-group { margin-bottom: var(--bd-group-gap); gap: var(--bd-field-gap); }
/* Some themes/page builders re-run wpautop on the server-rendered auth forms,
   which injects <br> and stray/empty <p> tags between each label and input and
   blows the spacing out. Neutralize them so the label sits directly above the
   input — identical to the JS-built business-profile ("Add business profile")
   modal. */
.brandit-auth-form br { display: none !important; }
.brandit-auth-form p:empty { display: none !important; margin: 0 !important; }
.brandit-auth-form .brandit-form-group > p { margin: 0 !important; }
.brandit-auth-form > p:not(.brandit-auth-switch) { margin: 0 0 var(--bd-group-gap) !important; }
.brandit-auth-card-body label { display:block; font-size: 14px; font-weight: 700; color: #312a8a; margin-bottom: 0; }
.brandit-auth-card-body input[type="text"],
.brandit-auth-card-body input[type="email"],
.brandit-auth-card-body input[type="password"] {
    width: 100%; padding: 13px 14px; border: 1px solid #e5e7eb; border-radius: 8px;
    font-size: 14px; outline: none; color:#111827; background:#fff;
}
.brandit-auth-card-body input::placeholder { color:#9ca3af; }
.brandit-auth-card-body input:focus { border-color: #4208cc; box-shadow: 0 0 0 3px rgba(66,8,204,0.12); }
.brandit-auth-submit {
    width: 100%; margin-top: 6px; padding: 14px; border-radius: 28px;
    background: linear-gradient(135deg, #4208cc, #d40253) !important; color:#fff !important;
    font-weight:700; font-size:15px; border:none; cursor:pointer;
}
.brandit-auth-google { margin-top: 16px; margin-bottom: 18px; display:flex; justify-content:center; min-height: 0; }
.brandit-auth-google:empty { margin-top: 0; margin-bottom: 0; }
.brandit-auth-switch { text-align:center; margin-top: 14px; font-size: 14px; color:#374151; }
.brandit-auth-switch a, .brandit-forgot-password-link a { color:#4208cc; font-weight:700; text-decoration:none; }
/* Terms & conditions: checkbox hard-left, text on the right, single row.
   (matches the LP reference exactly) */
.brandit-auth-terms {
    display:flex; align-items:flex-start; gap:10px;
    font-size:13.5px; color:#374151; margin: 2px 0 16px; cursor:pointer;
    line-height: 1.4;
}
.brandit-auth-terms input[type="checkbox"] {
    margin: 1px 0 0 0; accent-color:#2f6bed;
    width:18px !important; height:18px !important; min-width:18px;
    flex:0 0 18px; border-radius:5px !important; cursor:pointer;
}
.brandit-auth-terms span { flex:1 1 auto; }
.brandit-auth-terms a { color:#4208cc; font-weight:700; text-decoration:none; }
/* The legacy "#id .brandit-auth-form input" rule forces width:100%/min-height
   on every input — including this checkbox. Re-assert checkbox sizing with an
   ID-scoped selector so the Terms row stays: [box] text, on one line. */
#brandit-signup-modal.brandit-logo-modal .brandit-auth-terms input[type="checkbox"],
#brandit-login-modal.brandit-logo-modal .brandit-auth-terms input[type="checkbox"],
.business-profile-form-modal.brandit-logo-modal .brandit-auth-terms input[type="checkbox"] {
    width: 18px !important; min-width: 18px !important;
    height: 18px !important; min-height: 18px !important;
    flex: 0 0 18px !important; padding: 0 !important; margin: 1px 0 0 0 !important;
    border-radius: 5px !important; accent-color: #2f6bed !important; box-sizing: border-box !important;
}
.brandit-auth-card-body .brandit-forgot-password-link { margin: -6px 0 14px; font-size: 13.5px; text-align: right; }
/* ====================================================================== */
/* MOBILE (v47) — form on top, marketing panel below (matches LP mock).   */
/* Fixes the v46 issue where the robot was pinned to the bottom of the    */
/* promo panel and overlapped the benefit cards on small screens.         */
/* ====================================================================== */
@media (max-width: 900px) {
    .brandit-auth-screen .brandit-auth-wrap { display: flex; flex-direction: column; }
    .brandit-auth-panel { order: 1; padding: 30px 16px 26px; }
    .brandit-auth-promo {
        order: 2;
        padding: 0;
        min-height: 0;            /* mobile image defines its own height */
        border-radius: 26px 26px 0 0;
        overflow: hidden;
    }
    /* The mobile brand-section image shows in full (no cropping). */
    .brandit-auth-promo-media {
        position: static;
        width: 100%;
        height: auto;
    }
    .brandit-auth-promo-media img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    .brandit-auth-logo { height: 38px; margin-bottom: 20px; }
    .brandit-auth-card { max-width: 100%; }
    .brandit-auth-card-body { padding: 22px 18px 26px; }
    .brandit-auth-screen .brandit-auth-panel .brandit-logo-modal-close { top: 12px; right: 14px; }
}

/* Small phones (414 / 390 / 375) — tighten spacing */
@media (max-width: 480px) {
    .brandit-auth-panel { padding: 26px 14px 22px; }
    .brandit-auth-promo { padding: 0; }
    .brandit-auth-card-head h3 { font-size: 19px; }
    .brandit-auth-card-body { padding: 20px 15px 24px; }
    .brandit-auth-logo { height: 34px; margin-bottom: 16px; }
}

/* Very small phones (320px) — guarantee no horizontal overflow */
@media (max-width: 360px) {
    .brandit-auth-card-body input,
    .brandit-auth-card-body select.form-control { font-size: 13px; padding: 11px 12px; }
}

/* ====================================================================== */
/* ===== BRANDIT v45 — Business Profile screens (prompt/details/style) === */
/* ====================================================================== */
.brandit-auth-card-body input[type="tel"],
.brandit-auth-card-body input[type="url"],
.brandit-auth-card-body select.form-control {
    width: 100%; padding: 13px 14px; border: 1px solid #e5e7eb; border-radius: 8px;
    font-size: 14px; outline: none; color: #111827; background: #fff;
}
.brandit-auth-card-body select.form-control:focus { border-color: #4208cc; box-shadow: 0 0 0 3px rgba(66,8,204,0.12); }
.brandit-bp-step { width: 100%; display: flex; flex-direction: column; align-items: center; }
.brandit-bp-card { max-width: 640px; }
.brandit-bp-card .brandit-auth-card-body { padding-bottom: 16px; }
.brandit-bp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.brandit-bp-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.brandit-bp-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 30px 22px; border-top: 1px solid #f1f3f7; }
.brandit-bp-back { background: none; border: none; color: var(--brandit-primary, #4208cc); font-weight: 700; cursor: pointer; font-size: 14px; padding: 8px 4px; }
.brandit-bp-inline-btn { width: auto !important; padding: 11px 30px !important; margin-top: 0 !important; }

/* Prominent "Company logo" upload on the brand-style step. */
.brandit-bp-logo-section {
    background: linear-gradient(135deg, rgba(66,8,204,0.05), rgba(212,2,83,0.04));
    border: 1px solid rgba(66,8,204,0.18);
    border-radius: 16px;
    padding: 16px 16px 18px;
    margin-bottom: 18px;
}
.brandit-bp-logo-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.brandit-bp-logo-headtext { display: flex; flex-direction: column; }
.brandit-bp-logo-label { margin: 0 !important; font-size: 15px; font-weight: 800; color: #312a8a; }
.brandit-bp-logo-sub { font-size: 12px; color: var(--text-muted, #6b7280); margin-top: 2px; }
.brandit-create-logo-link { font-size: 12px; color: var(--brandit-primary, #4208cc); text-decoration: none; font-weight: 700; white-space: nowrap; }
.brandit-create-logo-link:hover { text-decoration: underline; }

/* Mobile: the (nowrap) "Create logo" link used to squeeze the label + helper  */
/* text into a narrow left column, leaving the right side empty. Flatten the    */
/* head so the label and the link share the top row and the helper text spans   */
/* the full width on its own row below.                                         */
@media (max-width: 600px) {
    .brandit-bp-logo-head {
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 6px 10px;
    }
    .brandit-bp-logo-headtext { display: contents; }
    .brandit-bp-logo-label { order: 1; flex: 1 1 auto; }
    .brandit-bp-logo-head .brandit-create-logo-link {
        order: 2;
        flex: 0 0 auto;
        white-space: normal;
        text-align: right;
    }
    .brandit-bp-logo-sub {
        order: 3;
        flex: 0 0 100%;
        width: 100%;
        white-space: normal;
        margin-top: 2px;
    }
}
.brandit-bp-logo-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    min-height: 132px;
    padding: 22px 16px;
    background: #fff;
    border: 2px dashed rgba(66,8,204,0.4) !important;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.brandit-bp-logo-dropzone:hover {
    border-color: var(--brandit-primary, #4208cc) !important;
    background: rgba(66,8,204,0.03);
    transform: translateY(-1px);
}
.brandit-bp-logo-icon { font-size: 34px; line-height: 1; margin-bottom: 8px; }
.brandit-bp-logo-svg { color: var(--brandit-primary, #4208cc); margin-bottom: 8px; }
.brandit-bp-logo-text { font-size: 15px; font-weight: 700; color: #312a8a; }
.brandit-bp-logo-hint { font-size: 12px; color: var(--text-muted, #6b7280); margin-top: 4px; }

/* ── "+ Add Business Profile" / Edit = compact centered modal dialog ──
   (first-login setup keeps the full-screen .brandit-auth-screen layout). */
.brandit-bp-dialog .brandit-auth-wrap {
    display: block;
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}
.brandit-bp-dialog .brandit-auth-panel {
    padding: 26px 26px 28px;
    align-items: stretch;
}
.brandit-bp-dialog .brandit-auth-logo { height: 34px; margin: 2px auto 18px; }
.brandit-bp-dialog .brandit-auth-card,
.brandit-bp-dialog .brandit-bp-card { border: none !important; border-radius: 0; max-width: 100% !important; box-shadow: none; }
.brandit-bp-dialog .brandit-auth-card-head { background: transparent; border-bottom: 1px solid #eef0f4; padding: 0 0 12px; text-align: left; }
.brandit-bp-dialog .brandit-auth-card-head h3 { font-size: 18px; }
.brandit-bp-dialog .brandit-auth-card-body { padding: 16px 0 0; }
.brandit-bp-dialog .brandit-bp-foot { padding: 16px 0 0; border-top: 1px solid #f1f3f7; }
.brandit-bp-dialog .brandit-logo-modal-close {
    position: absolute; top: 12px; right: 14px;
    font-size: 20px; color: #9ca3af; cursor: pointer; background: none; line-height: 1; z-index: 5;
}
@media (max-width: 560px) {
    .brandit-bp-dialog .brandit-bp-row { grid-template-columns: 1fr; }
    .brandit-bp-dialog .brandit-auth-panel { padding: 22px 18px 24px; }
}
/* prompt step */
.brandit-bp-prompt-card {
    display: flex; gap: 20px; align-items: center; width: 100%; max-width: 640px;
    background: #f7f8fa; border: 1px solid #eef0f4; border-radius: 18px; padding: 26px;
}
.brandit-bp-prompt-icon {
    flex: 0 0 auto; width: 96px; height: 96px; border-radius: 14px;
    background: linear-gradient(135deg, #e9ddff, #f3e8ff);
    display: flex; align-items: center; justify-content: center; font-size: 46px;
}
.brandit-bp-prompt-copy h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: #0f172a; }
.brandit-bp-prompt-copy p { margin: 0; color: #6b7280; font-size: 14px; line-height: 1.55; }
.brandit-bp-prompt-actions { display: flex; gap: 14px; margin-top: 24px; width: 100%; max-width: 640px; }
.brandit-bp-skip-btn {
    background: #fff; border: 1.5px solid var(--brandit-primary, #4208cc); color: var(--brandit-primary, #4208cc);
    border-radius: 28px; padding: 12px 24px; font-weight: 700; cursor: pointer; font-size: 14px;
}
.brandit-bp-skip-btn:hover { background: rgba(66,8,204,0.06); }
@media (max-width: 900px) {
    .brandit-bp-row, .brandit-bp-row-3 { grid-template-columns: 1fr; }
    .brandit-bp-prompt-card { flex-direction: column; text-align: center; }
    .brandit-bp-prompt-actions { flex-direction: column; }
    .brandit-bp-prompt-actions .brandit-bp-inline-btn,
    .brandit-bp-prompt-actions .brandit-bp-skip-btn { width: 100% !important; text-align: center; }
    .brandit-bp-foot { padding: 14px 18px 20px; gap: 12px; }
    .brandit-bp-card { max-width: 100%; }
}
/* Small phones — stack the wizard footer so buttons never overlap */
@media (max-width: 480px) {
    .brandit-bp-foot { flex-direction: column; align-items: stretch; }
    .brandit-bp-foot .brandit-bp-inline-btn { width: 100% !important; }
    .brandit-bp-back { text-align: center; padding: 10px 4px; order: 2; }
    .brandit-bp-prompt-icon { width: 76px; height: 76px; font-size: 38px; }
    .brandit-bp-prompt-copy h3 { font-size: 19px; }
}

/* ====================================================================== */
/* ===== BRANDIT v46 — Terms & Conditions modal ========================= */
/* ====================================================================== */
#brandit-terms-modal { z-index: 100002; }
.brandit-terms-content {
    max-width: 720px; width: 100%; max-height: 86vh;
    display: flex; flex-direction: column; padding: 0; overflow: hidden;
    background: #fff; border-radius: 16px; position: relative;
}
.brandit-terms-content .brandit-logo-modal-close { position: absolute; top: 14px; right: 18px; font-size: 20px; color: #9ca3af; cursor: pointer; z-index: 2; }
.brandit-terms-head { padding: 22px 28px 16px; border-bottom: 1px solid #eef0f4; background: #f7f8fa; }
.brandit-terms-head h3 { margin: 0; font-size: 22px; font-weight: 800; color: #0f172a; }
.brandit-terms-head p { margin: 4px 0 0; font-size: 12.5px; color: #6b7280; }
.brandit-terms-body { padding: 22px 28px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.brandit-terms-body h4 { margin: 18px 0 6px; font-size: 15px; font-weight: 700; color: #312a8a; }
.brandit-terms-body h4:first-of-type { margin-top: 6px; }
.brandit-terms-body p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: #374151; }
.brandit-terms-note { margin-top: 18px !important; padding-top: 14px; border-top: 1px dashed #e5e7eb; font-size: 12.5px !important; color: #6b7280 !important; font-style: italic; }
.brandit-terms-foot { padding: 16px 28px; border-top: 1px solid #eef0f4; display: flex; justify-content: flex-end; background: #fff; }
@media (max-width: 600px) {
    .brandit-terms-content { max-height: 92vh; border-radius: 14px; }
    .brandit-terms-head, .brandit-terms-body, .brandit-terms-foot { padding-left: 18px; padding-right: 18px; }
    .brandit-terms-foot .brandit-auth-submit { width: 100%; }
    /* Ensure result overlay buttons fit on mobile */
    .brandit-result-overlay {
        gap: 8px;
        padding: 6px;
    }
    .brandit-result-overlay button {
        padding: 8px 12px;
        font-size: 12px;
        flex: 1 1 calc(33.333% - 6px);
        min-width: 70px;
    }
}

/* ====================================================================== */
/* ===== BRANDIT v37 — profile-prefill banner, icon-only logo upload, === */
/* =====              compact dashboard banner                       ==== */
/* ====================================================================== */

/* Step 3 (Contact Details): "Pre-filled from Business Profile" shown as its
   own styled banner above the first field, using the heading font size. */
.bfw-profile-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brandit-primary, #4208cc);
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.30);
    border-left: 4px solid var(--brandit-success, #22c55e);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 0 0 22px;
}
@media (max-width: 560px) {
    .bfw-profile-hint { font-size: 16px; padding: 12px 14px; }
}

/* Icon-only logo upload tile (business-profile modal) — shows just the icon. */
.brandit-bp-logo-dropzone.brandit-bp-logo-iconly {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 1.5px dashed var(--brandit-primary, #4208cc);
    border-radius: 14px;
    background: rgba(66, 8, 204, 0.05);
    color: var(--brandit-primary, #4208cc);
    cursor: pointer;
    transition: var(--transition, all .2s ease);
}
.brandit-bp-logo-dropzone.brandit-bp-logo-iconly:hover {
    background: rgba(66, 8, 204, 0.10);
    border-color: var(--brandit-success, #22c55e);
}
.brandit-bp-logo-dropzone.brandit-bp-logo-iconly .brandit-bp-logo-svg { margin: 0; }

/* Dashboard banner — generous padding between container and content. */
.brandit-dashboard-banner { padding: 36px 44px; margin-bottom: 20px; }
.brandit-dashboard-banner-content h2 { font-size: 21px; margin-bottom: 5px; }
.brandit-dashboard-banner-content p { font-size: 13px; }
.brandit-banner-cta { margin-top: 16px; padding: 14px 18px; gap: 12px; }
.brandit-banner-cta h4 { font-size: 16px !important; }
.brandit-banner-cta p { font-size: 12px !important; }
.brandit-banner-cta button,
#setup-business-profile-btn { padding: 7px 16px; font-size: 13px !important; }
.brandit-dashboard-robot img { max-width: 132px; }

@media (max-width: 768px) {
    .brandit-dashboard-banner { padding: 22px 18px; margin-bottom: 16px; }
    .brandit-dashboard-banner-content { margin-bottom: 14px; }
    .brandit-banner-cta { margin-top: 10px; padding: 12px; }
    .brandit-dashboard-robot img { max-width: 104px; }
}

/* ============================================================
   Presentation full-screen slide viewer ("Present")
   ============================================================ */
.brandit-pres-viewer-modal{
    position:fixed; inset:0; z-index:100050;
    background:#0e0e12; display:flex; flex-direction:column;
}
.brandit-pres-viewer-bar{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 16px; background:#17171d; border-bottom:1px solid rgba(255,255,255,0.08);
}
.brandit-pres-viewer-title{
    color:#fff; font-weight:600; font-size:15px; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; max-width:55vw;
}
.brandit-pres-viewer-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.brandit-pres-vbtn{
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px; border-radius:22px; font-size:13px; font-weight:600;
    background:rgba(255,255,255,0.10); color:#fff; border:1px solid rgba(255,255,255,0.18);
    cursor:pointer; text-decoration:none; transition:background .15s ease;
}
.brandit-pres-vbtn:hover{ background:rgba(255,255,255,0.20); color:#fff; }
.brandit-pres-viewer-close{ background:rgba(212,2,83,0.22); border-color:rgba(212,2,83,0.4); }
@media (max-width:600px){
    .brandit-pres-viewer-title{ max-width:40vw; font-size:13px; }
    .brandit-pres-vbtn{ padding:7px 10px; font-size:12px; }
}

/* ============================================================
   Presentation slide-by-slide presenter (Play / Pause / arrows)
   ============================================================ */
.brandit-pres-deck .brandit-pres-stage{
    flex:1; display:flex; align-items:center; justify-content:center;
    padding:24px; overflow:auto;
}
.brandit-pres-slide{
    width:min(960px, 94vw); aspect-ratio:16/9; background:#fff; border-radius:14px;
    box-shadow:0 18px 50px rgba(0,0,0,0.45); overflow:hidden; position:relative;
    display:flex; flex-direction:column; justify-content:center; padding:48px 56px;
}
.brandit-pres-slide-cover{ align-items:center; text-align:center; justify-content:center;
    background:linear-gradient(135deg,#1b1140,#3a1b6e); color:#fff; }
.brandit-pres-slide-img{
    position:absolute; inset:0; background-size:cover; background-position:center; opacity:0.16;
}
.brandit-pres-slide-cover .brandit-pres-slide-img{ opacity:0.45; }
.brandit-pres-slide-body{ position:relative; z-index:1; }
.brandit-pres-slide-title{ margin:0 0 18px; font-size:clamp(22px,3.4vw,40px); font-weight:800; line-height:1.15; color:inherit; }
.brandit-pres-slide-cover .brandit-pres-slide-title{ color:#fff; }
.brandit-pres-slide-sub{ font-size:clamp(15px,1.8vw,22px); opacity:0.9; margin:0; }
.brandit-pres-slide-bullets{ margin:0; padding-left:1.1em; }
.brandit-pres-slide-bullets li{ font-size:clamp(14px,1.7vw,21px); line-height:1.5; margin:0 0 12px; color:#1f2430; }
.brandit-pres-nav{
    display:flex; align-items:center; justify-content:center; gap:14px;
    padding:12px 16px; background:#17171d; border-top:1px solid rgba(255,255,255,0.08);
}
.brandit-pres-navbtn{
    min-width:46px; height:42px; padding:0 16px; border-radius:22px; font-size:20px; font-weight:700;
    background:rgba(255,255,255,0.10); color:#fff; border:1px solid rgba(255,255,255,0.18); cursor:pointer;
}
.brandit-pres-navbtn:hover:not(:disabled){ background:rgba(255,255,255,0.20); }
.brandit-pres-navbtn:disabled{ opacity:0.4; cursor:not-allowed; }
.brandit-pres-play{ font-size:14px; }
.brandit-pres-play.playing{ background:rgba(212,2,83,0.30); border-color:rgba(212,2,83,0.5); }
.brandit-pres-counter{ color:#cbd0dd; font-size:14px; font-weight:600; min-width:64px; text-align:center; }
@media (max-width:600px){
    .brandit-pres-slide{ padding:28px 24px; }
    .brandit-pres-navbtn{ min-width:40px; height:38px; padding:0 12px; }
}

/* Presenter — themed layouts (accent bar, cards, quote, dividers) */
.brandit-pres-accent-bar{ width:64px; height:5px; border-radius:3px; margin:0 0 22px; }
.brandit-pres-st-section_divider .brandit-pres-slide-title,
.brandit-pres-st-thank_you .brandit-pres-slide-title{ font-size:clamp(28px,4.4vw,52px); }
.brandit-pres-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:6px; }
.brandit-pres-card{
    background:#f7f8fb; border-radius:12px; padding:18px 16px; font-size:clamp(14px,1.6vw,19px);
    line-height:1.45; color:#1f2430; box-shadow:0 4px 14px rgba(0,0,0,0.05);
}
.brandit-pres-quote{
    font-size:clamp(22px,3.2vw,40px); font-weight:700; font-style:italic; line-height:1.3;
    color:#1f2430; border-left:5px solid #4208cc; padding-left:22px; text-align:left; max-width:90%;
}
.brandit-pres-slide-cover .brandit-pres-quote{ color:#fff; border-color:#fff; }

/* Back buttons: always left-aligned across guest/logged-in, mobile/desktop. */
.brandit-back-btn,
.brandit-form-back-btn,
#bfw-back-to-create,
.bfw-back-link {
    display: inline-flex !important;
    align-items: center;
    float: none !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    align-self: flex-start !important;
    text-align: left !important;
}
/* Header back buttons are content-width (mirrors the History screen's back
   button) and sit first/left — not full-width. Row layout is preserved so
   headers that place a second control (e.g. "+ Add Business Profile") keep
   it on the right. */
.brandit-form-header { flex-wrap: wrap; }
.brandit-form-header .brandit-form-back-btn { order: -1; width: auto !important; flex: 0 0 auto; margin-right: 14px !important; margin-bottom: 0; }

/* Invoice product rows: labels hidden on desktop, shown in a clear stacked grid on mobile. */
.bc-mobile-label { display: none; }
@media (max-width: 768px) {
    .brandit-invoice-item-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px !important;
        align-items: end;
        position: relative;
        padding: 16px !important;
        border: 1px solid var(--border-light);
        border-radius: 12px;
        margin-bottom: 12px;
    }
    .brandit-invoice-item-row .mobile-product-field {
        flex: none !important;
        min-width: 0 !important;
        width: 100%;
    }
    .brandit-invoice-item-row .field-product { grid-column: 1 / -1; }
    .brandit-invoice-item-row .item-total-field { text-align: left !important; }
    .brandit-invoice-item-row .item-description,
    .brandit-invoice-item-row .item-quantity,
    .brandit-invoice-item-row .item-price { text-align: left !important; }
    .brandit-invoice-item-row .bc-mobile-label {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: .02em;
    }
    .brandit-invoice-item-row .item-total {
        display: inline-block;
        padding-top: 8px;
    }
    .brandit-invoice-item-row .brandit-remove-item {
        position: absolute;
        top: 10px;
        right: 10px;
    }
}

/* Enhance-photo upload field: centered icon, helper text pinned bottom-left,
   consistent on mobile and desktop (Brandit Tools). */
.brandit-photo-upload-area {
    position: relative;
    flex-direction: column;
    min-height: 96px;
    padding-bottom: 30px;
}
.brandit-photo-upload-area .brandit-photo-upload-hint {
    font-weight: 400;
}

/* ========== FLYER MODE CARDS - MOBILE RESPONSIVE ========== */
@media (max-width: 768px) {
    .brandit-flyer-mode-cards-wrapper {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-bottom: 24px !important;
    }
    
    .brandit-flyer-mode-card {
        height: 112px !important;
        padding: 24px 24px !important;
    }
}

/* ============================================================ */
/* CREDIT / PURCHASE MODAL — typography & layout polish (v11.0.3) */
/* ============================================================ */
#brandit-credits-modal .brandit-logo-modal-content {
    border-radius: 18px;
}
.brandit-credits-page {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
}
.brandit-credits-page > h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 4px 0 4px !important;
    letter-spacing: -0.01em;
}
.brandit-credits-page > h2 + .brandit-packages-grid {
    margin-top: 20px;
}
.brandit-package-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.brandit-package-icon {
    font-size: 30px;
    line-height: 1;
    margin-bottom: 2px;
}
.brandit-package-card h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 !important;
}
.brandit-package-credits {
    font-size: 14px;
    font-weight: 600;
    color: var(--brandit-primary);
}
.brandit-package-price {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
.brandit-package-card .brandit-purchase-btn {
    width: 100%;
    margin-top: auto;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 24px;
    color: #ffffff !important;
}

/* Credit modal — mobile */
@media (max-width: 600px) {
    #brandit-credits-modal .brandit-logo-modal-content {
        max-width: 94vw !important;
        margin: 0 auto;
    }
    .brandit-packages-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .brandit-package-card {
        padding: 16px 12px !important;
    }
    .brandit-package-price {
        font-size: 19px;
    }
    .brandit-credits-page {
        padding: 16px !important;
    }
}
@media (max-width: 380px) {
    .brandit-packages-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================ */
/* CREDITS MODAL — always show EVERY package (v11.0.12)          */
/* Desktop fits all packages on a single row (no card hidden     */
/* below the fold); narrower screens wrap to 2 then 1 column and  */
/* the modal body scrolls so every option is reachable on mobile  */
/* and desktop alike.                                            */
/* ============================================================ */
#brandit-credits-modal .brandit-logo-modal-content {
    max-width: 1040px !important;
    width: 94% !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 26px !important;
}
/* Flex row that fills the modal width; cards grow equally and wrap on mobile. */
#brandit-credits-modal .brandit-packages-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 100% !important;
    margin-top: 18px !important;
}
#brandit-credits-modal .brandit-package-card {
    flex: 1 1 210px !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 24px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1.5px solid #e4ddf6 !important;   /* visible outline */
    background: var(--bg-main) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}
#brandit-credits-modal .brandit-package-card:hover {
    border-color: var(--brandit-primary, #4208cc) !important;
    box-shadow: 0 12px 28px rgba(66, 8, 204, 0.16) !important;
    transform: translateY(-3px);
}
/* Featured (Popular) card keeps a solid brand outline at all times */
#brandit-credits-modal .brandit-package-card-featured {
    border: 2px solid var(--brandit-primary, #4208cc) !important;
    box-shadow: 0 8px 22px rgba(66, 8, 204, 0.12);
}
#brandit-credits-modal .brandit-package-card-featured:hover {
    border-color: var(--brandit-primary, #4208cc) !important;
    box-shadow: 0 14px 32px rgba(66, 8, 204, 0.22) !important;
}
/* Give the longer content (credits line, badge, struck + now price) room */
#brandit-credits-modal .brandit-package-credits {
    min-height: 34px;
    display: flex;
    align-items: center;
    text-align: center;
    line-height: 1.35;
}
#brandit-credits-modal .brandit-package-card .brandit-purchase-btn {
    margin-top: auto !important;
    width: 100% !important;
    white-space: nowrap;
}
@media (min-width: 641px) and (max-width: 900px) {
    #brandit-credits-modal .brandit-package-card { flex: 1 1 42% !important; }
}
@media (max-width: 640px) {
    #brandit-credits-modal .brandit-logo-modal-content {
        max-width: 94vw !important;
        padding: 18px !important;
    }
    #brandit-credits-modal .brandit-package-card {
        flex: 1 1 100% !important;
        padding: 20px 18px !important;
    }
    #brandit-credits-modal .brandit-package-credits { min-height: 0; }
}

/* ============================================================ */
/* COLOR SELECTION — improved mobile layout (v11.0.3)            */
/* On small screens the cramped side-by-side swatch + hex field  */
/* becomes a clean stacked card with large tap targets.          */
/* ============================================================ */
@media (max-width: 600px) {
    .brandit-color-picker-group {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    .brandit-color-input-wrapper {
        width: 100%;
        min-width: 0;
        gap: 12px;
        background: var(--bg-soft, #f8f8fb);
        border: 1px solid var(--border-light, #e5e7eb);
        border-radius: 12px;
        padding: 10px 12px;
    }
    /* Bigger, easier-to-tap native swatch */
    .brandit-color-input {
        width: 52px !important;
        height: 44px !important;
        min-width: 52px;
        border-radius: 10px !important;
        padding: 0;
        cursor: pointer;
    }
    .brandit-color-hex-input {
        flex: 1;
        height: 44px;
        font-size: 16px;       /* >=16px prevents iOS zoom-on-focus */
        padding: 10px 12px;
        border-radius: 10px;
        text-transform: uppercase;
    }

    /* Flyer-style picker: stack and enlarge */
    .color-picker-wrapper {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px;
    }
    .color-preview-bar {
        width: 100%;
        height: 32px;
        order: 3;
    }
    .color-input-group {
        width: 100%;
    }
    .color-input-group input[type="text"] {
        font-size: 16px;
        height: 44px;
    }

    /* ---------------------------------------------------------------- */
    /* Flyer WIZARD colour fields (.bfw-color-wrap) — bring them in line */
    /* with the polished picker used on the other cards so every "select */
    /* colour" field looks and behaves identically on mobile: a tidy     */
    /* card, a large easy-to-tap native swatch (>=44px), and a 16px hex   */
    /* field that prevents iOS zoom-on-focus.                            */
    /* ---------------------------------------------------------------- */
    .bfw-color-wrap {
        width: 100%;
        gap: 12px;
        background: var(--bg-soft, #f8f8fb);
        border: 1px solid var(--border-light, #e5e7eb);
        border-radius: 12px;
        padding: 10px 12px;
        box-sizing: border-box;
    }
    .bfw-color-input {
        width: 52px !important;
        min-width: 52px;
        height: 44px !important;
        flex: 0 0 52px;
        border: 1.5px solid var(--border-soft, #d1d5db) !important;
        border-radius: 10px !important;
        padding: 2px !important;
        cursor: pointer;
    }
    .bfw-color-hex {
        flex: 1;
        min-width: 0;
        height: 44px;
        font-size: 16px;          /* >=16px prevents iOS zoom-on-focus */
        padding: 10px 12px;
        border-radius: 10px;
        text-transform: uppercase;
        box-sizing: border-box;
    }

    /* ---------------------------------------------------------------- */
    /* Mobile colour fields keep the native swatch + hex CARD visible,    */
    /* but tapping it opens the palette MODAL (below) instead of the OS   */
    /* picker. The swatch + hex therefore only display the value; taps    */
    /* are handled by the card. A separate "Custom" tile opens the OS     */
    /* picker for a fully custom colour.                                 */
    /* ---------------------------------------------------------------- */
    .brandit-palette-card {
        cursor: pointer;
    }
    .brandit-palette-card .bfw-color-input,
    .brandit-palette-card .brandit-color-input,
    .brandit-palette-card .color-input,
    .brandit-palette-card .bfw-color-hex,
    .brandit-palette-card .brandit-color-hex-input,
    .brandit-palette-card input[type="text"] {
        pointer-events: none;
    }
}

/* ============================================================ */
/* MOBILE COLOUR PALETTE (v11.0.14)                              */
/* The palette swatches live in a MODAL that opens when the user  */
/* taps the "select colour" swatch+hex card. By default each      */
/* colour field shows just one section: that card. All palette UI */
/* is hidden on desktop, where the native swatch keeps opening the */
/* OS picker.                                                     */
/* ============================================================ */
.brandit-palette-modal { display: none; }          /* opened on demand only */

/* ---- Palette modal (holds the swatch grid) — works at any size ---- */
.brandit-palette-modal.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 100001;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(17, 24, 39, 0.55);
    -webkit-overflow-scrolling: touch;
}
.brandit-palette-modal-panel {
    width: 100%;
    max-width: 420px;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--bg-main, #fff);
    border-radius: 16px;
    padding: 18px 16px 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.3);
}
.brandit-palette-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.brandit-palette-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}
.brandit-palette-modal-close {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 2px 6px;
}
.brandit-palette-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 5px;
}
.brandit-mobile-swatch {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 26px;
    border: none;
    border-radius: 5px;
    padding: 0;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.brandit-mobile-swatch:active { transform: scale(0.9); }
.brandit-mobile-swatch.is-selected {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brandit-primary, #4208cc);
    z-index: 1;
}

/* ============================================================ */
/* PREVIEW MODAL — regenerate button (v11.0.4)                   */
/* ============================================================ */
.brandit-modal-regenerate {
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}
.brandit-modal-regenerate:hover {
    background: var(--brandit-primary, #4208cc) !important;
    color: #fff !important;
}
@media (max-width: 600px) {
    .brandit-modal-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    .brandit-modal-regenerate {
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* ============================================================ */
/* GUEST PARTNERSHIP BAR — above footer (v11.0.5)                */
/* Full-width lavender rounded bar, centered text.               */
/* ============================================================ */
.brandit-guest-partnership-bar {
    max-width: 1100px;
    margin: 24px auto 32px;
    padding: 18px 24px;
    background: linear-gradient(135deg, rgba(160, 216, 239, 0.18), rgba(202, 166, 255, 0.22));
    border: 1px solid rgba(124, 97, 255, 0.18);
    border-radius: 16px;
    text-align: center;
    font-size: 14px;
    color: #4b5563;
    font-weight: 500;
}
.brandit-guest-partnership-bar a {
    color: var(--brandit-primary, #4208cc);
    font-weight: 700;
    text-decoration: none;
}
.brandit-guest-partnership-bar a:hover {
    text-decoration: underline;
}
@media (max-width: 768px) {
    .brandit-guest-partnership-bar {
        margin: 16px 16px 24px;
        padding: 14px 16px;
        font-size: 13px;
    }
}

/* ============================================================ */
/* CREDIT PACKAGE CARDS — features + line icons (v11.0.7)        */
/* ============================================================ */
.brandit-package-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(66,8,204,0.10), rgba(212,2,83,0.10));
    color: var(--brandit-primary, #4208cc);
}
.brandit-package-icon .bd-icon,
.brandit-package-icon svg {
    width: 24px;
    height: 24px;
}
/* Credit-package discount highlight (Save X% + struck original + final price) */
.brandit-discount-badge {
    display: inline-block;
    background: #16a34a;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 12px;
    border-radius: 20px;
    letter-spacing: .02em;
    margin-bottom: 8px;
    box-shadow: 0 2px 6px rgba(22,163,74,0.25);
}
.brandit-price-original {
    display: block;
    font-size: 13px;
    color: var(--text-muted, #9ca3af);
    text-decoration: line-through;
    margin-bottom: 2px;
}
.brandit-price-now {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--brandit-primary, #4208cc);
}
.brandit-package-features {
    list-style: none;
    margin: 12px 0 16px;
    padding: 0;
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.brandit-package-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    line-height: 1.35;
}
.brandit-feature-check {
    flex: 0 0 auto;
    color: var(--brandit-success, #10b981);
    line-height: 0;
    margin-top: 1px;
}
.brandit-feature-check svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.4;
}
.brandit-package-card {
    position: relative;
}
.brandit-package-card-featured {
    border: 2px solid var(--brandit-primary, #4208cc) !important;
    box-shadow: 0 10px 28px rgba(66, 8, 204, 0.12);
}
.brandit-package-ribbon {
    position: absolute;
    top: 12px;
    right: -2px;
    background: var(--brand-gradient);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 12px 0 0 12px;
    letter-spacing: 0.02em;
}

/* ============================================================ */
/* LOGGED-IN FOOTER partnership line — mobile stacking (v11.0.11)*/
/* The logged-in footer (rendered by renderBranditFooter) uses   */
/* inline flex; on small screens stack all three items centered. */
/* ============================================================ */
@media (max-width: 768px) {
    .brandit-footer-bottom-inner {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 6px !important;
    }
    .brandit-footer-bottom-inner .brandit-footer-address,
    .brandit-footer-bottom-inner .brandit-footer-partnership,
    .brandit-footer-bottom-inner .brandit-footer-copyright {
        flex: none !important;
        text-align: center !important;
        white-space: normal !important;
        width: 100%;
    }
}
.brandit-asset-card .brandit-asset-preview img{cursor:pointer}