/* =============================================
   Neon Sign Designer Pro v3.0
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

#nsd-wrap {
    display: flex;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
    position: relative;
}

/* =============================================
   LEFT PREVIEW
   ============================================= */
#nsd-preview {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: background 0.6s ease;
    background: #1a1a1a;
}

/* Green wall background - only scene */
#nsd-preview.scene-wall {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#nsd-preview.scene-wall::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 0;
}

#nsd-canvas {
    position: relative;
    z-index: 1;
}

/* Canvas — main area */
#nsd-canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding: 60px 40px 40px;
    position: relative;
}

/* Sign area (holds backboard + neon) */
#nsd-sign-area {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 40px;
}

/* Sign area (holds backboard + neon) */
#nsd-sign-area {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Standee legs */
#nsd-standee-legs { display: none !important; }

.nsd-leg {
    width: 20%;
    height: 22px;
    background: rgba(180, 200, 255, 0.3);
    border-radius: 0 0 5px 5px;
    border: 1px solid rgba(255,255,255,0.2);
    border-top: none;
}
#nsd-sign-area {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Backboard shape — base */
#nsd-text-goo-clone { display: none !important; }

#nsd-backboard-shape {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 24px 30px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* All backboard style options now render as plain neon - no panel/shape effects */
#nsd-backboard-shape.bb-cut-shape,
#nsd-backboard-shape.bb-minimal,
#nsd-backboard-shape.bb-full,
#nsd-backboard-shape.bb-standee {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 24px 30px;
}

#nsd-goo-wrap { display: none !important; }
#nsd-backboard-shape.bbc-silver { 
    background: linear-gradient(135deg, rgba(180,180,180,0.9), rgba(220,220,220,0.9)) !important; 
    border-color: rgba(255,255,255,0.5) !important;
}
#nsd-backboard-shape.bbc-gold   { 
    background: linear-gradient(135deg, rgba(200,160,0,0.9), rgba(255,220,50,0.9)) !important; 
    border-color: rgba(255,200,0,0.5) !important;
}

/* Neon text */
#nsd-text {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(36px, 5vw, 72px);
    color: #fff5e0;
    line-height: 1.3;
    white-space: pre-wrap;
    word-break: break-word;
    -webkit-text-stroke: 0.5px currentColor;
    paint-order: stroke fill;
    text-shadow:
        0 0 7px #fff5e0,
        0 0 10px #fff5e0,
        0 0 21px #fff5e0,
        0 0 42px #fff5e0,
        0 0 82px #fff5e0;
    transition: all 0.4s ease;
    user-select: none;
    text-align: center;
    font-weight: 400;
}

#nsd-text.off {
    text-shadow: none;
    opacity: 0.25;
    filter: brightness(0.4);
}

/* Dimension lines */
#nsd-dim-height {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: rgba(255,255,255,0.5);
    font-size: 11px;
}

.nsd-dim-line {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.4);
    position: relative;
}

.nsd-dim-line::before,
.nsd-dim-line::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 1px;
    background: rgba(255,255,255,0.4);
    left: -3.5px;
}

.nsd-dim-line::before { top: 0; }
.nsd-dim-line::after  { bottom: 0; }

#nsd-dim-width {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.5);
    font-size: 11px;
    margin-top: 12px;
    white-space: nowrap;
}

.nsd-dim-line-h {
    height: 1px;
    width: 60px;
    background: rgba(255,255,255,0.4);
    position: relative;
}

.nsd-dim-line-h::before,
.nsd-dim-line-h::after {
    content: '';
    position: absolute;
    height: 8px;
    width: 1px;
    background: rgba(255,255,255,0.4);
    top: -3.5px;
}

.nsd-dim-line-h::before { left: 0; }
.nsd-dim-line-h::after  { right: 0; }

/* Scene thumbnails removed - single wall background used */

/* =============================================
   RIGHT PANEL
   ============================================= */
#nsd-panel {
    width: 340px;
    min-width: 340px;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    position: relative;
    z-index: 10;
}

#nsd-panel-inner {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 220px;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 1;
}

#nsd-panel-inner::-webkit-scrollbar { width: 3px; }
#nsd-panel-inner::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }

.nsd-step {
    padding: 14px 16px;
    border-bottom: 1px solid #f2f2f2;
}

.nsd-step-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.nsd-num {
    width: 22px;
    height: 22px;
    background: #0d0d1a;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nsd-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: #0d0d1a;
}

.nsd-desc {
    font-size: 11px;
    color: #aaa;
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Text input */
.nsd-text-row { display: flex; gap: 8px; }

#nsd-input {
    flex: 1;
    padding: 10px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    font-size: 13px;
    resize: none;
    outline: none;
    height: 64px;
    max-height: 64px;
    min-height: 64px;
    -webkit-appearance: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    color: #333;
    line-height: 1.5;
    font-family: inherit;
}

#nsd-input:focus { border-color: #0d0d1a; }

#nsd-logo-btn {
    background: #0d0d1a;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    line-height: 1.4;
    width: 100px;
    flex-shrink: 0;
}

#nsd-logo-btn span {
    display: block;
    background: #f6c90e;
    color: #0d0d1a;
    border-radius: 4px;
    padding: 3px 4px;
    margin-top: 4px;
    font-size: 9px;
    font-weight: 800;
}

#nsd-letter-count {
    font-size: 11px;
    color: #aaa;
    margin-top: 6px;
    text-align: right;
}

/* Font */
/* Font picker grid - 2 column, collapsible */
#nsd-font-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0;
}

#nsd-font-picker.open {
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 0;
}

#nsd-font-picker::-webkit-scrollbar { width: 3px; }
#nsd-font-picker::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }

.nsd-font-item {
    padding: 12px 8px;
    font-size: 22px;
    cursor: pointer;
    border-radius: 8px;
    color: #222;
    border: 1.5px solid #e8e8e8;
    transition: all 0.15s;
    line-height: 1.2;
    text-align: center;
    background: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nsd-font-item:hover {
    border-color: #ccc;
    background: #fafafa;
}

.nsd-font-item.active {
    background: #6c63ff;
    border-color: #6c63ff;
    color: #fff;
}

/* Colors */
#nsd-colors { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }

.nsd-color {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s;
    position: relative;
    flex-shrink: 0;
}

.nsd-color:hover { transform: scale(1.18); }

.nsd-color.active::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.8);
}

#nsd-color-label { font-size: 11px; color: #777; font-weight: 500; }

/* Multicolor - continuously cycling glow via smooth GPU-accelerated
   hue-rotate, rather than a JS timer swapping discrete colors. */
.nsd-multicolor {
    animation: nsd-hue-cycle 6s linear infinite;
}
@keyframes nsd-hue-cycle {
    from { filter: hue-rotate(0deg); }
    to   { filter: hue-rotate(360deg); }
}

#nsd-color-extra-note {
    font-size: 12px;
    color: #b8860b;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: 6px;
    font-weight: 600;
}

/* Sizes */
#nsd-sizes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

.nsd-size {
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.nsd-size:hover  { border-color: #0d0d1a; }
.nsd-size.active { border-color: #ff69b4; background: #fff0f8; }

.nsd-size-name  { font-size: 12px; font-weight: 700; color: #0d0d1a; margin-bottom: 4px; }
.nsd-size-price { font-size: 15px; font-weight: 800; color: #0d0d1a; margin-bottom: 4px; }
.nsd-size-dim   { font-size: 10px; color: #aaa; }

/* Location */
.nsd-location-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.nsd-loc {
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.nsd-loc strong { display: block; font-size: 13px; color: #0d0d1a; margin-bottom: 4px; }
.nsd-loc span   { font-size: 11px; color: #888; display: block; }
.nsd-badge { background: #e8f5e9 !important; color: #2e7d32 !important; font-size: 9px !important; padding: 2px 6px; border-radius: 4px; display: inline-block !important; margin-bottom: 2px; }
.nsd-loc.active, .nsd-loc:hover { border-color: #0d0d1a; background: #f8f8ff; }

/* Backboards */
#nsd-backboards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

.nsd-bb {
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

.nsd-bb.active { border-color: #ff69b4; background: #fff8fd; }
.nsd-bb:hover  { border-color: #aaa; }

.nsd-bb-top {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px 8px 4px;
}

.nsd-bb-label {
    font-size: 11px;
    font-weight: 600;
    color: #444;
}

.nsd-bb-price-tag {
    font-size: 11px;
    font-weight: 700;
    color: #333;
}

.nsd-bb-paid {
    color: #1a73e8;
}

.nsd-bb-img {
    padding: 0 6px 8px;
}

.nsd-bb-img svg,
.nsd-bb-img img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 80px;
    object-fit: contain;
}

/* Backboard Colors */
#nsd-bbcolors { display: flex; flex-direction: column; gap: 7px; }

.nsd-bbc {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.nsd-bbc.active { border-color: #0d0d1a; background: #f8f8ff; }
.nsd-bbc:hover  { border-color: #0d0d1a; }
.nsd-bbc-dot    { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.nsd-bbc-name   { font-size: 12px; color: #333; font-weight: 500; }
.nsd-bbc-price  { font-size: 11px; color: #888; }

/* Options */
.nsd-opt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #333;
    margin-bottom: 10px;
    cursor: pointer;
}

.nsd-opt-price { margin-left: auto; font-size: 12px; color: #888; }
.nsd-special   { color: #0d0d1a; font-weight: 600; }

#nsd-power {
    margin-left: auto;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 11px;
    outline: none;
    max-width: 160px;
}

/* Checkout Bar */
#nsd-bar {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 12px 16px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    z-index: 50;
    flex-shrink: 0;
    width: 100%;
    margin-top: auto;
}

#nsd-bar-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
#nsd-rush    { font-size: 10px; color: #aaa; max-width: 150px; line-height: 1.4; }
#nsd-total-wrap { font-size: 13px; color: #555; }
#nsd-total   { font-size: 20px; font-weight: 800; color: #0d0d1a; margin-left: 4px; }

#nsd-cart-btn {
    width: 100%;
    background: #0d0d1a;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 14px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background 0.2s, transform 0.15s;
}

#nsd-cart-btn:hover    { background: #1e1e3e; transform: translateY(-1px); }
#nsd-cart-btn:disabled { background: #bbb; cursor: not-allowed; transform: none; }

#nsd-msg { text-align: center; font-size: 12px; font-weight: 600; min-height: 16px; margin-top: 6px; }
#nsd-msg.ok  { color: #2e7d32; }
#nsd-msg.err { color: #c62828; }

/* =============================================
   MOBILE - Step Slider (max 768px)
   ============================================= */
@media (max-width: 768px) {

    /* Mobile wrap - normal page scroll, not an internal fixed-height box */
    #nsd-wrap {
        flex-direction: column;
        width: 100%;
        height: auto;
        overflow: visible;
        position: relative;
        background: #fff;
    }

    /* Preview area - sticky at top while options scroll beneath it */
    #nsd-preview {
        height: 260px;
        min-height: 260px;
        max-height: 260px;
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 5;
    }

    /* On desktop, #nsd-canvas has padding-top:60px and #nsd-sign-area adds
       another margin-top:40px (100px total offset) - fine against a
       full-height canvas, but against mobile's short fixed 260px preview
       box it pushes the text noticeably toward the bottom half. Tighten
       both just for mobile so the text sits centered again. */
    #nsd-canvas {
        padding: 20px 40px 20px;
    }
    #nsd-sign-area {
        margin-top: 0;
    }

    #nsd-text { font-size: clamp(24px, 7vw, 40px) !important; }

    /* Panel flows normally below the sticky preview */
    #nsd-panel {
        width: 100%;
        min-width: unset;
        height: auto;
        min-height: unset;
        overflow: visible;
        box-shadow: none;
        display: block;
        position: relative;
    }

    /* Step nav (prev/next + dots) is no longer used - everything scrolls */
    #nsd-step-nav {
        display: none !important;
    }

    /* Options container - normal flow, no internal scroll clipping */
    #nsd-panel-inner {
        overflow: visible;
        height: auto;
        min-height: unset;
        max-height: unset;
        position: relative;
        padding-bottom: 0;
    }

    /* All option sections stacked vertically instead of side-by-side slides */
    #nsd-slides {
        display: block;
        transform: none !important;
        height: auto;
        width: 100%;
    }

    /* Each option section - a normal block in the scroll, with a divider
       between sections since they're no longer separate "pages" */
    .nsd-step {
        width: 100%;
        height: auto;
        overflow: visible;
        padding: 16px;
        border-bottom: 1px solid #f0f0f0;
        box-sizing: border-box;
    }

    .nsd-step:last-of-type { border-bottom: none; }

    /* Checkout bar - a normal block at the end of the scroll, not fixed.
       It's simply the last thing on the page, so it naturally only comes
       into view once the customer scrolls all the way through. */
    #nsd-bar {
        position: relative;
        width: 100%;
        display: block;
        background: #fff;
        border-top: 2px solid #f0f0f0;
        box-shadow: none;
        padding: 16px;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .nsd-text-row { flex-direction: column; }
    #nsd-logo-btn { width: 100%; }
}

/* =============================================
   DESKTOP reset (min 769px)
   ============================================= */
@media (min-width: 769px) {
    #nsd-wrap { flex-direction: row !important; height: 100vh !important; overflow: hidden !important; min-height: unset !important; }
    #nsd-preview { height: 100% !important; min-height: unset !important; max-height: unset !important; flex: 1 !important; }
    #nsd-panel { width: 340px !important; min-width: 340px !important; height: 100vh !important; min-height: unset !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; position: relative !important; }
    #nsd-step-nav { display: none !important; }
    #nsd-panel-inner { flex: 1 !important; overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; min-height: unset !important; padding-bottom: 160px !important; }
    #nsd-slides { display: block !important; height: auto !important; transform: none !important; overflow: visible !important; }
    .nsd-step { min-width: 100% !important; width: 100% !important; height: auto !important; overflow: visible !important; padding: 14px 16px !important; }
    #nsd-bar { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; display: block !important; z-index: 100 !important; margin-top: 0 !important; }
    .nsd-dot { display: none !important; }
}

/* iOS Fix */
@supports (-webkit-touch-callout: none) {
    #nsd-input { height: 64px !important; max-height: 64px !important; resize: none !important; -webkit-appearance: none !important; }
}

/* Font selected display bar */
#nsd-font-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 6px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s;
}

#nsd-font-selected:hover { border-color: #ccc; }

#nsd-font-selected.open { border-color: #6c63ff; border-radius: 8px 8px 0 0; }

#nsd-font-selected svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

#nsd-font-selected.open svg { transform: rotate(180deg); }

#nsd-font-selected-name {
    font-size: 20px;
    color: #222;
}

/* Two button row */
#nsd-btn-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 8px;
    margin-bottom: 6px;
}

#nsd-download-btn {
    background: transparent;
    color: #0d0d1a;
    border: 1.5px solid #0d0d1a;
    border-radius: 10px;
    padding: 14px 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

#nsd-download-btn:hover {
    background: #0d0d1a;
    color: #fff;
}

#nsd-download-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* =============================================
   ELEMENTOR MOBILE MENU OVERLAP FIX
   ============================================= */
@media (max-width: 768px) {

    /* Push Elementor mobile nav menu below designer content */
    #nsd-wrap ~ * .elementor-nav-menu--dropdown,
    #nsd-wrap ~ * .elementor-menu-toggle,
    .elementor-nav-menu--dropdown {
        z-index: 100 !important;
    }

    /* Remove ALL padding from Elementor containers wrapping designer */
    .elementor-widget-shortcode .elementor-widget-container {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Fix white gap - panel should not stretch beyond content */
    #nsd-panel {
        min-height: unset !important;
    }

    /* Hide everything after the designer to prevent white space */
    #nsd-wrap {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}