/* ============================================================
   builder-v2.css — Editorial Redesign of the QuikRSVP Form Builder
   Visual language inherited from landing-premium.css (gold/onyx).
   Scoped to body.builder-v2 to leave the legacy builder untouched.
   ============================================================ */

body.builder-v2 {
    /* Editorial palette */
    --bv2-onyx: #121212;
    --bv2-charcoal: #2A2A2A;
    --bv2-text: #2C2C2C;
    --bv2-muted: #6B6B6B;
    --bv2-faint: #9A9A9A;
    --bv2-silk: #FBF9F6;
    --bv2-cream: #F5EFE9;
    --bv2-blush: #F5EFEB;
    --bv2-line: rgba(18, 18, 18, 0.08);
    --bv2-line-soft: rgba(18, 18, 18, 0.05);
    --bv2-gold: #BC9B5D;
    --bv2-gold-soft: #D4AF37;
    --bv2-gold-pale: rgba(188, 155, 93, 0.08);
    --bv2-card: #FFFFFF;
    --bv2-shadow-sm: 0 1px 2px rgba(18, 18, 18, 0.04), 0 1px 3px rgba(18, 18, 18, 0.04);
    --bv2-shadow-md: 0 4px 10px rgba(18, 18, 18, 0.04), 0 12px 30px rgba(18, 18, 18, 0.06);
    --bv2-shadow-lg: 0 20px 50px rgba(18, 18, 18, 0.10);
    --bv2-radius: 14px;
    --bv2-radius-sm: 10px;
    --bv2-ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* Single typeface — Inter — to match event-site / ticket-builder voice */
    --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: var(--font-ui);

    background: var(--bv2-silk);
    color: var(--bv2-text);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0;
    padding-bottom: 0;
}

body.builder-v2 .app-container.builder-v2-shell {
    background: var(--bv2-silk);
    min-height: 100vh;
    padding-top: 0;
}

/* ============================================================
   HEADER — refined editorial bar
   ============================================================ */

body.builder-v2 .main-header {
    background: rgba(251, 249, 246, 0.85) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--bv2-line) !important;
    box-shadow: 0 1px 0 rgba(18, 18, 18, 0.02);
    padding: 0.85rem 0;
}

body.builder-v2 .main-header .container-fluid {
    padding-left: 2rem;
    padding-right: 2rem;
}

body.builder-v2 .header-compact-row {
    align-items: center;
    gap: 2rem;
}

body.builder-v2 .header-brand .app-title-small,
body.builder-v2 .header-brand h1 {
    font-family: var(--font-ui) !important;
    font-weight: 600 !important;
    color: var(--bv2-onyx) !important;
    font-size: 1.15rem !important;
    letter-spacing: -0.01em;
}

body.builder-v2 .header-brand img.app-logo-small {
    height: 30px !important;
    filter: none;
}

/* Workflow steps — editorial pill bar */
body.builder-v2 .workflow-steps {
    gap: 0.4rem;
    background: rgba(18, 18, 18, 0.04);
    padding: 0.3rem;
    border-radius: 999px;
    border: 1px solid var(--bv2-line-soft);
}

body.builder-v2 .step-button {
    background: transparent;
    border: none;
    color: var(--bv2-muted);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.86rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
    transition: color 0.3s var(--bv2-ease), background 0.3s var(--bv2-ease), box-shadow 0.3s var(--bv2-ease);
}

body.builder-v2 .step-button:hover {
    background: rgba(18, 18, 18, 0.04);
    color: var(--bv2-onyx);
    box-shadow: none;
    transform: none;
    border-color: transparent;
}

body.builder-v2 .step-button.active {
    background: var(--bv2-onyx);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(18, 18, 18, 0.18);
}

body.builder-v2 .step-button.completed {
    color: var(--bv2-gold);
}

body.builder-v2 .step-circle {
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
    width: 18px;
    height: 18px;
    font-size: 0.65rem;
    font-weight: 600;
}

body.builder-v2 .step-button:not(.active) .step-circle {
    background: rgba(18, 18, 18, 0.08);
    color: var(--bv2-charcoal);
}

body.builder-v2 .step-button.completed .step-circle {
    background: var(--bv2-gold-pale);
    color: var(--bv2-gold);
}

body.builder-v2 .step-button.completed .step-circle::before {
    color: var(--bv2-gold);
}

body.builder-v2 .step-label {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

/* Right side controls in header */
body.builder-v2 .header-user-section .language-btn {
    background: rgba(18, 18, 18, 0.04);
    border: 1px solid var(--bv2-line);
    color: var(--bv2-onyx);
    font-size: 0.85rem;
    letter-spacing: 0;
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-weight: 500;
}

body.builder-v2 .header-user-section .language-btn:hover {
    background: rgba(18, 18, 18, 0.08);
    color: var(--bv2-onyx);
}

body.builder-v2 .user-icon {
    background: var(--bv2-onyx);
    border: 1px solid var(--bv2-onyx);
    color: #fff;
    border-radius: 999px;
    padding: 0.3rem 0.65rem 0.3rem 0.5rem;
    transition: background 0.3s var(--bv2-ease);
}

body.builder-v2 .user-icon:hover {
    background: var(--bv2-charcoal);
}

body.builder-v2 .user-initial {
    background: var(--bv2-gold);
    color: #fff;
    width: 26px;
    height: 26px;
    font-size: 0.78rem;
    font-weight: 600;
}

body.builder-v2 .header-upgrade-btn {
    background: var(--bv2-gold) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    font-size: 0.85rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
    box-shadow: 0 4px 14px rgba(188, 155, 93, 0.28);
}

body.builder-v2 .header-upgrade-btn:hover {
    background: var(--bv2-gold-soft) !important;
    transform: translateY(-1px);
}

body.builder-v2 #headerMyFormsBtn {
    background: transparent;
    border: 1px solid var(--bv2-line);
    color: var(--bv2-onyx);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
}

body.builder-v2 #headerMyFormsBtn:hover {
    border-color: var(--bv2-onyx);
    background: var(--bv2-cream);
}

/* ============================================================
   GRID SHELL — sidebar + canvas + preview
   ============================================================ */

body.builder-v2 .builder-v2-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 420px;
    gap: 1.75rem;
    padding: 1.75rem 2rem 3rem;
    max-width: 1640px;
    /* width: 100% guarantees the grid fills its parent regardless of
       content. Without this, inside a flex-column parent (.main-content)
       the grid can shrink to its intrinsic content width — which makes
       both the sidebar AND the canvas column drift as accordion items
       expand or collapse, since `margin: 0 auto` re-centers a shrunken
       grid every layout pass. */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media (max-width: 1399px) {
    body.builder-v2 .builder-v2-grid {
        grid-template-columns: 240px minmax(0, 1fr) 380px;
        gap: 1.25rem;
        padding: 1.25rem 1rem 3rem;
    }
}

@media (max-width: 1199px) {
    body.builder-v2 .builder-v2-grid {
        grid-template-columns: 220px minmax(0, 1fr);
    }
    body.builder-v2 .bv2-preview {
        display: none;
    }
}

@media (max-width: 991px) {
    body.builder-v2 .builder-v2-grid {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
    body.builder-v2 .bv2-sidebar {
        display: none;
    }
}

/* Share is its own page — full-width canvas, no sidebar / preview
   columns. The Create/Translate workflow's "canvas position locked"
   constraint doesn't apply here since the user has finished building. */
body.builder-v2 .builder-v2-shell.bv2-step-share .builder-v2-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 1180px;
}
body.builder-v2 .builder-v2-shell.bv2-step-share .bv2-sidebar,
body.builder-v2 .builder-v2-shell.bv2-step-share .bv2-preview {
    display: none;
}

/* Sidebar shows a different nav per step. By default the Create nav is
   visible and Translate is hidden; on Translate step we flip them.
   Specificity bumped via the sidebar id so the .bv2-nav { display: flex }
   default doesn't override us. */
body.builder-v2 #bv2Sidebar .bv2-nav-create { display: flex !important; }
body.builder-v2 #bv2Sidebar .bv2-nav-translate { display: none !important; }
body.builder-v2 .builder-v2-shell.bv2-step-translate #bv2Sidebar .bv2-nav-create { display: none !important; }
body.builder-v2 .builder-v2-shell.bv2-step-translate #bv2Sidebar .bv2-nav-translate { display: flex !important; }

/* ============================================================
   SIDEBAR — floating vertically centered rail (event-site style)
   ============================================================ */

body.builder-v2 .bv2-sidebar {
    position: relative;
}

body.builder-v2 .bv2-nav {
    position: sticky;
    /* Float at viewport center: 50vh from the top, then pull back by half its
       own height. Works because the grid stretches the sidebar column to the
       full content height, so there's room for the sticky offset. */
    top: 50vh;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: var(--bv2-card);
    border: 1px solid var(--bv2-line);
    border-radius: 14px;
    padding: 0.5rem;
    box-shadow: 0 6px 20px rgba(20, 20, 30, 0.05);
    /* Clamp height so a tall nav still fits in short viewports. */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

body.builder-v2 .bv2-nav-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.8rem;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--bv2-faint);
    font-size: 0.92rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s var(--bv2-ease), background 0.2s var(--bv2-ease);
    width: 100%;
}

body.builder-v2 .bv2-nav-item i {
    color: var(--bv2-faint);
    transition: color 0.2s var(--bv2-ease);
    font-size: 1rem;
    flex-shrink: 0;
}

body.builder-v2 .bv2-nav-item:hover {
    color: var(--bv2-onyx);
    background: rgba(0, 0, 0, 0.04);
}

body.builder-v2 .bv2-nav-item:hover i {
    color: var(--bv2-onyx);
}

body.builder-v2 .bv2-nav-item.active {
    color: var(--bv2-gold);
    background: rgba(188, 155, 93, 0.10);
}

body.builder-v2 .bv2-nav-item.active i {
    color: var(--bv2-gold);
}

/* ============================================================
   CANVAS — content cards
   ============================================================ */

body.builder-v2 .bv2-canvas {
    min-width: 0;
}

/* Hide the legacy horizontal pill nav — sidebar replaces it on desktop */
body.builder-v2 .builder-group-nav {
    display: none !important;
}

@media (max-width: 991px) {
    /* On mobile, surface the legacy pills so users can switch sections without the sidebar */
    body.builder-v2 .builder-group-nav {
        display: flex !important;
        gap: 0.4rem;
        background: var(--bv2-card);
        padding: 0.4rem;
        border: 1px solid var(--bv2-line);
        border-radius: 999px;
        margin-bottom: 1rem;
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    body.builder-v2 .builder-group-nav .nav-link {
        flex-shrink: 0;
        background: transparent;
        border: none;
        color: var(--bv2-muted);
        padding: 0.45rem 0.85rem;
        border-radius: 999px;
        font-size: 0.8rem;
    }
    body.builder-v2 .builder-group-nav .nav-link.active {
        background: var(--bv2-onyx);
        color: #fff;
    }
}

/* ============================================================
   BANNERS
   The always-on instructions banner is hidden in v2 — the header "?"
   already opens the same Builder Guide modal, so the inline copy was
   redundant and pushed the form layout.
   The conditional banners (existing-forms / wedding-sites) stay inline
   as slim pills but only render when their JS condition fires, so the
   "shift on dismiss" is a one-time event after which they're gone.
   ============================================================ */

body.builder-v2 .builder-instructions {
    display: none !important;
}

body.builder-v2 #existingFormsBanner,
body.builder-v2 #weddingSitesBanner {
    background: var(--bv2-card) !important;
    border: 1px solid var(--bv2-line) !important;
    border-left: 3px solid var(--bv2-gold) !important;
    border-radius: 999px !important;
    padding: 0.4rem 0.85rem 0.4rem 1rem !important;
    box-shadow: 0 1px 3px rgba(18, 18, 18, 0.04);
    margin-bottom: 0.85rem !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    line-height: 1.3;
    min-height: 0;
}

body.builder-v2 #existingFormsBanner i,
body.builder-v2 #weddingSitesBanner i {
    color: var(--bv2-gold) !important;
    font-size: 0.95rem !important;
    flex-shrink: 0;
}

body.builder-v2 #existingFormsBanner strong,
body.builder-v2 #weddingSitesBanner strong {
    font-weight: 600;
    color: var(--bv2-onyx);
}

body.builder-v2 #existingFormsBanner a,
body.builder-v2 #weddingSitesBanner a {
    color: var(--bv2-gold) !important;
    font-size: 0.78rem;
    font-weight: 500;
    flex-shrink: 0;
}

body.builder-v2 .builder-instructions-text {
    margin: 0;
    color: var(--bv2-muted);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    /* Truncate gracefully on narrow widths instead of wrapping to a 2nd line */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.builder-v2 .builder-instructions-text > span[data-translate] {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

body.builder-v2 .builder-instructions-text i.bi-info-circle {
    color: var(--bv2-gold);
    font-size: 0.95rem;
    flex-shrink: 0;
}

body.builder-v2 .builder-learn-more-btn {
    background: transparent;
    border: none;
    color: var(--bv2-gold);
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    margin-left: auto;
    cursor: pointer;
    transition: all 0.2s var(--bv2-ease);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(188, 155, 93, 0.4);
}

body.builder-v2 .builder-learn-more-btn:hover {
    color: var(--bv2-onyx);
    background: var(--bv2-cream);
    text-decoration-color: transparent;
}

body.builder-v2 .builder-learn-more-btn .bi-question-circle {
    display: none; /* simplify — text alone reads as a link */
}

body.builder-v2 .builder-instructions-dismiss {
    background: transparent;
    border: none;
    color: var(--bv2-faint);
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    line-height: 1;
    font-size: 0.95rem;
    flex-shrink: 0;
}

body.builder-v2 .builder-instructions-dismiss:hover {
    color: var(--bv2-onyx);
}

/* Dismiss-side polish for the upsell banners (existing-forms / wedding-sites)
   — drop their inline gradients so the editorial pill style wins. */
body.builder-v2 #existingFormsBanner,
body.builder-v2 #weddingSitesBanner {
    font-size: 0.82rem;
}

body.builder-v2 #existingFormsBanner i,
body.builder-v2 #weddingSitesBanner i {
    color: var(--bv2-gold) !important;
    font-size: 0.95rem !important;
}

body.builder-v2 #existingFormsBanner strong,
body.builder-v2 #weddingSitesBanner strong {
    font-weight: 600;
    color: var(--bv2-onyx);
}

body.builder-v2 #existingFormsBanner a,
body.builder-v2 #weddingSitesBanner a {
    color: var(--bv2-gold) !important;
    font-size: 0.78rem;
    font-weight: 500;
}

/* Tab content area */
body.builder-v2 #builderTabsContent {
    background: transparent;
}

/* ============================================================
   ACCORDION — premium card sections
   ============================================================ */

/* ==========================================================================
   CANVAS WIDTH LOCK
   The legacy builder.css applies "display: flex; flex-direction: column"
   to .tab-content and .tab-pane.active at TWO nesting levels. Combined,
   this lets each pane's width collapse to the intrinsic width of the
   widest visible accordion-item, so:
     - collapsed pills => narrow pane
     - expanded panel  => wide pane
     - different tab   => different width
   In v2 we want the middle column to be a stable build surface that
   doesn't shift with content. Solution: block layout in the canvas tree,
   with width: 100% guaranteed at every level. The grid column itself is
   already fixed by the grid template — we just stop the flex children
   from shrinking inside it.
   ========================================================================== */

body.builder-v2 .bv2-canvas {
    width: 100% !important;
    min-width: 0;
    align-self: start;
}

body.builder-v2 #builderTabsContent,
body.builder-v2 #builderTabsContent > .tab-pane.active,
body.builder-v2 .builder-group-content,
body.builder-v2 .builder-group-content > .tab-pane.active {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    min-height: 0 !important;
}

/* Round all 4 corners + top padding — the original builder had a pill nav
   covering the top edge, but v2 replaces that with the sidebar so the top
   of this card is exposed and needs proper corners + breathing room. */
body.builder-v2 .builder-group-content {
    border-radius: var(--bv2-radius) !important;
    padding-top: 0.75rem !important;
}

/* Bootstrap's default "non-active panes are display: none" must still hold. */
body.builder-v2 .builder-group-content > .tab-pane:not(.active) {
    display: none !important;
}

body.builder-v2 #formBuilderAccordion {
    background: transparent;
    display: block !important; /* block fills width regardless of parent's flex setup */
    width: 100% !important;
    /* Spacing between accordion items, replicated without flex */
    /* (use margin on items instead of gap since we're block) */

    /* The legacy builder.css gives the accordion its own inner scroll
       (overflow-y: auto + max-height). That causes a width jump when the
       scrollbar appears/disappears as items expand or collapse.
       In v2 we let the whole page scroll naturally. */
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
}

body.builder-v2 #create #formBuilderAccordion {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
}

body.builder-v2 #formBuilderAccordion .accordion-item {
    width: 100% !important;
    margin-bottom: 1rem;
}

body.builder-v2 #formBuilderAccordion .accordion-item:last-child {
    margin-bottom: 0;
}

/* ============================================================
   NESTED ACCORDION (used inside Success Page Content)
   Slightly recessed cream surface so the nesting reads visually.
   ============================================================ */
body.builder-v2 .bv2-nested-accordion {
    background: var(--bv2-cream);
    border: 1px solid var(--bv2-line-soft);
    border-radius: var(--bv2-radius-sm);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

body.builder-v2 .bv2-nested-accordion .accordion-item {
    background: var(--bv2-card) !important;
    border: 1px solid var(--bv2-line-soft) !important;
    border-radius: var(--bv2-radius-sm) !important;
    box-shadow: none;
    margin-bottom: 0 !important;
}

body.builder-v2 .bv2-nested-accordion .accordion-item:hover {
    box-shadow: var(--bv2-shadow-sm);
}

body.builder-v2 .bv2-nested-accordion .accordion-button {
    padding: 0.75rem 1rem !important;
    font-size: 0.92rem;
    font-weight: 600;
}

body.builder-v2 .bv2-nested-accordion .accordion-button:not(.collapsed) {
    background: var(--bv2-cream) !important;
    border-bottom: 1px solid var(--bv2-line-soft) !important;
}

body.builder-v2 .bv2-nested-accordion .accordion-body {
    padding: 1rem 1.15rem !important;
}

body.builder-v2 #formBuilderAccordion .accordion-item {
    background: var(--bv2-card);
    border: 1px solid var(--bv2-line) !important;
    border-radius: var(--bv2-radius) !important;
    overflow: hidden;
    box-shadow: var(--bv2-shadow-sm);
    transition: box-shadow 0.4s var(--bv2-ease), transform 0.4s var(--bv2-ease);
}

body.builder-v2 #formBuilderAccordion .accordion-item:hover {
    box-shadow: var(--bv2-shadow-md);
}

body.builder-v2 #formBuilderAccordion .accordion-header {
    margin: 0;
    border: none;
}

body.builder-v2 #formBuilderAccordion .accordion-button {
    background: transparent !important;
    color: var(--bv2-onyx) !important;
    border: none !important;
    padding: 1rem 1.25rem !important;
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: none !important;
    transition: background 0.3s var(--bv2-ease);
}

body.builder-v2 #formBuilderAccordion .accordion-button span[data-translate] {
    font-family: var(--font-ui);
}

body.builder-v2 #formBuilderAccordion .accordion-button:not(.collapsed) {
    background: var(--bv2-cream) !important;
    color: var(--bv2-onyx) !important;
    border-left: none !important;
    padding-left: 1.5rem !important;
    border-bottom: 1px solid var(--bv2-line) !important;
}

body.builder-v2 #formBuilderAccordion .accordion-button:hover {
    background: rgba(18, 18, 18, 0.02) !important;
}

body.builder-v2 #formBuilderAccordion .accordion-button i {
    color: var(--bv2-gold) !important;
    margin-right: 0.85rem !important;
    opacity: 1 !important;
    font-size: 1.05rem;
}

body.builder-v2 #formBuilderAccordion .accordion-button:not(.collapsed) i {
    transform: none;
}

body.builder-v2 #formBuilderAccordion .accordion-button::after {
    background-image: none;
    content: '\F285'; /* bi-chevron-right */
    font-family: 'bootstrap-icons';
    font-size: 0.95rem;
    color: var(--bv2-faint);
    transition: transform 0.4s var(--bv2-ease);
    width: auto;
    height: auto;
    margin-inline-start: auto;
}

body.builder-v2 #formBuilderAccordion .accordion-button:not(.collapsed)::after {
    transform: rotate(90deg);
    color: var(--bv2-gold);
}

body.builder-v2 #formBuilderAccordion .accordion-body {
    padding: 1.5rem 1.75rem !important;
    background: var(--bv2-card);
}

/* Pro / Signature badges */
body.builder-v2 .pro-feature-badge,
body.builder-v2 .badge.bg-warning {
    background: var(--bv2-gold-pale) !important;
    color: var(--bv2-gold) !important;
    border: 1px solid rgba(188, 155, 93, 0.25);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.7rem !important;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
}

/* ============================================================
   FORM CONTROLS — refined inputs, switches, color pickers
   ============================================================ */

/* Standalone inputs only — slim padding. Don't touch .form-floating > .form-control
   (Bootstrap owns its geometry; overriding the padding/height breaks the
   floating-label math and the label collides with the value). */
body.builder-v2 .form-control:not(.form-floating .form-control),
body.builder-v2 .form-select:not(.form-floating .form-select) {
    border-radius: 10px;
    border: 1px solid var(--bv2-line);
    background: var(--bv2-card);
    color: var(--bv2-onyx);
    padding: 0.55rem 0.85rem;
    font-size: 0.95rem;
    transition: border-color 0.25s var(--bv2-ease), box-shadow 0.25s var(--bv2-ease);
}

/* Restore the dropdown chevron that Bootstrap's .form-select normally paints.
   The override above sets a flat background:, which wipes out Bootstrap's
   chevron background-image and leaves <select> elements looking like plain
   text boxes. Re-paint the chevron explicitly so users can tell they're
   dropdowns. RTL builders flip it to the left side. */
body.builder-v2 .form-select:not(.form-floating .form-select) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 14px 12px;
    padding-right: 2.4rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
html[dir="rtl"] body.builder-v2 .form-select:not(.form-floating .form-select),
body.builder-v2[dir="rtl"] .form-select:not(.form-floating .form-select) {
    background-position: left 0.85rem center;
    padding-right: 0.85rem;
    padding-left: 2.4rem;
}

/* For floating-label inputs, only style the surface (border/radius/colors) —
   leave Bootstrap's padding, height, line-height, and label transform alone. */
body.builder-v2 .form-floating > .form-control,
body.builder-v2 .form-floating > .form-select {
    border-radius: 10px;
    border: 1px solid var(--bv2-line);
    background: var(--bv2-card);
    color: var(--bv2-onyx);
    transition: border-color 0.25s var(--bv2-ease), box-shadow 0.25s var(--bv2-ease);
}

/* Chevron for floating-label form-select too. Bootstrap's default applies
   here as well but our surface override wipes it. */
body.builder-v2 .form-floating > .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 14px 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
html[dir="rtl"] body.builder-v2 .form-floating > .form-select,
body.builder-v2[dir="rtl"] .form-floating > .form-select {
    background-position: left 0.85rem center;
}

body.builder-v2 .form-control:focus,
body.builder-v2 .form-select:focus,
body.builder-v2 .form-floating > .form-control:focus,
body.builder-v2 .form-floating > .form-select:focus {
    border-color: var(--bv2-gold);
    box-shadow: 0 0 0 3px var(--bv2-gold-pale);
    outline: none;
}

body.builder-v2 .form-floating > label {
    color: var(--bv2-muted);
}

body.builder-v2 .form-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--bv2-charcoal);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0.4rem;
}

body.builder-v2 .form-text {
    font-size: 0.78rem;
    color: var(--bv2-faint);
    margin-top: 0.4rem;
    line-height: 1.5;
}

/* Bootstrap form switch — gold accent when on */
body.builder-v2 .form-check-input {
    border-color: var(--bv2-line);
    background-color: var(--bv2-card);
}

body.builder-v2 .form-check-input:focus {
    border-color: var(--bv2-gold);
    box-shadow: 0 0 0 3px var(--bv2-gold-pale);
}

body.builder-v2 .form-check-input:checked {
    background-color: var(--bv2-onyx);
    border-color: var(--bv2-onyx);
}

body.builder-v2 .form-switch .form-check-input:checked {
    background-color: var(--bv2-gold);
    border-color: var(--bv2-gold);
}

body.builder-v2 .form-check-label {
    color: var(--bv2-onyx);
    font-size: 0.92rem;
}

/* Color swatches */
body.builder-v2 .color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body.builder-v2 .color-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--bv2-line);
    cursor: pointer;
    transition: transform 0.2s var(--bv2-ease), box-shadow 0.2s var(--bv2-ease);
}

body.builder-v2 .color-swatch:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

body.builder-v2 .color-swatch.active,
body.builder-v2 .color-swatch.selected {
    box-shadow: 0 0 0 2px var(--bv2-card), 0 0 0 4px var(--bv2-onyx);
}

body.builder-v2 .form-control-color {
    width: 50px;
    height: 38px;
    padding: 4px;
    border-radius: 10px;
}

/* Paper / seal swatches */
body.builder-v2 .paper-swatches {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.55rem;
    margin-top: 0.5rem;
}

body.builder-v2 .paper-swatch {
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--bv2-line);
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s var(--bv2-ease), box-shadow 0.2s var(--bv2-ease);
}

body.builder-v2 .paper-swatch:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 14px rgba(18, 18, 18, 0.12);
}

body.builder-v2 .paper-swatch.selected {
    box-shadow: 0 0 0 2px var(--bv2-card), 0 0 0 4px var(--bv2-gold);
}

/* ============================================================
   BUTTONS — editorial buttons, kept Bootstrap-compatible
   ============================================================ */

body.builder-v2 .btn {
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 0.55rem 1.15rem;
    transition: all 0.3s var(--bv2-ease);
    border-width: 1px;
}

body.builder-v2 .btn-primary {
    background: var(--bv2-onyx);
    border-color: var(--bv2-onyx);
    color: #fff;
    box-shadow: 0 4px 12px rgba(18, 18, 18, 0.16);
}

body.builder-v2 .btn-primary:hover,
body.builder-v2 .btn-primary:focus {
    background: var(--bv2-charcoal);
    border-color: var(--bv2-charcoal);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(18, 18, 18, 0.22);
}

body.builder-v2 .btn-outline-primary {
    background: transparent;
    border-color: var(--bv2-line);
    color: var(--bv2-onyx);
}

body.builder-v2 .btn-outline-primary:hover {
    background: var(--bv2-onyx);
    border-color: var(--bv2-onyx);
    color: #fff;
}

body.builder-v2 .btn-success {
    background: var(--bv2-gold);
    border-color: var(--bv2-gold);
    color: #fff;
    box-shadow: 0 4px 14px rgba(188, 155, 93, 0.28);
}

body.builder-v2 .btn-success:hover {
    background: var(--bv2-gold-soft);
    border-color: var(--bv2-gold-soft);
    color: #fff;
    transform: translateY(-1px);
}

body.builder-v2 .btn-outline-secondary {
    background: transparent;
    border-color: var(--bv2-line);
    color: var(--bv2-onyx);
}

body.builder-v2 .btn-outline-secondary:hover {
    background: var(--bv2-cream);
    border-color: var(--bv2-onyx);
    color: var(--bv2-onyx);
}

body.builder-v2 .btn-outline-danger {
    color: #b94a48;
    border-color: rgba(185, 74, 72, 0.25);
}

body.builder-v2 .btn-outline-danger:hover {
    background: #b94a48;
    border-color: #b94a48;
    color: #fff;
}

body.builder-v2 .btn-sm {
    font-size: 0.75rem;
    padding: 0.35rem 0.85rem;
}

body.builder-v2 .btn-lg {
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
}

/* Tab next button */
body.builder-v2 .tab-next-action {
    margin-top: 2rem;
    padding: 1.25rem 1.25rem 1.25rem;
    border-top: 1px solid var(--bv2-line-soft);
    text-align: right;
}

body.builder-v2 .tab-next-btn {
    background: var(--bv2-onyx) !important;
    color: #fff !important;
    border-color: var(--bv2-onyx) !important;
}

body.builder-v2 .tab-next-btn:hover {
    background: var(--bv2-charcoal) !important;
    border-color: var(--bv2-charcoal) !important;
    color: #fff !important;
}

[dir="rtl"] body.builder-v2 .tab-next-action {
    text-align: left;
}

/* ============================================================
   SUB-GROUPS, FIELD ITEMS, FIELD GROUPS
   ============================================================ */

body.builder-v2 .builder-sub-group {
    background: var(--bv2-cream);
    border: 1px solid var(--bv2-line-soft);
    border-radius: var(--bv2-radius-sm);
    padding: 1rem 1.15rem;
}

body.builder-v2 .builder-sub-group-header {
    font-family: var(--font-ui);
    font-size: 0.92rem;
    color: var(--bv2-onyx);
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--bv2-line-soft);
    font-weight: 600;
}

body.builder-v2 .builder-sub-group-header i {
    color: var(--bv2-gold);
    margin-right: 0.4rem;
}

body.builder-v2 .field-item {
    background: var(--bv2-card);
    border: 1px solid var(--bv2-line-soft);
    border-radius: var(--bv2-radius-sm);
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.3s var(--bv2-ease);
}

body.builder-v2 .field-item:hover {
    border-color: var(--bv2-line);
}

body.builder-v2 .field-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

body.builder-v2 .field-label {
    font-weight: 500;
    color: var(--bv2-onyx);
    font-size: 0.92rem;
    text-transform: none;
    letter-spacing: 0;
}

body.builder-v2 .field-label i {
    color: var(--bv2-gold);
}

body.builder-v2 .field-description {
    font-size: 0.8rem;
    color: var(--bv2-muted);
    margin-top: 0.4rem;
    line-height: 1.5;
}

body.builder-v2 .field-options-container {
    background: var(--bv2-cream);
    border: 1px solid var(--bv2-line-soft);
    border-radius: var(--bv2-radius-sm);
    padding: 1rem 1.15rem;
    margin-top: 0.5rem;
}

body.builder-v2 .field-expand-btn {
    border: 1px solid var(--bv2-line);
    background: transparent;
    color: var(--bv2-muted);
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.builder-v2 .field-expand-btn:hover {
    border-color: var(--bv2-onyx);
    color: var(--bv2-onyx);
    background: transparent;
}

body.builder-v2 .field-group {
    background: var(--bv2-card);
    border: 1px solid var(--bv2-line);
    border-radius: var(--bv2-radius-sm);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

body.builder-v2 .field-group-header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--bv2-line-soft);
}

body.builder-v2 .field-group-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bv2-gold-pale);
    color: var(--bv2-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}

body.builder-v2 .field-group-title {
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--bv2-onyx);
    margin: 0 0 0.2rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

body.builder-v2 .field-group-description {
    font-size: 0.82rem;
    color: var(--bv2-muted);
    line-height: 1.5;
    margin: 0;
}

/* ============================================================
   IMAGE UPLOAD — refined drop zone
   ============================================================ */

body.builder-v2 .upload-area {
    background: var(--bv2-cream);
    border: 1.5px dashed var(--bv2-line);
    border-radius: var(--bv2-radius);
    padding: 2.25rem 1.25rem;
    text-align: center;
    transition: all 0.3s var(--bv2-ease);
    cursor: pointer;
}

body.builder-v2 .upload-area:hover {
    border-color: var(--bv2-gold);
    background: var(--bv2-gold-pale);
}

body.builder-v2 .upload-content i {
    color: var(--bv2-gold) !important;
    font-size: 2rem !important;
}

body.builder-v2 .upload-content h5 {
    font-family: var(--font-ui);
    color: var(--bv2-onyx);
    font-size: 0.98rem;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

body.builder-v2 .upload-content p {
    font-size: 0.8rem;
    color: var(--bv2-muted);
    margin-bottom: 0.85rem;
}

/* Quieter, smaller CTA pair inside the upload drop zone — they were
   reading as the visual anchor of the empty state, which felt loud. */
body.builder-v2 .upload-content .btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.95rem;
    font-weight: 500;
}

body.builder-v2 .upload-content .btn i {
    font-size: 0.9rem !important;
    margin-right: 0.35rem !important;
}

body.builder-v2 .upload-content .btn-primary {
    /* Smaller, no shadow stack — feels less heavy at this size */
    box-shadow: 0 2px 6px rgba(18, 18, 18, 0.12);
}

body.builder-v2 .upload-content .btn-outline-primary {
    border-color: var(--bv2-line);
}

body.builder-v2 .image-preview-card {
    background: var(--bv2-card);
    border: 1px solid var(--bv2-line);
    border-radius: var(--bv2-radius);
    padding: 1rem;
}

body.builder-v2 .preview-image {
    max-height: 280px;
    object-fit: cover;
    width: 100%;
    border-radius: var(--bv2-radius-sm);
}

body.builder-v2 .preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--bv2-line-soft);
}

/* ============================================================
   ALERTS — quieter editorial alerts
   ============================================================ */

body.builder-v2 .alert {
    border: 1px solid var(--bv2-line);
    border-radius: var(--bv2-radius-sm);
    padding: 0.85rem 1rem;
    font-size: 0.86rem;
    background: var(--bv2-cream);
    color: var(--bv2-text);
}

body.builder-v2 .alert-info {
    background: var(--bv2-cream);
    border-color: var(--bv2-line);
    color: var(--bv2-text);
}

body.builder-v2 .alert-info i,
body.builder-v2 .alert-info strong {
    color: var(--bv2-gold);
}

body.builder-v2 .alert-success {
    background: rgba(188, 155, 93, 0.06);
    border-color: rgba(188, 155, 93, 0.2);
    color: var(--bv2-charcoal);
}

body.builder-v2 .alert-success i,
body.builder-v2 .alert-success strong {
    color: var(--bv2-gold);
}

/* ============================================================
   PHONE PREVIEW — refined editorial frame
   ============================================================ */

body.builder-v2 .bv2-preview {
    position: relative;
}

body.builder-v2 .bv2-preview-card {
    position: sticky;
    top: 90px;
    background: var(--bv2-card);
    border: 1px solid var(--bv2-line);
    border-radius: var(--bv2-radius);
    padding: 1rem 1.25rem 1.5rem;
    box-shadow: var(--bv2-shadow-md);
}

body.builder-v2 .bv2-phone {
    display: flex;
    justify-content: center;
}

body.builder-v2 .bv2-phone-frame {
    position: relative;
    width: 340px;
    height: 700px;
    background: linear-gradient(160deg, #1a1a1a, #0a0a0a);
    border-radius: 42px;
    padding: 14px;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.18),
        inset 0 2px 4px rgba(255, 255, 255, 0.18),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.08);
}

body.builder-v2 .bv2-phone-screen {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 26px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.04);
}

body.builder-v2 .bv2-phone-screen iframe {
    border: none;
    width: 100%;
    height: 100%;
    display: block;
}

body.builder-v2 .bv2-phone-frame .phone-home-button {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    z-index: 3;
}

/* Hide the legacy preview header/phone elements within v2 */
body.builder-v2 .preview-container > .preview-header,
body.builder-v2 .phone-frame-container .phone-frame-image {
    display: none;
}

/* ============================================================
   TRANSLATIONS TAB
   ============================================================ */

/* The translations sub-tabs are replaced by the sidebar on desktop, and
   the "Hide source" toggle is relocated into the search row by JS at
   page load. So on desktop, the legacy header has no remaining content
   and we collapse it to zero footprint. */
body.builder-v2 .translations-tab-header {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
}
@media (min-width: 992px) {
    body.builder-v2 .translations-tab-header {
        display: none !important;
    }
    body.builder-v2 .translations-tab-header #translationSubTabs {
        display: none !important;
    }
}

/* Search row hosts the search input AND the relocated Hide source toggle
   on one line. */
body.builder-v2 .bv2-search-row {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: 0;
}
body.builder-v2 .bv2-search-row > .input-group.shadow-sm {
    flex: 1;
    min-width: 0;
}
body.builder-v2 .bv2-search-row > .hide-source-toggle {
    flex-shrink: 0;
    background: var(--bv2-card);
    border: 1px solid var(--bv2-line);
    border-radius: 10px;
    padding: 0.55rem 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--bv2-charcoal);
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
}
body.builder-v2 .bv2-search-row > .hide-source-toggle:hover {
    border-color: var(--bv2-onyx);
}
body.builder-v2 .bv2-search-row > .hide-source-toggle .form-check {
    margin: 0;
    padding: 0;
    min-height: 0;
}

body.builder-v2 .translations-tab-header .nav-pills {
    background: rgba(18, 18, 18, 0.04);
    padding: 0.25rem;
    border-radius: 999px;
    gap: 0.25rem;
}

body.builder-v2 .translations-tab-header .nav-pills .nav-link {
    background: transparent;
    color: var(--bv2-muted);
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
}

body.builder-v2 .translations-tab-header .nav-pills .nav-link.active {
    background: var(--bv2-onyx);
    color: #fff;
}

body.builder-v2 .hide-source-toggle {
    color: var(--bv2-muted);
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

body.builder-v2 .card {
    background: var(--bv2-card);
    border: 1px solid var(--bv2-line);
    border-radius: var(--bv2-radius);
    box-shadow: var(--bv2-shadow-sm);
}

body.builder-v2 .card-header {
    background: var(--bv2-cream);
    border-bottom: 1px solid var(--bv2-line);
    border-radius: var(--bv2-radius) var(--bv2-radius) 0 0 !important;
    padding: 0.85rem 1.15rem;
    color: var(--bv2-onyx);
}

body.builder-v2 .card-header.bg-success {
    background: var(--bv2-gold) !important;
    color: #fff !important;
}

body.builder-v2 .card-body {
    padding: 1.25rem;
}

body.builder-v2 .unified-language-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

/* ============================================================
   SHARE TAB — refined
   ============================================================ */

body.builder-v2 .share-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

body.builder-v2 .share-top-section {
    background: var(--bv2-card);
    border: 1px solid var(--bv2-line);
    border-radius: var(--bv2-radius);
    padding: 1.25rem;
    box-shadow: var(--bv2-shadow-sm);
}

body.builder-v2 .link-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

body.builder-v2 .link-display {
    flex: 1 1 280px;
    min-width: 0;
    background: var(--bv2-cream);
    border: 1px solid var(--bv2-line);
    border-radius: 999px;
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bv2-onyx);
    font-family: 'Menlo', 'Monaco', monospace;
    font-size: 0.85rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.builder-v2 .link-display .link-icon {
    color: var(--bv2-gold);
    flex-shrink: 0;
}

body.builder-v2 .share-action-btn {
    background: var(--bv2-onyx);
    border: 1px solid var(--bv2-onyx);
    color: #fff;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: all 0.3s var(--bv2-ease);
}

body.builder-v2 .share-action-btn:hover {
    background: var(--bv2-charcoal);
    color: #fff;
    transform: translateY(-1px);
}

body.builder-v2 .share-action-btn:disabled {
    background: var(--bv2-line);
    border-color: var(--bv2-line);
    color: var(--bv2-faint);
    cursor: not-allowed;
}

/* Two equal alternatives, side-by-side on desktop with an "OR" divider. */
body.builder-v2 .share-paths {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.25rem;
    align-items: stretch;
    position: relative;
}

body.builder-v2 .share-paths::before {
    content: 'or';
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    background: var(--bv2-cream);
    border: 1px solid var(--bv2-line);
    color: var(--bv2-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    z-index: 1;
}

@media (max-width: 767px) {
    body.builder-v2 .share-paths {
        grid-template-columns: 1fr;
    }
    body.builder-v2 .share-paths::before {
        grid-column: 1;
        grid-row: 2;
    }
}

body.builder-v2 .share-path-card {
    background: var(--bv2-card);
    border: 1px solid var(--bv2-line);
    border-radius: var(--bv2-radius);
    padding: 1.5rem;
    box-shadow: var(--bv2-shadow-sm);
    transition: box-shadow 0.3s var(--bv2-ease), transform 0.3s var(--bv2-ease);
    /* Both share path cards take the SAME column slot in the 1fr auto 1fr grid */
    display: flex;
    flex-direction: column;
}

body.builder-v2 .share-path-card:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
}

body.builder-v2 .share-path-card:nth-of-type(2) {
    grid-column: 3;
    grid-row: 1;
}

@media (max-width: 767px) {
    body.builder-v2 .share-path-card:nth-of-type(1) {
        grid-column: 1;
        grid-row: 1;
    }
    body.builder-v2 .share-path-card:nth-of-type(2) {
        grid-column: 1;
        grid-row: 3;
    }
}

body.builder-v2 .share-path-card:hover {
    box-shadow: var(--bv2-shadow-md);
    transform: translateY(-2px);
}

body.builder-v2 .share-path-header {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin-bottom: 0.85rem;
}

body.builder-v2 .share-path-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bv2-gold-pale);
    color: var(--bv2-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.15rem;
}

body.builder-v2 .share-path-icon.bulk {
    background: rgba(18, 18, 18, 0.06);
    color: var(--bv2-onyx);
}

body.builder-v2 .share-path-card h6 {
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--bv2-onyx);
    margin: 0 0 0.2rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

body.builder-v2 .share-btn-minimal {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bv2-cream);
    border: 1px solid var(--bv2-line);
    color: var(--bv2-onyx);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s var(--bv2-ease);
    cursor: pointer;
}

body.builder-v2 .share-btn-minimal:hover {
    background: var(--bv2-onyx);
    color: #fff;
    border-color: var(--bv2-onyx);
    transform: translateY(-1px);
}

body.builder-v2 .campaigns-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    flex: 1; /* push the CTA button to the bottom of the card so both share cards line up */
}

body.builder-v2 .campaigns-features-list li {
    padding: 0.4rem 0;
    color: var(--bv2-text);
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

body.builder-v2 .campaigns-features-list i {
    color: var(--bv2-gold);
    font-size: 0.95rem;
}

body.builder-v2 .btn-campaigns {
    background: var(--bv2-onyx);
    color: #fff;
    border-radius: 999px;
    padding: 0.7rem 1.35rem;
    font-size: 0.82rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s var(--bv2-ease);
}

body.builder-v2 .btn-campaigns:hover {
    background: var(--bv2-charcoal);
    color: #fff;
    transform: translateY(-1px);
}

/* ============================================================
   NEXT-STEPS — refined card at bottom of After RSVP
   ============================================================ */

body.builder-v2 .next-steps-inline {
    background: linear-gradient(135deg, var(--bv2-onyx), var(--bv2-charcoal));
    color: #fff;
    border-radius: var(--bv2-radius);
    padding: 1.5rem;
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    box-shadow: var(--bv2-shadow-md);
}

body.builder-v2 .next-step-title {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    color: #fff;
    margin-bottom: 0.2rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

body.builder-v2 .next-step-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.88rem;
}

body.builder-v2 .next-step-btn {
    background: var(--bv2-gold);
    color: #fff;
    border: none;
    padding: 0.65rem 1.25rem;
    border-radius: 999px;
    font-size: 0.88rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    transition: all 0.3s var(--bv2-ease);
}

body.builder-v2 .next-step-btn:hover {
    background: var(--bv2-gold-soft);
    color: #fff;
    transform: translateY(-1px);
}

/* ============================================================
   MODALS — keep refined
   ============================================================ */

body.builder-v2 .modal-content {
    border: none;
    border-radius: var(--bv2-radius);
    box-shadow: 0 24px 60px rgba(18, 18, 18, 0.2);
}

body.builder-v2 .modal-header {
    background: var(--bv2-cream);
    border-bottom: 1px solid var(--bv2-line);
    padding: 1.15rem 1.5rem;
}

body.builder-v2 .modal-title {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    color: var(--bv2-onyx);
    font-weight: 600;
    letter-spacing: -0.005em;
}

body.builder-v2 .modal-body {
    padding: 1.5rem;
}

body.builder-v2 .modal-footer {
    border-top: 1px solid var(--bv2-line);
    padding: 0.85rem 1.5rem;
}

/* ============================================================
   MISC fix-ups
   ============================================================ */

/* Custom font dropdown override */
body.builder-v2 .custom-font-select {
    background: var(--bv2-card);
    border: 1px solid var(--bv2-line);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    cursor: pointer;
}

body.builder-v2 .custom-font-select:focus,
body.builder-v2 .custom-font-select:hover {
    border-color: var(--bv2-gold);
}

/* Translation-related */
body.builder-v2 #generateTranslationsBtn {
    background: var(--bv2-onyx) !important;
    border-color: var(--bv2-onyx) !important;
}

body.builder-v2 #generateTranslationsBtn:not(:disabled):hover {
    background: var(--bv2-charcoal) !important;
}

/* Wedding sites & existing forms banners */
body.builder-v2 #weddingSitesBanner,
body.builder-v2 #existingFormsBanner {
    background: var(--bv2-card) !important;
    border: 1px solid var(--bv2-line) !important;
    border-left: 3px solid var(--bv2-gold) !important;
    border-radius: var(--bv2-radius-sm) !important;
}

/* Toast / dropdown polish */
body.builder-v2 .dropdown-menu {
    border: 1px solid var(--bv2-line);
    border-radius: var(--bv2-radius-sm);
    box-shadow: var(--bv2-shadow-md);
    padding: 0.5rem 0;
}

body.builder-v2 .dropdown-item {
    font-size: 0.88rem;
    padding: 0.55rem 1.15rem;
    color: var(--bv2-text);
}

body.builder-v2 .dropdown-item:hover {
    background: var(--bv2-cream);
    color: var(--bv2-onyx);
}

body.builder-v2 .user-dropdown .user-email {
    color: var(--bv2-onyx);
    font-size: 0.85rem;
    font-weight: 500;
}

body.builder-v2 .user-plan-badge {
    background: var(--bv2-gold-pale);
    color: var(--bv2-gold);
    border-radius: 999px;
    padding: 0.12rem 0.55rem;
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    display: inline-block;
    margin-top: 0.25rem;
}

/* Headings inside guides etc. */
body.builder-v2 .guide-section-title {
    font-family: var(--font-ui);
    color: var(--bv2-onyx);
    font-weight: 600;
    letter-spacing: -0.005em;
}

body.builder-v2 .guide-section-title i {
    color: var(--bv2-gold);
}

/* RTL support hooks (kept minimal — most RTL is handled by language) */
body.builder-v2[dir="rtl"] .bv2-nav-num { width: auto; }

/* ============================================================
   Subtle text utilities used across the builder
   ============================================================ */

body.builder-v2 .text-muted {
    color: var(--bv2-muted) !important;
}

body.builder-v2 strong,
body.builder-v2 .fw-semibold,
body.builder-v2 .fw-bold {
    color: var(--bv2-onyx);
}

body.builder-v2 a {
    color: var(--bv2-onyx);
    text-decoration-color: var(--bv2-gold);
    text-underline-offset: 3px;
}

body.builder-v2 a:hover {
    color: var(--bv2-gold);
}

/* Hide legacy elements that don't belong in v2 */
body.builder-v2 .preview-container {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* ============================================================
   Sign-In Save widget — flip to bottom-LEFT in v2.
   The right side already hosts the chat help widget AND overlaps
   the phone preview. Bottom-left was empty.
   ============================================================ */
body.builder-v2 .form-save-control {
    right: auto !important;
    left: 20px !important;
    align-items: flex-start !important;
}

body.builder-v2 .save-control-row {
    flex-direction: row !important;
}

@media (max-width: 768px) {
    body.builder-v2 .form-save-control {
        left: 12px !important;
        right: auto !important;
    }
}

/* ============================================================
   RTL OVERRIDES — Hebrew (he) and Arabic (ar) locales
   The grid + flex layout auto-flips with dir="rtl", but rules
   that target one physical side (border-left, margin-left:auto,
   text-align:left, etc.) need explicit logical mirrors.
   ============================================================ */

/* Force RTL direction so CSS Grid auto-flips column order: sidebar moves
   to the right edge, preview to the left edge. The column TRACK SIZES
   stay the same (sidebar still 280px, preview still 420px) — only the
   visual placement reverses, which is exactly what we want.
   We deliberately do NOT swap grid-template-columns or set explicit
   grid-column on items; those would fight the auto-flip and cause the
   layout to jump or stretch. */
[dir="rtl"] body.builder-v2,
[dir="rtl"] body.builder-v2 .builder-v2-shell,
[dir="rtl"] body.builder-v2 .main-content,
[dir="rtl"] body.builder-v2 .builder-v2-grid {
    direction: rtl !important;
}

/* Sidebar nav items: text-align flips with reading direction */
[dir="rtl"] body.builder-v2 .bv2-nav-item {
    text-align: right;
}

/* Active-state accent border on banners moves to the reading-start side
   (which is the visual right edge in RTL). */
[dir="rtl"] body.builder-v2 #existingFormsBanner,
[dir="rtl"] body.builder-v2 #weddingSitesBanner {
    border-left: 1px solid var(--bv2-line) !important;
    border-right: 3px solid var(--bv2-gold) !important;
}

/* "Push to opposite end" pattern for the learn-more pill button.
   In LTR margin-left:auto pushes right; in RTL we want the same visual
   "push to far end of row", which means margin-right:auto. */
[dir="rtl"] body.builder-v2 .builder-learn-more-btn {
    margin-left: 0;
    margin-right: auto;
}

/* Icon-text spacing: icon sits before the label in flow order. With
   dir="rtl" the icon visually moves to the right of the text, so the
   margin needs to flip to the other side. */
[dir="rtl"] body.builder-v2 #formBuilderAccordion .accordion-button i {
    margin-right: 0 !important;
    margin-left: 0.85rem !important;
}

[dir="rtl"] body.builder-v2 .builder-sub-group-header i {
    margin-right: 0;
    margin-left: 0.4rem;
}

[dir="rtl"] body.builder-v2 .upload-content .btn i {
    margin-right: 0;
    margin-left: 0.35rem;
}

/* Accordion expanded-state side padding: flips to match the side where
   the label sits in RTL (the right). */
[dir="rtl"] body.builder-v2 #formBuilderAccordion .accordion-button:not(.collapsed) {
    padding-left: 1.25rem !important;
    padding-right: 1.5rem !important;
}

/* In LTR, form-save-control sits at bottom-LEFT to avoid the chat widget
   at bottom-RIGHT. In RTL, mirror the pairing: form-save-control to
   bottom-RIGHT (the RTL "primary" corner where actions naturally go),
   and the chat widget to bottom-LEFT (RTL "secondary" corner). */
[dir="rtl"] body.builder-v2 .form-save-control {
    left: auto !important;
    right: 20px !important;
}

@media (max-width: 768px) {
    [dir="rtl"] body.builder-v2 .form-save-control {
        left: auto !important;
        right: 12px !important;
    }
}

/* Chat help widget — its launcher uses inline `right: 20px` injected by
   help-widget.js, so we need !important + a more specific selector to
   flip it to the left in RTL. */
[dir="rtl"] #qr-help-launcher {
    right: auto !important;
    left: 20px !important;
}

/* ============================================================
   Bootstrap 5 logical-spacing-utility RTL flip.
   We load only the LTR Bootstrap stylesheet, so utilities named
   me-* (margin-end) and ms-* (margin-start) are actually compiled
   to physical margin-right / margin-left and DO NOT auto-flip in
   RTL. Without these overrides, icon-text spacing collapses in
   Hebrew/Arabic (e.g., the info-circle on the "Premium Reveal
   Animation" callout sits flush against the heading).
   Same for padding-end / padding-start.
   ============================================================ */
[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .me-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
[dir="rtl"] .me-5 { margin-right: 0 !important; margin-left: 3rem !important; }
[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }

[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
[dir="rtl"] .ms-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
[dir="rtl"] .ms-5 { margin-left: 0 !important; margin-right: 3rem !important; }
[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }

[dir="rtl"] .pe-1 { padding-right: 0 !important; padding-left: 0.25rem !important; }
[dir="rtl"] .pe-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }
[dir="rtl"] .pe-3 { padding-right: 0 !important; padding-left: 1rem !important; }
[dir="rtl"] .pe-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
[dir="rtl"] .pe-5 { padding-right: 0 !important; padding-left: 3rem !important; }

[dir="rtl"] .ps-1 { padding-left: 0 !important; padding-right: 0.25rem !important; }
[dir="rtl"] .ps-2 { padding-left: 0 !important; padding-right: 0.5rem !important; }
[dir="rtl"] .ps-3 { padding-left: 0 !important; padding-right: 1rem !important; }
[dir="rtl"] .ps-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }
[dir="rtl"] .ps-5 { padding-left: 0 !important; padding-right: 3rem !important; }

/* Text-align utilities — `text-end` should follow reading direction */
[dir="rtl"] .text-end { text-align: left !important; }
[dir="rtl"] .text-start { text-align: right !important; }

/* Toast notifications — toast.js renders with `class="alert alert-{type}
   position-fixed toast-notification"` and Bootstrap 5.3-alpha1's
   .alert-success background is a faint subtle tint that's hard to see
   over the page. Force a solid white card with a coloured left border so
   the toast is always readable regardless of where it overlaps. */
.toast-notification.alert,
body.builder-v2 .toast-notification.alert {
    background-color: #FFFFFF !important;
    border: 1px solid rgba(18, 18, 18, 0.08) !important;
    box-shadow: 0 8px 24px rgba(18, 18, 18, 0.12) !important;
    color: var(--bv2-onyx, #121212) !important;
}

.toast-notification.alert.alert-success { border-left: 4px solid #28a745 !important; }
.toast-notification.alert.alert-danger  { border-left: 4px solid #dc3545 !important; }
.toast-notification.alert.alert-warning { border-left: 4px solid #ffc107 !important; }
.toast-notification.alert.alert-info    { border-left: 4px solid #0d6efd !important; }

/* RTL: accent border belongs on the reading-start (right) side */
[dir="rtl"] .toast-notification.alert.alert-success,
[dir="rtl"] .toast-notification.alert.alert-danger,
[dir="rtl"] .toast-notification.alert.alert-warning,
[dir="rtl"] .toast-notification.alert.alert-info {
    border-left: 1px solid rgba(18, 18, 18, 0.08) !important;
    border-right-width: 4px !important;
    border-right-style: solid !important;
}
[dir="rtl"] .toast-notification.alert.alert-success { border-right-color: #28a745 !important; }
[dir="rtl"] .toast-notification.alert.alert-danger  { border-right-color: #dc3545 !important; }
[dir="rtl"] .toast-notification.alert.alert-warning { border-right-color: #ffc107 !important; }
[dir="rtl"] .toast-notification.alert.alert-info    { border-right-color: #0d6efd !important; }

/* Bootstrap form-floating labels in RTL.
   Default Bootstrap pins the label to top-left with transform-origin: 0 0,
   so in RTL the label hovers above the LEFT edge of a right-aligned input —
   visually disconnected. Anchor it to the right instead and mirror the
   shrink-translate X offset. */
[dir="rtl"] .form-floating > label {
    left: auto !important;
    right: 0 !important;
    transform-origin: 100% 0 !important;
    text-align: right !important;
}

[dir="rtl"] .form-floating > .form-control:focus ~ label,
[dir="rtl"] .form-floating > .form-control:not(:placeholder-shown) ~ label,
[dir="rtl"] .form-floating > .form-select ~ label {
    transform: scale(0.85) translateY(-0.5rem) translateX(-0.15rem) !important;
}

/* Bootstrap accordion chevron — pushed to end via `margin-left: auto`.
   In RTL we want it on the visual left (the RTL "end" side). */
[dir="rtl"] .accordion-button::after {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Bootstrap form-check — checkbox/radio indicator anchored to the left edge
   via `padding-left: 1.5em` and an `position: absolute; left: 0` indicator.
   In RTL, the indicator should sit on the right; padding swaps too. */
[dir="rtl"] .form-check {
    padding-left: 0 !important;
    padding-right: 1.5em !important;
}

[dir="rtl"] .form-check .form-check-input {
    float: right !important;
    margin-left: 0 !important;
    margin-right: -1.5em !important;
}

/* Bootstrap form-switch — wider toggle indicator. The track also needs to
   sit on the right in RTL so the on/off slide direction matches reading. */
[dir="rtl"] .form-switch {
    padding-right: 2.5em !important;
}

[dir="rtl"] .form-switch .form-check-input {
    margin-right: -2.5em !important;
}

/* Bootstrap position utilities — `start-*` is physical `left:` in LTR
   Bootstrap, so it doesn't move to the right in RTL on its own. */
[dir="rtl"] .start-0 { right: 0 !important; left: auto !important; }
[dir="rtl"] .start-50 { right: 50% !important; left: auto !important; }
[dir="rtl"] .start-100 { right: 100% !important; left: auto !important; }
[dir="rtl"] .end-0 { left: 0 !important; right: auto !important; }
[dir="rtl"] .end-50 { left: 50% !important; right: auto !important; }
[dir="rtl"] .end-100 { left: 100% !important; right: auto !important; }

/* Bootstrap rounded-start / rounded-end — corner-radius on one logical side */
[dir="rtl"] .rounded-start {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--bs-border-radius, 0.375rem) !important;
    border-bottom-right-radius: var(--bs-border-radius, 0.375rem) !important;
}

[dir="rtl"] .rounded-end {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: var(--bs-border-radius, 0.375rem) !important;
    border-bottom-left-radius: var(--bs-border-radius, 0.375rem) !important;
}

/* Float utilities */
[dir="rtl"] .float-start { float: right !important; }
[dir="rtl"] .float-end { float: left !important; }