/* ═══════════════════════════════════════════════════════
    FRY KHANA — FRAME STUDIO  (public/css/fk-frame.css)
    Tokens (--amber, --dark, --card...) layouts/website.blade.php se aate hain
   ═══════════════════════════════════════════════════════ */

.fs-section { padding-bottom: 4rem; }

.fs-head { text-align: center; margin-bottom: 2.5rem; }
.fs-head .section-eyebrow { justify-content: center; }
.fs-sub {
    color: rgba(253,246,236,.42); margin: .9rem auto 0;
    line-height: 1.8; font-size: .9rem; max-width: 440px;
}
.fs-sub strong { color: var(--amber); font-weight: 700; }

/* ── LAYOUT ── */
.fs-grid {
    display: grid; grid-template-columns: 1fr 340px;
    gap: 2rem; align-items: start;
}

/* ── STAGE ── */
.fs-stage { position: relative; }
.fs-canvas-wrap {
    position: relative; margin: 0 auto;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: 0 18px 60px rgba(0,0,0,.45);
    transition: max-width .3s ease;
}
.fs-canvas-wrap[data-ratio="post"]  { max-width: 520px; }
.fs-canvas-wrap[data-ratio="story"] { max-width: 340px; }

.fs-canvas-wrap canvas {
    width: 100%; height: auto; display: block;
    touch-action: none; cursor: grab;
}
.fs-canvas-wrap canvas.dragging { cursor: grabbing; }
.fs-canvas-wrap.is-empty canvas { cursor: default; }

/* Empty state overlay */
.fs-empty {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; background: var(--card); border: none; cursor: pointer;
    font-family: inherit; color: rgba(253,246,236,.4);
    transition: background .2s;
}
.fs-empty:hover { background: var(--card2); }
.fs-empty.hide { display: none; }
.fs-empty i { font-size: 2rem; color: var(--brown); margin-bottom: .3rem; }
.fs-empty span { font-size: .95rem; font-weight: 700; color: var(--cream); }
.fs-empty small { font-size: .72rem; color: rgba(253,246,236,.28); }
.fs-canvas-wrap.drag-over .fs-empty { background: rgba(239,159,39,.08); }
.fs-canvas-wrap.drag-over { border-color: var(--amber); }

/* Drag hint */
.fs-drag-hint {
    position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%);
    background: rgba(15,9,4,.82); backdrop-filter: blur(8px);
    border: 1px solid var(--border); border-radius: 100px;
    padding: .3rem .8rem; font-size: .68rem; color: rgba(253,246,236,.55);
    display: none; align-items: center; gap: .35rem;
    pointer-events: none; z-index: 3;
    animation: fs-hint-fade 3.5s ease forwards;
}
.fs-drag-hint.show { display: flex; }
@keyframes fs-hint-fade { 0%,70% { opacity: 1 } 100% { opacity: 0 } }

/* ── CONTROLS ── */
.fs-controls {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 1.25rem;
    position: sticky; top: 5rem;
}
.fs-upload-btn { width: 100%; justify-content: center; }

.fs-block { margin-top: 1.25rem; }
.fs-label {
    font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--brown); font-weight: 700; margin-bottom: .55rem;
    display: flex; align-items: center; justify-content: space-between;
}
.fs-reset {
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: .65rem; letter-spacing: .06em; color: rgba(253,246,236,.3);
    text-transform: uppercase; font-weight: 700; padding: 0;
    transition: color .2s;
}
.fs-reset:hover { color: var(--amber); }

.fs-chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.fs-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--card2); border: 1px solid var(--border);
    color: rgba(253,246,236,.6); border-radius: 100px;
    padding: .45rem .8rem; font-size: .78rem; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: all .18s;
}
.fs-chip i { font-size: .7rem; }
.fs-chip:hover { border-color: var(--border-h); color: var(--cream); }
.fs-chip.selected {
    background: var(--amber); border-color: var(--amber);
    color: var(--dark); font-weight: 700;
}
.fs-chip-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* ── RANGE ── */
.fs-range { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.fs-range::-webkit-slider-runnable-track { height: 5px; border-radius: 100px; background: var(--card2); border: 1px solid var(--border); }
.fs-range::-moz-range-track           { height: 5px; border-radius: 100px; background: var(--card2); border: 1px solid var(--border); }
.fs-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; margin-top: -6px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--amber); border: 2px solid var(--dark);
    box-shadow: 0 2px 8px rgba(239,159,39,.4);
}
.fs-range::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--dark);
    background: var(--amber); box-shadow: 0 2px 8px rgba(239,159,39,.4);
}
.fs-range:disabled { opacity: .35; cursor: not-allowed; }

/* ── ACTIONS ── */
.fs-actions { display: flex; gap: .5rem; margin-top: 1.5rem; }
.fs-action { flex: 1; justify-content: center; }
.fs-action:disabled { opacity: .35; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.fs-action.hide { display: none; }

.fs-note {
    font-size: .68rem; color: rgba(253,246,236,.24);
    margin-top: .85rem; text-align: center; line-height: 1.6;
}
.fs-note.is-error { color: var(--red); }
.fs-note.is-ok    { color: #4ade80; }

/* ── STEPS ── */
.fs-steps {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: .75rem; margin-top: 3.5rem;
}
.fs-step {
    display: flex; gap: .7rem; align-items: flex-start;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1rem;
}
.fs-step-num {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    background: var(--amber-dim); border: 1px solid var(--border);
    color: var(--amber); font-size: .75rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.fs-step-title { font-size: .85rem; font-weight: 700; }
.fs-step-desc { font-size: .73rem; color: rgba(253,246,236,.32); margin-top: .15rem; line-height: 1.5; }
.fs-step-reward { border-color: rgba(40,167,69,.3); }
.fs-step-reward .fs-step-num { background: rgba(40,167,69,.12); border-color: rgba(40,167,69,.35); color: #4ade80; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .fs-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .fs-controls { position: static; }
    .fs-canvas-wrap[data-ratio="post"],
    .fs-canvas-wrap[data-ratio="story"] { max-width: 100%; }
    .fs-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .fs-steps { grid-template-columns: 1fr; }
    .fs-canvas-wrap[data-ratio="story"] { max-width: 300px; }
}