/* ==========================================================================
   Limata Sign Builder — Dual path (visual builder OR upload). Dark theme.
   ========================================================================== */
.lsb-app{
    --bg:#0A0F1A; --surface:#0E1525; --card:#121A2B; --border:#1A2540;
    --text:#E8ECF1; --muted:#8A94A6; --muted-2:#C8CDD8;
    --blue:#0099FF; --orange:#C8702A;
    background:var(--bg); color:var(--text);
    font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
    padding:2rem 1rem 6rem; min-height:60vh;
    max-width:1100px; margin:0 auto;
}
.lsb-app *{box-sizing:border-box}

/* Intro */
.lsb-intro{text-align:center; padding:0.5rem 0.5rem 1.5rem; max-width:720px; margin:0 auto}
.lsb-intro-eyebrow{font-size:12px; font-weight:700; letter-spacing:0.3em; text-transform:uppercase; color:var(--blue); margin:0 0 0.8rem}
.lsb-intro-h1{font-family:'Space Grotesk',Inter,sans-serif; font-size:clamp(1.5rem,5vw,2.5rem); font-weight:800; letter-spacing:-0.025em; line-height:1.1; margin:0 0 0.6rem; color:var(--text)}
.lsb-intro-sub{font-size:15px; color:var(--muted-2); line-height:1.6; max-width:560px; margin:0 auto}

/* Progress */
.lsb-progress{display:flex; justify-content:center; gap:0.5rem; margin:1.5rem 0; flex-wrap:wrap}
.lsb-progress-step{display:flex; align-items:center; gap:0.4rem; padding:0.4rem 0.85rem; border:1px solid var(--border); border-radius:999px; font-size:12px; color:var(--muted)}
.lsb-progress-step span{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--border); color:var(--muted); font-weight:700; font-size:11px}
.lsb-progress-step.active{color:var(--text); border-color:var(--blue)}
.lsb-progress-step.active span{background:var(--blue); color:#fff; box-shadow:0 0 0 4px rgba(0,153,255,0.15)}
.lsb-progress-step.done span{background:#1F6BAE; color:#fff}

/* Step heads */
.lsb-step-head{text-align:center; margin:1rem 0 1.5rem}
.lsb-step-head h2{font-family:'Space Grotesk',sans-serif; font-size:clamp(1.4rem,3vw,1.9rem); font-weight:700; letter-spacing:-0.02em; margin:0 0 0.5rem}
.lsb-step-sub{color:var(--muted); font-size:14px; margin:0}

.lsb-step{animation:lsbFade 0.25s ease}
@keyframes lsbFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ----- Step 1: Product grid ----- */
.lsb-product-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.25rem; max-width:760px; margin:0 auto}
.lsb-product-card{background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; cursor:pointer; transition:transform 0.15s, border-color 0.15s}
.lsb-product-card:hover{transform:translateY(-2px); border-color:var(--blue)}
.lsb-product-thumb{
    background:#ffffff;
    padding:0;
    display:flex; align-items:center; justify-content:center;
    aspect-ratio:1/1;
    overflow:hidden;
}
.lsb-product-stage{display:flex; flex-direction:column; align-items:center; gap:10px}
.lsb-stage-row{display:flex; align-items:flex-start; gap:12px}
.lsb-stage-col{display:flex; flex-direction:column; align-items:center; gap:8px}
.lsb-product-sign-mock{
    background:transparent;
    border:1.5px solid #0099FF;
    border-radius:3px;
    transition:transform 0.2s;
}
.lsb-product-sign-img{display:block; width:100%; height:100%; object-fit:cover; transition:transform 0.2s}
.lsb-product-card:hover .lsb-product-sign-mock,
.lsb-product-card:hover .lsb-product-sign-img{transform:translateY(-2px)}

/* Redeem code box (step 1) */
.lsb-redeem-box{margin:1.5rem 0 0; background:rgba(0,0,0,0.18); border:1px solid var(--border); border-radius:10px; padding:1rem; text-align:center}
.lsb-redeem-label{display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:0.6rem}
.lsb-redeem-row{display:flex; gap:8px; align-items:stretch}
.lsb-redeem-row input{flex:1; padding:0.7rem 0.9rem; background:#0E1525; border:1px solid var(--border); border-radius:8px; color:#E8ECF1; font-size:15px; letter-spacing:0.05em; text-transform:uppercase}
.lsb-redeem-row input:focus{outline:none; border-color:var(--blue)}
.lsb-redeem-row input:disabled{opacity:0.7}
.lsb-redeem-row .lsb-btn-primary{padding:0.7rem 1.2rem; white-space:nowrap}
.lsb-redeem-msg{margin-top:0.6rem; font-size:13px; min-height:1em}
.lsb-redeem-ok{color:#1DB954; font-weight:700}
.lsb-redeem-err{color:#F87171}

/* Dimension arrows — uniform 1.5px stroke matching the sign outline */
.lsb-dim-h, .lsb-dim-v{
    color:#0099FF; font-family:'Space Grotesk',Inter,sans-serif;
    font-size:12px; font-weight:700; letter-spacing:0.04em;
}
.lsb-dim-h{display:flex; align-items:center; gap:6px}
.lsb-dim-v{display:flex; flex-direction:column; align-items:center; gap:4px}
.lsb-dim-arrow{font-size:10px; line-height:1; color:#0099FF}
/* Horizontal bar segment */
.lsb-dim-bar{flex:1 1 auto; height:1.5px; width:auto; min-width:8px; min-height:0; background:#0099FF}
/* Vertical bar segment — override the horizontal defaults */
.lsb-dim-bar-v{flex:1 1 auto; width:1.5px; height:auto; min-width:0; min-height:8px; background:#0099FF}
.lsb-dim-label{padding:0 4px; white-space:nowrap}
.lsb-product-body{padding:1.1rem 1.25rem 1.3rem}
.lsb-product-label{font-family:'Space Grotesk',sans-serif; font-size:1.05rem; font-weight:700; color:var(--text); margin:0 0 0.4rem}
.lsb-product-tagline{font-size:13px; color:var(--muted); line-height:1.5; margin:0 0 0.8rem}
.lsb-product-price{font-size:13px; font-weight:700; color:var(--orange); letter-spacing:0.04em}

/* ----- Step 2: Dropzone ----- */
.lsb-dropzone{
    background:var(--card); border:2px dashed var(--border); border-radius:14px;
    padding:3rem 2rem; text-align:center; cursor:pointer; transition:all 0.2s;
    max-width:680px; margin:0 auto;
}
.lsb-dropzone:hover, .lsb-dropzone.is-dragging{ border-color:var(--blue); background:rgba(0,153,255,0.04); }
.lsb-dropzone-inner svg{margin-bottom:1rem; display:block; margin-left:auto; margin-right:auto}
.lsb-dropzone-title{font-family:'Space Grotesk',sans-serif; font-size:1.15rem; font-weight:700; color:var(--text); margin-bottom:0.4rem}
.lsb-dropzone-sub{font-size:14px; color:var(--muted-2); margin-bottom:0.8rem}
.lsb-dropzone-meta{font-size:12px; color:var(--muted); letter-spacing:0.04em}
.lsb-link-btn{background:none; border:none; color:var(--blue); text-decoration:underline; cursor:pointer; font:inherit; font-weight:600; padding:0}
.lsb-link-btn:hover{color:#3DB8FF}

/* ----- Upload status row ----- */
.lsb-upload-status{ max-width:680px; margin:1rem auto 0; }
.lsb-upload-row{
    display:flex; align-items:center; gap:1rem;
    background:var(--card); border:1px solid var(--border); border-radius:12px;
    padding:0.85rem 1rem;
}
.lsb-upload-row img{width:64px; height:64px; object-fit:cover; border-radius:8px; background:#fff; padding:2px; border:1px solid var(--border)}
.lsb-upload-meta{flex:1; min-width:0}
.lsb-upload-name{font-weight:700; font-size:14px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lsb-upload-size{font-size:12px; color:var(--muted); margin-top:2px}

/* ----- Step 3: Preview mockup ----- */
.lsb-preview-wrap{max-width:560px; margin:0 auto; text-align:center}
.lsb-preview-mockup{
    position:relative; display:inline-block; padding:2rem 1rem 2.5rem;
    background:linear-gradient(180deg,#0E1525 0%,#0A0F1A 100%);
    border-radius:14px; border:1px solid var(--border);
}
.lsb-mockup-sign{
    position:relative; width:280px; height:392px; /* 5:7 ratio */
    background:#FFFFFF; border-radius:6px;
    box-shadow:0 30px 60px -10px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
    overflow:hidden; transition:background 0.2s;
}
.lsb-mockup-sign.is-clear{ background:rgba(232,236,241,0.25); backdrop-filter:blur(2px); border:1px solid rgba(255,255,255,0.15); }
.lsb-mockup-sign::before{
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 35%,rgba(255,255,255,0) 65%,rgba(255,255,255,0.15) 100%);
    pointer-events:none; z-index:2;
}
.lsb-mockup-sign img{width:100%; height:100%; object-fit:contain; padding:1rem; display:block; position:relative; z-index:1}
.lsb-mockup-stand{
    width:120px; height:8px; margin:0.75rem auto 0;
    background:linear-gradient(180deg,#2A3A5C,#1A2540);
    border-radius:0 0 8px 8px;
    box-shadow:0 4px 12px rgba(0,0,0,0.4);
}
.lsb-preview-note{font-size:12px; color:var(--muted); margin:1rem 0 0; line-height:1.5}
.lsb-substrate-row{justify-content:center; margin:1.25rem 0 0; padding:1rem; background:var(--card); border-radius:10px; max-width:560px; margin-left:auto; margin-right:auto}

/* ----- Buttons ----- */
.lsb-btn-primary,.lsb-btn-outline,.lsb-btn-secondary{
    font-family:'Space Grotesk',Inter,sans-serif; font-weight:700;
    border-radius:8px; padding:0.85rem 1.5rem; cursor:pointer; font-size:14px;
    letter-spacing:0.06em; text-transform:uppercase; transition:all 0.15s;
    display:inline-flex; align-items:center; justify-content:center; border:none;
}
.lsb-btn-primary{background:var(--orange); color:#fff}
.lsb-btn-primary:hover{background:#A85D22}
.lsb-btn-primary:disabled{background:#5A4429; cursor:not-allowed; opacity:0.6}
.lsb-btn-outline{background:transparent; border:2px solid var(--border); color:var(--text)}
.lsb-btn-outline:hover{border-color:var(--blue); color:var(--blue)}
.lsb-btn-secondary{background:var(--card); border:1px solid var(--border); color:var(--text); text-transform:none; letter-spacing:0}
.lsb-btn-secondary:hover{border-color:var(--blue); color:var(--blue)}
.lsb-btn-large{padding:1.1rem 2rem; font-size:15px}

.lsb-nav-row{display:flex; justify-content:space-between; max-width:680px; margin:1.75rem auto 0; gap:1rem; flex-wrap:wrap}
.lsb-nav-row .lsb-btn-outline,.lsb-nav-row .lsb-btn-primary{flex:1; min-width:160px}

/* ----- Step 4: Options ----- */
.lsb-options-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; max-width:920px; margin:0 auto}
@media (max-width:780px){.lsb-options-grid{grid-template-columns:1fr}}
.lsb-field-label{display:block; font-size:12px; font-weight:600; color:var(--muted-2); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.08em}
.lsb-options-grid select{width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:0.8rem 1rem; font-size:14px; margin-bottom:1rem}
.lsb-checkbox-card{display:flex; gap:0.75rem; padding:0.9rem 1rem; background:var(--card); border:1px solid var(--border); border-radius:10px; cursor:pointer; margin-bottom:0.75rem; align-items:flex-start; line-height:1.5}
.lsb-checkbox-card:has(input:checked){border-color:var(--blue); background:rgba(0,153,255,0.05)}
.lsb-checkbox-card input{margin-top:4px}
.lsb-checkbox-card small{color:var(--muted)}
.lsb-addon-price{color:var(--orange); font-weight:700; margin-left:0.4rem}
.lsb-radio-row{display:flex; gap:1rem; flex-wrap:wrap; align-items:center}
.lsb-radio-row label{display:flex; align-items:center; gap:0.4rem; cursor:pointer; font-size:14px; color:var(--text)}

.lsb-price-card{background:linear-gradient(135deg,rgba(0,153,255,0.08),rgba(200,112,42,0.08)); border:1px solid var(--border); border-radius:14px; padding:2rem; text-align:center; position:sticky; top:1rem}
.lsb-price-eyebrow{font-size:11px; font-weight:700; letter-spacing:0.25em; text-transform:uppercase; color:var(--blue); margin-bottom:0.5rem}
.lsb-price-amount{font-family:'Space Grotesk',sans-serif; font-size:3rem; font-weight:800; color:var(--text); margin:0.5rem 0}
.lsb-price-note{font-size:13px; color:var(--muted); margin:1rem 0 0}

/* ----- Step 5: Form ----- */
.lsb-form{max-width:560px; margin:0 auto; display:flex; flex-direction:column; gap:0.8rem}
.lsb-form-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:520px){.lsb-form-row{grid-template-columns:1fr}}
.lsb-form input,.lsb-form textarea{background:var(--card); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:0.85rem 1rem; font-size:15px; font-family:inherit; outline:none; width:100%}
.lsb-form input:focus,.lsb-form textarea:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,153,255,0.15)}
.lsb-form textarea{resize:vertical; min-height:90px}
.lsb-final-summary{display:flex; align-items:center; gap:1rem; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1.25rem; margin-top:0.5rem}
.lsb-final-summary small{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:0.1em; font-weight:600}
.lsb-final-summary .lsb-price-amount{font-size:1.6rem; margin:0}
.lsb-final-summary button{margin-left:auto; flex-shrink:0}
.lsb-fine-print{font-size:12px; color:var(--muted); margin:0.5rem 0 0; text-align:center}

/* ----- Thank you ----- */
.lsb-thanks-wrap{max-width:680px; margin:0 auto; padding:4rem 1rem; background:#0A0F1A; color:#E8ECF1; font-family:Inter,sans-serif}
.lsb-thanks-card{background:#0E1525; border:1px solid #1A2540; border-radius:16px; padding:3rem 2rem; text-align:center}
.lsb-thanks-icon{margin-bottom:1rem; display:flex; justify-content:center}
.lsb-thanks-eyebrow{font-size:11px; font-weight:700; letter-spacing:0.25em; text-transform:uppercase; color:#0099FF; margin-bottom:0.75rem}
.lsb-thanks-h1{font-family:'Space Grotesk',sans-serif; font-size:clamp(1.6rem,4vw,2.2rem); font-weight:800; letter-spacing:-0.02em; margin:0 0 0.8rem; color:#E8ECF1}
.lsb-thanks-sub{font-size:15px; color:#C8CDD8; line-height:1.7; margin:0 auto; max-width:520px}
.lsb-thanks-cta-row{display:flex; justify-content:center; gap:1rem; margin-top:2rem; flex-wrap:wrap}

/* ============================================================
   Step 2: Method choice cards
   ============================================================ */
.lsb-method-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; max-width:760px; margin:0 auto}
@media (max-width:680px){.lsb-method-grid{grid-template-columns:1fr}}
.lsb-method-card{
    background:var(--card); border:1px solid var(--border); border-radius:14px;
    padding:2rem 1.5rem; text-align:center; cursor:pointer; transition:all 0.18s;
    display:flex; flex-direction:column; align-items:center;
}
.lsb-method-card:hover{transform:translateY(-3px); border-color:var(--blue); box-shadow:0 14px 32px rgba(0,153,255,0.08)}
.lsb-method-icon{margin-bottom:1rem}
.lsb-method-card h3{font-family:'Space Grotesk',sans-serif; font-size:1.2rem; font-weight:700; margin:0 0 0.5rem; color:var(--text)}
.lsb-method-card p{font-size:14px; color:var(--muted-2); line-height:1.6; margin:0 0 1.25rem; flex:1}
.lsb-method-cta{font-size:13px; font-weight:700; color:var(--blue); letter-spacing:0.06em; text-transform:uppercase}

/* ============================================================
   Step 3b: Visual builder (templates + canvas + controls)
   ============================================================ */
.lsb-template-strip{
    display:flex; justify-content:center; gap:0.75rem; overflow-x:auto; padding:0 0.5rem 1rem;
    margin:0 auto 1rem; max-width:920px; scroll-snap-type:x mandatory;
    flex-wrap:wrap;
}
.lsb-template-strip::-webkit-scrollbar{height:6px}
.lsb-template-strip::-webkit-scrollbar-thumb{background:var(--border); border-radius:3px}
.lsb-template-mini{
    flex:0 0 130px; aspect-ratio:5/7; border-radius:8px; padding:1rem 0.6rem; cursor:pointer;
    color:#fff; display:flex; flex-direction:column; justify-content:space-between;
    border:2px solid transparent; transition:transform 0.15s, border-color 0.15s; scroll-snap-align:start;
}
.lsb-template-mini:hover{transform:translateY(-2px)}
.lsb-template-mini.active{border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,153,255,0.2)}
.lsb-template-mini-title{font-family:'Space Grotesk',sans-serif; font-size:10px; font-weight:800; letter-spacing:0.06em; line-height:1.2; text-align:center; word-wrap:break-word}
.lsb-template-mini-label{font-size:10px; font-weight:600; opacity:0.85; text-align:center; padding:4px 6px; background:rgba(0,0,0,0.25); border-radius:4px}

.lsb-builder-grid{display:grid; grid-template-columns:minmax(280px,1fr) minmax(280px,420px); gap:1.5rem; align-items:start; max-width:1000px; margin:0 auto}
@media (max-width:780px){.lsb-builder-grid{grid-template-columns:1fr}}
.lsb-canvas-wrap{position:sticky; top:1rem}
.lsb-canvas-frame{background:linear-gradient(135deg,#1A2540,#0E1525); border:1px solid var(--border); border-radius:14px; padding:1rem; display:flex; justify-content:center}
.lsb-canvas-frame canvas{max-width:100%; height:auto; border-radius:8px; box-shadow:0 8px 40px rgba(0,0,0,0.4)}
.lsb-canvas-tools{display:flex; justify-content:center; align-items:center; gap:0.5rem; margin-top:0.75rem}
.lsb-tool{
    background:var(--card); border:1px solid var(--border); color:var(--text);
    width:40px; height:40px; border-radius:8px; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    padding:0; line-height:1; transition:all 0.15s;
}
.lsb-tool:hover:not(:disabled){border-color:var(--blue); color:var(--blue)}
.lsb-tool:disabled{opacity:0.35; cursor:not-allowed}
.lsb-tool svg{display:block}
.lsb-tool-divider{width:1px; height:24px; background:var(--border); margin:0 4px}

/* Hint banner above the canvas pointing to the QR panel */
.lsb-builder-hint{
    display:flex; gap:0.6rem; align-items:flex-start;
    background:rgba(0,153,255,0.06); border:1px solid rgba(0,153,255,0.3);
    border-radius:8px; padding:0.7rem 1rem;
    color:var(--text); font-size:13px; line-height:1.55;
    margin:0 auto 1rem; max-width:920px;
}
.lsb-builder-hint-icon{font-size:18px; line-height:1.3}
.lsb-builder-hint em{color:var(--blue); font-style:normal; font-weight:700}

/* Highlighted panel — the "QR Code" controls panel gets a subtle blue treatment */
.lsb-panel-highlight{border-color:rgba(0,153,255,0.45)}
.lsb-panel-highlight > summary{color:var(--blue)}
.lsb-panel-hint{color:var(--muted); font-weight:400; font-size:12px; margin-left:4px}

/* Brand Logos bank — clickable thumbnails */
.lsb-brand-bank{display:grid; grid-template-columns:repeat(2,1fr); gap:0.5rem; margin-top:0.25rem}
.lsb-brand-btn{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    background:#FFFFFF; border:1px solid var(--border); border-radius:8px;
    padding:0.7rem 0.5rem; cursor:pointer; transition:all 0.15s;
    min-height:70px;
}
.lsb-brand-btn:hover{border-color:var(--blue); transform:translateY(-1px)}
.lsb-brand-btn img{max-height:28px; max-width:80%; object-fit:contain}
.lsb-brand-btn span{font-family:'Space Grotesk',Inter,sans-serif; font-size:11px; font-weight:700; color:#1A2540; letter-spacing:0.04em}
.lsb-brand-stars{background:#0A0F1A; border-color:#1A2540}
.lsb-brand-stars span{color:var(--muted-2)}

.lsb-controls{display:flex; flex-direction:column; gap:0.75rem}
.lsb-panel{background:var(--card); border:1px solid var(--border); border-radius:10px}
.lsb-panel > summary{padding:0.85rem 1rem; cursor:pointer; font-weight:700; font-size:14px; list-style:none; display:flex; justify-content:space-between; align-items:center}
.lsb-panel > summary::-webkit-details-marker{display:none}
.lsb-panel > summary::after{content:'+'; color:var(--muted); font-size:18px}
.lsb-panel[open] > summary::after{content:'−'}
.lsb-panel-body{padding:0 1rem 1rem; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:0.65rem; padding-top:1rem}
.lsb-panel-body input[type=text],.lsb-panel-body input[type=url],.lsb-panel-body select,.lsb-panel-body input[type=color]{
    width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text);
    border-radius:8px; padding:0.7rem 0.9rem; font-size:14px; font-family:inherit; outline:none;
}
.lsb-panel-body input:focus,.lsb-panel-body select:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,153,255,0.15)}
.lsb-panel-body input[type=color]{padding:4px; height:42px; cursor:pointer}
.lsb-field-help{font-size:13px; color:var(--muted); margin:0 0 0.5rem}

/* Premium addon card */
.lsb-premium-card{
    background:linear-gradient(135deg,rgba(0,153,255,0.06),rgba(200,112,42,0.06));
    border:1.5px solid rgba(0,153,255,0.35);
}
.lsb-premium-card:has(input:checked){
    border-color:var(--blue);
    background:linear-gradient(135deg,rgba(0,153,255,0.12),rgba(200,112,42,0.08));
}
.lsb-premium-tag{
    display:inline-block; background:var(--blue); color:#fff;
    font-size:9px; font-weight:800; letter-spacing:0.12em;
    padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:middle;
}
.lsb-coming-soon-tag{
    display:inline-block; background:#3A4256; color:#C4CCDA;
    font-size:9px; font-weight:800; letter-spacing:0.12em;
    padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:middle;
}
.lsb-disabled-card{opacity:0.55; cursor:not-allowed; pointer-events:none}