/* SquareFeet — Main Stylesheet v2
   Bootstrap 5 loaded via CDN. CSS in head, JS in footer.
   ─────────────────────────────────────────────────────── */

/* ── CSS Variables ──────────────────────────────────── */
:root {
    --sf-bg:        #f8f9fa;
    --sf-surface:   #ffffff;
    --sf-accent:    #b89a47; /*#9b7f4e;*/
    --sf-text:      #1c1a16;
    --sf-muted:     #6c6460;
    --sf-border:    rgba(0,0,0,0.10);
    --sf-radius:    12px;
    --sf-font-head: 'Cormorant Garamond', serif;
    --sf-font-body: 'DM Sans', sans-serif;
    --sidebar-w:    260px;
    --rpanel-w:     290px;
    --page-max-width: 1320px;
}

/* ── Base ───────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--sf-bg); color: var(--sf-text); font-family: var(--sf-font-body); min-height: 100vh; }
h1,h2,h3,h4,h5 { font-family: var(--sf-font-head); }
[x-cloak] { display: none !important; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 3px; }

/* ── Buttons ────────────────────────────────────────── */
.btn-accent { background: var(--sf-accent); border-color: var(--sf-accent); color: #fff; font-weight: 700; }
.btn-accent:hover { filter: brightness(.88); color: #fff; }
.btn-accent:disabled { opacity: .5; color: #fff; }
.btn-outline-accent { border-color: var(--sf-accent); color: var(--sf-accent); }
.btn-outline-accent:hover { background: var(--sf-accent); color: #fff; }
.btn-accent-inv { background: rgba(255,255,255,.77); border-color: rgba(255,255,255,.97); color: var(--sf-accent); font-weight: 700; }
.btn-accent-inv:hover { filter: brightness(.98); color: var(--sf-accent); background: rgba(255,255,255,.97); border-color: rgba(255,255,255,.97); }
.btn-accent-inv:disabled { opacity: .5; color: var(--sf-accent); background: rgba(255,255,255,.47); }
.btn-outline-accent-inv { border-color:  rgba(255,255,255,.77); color:  rgba(255,255,255,.77); }
.btn-outline-accent-inv:hover { background:  rgba(255,255,255,.77); color: var(--sf-accent); }
.btn-sf-surface { background: rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.10); color: var(--sf-muted); }
.btn-sf-surface:hover { background: rgba(0,0,0,.09); color: var(--sf-text); }
.sf-sidebar .btn-sf-surface { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); color: rgba(255,255,255,.5); }
.sf-sidebar .btn-sf-surface:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ── Form controls ──────────────────────────────────── */
.form-control-sf,.form-select-sf { background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.12); border-radius: 8px; color: var(--sf-text); font-size: 13px; padding: 8px 12px; transition: border-color .2s; width: 100%; }
.form-control-sf:focus,.form-select-sf:focus { background: rgba(0,0,0,.06); border-color: var(--sf-accent); box-shadow: 0 0 0 2px rgba(155,127,78,.15); color: var(--sf-text); outline: none; }
.form-control-sf::placeholder { color: rgba(0,0,0,.3); }
.sf-sidebar .form-control-sf,.sf-sidebar .form-select-sf,.sf-sidebar textarea { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #f0ece4; }
.sf-sidebar .form-control-sf:focus,.sf-sidebar .form-select-sf:focus { background: rgba(255,255,255,.08); border-color: var(--sf-accent); color: #f0ece4; box-shadow: 0 0 0 2px rgba(201,168,76,.15); }
.sf-sidebar .form-control-sf::placeholder { color: rgba(255,255,255,.2); }
.sf-sidebar .form-control-sf option,.sf-sidebar .form-select-sf option { background: #1a1c28; color: #f0ece4; }
.form-label-sf { display: block; font-size: 11px; font-weight: 600; color: var(--sf-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.sf-sidebar .form-label-sf { color: rgba(255,255,255,.4); }

/* ── Toggle ─────────────────────────────────────────── */
.sf-toggle { position: relative; width: 40px; height: 22px; cursor: pointer; flex-shrink: 0; }
.sf-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.sf-toggle-slider { position: absolute; inset: 0; background: rgba(0,0,0,.15); border-radius: 999px; transition: background .2s; }
.sf-toggle-slider::before { content:''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.sf-toggle input:checked ~ .sf-toggle-slider { background: var(--sf-accent); }
.sf-toggle input:checked ~ .sf-toggle-slider::before { transform: translateX(18px); }
.sf-sidebar .sf-toggle-slider { background: rgba(255,255,255,.15); }

/* ── Cards ──────────────────────────────────────────── */
.card-sf { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); overflow: hidden; }
.sf-sidebar .card-sf { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }

/* ── Badge — clothing label style ───────────────────── */
.sf-badge-tag { display: inline-flex; align-items: center; position: relative; padding: 4px 12px 4px 20px; border-radius: 0 4px 4px 0; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; clip-path: polygon(10px 0%,100% 0%,100% 100%,10px 100%,0% 50%); }
.sf-badge-tag::before { content:''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.4); box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.sf-badge-hangat      { background: #ef4444; color: #fff; }
.sf-badge-ditempah    { background: #f59e0b; color: #0c0d12; }
.sf-badge-terjual     { background: #6b7280; color: #fff; }
.sf-badge-harga_turun { background: #3b82f6; color: #fff; }
.sf-badge-bidaan      { background: #8b5cf6; color: #fff; }
.sf-badge-baru        { background: #10b981; color: #0c0d12; }
.sf-badge-group { display: flex; flex-direction: column; gap: 4px; position: absolute; top: 10px; left: 0; z-index: 5; }

/* ═══════════════════════════════════════════════════════
   BUILDER
═══════════════════════════════════════════════════════ */
.sf-builder-wrap { display: flex; height: 100vh; overflow: hidden; position: relative; }

/* Sidebar — always dark, collapsible */
.sf-sidebar {
    width: var(--sidebar-w, 260px);
    flex-shrink: 0;
    background: #0f1018;
    border-right: 1px solid rgba(255,255,255,.07);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    transition: width .2s ease;
}
.sf-sidebar-collapsed { width: 60px !important; }

/* Header */
.sf-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
    min-height: 56px;
}

/* Collapse toggle button */
.sf-collapse-btn {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.5);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all .15s;
    flex-shrink: 0;
}
.sf-collapse-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Accordion nav */
.sf-sidebar-nav { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.sf-nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.5);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    text-align: left;
}
.sf-nav-btn:hover { background: rgba(255,255,255,.05); color: rgba(255,255,255,.85); }
.sf-nav-btn.active { color: #f0ece4; background: rgba(201,168,76,.1); }
.sf-nav-icon { font-size: 16px; flex-shrink: 0; width: 20px; text-align: center; }
.sf-nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-nav-chevron { font-size: 11px; color: rgba(255,255,255,.3); transition: transform .2s; }

/* Sub-menu */
.sf-nav-sub { background: rgba(0,0,0,.2); }
.sf-nav-sub-btn {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 8px 14px 8px 40px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.4);
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
    text-align: left;
    border-left: 2px solid transparent;
}
.sf-nav-sub-btn:hover { color: rgba(255,255,255,.75); background: rgba(255,255,255,.04); }
.sf-nav-sub-btn.active {
    color: var(--sf-accent);
    border-left-color: var(--sf-accent);
    background: rgba(201,168,76,.08);
}

/* Icon-only nav (collapsed) */
.sf-sidebar-icon-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
}
.sf-icon-btn {
    width: 40px; height: 40px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.45);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: all .15s;
}
.sf-icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.sf-icon-btn.btn-accent { background: var(--sf-accent); color: #0c0d12; }
.sf-icon-btn.btn-accent:hover { filter: brightness(.9); }

/* Content body */
.sf-sidebar-body { flex: 1; overflow-y: auto; padding: 12px; min-height: 0; }
.sf-sidebar-body::-webkit-scrollbar { width: 3px; }
.sf-sidebar-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }

/* Footer */
.sf-sidebar-footer { padding: 12px; border-top: 1px solid rgba(255,255,255,.07); flex-shrink: 0; }

/* Canvas */
.sf-canvas-wrap { flex: 1; overflow-y: auto; height: 100vh; min-width: 0; background: #fff; }

/* Right panel — cerah by default */
.sf-right-panel { width: var(--rpanel-w); flex-shrink: 0; background: #f8f9fa; border-left: 1px solid rgba(0,0,0,.10); height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.sf-right-panel::-webkit-scrollbar { width: 3px; }
.sf-right-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); }
.sf-right-panel.dark { background: #0f1018; border-color: rgba(255,255,255,.07); color: #f0ece4; }
.sf-right-panel.dark .form-label-sf { color: rgba(255,255,255,.4); }
.sf-right-panel.dark .form-control-sf,.sf-right-panel.dark .form-select-sf { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #f0ece4; }
.sf-right-panel.dark .card-sf { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
.sf-right-panel.dark .btn-sf-surface { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.6); }

/* Resize handles between panels */
.sf-resize-handle { width: 5px; flex-shrink: 0; cursor: col-resize; background: transparent; position: relative; z-index: 20; transition: background .15s; }
.sf-resize-handle:hover,.sf-resize-handle.active { background: var(--sf-accent); opacity: .6; }
.sf-resize-handle::after { content:'⋮'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: rgba(255,255,255,.3); font-size: 14px; pointer-events: none; }
.sf-right-panel .sf-resize-handle::after { color: rgba(0,0,0,.2); }

/* Topbar (dalam layout canvas editor) */
.sf-topbar { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,.08); padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; }

/* Page Topbar — seragam untuk semua laman builder */
.sf-page-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 20px;
    border-bottom: 1px solid rgba(0,0,0,.07);
    /*background: rgba(255,255,255,.97);*/
    background: var(--sf-accent);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
    z-index: 20;
}
.sf-page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    /*color: rgba(0,0,0,.72);*/
    color: rgba(255,255,255,.97);
}
.sf-bc-icon { font-size: 13px; opacity: .45; margin-right: 2px; }
.sf-bc-root { color: rgba(255,255,255,.68); font-weight: 500; }
.sf-bc-sep  { font-size: 9px; color: rgba(255,255,255,.52); }
.sf-page-actions { display: flex; align-items: center; gap: 8px; }

/* Publish toggle switch (dalam page topbar) — ikut gaya sf-lang-switch */
.sf-pub-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 25px;
    padding-left: 82px;
    border-left: 1px solid rgba(255,255,255,.52);
}
.sf-pub-label { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.52); white-space: nowrap; }
.sf-pub-switch { display: flex; align-items: center; gap: 3px; background: rgba(0,0,0,.07); border: 1px solid rgba(0,0,0,.11); border-radius: 8px; padding: 3px; }
.sf-pub-btn { padding: 3px 10px; border-radius: 5px; font-size: 11px; font-weight: 700; border: none; background: transparent; color: rgba(0,0,0,.45); cursor: pointer; transition: all .2s; }
.sf-pub-btn:hover:not(.active) { background: rgba(0,0,0,.07); color: rgba(0,0,0,.65); }
.sf-pub-btn.ya.active   { background: #16a34a; color: #fff; }
.sf-pub-btn.draf.active { background: #7f1d1d; color: #fff; }

/* Grid */
.sf-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 12px; padding: 16px; align-content: start; align-items: start; min-height: calc(100vh - 60px); }

/* Asymmetric layout — fixed row heights */
.sf-grid.sf-asymmetric { grid-auto-rows: 120px; }
.sf-grid.sf-asymmetric .sf-block { min-height: unset; height: 100%; }

/* Blocks */
.sf-block { background: var(--sf-surface); border: 1.5px solid rgba(0,0,0,.08); border-radius: var(--sf-radius,12px); overflow: hidden; position: relative; transition: border-color .2s, box-shadow .2s; min-height: 120px; cursor: pointer; }
.sf-block:hover { border-color: rgba(155,127,78,.35); }
.sf-block.sf-block-selected { border-color: var(--sf-accent); box-shadow: 0 0 0 2px rgba(155,127,78,.2); }
.sf-block.sf-block-hidden { opacity: .4; filter: grayscale(1); }
.sf-block.sf-block-ghost { opacity: .25!important; background: rgba(155,127,78,.08)!important; border: 2px dashed var(--sf-accent)!important; }
.sf-block-bar { position: absolute; top: 0; left: 0; right: 0; height: 30px; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); display: flex; align-items: center; gap: 4px; padding: 0 8px; opacity: 0; transition: opacity .2s; z-index: 10; }
.sf-block:hover .sf-block-bar { opacity: 1; }
.sf-block-bar-label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-block-action { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; background: transparent; border: none; color: rgba(255,255,255,.45); transition: transform .18s ease, background .15s, color .15s; padding: 0; }
.sf-block-action i { transition: transform .18s ease; }
.sf-block-action:hover { background: rgba(255,255,255,.14); color: #fff; transform: translateY(-1px); }
.sf-block-action:hover i { transform: scale(1.08); }
.sf-block-action.danger:hover { background: rgba(239,68,68,.18); color: #f87171; }
.sf-drag-handle { cursor: grab; color: rgba(255,255,255,.45); padding: 5px; transition: color .15s ease; }
.sf-drag-handle:hover { color: #fff; }
.sf-drag-handle:active { cursor: grabbing; }
.sf-block-content { background: var(--sf-surface); padding: 38px 12px 12px; height: 100%; }

/* Col spans */
/* min-width:0 prevents flex/grid blowout. overflow handled inline per block type. */
[class^="sf-col-"] { min-width: 0; position: relative; }
.sf-col-1{grid-column:span 1}.sf-col-2{grid-column:span 2}.sf-col-3{grid-column:span 3}
.sf-col-4{grid-column:span 4}.sf-col-5{grid-column:span 5}.sf-col-6{grid-column:span 6}
.sf-col-7{grid-column:span 7}.sf-col-8{grid-column:span 8}.sf-col-9{grid-column:span 9}
.sf-col-10{grid-column:span 10}.sf-col-11{grid-column:span 11}.sf-col-12{grid-column:span 12}

/* Row spans — for asymmetric layout */
.sf-row-1{grid-row:span 1}.sf-row-2{grid-row:span 2}.sf-row-3{grid-row:span 3}
.sf-row-4{grid-row:span 4}.sf-row-5{grid-row:span 5}

/* Palette */
.sf-palette-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; cursor: grab; transition: all .2s; margin-bottom: 6px; user-select: none; }
.sf-palette-item:hover { background: rgba(201,168,76,.08); border-color: rgba(201,168,76,.25); }
.sf-palette-item:active { cursor: grabbing; }

/* Tab nav */
.sf-tab-nav { display: flex; border-bottom: 1px solid rgba(255,255,255,.07); }
.sf-tab-btn { flex: 1; padding: 9px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; border: none; background: transparent; color: rgba(255,255,255,.3); border-bottom: 2px solid transparent; cursor: pointer; transition: all .2s; }
.sf-tab-btn:hover { color: rgba(255,255,255,.6); }
.sf-tab-btn.active { color: #f0ece4; border-bottom-color: var(--sf-accent); background: rgba(255,255,255,.04); }
/* Right panel tab nav overrides */
.sf-right-panel .sf-tab-nav { border-bottom-color: rgba(0,0,0,.1); }
.sf-right-panel .sf-tab-btn { color: rgba(0,0,0,.4); }
.sf-right-panel .sf-tab-btn:hover { color: rgba(0,0,0,.65); }
.sf-right-panel .sf-tab-btn.active { color: var(--sf-text); border-bottom-color: var(--sf-accent); background: rgba(0,0,0,.03); }
.sf-right-panel.dark .sf-tab-nav { border-bottom-color: rgba(255,255,255,.07); }
.sf-right-panel.dark .sf-tab-btn { color: rgba(255,255,255,.3); }
.sf-right-panel.dark .sf-tab-btn.active { color: #f0ece4; }

/* Custom tab header in right panel */
.sf-tab-header {
    position: relative;
    z-index: 10;
}
.sf-tab-header .sf-tab-btn {
    background: rgba(255,255,255,.05);
    border: none;
    border-radius: 6px 6px 0 0;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.6);
    transition: all .2s;
    cursor: pointer;
}
.sf-tab-header .sf-tab-btn.active {
    background: var(--sf-accent);
    color: #0c0d12;
}
.sf-tab-header .sf-tab-btn:hover:not(.active) {
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.8);
}

/* Topbar in canvas uses logo accent */
.sf-topbar {
    --sf-accent: #9b7f4e !important;
}

/* ═══════════════════════════════════════════════════════
   PUBLIC PROFILE LAYOUTS
═══════════════════════════════════════════════════════ */

/* 1. Boxed */
.sf-layout-boxed .sf-page-content { max-width: var(--page-max-width,1320px); margin: 0 auto; padding: 0 20px; }

/* 2. Full-width */
.sf-layout-full .sf-page-content { max-width: none; padding: 0 20px; }

/* 3. Parallax */
.sf-layout-parallax { position: relative; }
.sf-parallax-bg { position: fixed; inset: 0; background-size: cover; background-position: center; background-attachment: fixed; z-index: 0; pointer-events: none; }
.sf-layout-parallax .sf-page-content { position: relative; z-index: 1; max-width: var(--page-max-width,1320px); margin: 0 auto; padding: 0 20px; }
.sf-layout-parallax .card-sf,
.sf-layout-parallax .sf-prop-card,
.sf-layout-parallax .sf-search-block { background: rgba(255,255,255,.88); backdrop-filter: blur(12px); }

/* ── STICKY HEADER — always dark ─────────────────────── */
.sf-sticky-header { position: sticky; top: 0; z-index: 100; background: #0c0d12!important; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.08)!important; padding: 12px 24px; display: flex; align-items: center; gap: 14px; color: #f0ece4!important; }
.sf-sticky-header * { color: inherit; }
.sf-agent-name { font-family: var(--sf-font-head,'Cormorant Garamond'),serif; font-size: 16px; font-weight: 600; color: #f0ece4!important; }
.sf-agent-sub { font-size: 11px; color: rgba(255,255,255,.45)!important; }

/* ── HERO CAROUSEL ────────────────────────────────────── */
.sf-hero { width: 100%; height: 55vh; min-height: 380px; display: flex; overflow: hidden; border-radius: var(--sf-radius,12px); contain: layout; }

/* Thumb strip — item height fixed at 90px, strip height = n × 90px (no empty space below)
   align-self:flex-start so strip doesn't stretch to full hero height */
/* Thumb strip: height = n×90px naturally (no flex-grow stretch).
   overflow-y:auto lets it scroll if 5 items exceed hero height. */
.sf-thumb-strip { width: 112px; flex-shrink: 0; height: auto; align-self: stretch; max-height: 100%; display: flex; flex-direction: column; gap: 2px; background: rgba(0,0,0,.55); overflow-y: auto; scrollbar-width: none; }
.sf-thumb-strip::-webkit-scrollbar { display: none; }
.sf-thumb-item { flex: 1 1 auto; min-height: 0; cursor: pointer; position: relative; overflow: hidden; border-left: 3px solid transparent; transition: border-color .2s; }
.sf-thumb-item img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.5); transition: filter .25s; }
.sf-thumb-item.active { border-left-color: var(--sf-accent); }
.sf-thumb-item.active img,.sf-thumb-item:hover img { filter: brightness(.85); }

/* Slides */
.sf-slide-stage { flex: 1; position: relative; overflow: hidden; }
.sf-slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .55s ease;
    pointer-events: none;
    will-change: opacity;      /* hint GPU — avoids layout reflow during transition */
    contain: strict;           /* isolate paint — prevents scroll side effects */
}
.sf-slide.active { opacity: 1; pointer-events: auto; }
.sf-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-slide-overlay { position: absolute; inset: 0; background: linear-gradient(to right,rgba(0,0,0,.04) 0%,transparent 35%,transparent 50%,rgba(0,0,0,.72) 100%); }
.sf-slide-info { position: absolute; right: 28px; bottom: 28px; max-width: 380px; text-align: right; background: rgba(0,0,0,.35); backdrop-filter: blur(2px); padding: 20px; border-radius: 18px; width: auto; height: auto }
.sf-slide-title { font-family: var(--sf-font-head,'Cormorant Garamond'),serif; font-size: clamp(20px,3vw,34px); font-weight: 600; color: #fff; line-height: 1.15; margin-bottom: 6px; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.sf-slide-price { font-size: clamp(15px,2vw,20px); font-weight: 600; color: #C8BC9A; margin-bottom: 5px; }
.sf-slide-loc { font-size: 12px; color: rgba(255,255,255,.65); margin-bottom: 14px; }
.sf-slide-btn { display: inline-block; border: 1.5px solid #5590dc; color: #5590dc; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: capitalize; padding: 8px 18px; text-decoration: none; border-radius: 4px; transition: all .2s; }
.sf-slide-btn:hover { background: #5590dc; color: #ffffff; }
.sf-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.12); color: #fff; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; backdrop-filter: blur(4px); }
.sf-carousel-arrow:hover { background: rgba(0,0,0,.65); }
.sf-carousel-arrow.prev { left: 14px; }
.sf-carousel-arrow.next { right: 14px; }
.sf-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.3); cursor: pointer; transition: all .2s; border: none; padding: 0; }
.sf-dot.active { background: var(--sf-accent); width: 20px; border-radius: 3px; }

/* Hero Carousel Layout Variations */
.sf-hero.thumb-right { flex-direction: row-reverse; }
.sf-hero.thumb-right .sf-slide-info .justify-content-end { justify-content: flex-start !important; }
.sf-hero.thumb-top { flex-direction: column; }
.sf-hero.thumb-top .sf-thumb-strip { width: 100%; height: auto; flex-direction: row; max-height: auto; }
.sf-hero.thumb-top .sf-thumb-item { flex: 1 1 auto; min-width: 0; height: 70px; border-left: 0; border-bottom: 3px solid transparent; }
.sf-hero.thumb-top .sf-thumb-item.active { border-left: 0; border-bottom-color: var(--sf-accent); }
.sf-hero.thumb-bottom { flex-direction: column-reverse; }
.sf-hero.thumb-bottom .sf-thumb-strip { width: 100%; height: auto; flex-direction: row; max-height: auto; }
.sf-hero.thumb-bottom .sf-thumb-item { flex: 1 1 auto; min-width: 0; height: 70px; border-left: 0; border-top: 3px solid transparent; }
.sf-hero.thumb-bottom .sf-thumb-item.active { border-left: 0; border-top-color: var(--sf-accent); }
.sf-hero.thumb-right .sf-slide-info { left: 68px; bottom: 28px; text-align: left;}
.sf-hero.thumb-left .sf-slide-info { right: 68px; bottom: 28px; }
.sf-hero.thumb-top .sf-slide-info { right: 68px; bottom: 28px; padding-right: 28px; }
.sf-hero.thumb-bottom .sf-slide-info { right: 68px; top: 28px; bottom: auto; padding-right: 28px; }


/* ── Avatars & contacts ───────────────────────────────── */
.sf-agent-avatar-sm { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sf-accent); flex-shrink: 0; }
.sf-agent-avatar-lg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--sf-accent); }
.sf-avatar-placeholder { border-radius: 50%; background: rgba(155,127,78,.12); border: 2px solid var(--sf-accent); display: flex; align-items: center; justify-content: center; color: var(--sf-accent); font-family: var(--sf-font-head); font-weight: 600; flex-shrink: 0; }
.sf-social-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(0,0,0,.06); border: 1px solid var(--sf-border); font-size: 16px; text-decoration: none; transition: all .2s; }
.sf-social-btn:hover { background: rgba(0,0,0,.12); border-color: var(--sf-accent); }
.sf-contact-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all .2s; border: 1.5px solid; }
.sf-contact-btn:hover { transform: translateY(-2px); }

/* ── Property cards ───────────────────────────────────── */
.sf-prop-card { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); overflow: hidden; cursor: pointer; transition: transform .25s,box-shadow .25s,border-color .25s; display: flex; flex-direction: column; height: 100%; }
.sf-prop-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.15); border-color: rgba(155,127,78,.3); }
.sf-prop-card-thumb { position: relative; overflow: hidden; aspect-ratio: 16/10; }
.sf-prop-card-thumb img:not(.sf-stamp-img) { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.sf-prop-card:hover .sf-prop-card-thumb img:not(.sf-stamp-img) { transform: scale(1.04); }
.sf-media-count { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 4px; backdrop-filter: blur(4px); }
.sf-card-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 4; }
.sf-hot-badge { background: #e53935; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 4px; letter-spacing: .02em; backdrop-filter: blur(4px); white-space: nowrap; }
.sf-new-badge { background: #1976d2; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 4px; letter-spacing: .02em; backdrop-filter: blur(4px); white-space: nowrap; }
.sf-bid-badge     { background: #7b1fa2; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 4px; letter-spacing: .02em; backdrop-filter: blur(4px); white-space: nowrap; }
.sf-reduced-badge { background: #f57c00; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px 3px 5px; border-radius: 4px; letter-spacing: .02em; backdrop-filter: blur(4px); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; overflow: visible; }
.sf-bolt          { font-size: 15px; line-height: 1; margin: -4px 0; flex-shrink: 0; }
.sf-orig-price    { font-size: 12px; color: var(--sf-muted); font-weight: 400; opacity: .75; display: inline; }
.sf-card-body { padding: 15px 16px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.sf-card-title { font-family: var(--sf-font-head,'Cormorant Garamond'),serif; font-size: 17px; font-weight: 600; color: var(--sf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; }
.sf-card-location { font-size: 12px; color: var(--sf-muted); margin-bottom: 8px; }
.sf-card-specs { font-size: 12px; color: var(--sf-muted); margin-bottom: 10px; }
.sf-card-spec { display: inline-block; margin-right: 10px; }
.sf-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--sf-border); }
.sf-card-price { font-family: var(--sf-font-head,'Cormorant Garamond'),serif; font-size: 19px; font-weight: 600; color: var(--sf-accent); }

/* ── Masonry — varied aspect ratios ───────────────────── */
.sf-masonry { columns: 3; column-gap: 16px; }
.sf-masonry-item { break-inside: avoid; margin-bottom: 16px; }
@media (max-width: 992px) { .sf-masonry { columns: 2; } }
@media (max-width: 576px) { .sf-masonry { columns: 1; } }
.sf-masonry-item:nth-child(3n+1) .sf-prop-card-thumb { aspect-ratio: 4/3; }
.sf-masonry-item:nth-child(3n+2) .sf-prop-card-thumb { aspect-ratio: 3/4; }
.sf-masonry-item:nth-child(3n)   .sf-prop-card-thumb { aspect-ratio: 16/9; }
.sf-masonry-item .sf-prop-card-thumb { height: auto; }
.sf-masonry-item .sf-prop-card-thumb img:not(.sf-stamp-img) { width: 100%; height: 100%; object-fit: cover; }

/* ── List view ────────────────────────────────────────── */
.sf-prop-list-item { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); overflow: hidden; cursor: pointer; transition: border-color .2s,box-shadow .2s; display: flex; }
/* Ensure list hover matches card hover visually */
.sf-prop-list-item:hover { border-color: rgba(155,127,78,.3); box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.sf-prop-list-item:hover { border-color: rgba(155,127,78,.25); }
.sf-prop-list-thumb { width: 180px; flex-shrink: 0; position: relative; overflow: hidden; }
.sf-prop-list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.sf-prop-list-item:hover .sf-prop-list-thumb img { transform: scale(1.04); }
.sf-prop-list-body { flex: 1; padding: 16px 20px; display: flex; flex-direction: column; justify-content: space-between; }

/* ── Search block ─────────────────────────────────────── */
.sf-search-block { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 20px; }
.sf-search-title { font-family: var(--sf-font-head,'Cormorant Garamond'),serif; font-size: 20px; font-weight: 600; color: var(--sf-text); margin-bottom: 16px; }
.sf-price-range { display: flex; gap: 10px; align-items: center; }
.sf-price-range input { flex: 1; }
.sf-range-sep { color: var(--sf-muted); font-size: 13px; }

/* ── Lightbox ─────────────────────────────────────────── */
.sf-lb-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.96); z-index: 1050; display: flex; flex-direction: column; }
.sf-lb-header  { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.sf-stamp-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 5; background: rgba(0,0,0,.5); }
.sf-stamp-img     { display: block; pointer-events: none; max-width: none; }
.sf-booked-ribbon-wrap { position: absolute; top: 8%; right: 0; width: 30%; z-index: 10; pointer-events: none; filter: drop-shadow(-2px 3px 6px rgba(0,0,0,.45)); }
.sf-booked-ribbon { display: block; background: #f5b800; color: #3d2000; font-weight: 800; font-size: clamp(9px, 1.1vw, 12px); text-align: center; padding: 7px 8px 7px 18px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; clip-path: polygon(0% 50%, 15% 0%, 100% 0%, 100% 100%, 15% 100%); }
.sf-booked-ribbon-wrap::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 0; border-top: 5px solid #c49200; border-right: 12px solid transparent; }
.sf-lb-body    { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.sf-lb-info    { flex-shrink: 0; min-width: 180px; max-width: 65%; overflow-y: auto; padding: 22px 20px 28px; background: rgba(0,0,0,.6); border-right: 1px solid rgba(255,255,255,.07); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
.sf-lb-resizer { flex: 0 0 5px; background: rgba(255,255,255,.05); cursor: col-resize; flex-shrink: 0; position: relative; transition: background .2s; }
.sf-lb-resizer:hover { background: rgba(255,255,255,.14); }
.sf-lb-resizer-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 3px; height: 40px; background: rgba(255,255,255,.18); border-radius: 2px; }
.sf-lb-viewer  { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.sf-lb-info-meta  { font-size: 10px; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.sf-lb-info-title { font-family: var(--sf-font-head,'Cormorant Garamond'),serif; font-size: 22px; font-weight: 600; color: #fff; line-height: 1.25; margin-bottom: 14px; }
.sf-lb-info-price { font-family: var(--sf-font-head,'Cormorant Garamond'),serif; font-size: 26px; font-weight: 700; color: var(--sf-accent,#b8a06a); line-height: 1.1; margin-bottom: 3px; }
.sf-lb-info-specs { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 12px; font-size: 13px; color: rgba(255,255,255,.5); }
.sf-lb-info-desc  { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.75; white-space: pre-wrap; }
.sf-lb-main { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sf-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity .25s; }
.sf-lb-img.fading { opacity: 0; }
.sf-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; z-index: 5; }
.sf-lb-nav:hover { background: rgba(255,255,255,.18); }
.sf-lb-nav.prev { left: 14px; }
.sf-lb-nav.next { right: 14px; }
.sf-lb-count { position: absolute; top: 14px; right: 14px; background: rgba(0,0,0,.45); color: rgba(255,255,255,.5); font-size: 12px; padding: 4px 10px; border-radius: 5px; backdrop-filter: blur(4px); }
.sf-lb-caption { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.6); color: rgba(255,255,255,.75); font-size: 12px; padding: 5px 14px; border-radius: 4px; backdrop-filter: blur(6px); max-width: 80%; text-align: center; }
.sf-lb-film { flex-shrink: 0; height: 100px; display: flex; align-items: center; gap: 6px; padding: 8px 16px; overflow-x: auto; background: rgba(0,0,0,.5); border-top: 1px solid rgba(255,255,255,.07); }
.sf-lb-thumb { flex-shrink: 0; width: 76px; height: 76px; border-radius: 6px; overflow: hidden; cursor: pointer; border: 2px solid transparent; opacity: .5; transition: all .2s; position: relative; }
.sf-lb-thumb.active { border-color: var(--sf-accent); opacity: 1; }
.sf-lb-thumb:hover { opacity: .85; }
.sf-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-lb-room-tag { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6); color: rgba(255,255,255,.6); font-size: 9px; text-align: center; padding: 2px; }
@media (max-width: 767px) {
    .sf-lb-body   { flex-direction: column; }
    .sf-lb-info   { flex-basis: auto !important; max-width: 100%; max-height: 38vh; border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); }
    .sf-lb-resizer{ display: none; }
}

/* ── Lang switch ──────────────────────────────────────── */
.sf-lang-switch { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 3px; }
.sf-lang-btn { padding: 3px 10px; border-radius: 5px; font-size: 11px; font-weight: 700; border: none; background: transparent; color: rgba(255,255,255,.5); cursor: pointer; transition: all .2s; }
.sf-lang-btn.active { background: var(--sf-accent); color: #0c0d12; }

/* ── Article card ─────────────────────────────────────── */
.sf-article-card { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); overflow: hidden; text-decoration: none; display: block; transition: transform .2s,box-shadow .2s; color: var(--sf-text); }
.sf-article-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1); color: var(--sf-text); }

/* ── Section heading ──────────────────────────────────── */
.sf-section-head { font-family: var(--sf-font-head,'Cormorant Garamond'),serif; font-size: 24px; font-weight: 600; color: var(--sf-text); margin-bottom: 4px; }
.sf-section-rule { width: 32px; height: 2px; background: var(--sf-accent); border-radius: 1px; margin-bottom: 20px; }

/* ── Toast ────────────────────────────────────────────── */
.sf-toast {
    position: fixed; top: 72px; left: 50%; transform: translateX(-50%);
    z-index: 9999; background: #fff; border-radius: 10px;
    box-shadow: 0 4px 28px rgba(0,0,0,.13);
    display: flex; align-items: stretch;
    min-width: 320px; max-width: 480px; overflow: hidden;
}
.sf-toast-bar   { width: 5px; flex-shrink: 0; }
.sf-toast-inner { display: flex; align-items: center; gap: 14px; padding: 15px 16px 15px 14px; flex: 1; min-width: 0; }
.sf-toast-icon  { font-size: 22px; flex-shrink: 0; line-height: 1; }
.sf-toast-body  { flex: 1; min-width: 0; }
.sf-toast-title { font-size: 14px; font-weight: 700; line-height: 1.3; margin-bottom: 2px; }
.sf-toast-msg   { font-size: 12px; font-weight: 400; color: rgba(0,0,0,.5); line-height: 1.45; }
.sf-toast-close { border: none; background: transparent; color: rgba(0,0,0,.3); font-size: 16px; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0; align-self: flex-start; margin-top: 1px; transition: color .15s; }
.sf-toast-close:hover { color: rgba(0,0,0,.65); }

.sf-toast.ok   .sf-toast-bar   { background: #16a34a; }
.sf-toast.ok   .sf-toast-icon  { color: #16a34a; }
.sf-toast.ok   .sf-toast-title { color: #15803d; }
.sf-toast.err  .sf-toast-bar   { background: #dc2626; }
.sf-toast.err  .sf-toast-icon  { color: #dc2626; }
.sf-toast.err  .sf-toast-title { color: #b91c1c; }
.sf-toast.info .sf-toast-bar   { background: #2563eb; }
.sf-toast.info .sf-toast-icon  { color: #2563eb; }
.sf-toast.info .sf-toast-title { color: #1d4ed8; }
.sf-toast.warn .sf-toast-bar   { background: #d97706; }
.sf-toast.warn .sf-toast-icon  { color: #d97706; }
.sf-toast.warn .sf-toast-title { color: #b45309; }

/* ── Logo ─────────────────────────────────────────────── */
.sf-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.sf-logo-icon { width: 32px; height: 32px; }
.sf-logo-text { font-family: var(--sf-font-head,'Cormorant Garamond'),serif; font-size: 20px; font-weight: 700; color: #f0ece4; letter-spacing: -.02em; }
.sf-logo-text span { color: var(--sf-accent); }
.sf-logo-text-on-white { font-family: var(--sf-font-head,'Cormorant Garamond'),serif; font-size: 20px; font-weight: 700; color: #000; letter-spacing: -.02em; }
.sf-logo-text-on-white span { color: var(--sf-accent); }

/* ── Modal ────────────────────────────────────────────── */
.modal-content { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); color: var(--sf-text); }
.modal-header { border-bottom: 1px solid var(--sf-border); padding: 18px 22px; }
.modal-footer { border-top: 1px solid var(--sf-border); padding: 16px 22px; }
.modal-title { font-family: var(--sf-font-head); font-weight: 600; }

/* ── Property row in right panel ──────────────────────── */
.sf-prop-row { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: border-color .2s; }
.sf-prop-row:hover { border-color: rgba(155,127,78,.3); }
.sf-prop-row.selected { border-color: var(--sf-accent); background: rgba(155,127,78,.05); }
.sf-right-panel.dark .sf-prop-row { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.sf-right-panel.dark .sf-prop-row:hover { border-color: rgba(201,168,76,.3); }
.sf-right-panel.dark .sf-prop-row.selected { background: rgba(201,168,76,.08); }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 992px) {
    .sf-sidebar { width: 200px!important; }
    .sf-right-panel { width: 220px!important; }
    .sf-grid { grid-template-columns: repeat(6,1fr); }
    .sf-col-1,.sf-col-2,.sf-col-3 { grid-column: span 3; }
    .sf-col-4,.sf-col-5,.sf-col-6 { grid-column: span 3; }
    .sf-col-7,.sf-col-8,.sf-col-9 { grid-column: span 6; }
    .sf-col-10,.sf-col-11,.sf-col-12 { grid-column: span 6; }
}
@media (max-width: 768px) {
    .sf-builder-wrap { flex-direction: column; height: auto; }
    .sf-sidebar,.sf-right-panel { width: 100%!important; height: auto; }
    .sf-canvas-wrap { height: auto; }
    .sf-grid { grid-template-columns: 1fr; }
    .sf-col-1,.sf-col-2,.sf-col-3,.sf-col-4,.sf-col-5,.sf-col-6,
    .sf-col-7,.sf-col-8,.sf-col-9,.sf-col-10,.sf-col-11,.sf-col-12 { grid-column: span 1; }
    .sf-hero { height: 40vh; min-height: 280px; }
    .sf-thumb-strip { width: 80px; }
    .sf-resize-handle { display: none; }
}

/* ── WhatsApp Buttons — sistem seragam ──────────────────────────────────── */

/* SVG WhatsApp logo — guna sebagai mask pada semua varian */
.sf-wa-icon {
    width: 16px; height: 16px;
    background: currentColor;
    flex-shrink: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 1. Ikon sahaja 1×1 — untuk kad listing (specs row) */
.sf-wa-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
    transition: background .2s, transform .15s;
    border: none;
}
.sf-wa-icon-btn:hover { background: #1da851; transform: scale(1.1); }
.sf-wa-icon-btn .sf-wa-icon { width: 14px; height: 14px; }

/* 2. Pill dengan label — untuk lightbox header & hero carousel */
.sf-wa-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 8px;
    background: #25d366;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, transform .15s;
    border: none;
    cursor: pointer;
}
.sf-wa-pill:hover { background: #1da851; color: #fff; transform: translateY(-1px); }
.sf-wa-pill .sf-wa-icon { width: 16px; height: 16px; }

/* Hero carousel ghost variant (transparent background, green border) */
.sf-wa-ghost {
    background: transparent;
    border: 1.5px solid #25d366;
    color: #25d366;
}
.sf-wa-ghost .sf-wa-icon { background: #25d366; }
.sf-wa-ghost:hover { background: #25d366; color: #fff; }
.sf-wa-ghost:hover .sf-wa-icon { background: #fff; }

/* ── BLOCK TOOLBAR (atas kanvas Rekaletak) ──────────────────────────────── */
.sf-block-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #0c0d12;
    border-bottom: 1px solid rgba(255,255,255,.08);
    min-height: 52px;
    flex-shrink: 0;
    overflow-x: auto;
}

.sf-block-toolbar-palette {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.sf-block-toolbar-palette::-webkit-scrollbar { display: none; }

.sf-palette-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    cursor: grab;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
    user-select: none;
    flex-shrink: 0;
}
.sf-palette-chip:hover {
    background: rgba(201,168,76,.12);
    border-color: rgba(201,168,76,.4);
}
.sf-palette-chip:active { cursor: grabbing; }

.sf-palette-chip-label {
    font-size: 11px;
    font-weight: 600;
    color: #f0ece4;
}


/* ── PALETTE ROW (panel kanan Rekaletak) ─────────────────────────────────── */
.sf-palette-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    cursor: grab;
    user-select: none;
    transition: background .15s, border-color .15s;
}
.sf-palette-row:hover {
    background: rgba(201,168,76,.1);
    border-color: rgba(201,168,76,.35);
}
.sf-palette-row:active { cursor: grabbing; }

.sf-palette-row-icon {
    width: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sf-palette-row-icon i {
    font-size: 16px;
    color: #f0ece4;
    transition: transform .18s ease, color .18s ease;
}
.sf-palette-row:hover .sf-palette-row-icon i {
    transform: scale(1.06);
    color: var(--sf-accent);
}
.sf-palette-row-text { flex: 1; min-width: 0; }
.sf-palette-row-title {
    font-size: 12px;
    font-weight: 600;
    color: #f0ece4;
    line-height: 1.3;
}
.sf-palette-row-desc {
    font-size: 10px;
    color: rgba(255,255,255,.35);
    line-height: 1.4;
    margin-top: 1px;
}
.sf-palette-row-grip {
    color: rgba(255,255,255,.2);
    font-size: 14px;
    flex-shrink: 0;
}
.sf-palette-row-premium {
    cursor: default;
    opacity: .65;
    border-style: dashed;
}
.sf-palette-row-premium:hover {
    background: rgba(201,168,76,.05);
    border-color: rgba(201,168,76,.2);
}
.sf-palette-premium-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    color: rgba(201,168,76,.9);
    background: rgba(201,168,76,.12);
    border: 1px solid rgba(201,168,76,.25);
    border-radius: 4px;
    padding: 1px 5px;
    vertical-align: middle;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ══ ADMIN LAYOUT ═══════════════════════════════════════════════════════════ */
:root {
    --admin-banner-h: 52px;
    --admin-footer-h: 40px;
    --admin-sidebar-w: 240px;
    --admin-sidebar-collapsed-w: 54px;
}

.sf-admin-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--sf-bg, #0c0d12);
    --sf-accent: #9b7f4e !important;
}

.sf-admin-shell .sf-logo-text span {
    color: #9b7f4e !important;
}

/* ── Top Banner ─────────────────────────────────────────────────────────── */
.sf-admin-banner {
    flex-shrink: 0;
    height: var(--admin-banner-h);
    background: #0c0d12;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    z-index: 40;
}

.sf-admin-banner-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255,255,255,.5);
    font-size: 15px;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.sf-admin-banner-btn:hover {
    background: rgba(255,255,255,.07);
    color: #f0ece4;
}

/* ── Body: Sidebar + Main ───────────────────────────────────────────────── */
.sf-admin-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.sf-admin-sidebar {
    flex-shrink: 0;
    width: var(--admin-sidebar-w);
    background: #2c2f3e;
    border-right: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width .2s ease;
    padding: 8px 0;
}
.sf-admin-sidebar.collapsed {
    width: var(--admin-sidebar-collapsed-w);
}
.sf-admin-sidebar::-webkit-scrollbar { width: 3px; }
.sf-admin-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }

/* resize handle between sidebar and main */
.sf-admin-resize {
    flex-shrink: 0;
    width: 4px;
    background: transparent;
    cursor: col-resize;
    transition: background .2s;
    z-index: 10;
}
.sf-admin-resize:hover { background: rgba(201,168,76,.3); }

/* nav items */
.sf-admin-nav-item,
.sf-admin-nav-group { margin: 1px 6px; }

.sf-admin-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255,255,255,.75);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}
.sf-admin-nav-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.sf-admin-nav-item.active .sf-admin-nav-btn,
.sf-admin-nav-group.active > .sf-admin-nav-btn {
    background: rgba(201,168,76,.12);
    color: var(--sf-accent, #c9a84c);
}

.sf-admin-nav-icon { font-size: 16px; flex-shrink: 0; width: 18px; text-align: center; }
.sf-admin-nav-label { flex: 1; }
.sf-admin-nav-chevron { font-size: 11px; color: rgba(255,255,255,.25); }
.sf-premium-badge {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #c9a84c 0%, #f0d080 50%, #c9a84c 100%);
    color: #3d2000;
    padding: 2px 6px;
    border-radius: 999px;
    flex-shrink: 0;
    line-height: 1.4;
}

/* submenu */
.sf-admin-nav-sub { padding: 2px 0 4px 38px; }
.sf-admin-sub-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255,255,255,.6);
    font-size: 12px;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-align: left;
    white-space: nowrap;
}
.sf-admin-sub-btn:hover { background: rgba(255,255,255,.07); color: #fff; }
.sf-admin-sub-btn.active { color: var(--sf-accent, #c9a84c); font-weight: 600; }

/* ── Main Content ───────────────────────────────────────────────────────── */
.sf-admin-main {
    flex: 1;
    overflow: hidden;   /* children guna height:100% sendiri */
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.sf-admin-footer {
    flex-shrink: 0;
    height: var(--admin-footer-h);
    padding: 0 20px;
    display: flex;
    align-items: center;
    background: #0c0d12;
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: 11px;
    color: rgba(255,255,255,.25);
}

/* ── Builder canvas (dalam admin layout) ───────────────────────────────── */
.sf-builder-canvas-wrap {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;  /* critical untuk flex child dengan height:100% */
}

.sf-builder-canvas-wrap .sf-canvas-wrap {
    flex: 1;
    overflow-y: auto;
    height: 100%;
    min-width: 0;
    background: #fff;
}

.sf-builder-canvas-wrap .sf-right-panel {
    width: 300px;
    flex-shrink: 0;
    overflow: hidden;
    background: #2c2f3e;
    border-left: 1px solid rgba(255,255,255,.07);
    color: #f0ece4;
    display: flex;
    flex-direction: column;
    height: auto;
    align-self: stretch;
}

/* ── Sidebar toggle button ──────────────────────────────────────────────── */
.sf-sidebar-toggle-wrap {
    display: flex;
    justify-content: flex-end;
    padding: 6px 8px 2px;
}
.sf-sidebar-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
    color: rgba(255,255,255,.6);
    cursor: pointer;
    font-size: 15px;
    transition: background .15s, color .15s;
}
.sf-sidebar-toggle-btn:hover {
    background: rgba(255,255,255,.12);
    color: #f0ece4;
}

/* ── Nav item wrapper (for flyout positioning) ──────────────────────────── */
.sf-nav-item-wrap {
    position: relative;
    margin: 1px 6px;
}
.sf-nav-item-wrap.active > .sf-admin-nav-btn {
    background: rgba(201,168,76,.12);
    color: var(--sf-accent, #c9a84c);
}

/* ── Flyout menu (hover saat collapsed) ─────────────────────────────────── */
.sf-nav-flyout {
    /* display:none diuruskan oleh Alpine x-show */
    position: absolute;
    left: 100%;
    top: 0;
    padding-left: 6px;  /* bridge gap antara sidebar dan flyout */
    min-width: 190px;
    z-index: 200;
    /* MESTI all — kalau none, mouse tembus ke belakang dan trigger @mouseleave */
    pointer-events: all;
}
/* Kotak isi dalam flyout */
.sf-nav-flyout-inner {
    background: #1a1c28;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    padding: 6px;
    overflow: hidden;
}
/* Flyout dikawal oleh Alpine x-show="hovered" — tiada CSS hover diperlukan */
/* Flyout tersembunyi secara default melalui Alpine x-show */

.sf-flyout-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.4);
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 4px 8px 6px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    margin-bottom: 4px;
}
.sf-flyout-sub-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255,255,255,.65);
    font-size: 12px;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-align: left;
    white-space: nowrap;
}
.sf-flyout-sub-btn:hover {
    background: rgba(201,168,76,.1);
    color: var(--sf-accent, #c9a84c);
}

/* ── Avatar dropdown ────────────────────────────────────────────────────── */
.sf-avatar-dropdown { position: relative; }

.sf-avatar-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    position: relative;
    z-index: 501;  /* atas panel supaya tiada gap */
}
.sf-avatar-trigger:hover,
.sf-avatar-dropdown:hover .sf-avatar-trigger { background: rgba(255,255,255,.07); }

.sf-avatar-dropdown-panel {
    position: absolute;
    top: 100%;          /* betul-betul rapat bawah trigger */
    right: 0;
    min-width: 220px;
    background: #1a1c28;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 0 0 12px 12px;  /* bucu atas lurus, bawah bulat */
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
    z-index: 500;
    overflow: hidden;
}

.sf-dropdown-header {
    padding: 14px 16px 12px;
    background: rgba(255,255,255,.05);
}

.sf-dropdown-divider {
    height: 1px;
    background: rgba(255,255,255,.07);
    margin: 4px 0;
}

.sf-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 16px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.65);
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-align: left;
}
.sf-dropdown-item:hover:not(:disabled) {
    background: rgba(255,255,255,.05);
    color: #f0ece4;
}
.sf-dropdown-item:disabled {
    opacity: .4;
    cursor: default;
}
.sf-dropdown-item.danger:hover {
    background: rgba(248,113,113,.08);
    color: #f87171;
}
.sf-dropdown-item .bi { font-size: 15px; flex-shrink: 0; }

.sf-dropdown-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.35);
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: auto;
}

/* ── Bootstrap Dropdown flyout untuk sidebar ────────────────────────────── */
.sf-admin-sidebar .sf-icon-only {
    justify-content: center;
    padding: 9px;
    width: 100%;
}

.sf-flyout-menu {
    background: #1a1c28 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.45) !important;
    padding: 6px !important;
    min-width: 180px;
    margin-left: 4px !important;
    z-index: 9999 !important;  /* atas semua elemen */
}

.sf-flyout-title {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    padding: 4px 10px 8px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    margin-bottom: 4px;
}

.sf-flyout-menu .sf-flyout-sub-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255,255,255,.65);
    font-size: 12px;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-align: left;
    white-space: nowrap;
}
.sf-flyout-menu .sf-flyout-sub-btn:hover {
    background: rgba(201,168,76,.1);
    color: var(--sf-accent, #c9a84c);
}

/* ── Canvas page layout ──────────────────────────────────────────────────── */
.sf-canvas-page {
    padding: 28px 32px;
    max-width: 100%;
    overflow-y: auto;
}

.sf-canvas-header { margin-bottom: 24px; }

.sf-canvas-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--sf-text, #1a1a2e);
    margin: 0 0 4px;
}

.sf-canvas-subtitle {
    font-size: 13px;
    color: var(--sf-muted, #6b7280);
    margin: 0;
}

/* ── Layout wrap (Rekaletak canvas) ─────────────────────────────────────── */
.sf-layout-wrap {
    display: flex;
    height: 100%;
    overflow: hidden;
}

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.sf-filter-bar { background: #ffffff; border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 20px; width: 100%; margin-bottom: 20px;}

.sf-filter-search {
    position: relative;
    flex: 1;
    min-width: 200px;
}
.sf-filter-search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 14px;
}
.sf-filter-search input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    transition: border-color .15s;
}
.sf-filter-search input:focus { border-color: var(--sf-accent, #c9a84c); }

.sf-filter-select {
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
}
.sf-filter-select:focus { border-color: var(--sf-accent, #c9a84c); }

.sf-filter-reset {
    padding: 8px 12px;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 12px;
    color: #6b7280;
    cursor: pointer;
    transition: all .15s;
}
.sf-filter-reset:hover { border-color: #f87171; color: #f87171; }

.sf-filter-count { font-size: 12px; color: #9ca3af; }

/* ── Property card ───────────────────────────────────────────────────────── */
.sf-prop-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .2s, border-color .2s;
}
.sf-prop-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); border-color: #d1d5db; }

.sf-prop-card-img {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #f3f4f6;
}
.sf-prop-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sf-prop-card-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 3px; }

.sf-prop-card-featured {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(0,0,0,.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fbbf24;
    font-size: 13px;
}

.sf-prop-card-body { padding: 14px 16px; }

.sf-prop-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sf-prop-card-location {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sf-prop-card-specs {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #6b7280;
}
.sf-prop-card-specs span { display: flex; align-items: center; gap: 4px; }

.sf-prop-card-price { font-size: 15px; font-weight: 700; color: var(--sf-accent, #c9a84c); }

/* ── Article card ────────────────────────────────────────────────────────── */
.sf-article-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .2s;
}
.sf-article-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }

.sf-article-card-img { aspect-ratio: 16/9; overflow: hidden; background: #f3f4f6; }
.sf-article-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sf-article-card-no-img {
    aspect-ratio: 16/9;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #d1d5db;
}

.sf-article-card-body { padding: 14px 16px; }

.sf-article-type-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 8px;
}

.sf-article-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sf-article-card-excerpt {
    font-size: 12px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.sf-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}
.sf-empty-state i { font-size: 48px; display: block; margin-bottom: 12px; }
.sf-empty-state p { font-size: 14px; margin-bottom: 16px; }

/* ── Form sections ───────────────────────────────────────────────────────── */
.sf-form-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px 24px;
}

.sf-form-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #9ca3af;
    margin-bottom: 16px;
}

.sf-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.sf-input {
    padding: 9px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    color: #111827;
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.sf-input:focus {
    border-color: var(--sf-accent, #c9a84c);
    box-shadow: 0 0 0 3px rgba(201,168,76,.12);
}

.sf-select {
    padding: 9px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    color: #111827;
    background: #fff;
    outline: none;
    cursor: pointer;
    transition: border-color .15s;
}
.sf-select:focus { border-color: var(--sf-accent, #c9a84c); }

.sf-toggle-btn { background: rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.10); color: #374151; border-radius: 6px; font-size: 12px; padding: 4px 10px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.sf-toggle-btn:hover { background: rgba(0,0,0,.09); }
.sf-toggle-btn.active { background: var(--sf-accent, #c9a84c); border-color: var(--sf-accent, #c9a84c); color: #fff; }

.sf-hint {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
    margin-bottom: 0;
}

.sf-btn-danger {
    color: #dc2626;
    border: 1px solid rgba(220,38,38,.2);
    background: transparent;
    transition: all .15s;
}
.sf-btn-danger:hover { background: rgba(220,38,38,.08); border-color: #dc2626; }

/* ── Layout shell (canvas + right panel) ───────────────────────────────── */
.sf-layout-pane {
    display: flex;
}

.sf-rpanel-tab {
    display: flex;
    flex-direction: column;
}

.sf-layout-shell {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.sf-layout-canvas {
    flex: 1;
    overflow-y: auto;
    min-width: 0;
    min-height: 0;
    background: var(--sf-bg);
}

/* ── Right panel sections ───────────────────────────────────────────────── */
.sf-rpanel-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
    padding: 10px 12px 6px;
    display: flex;
    align-items: center;
}

.sf-rpanel-top {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

.sf-grid-drop-box {
    border: 1px dashed rgba(201,168,76,.3);
    border-radius: 14px;
    padding: 12px;
    margin: 0 8px 12px;
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.9);
    cursor: default;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sf-grid-drop-box-empty {
    cursor: grab;
}

.sf-grid-drop-box-empty:active {
    cursor: grabbing;
}

.sf-grid-drop-box-inactive {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.15);
    backdrop-filter: blur(4px);
}

.sf-grid-drop-box-icon {
    width: 32px;
    min-width: 32px;
    height: 32px;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    display: grid;
    place-items: center;
    color: var(--sf-accent);
}

.sf-grid-drop-box-title {
    font-size: 12px;
    font-weight: 700;
}

.sf-grid-drop-box-status {
    color: var(--sf-accent);
}

.sf-grid-drop-box-sub {
    font-size: 11px;
    color: rgba(255,255,255,.6);
}

.sf-palette-list { padding: 0 8px 8px; }

/* Divider between palette and settings */
.sf-rpanel-divider {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: rgba(201,168,76,.08);
    border-top: 1px solid rgba(201,168,76,.2);
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(201,168,76,.7);
}

/* Block settings bottom section */
.sf-rpanel-bottom {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

.sf-rpanel-settings-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: #2c2f3e;
}

.sf-rpanel-settings-body {
    padding: 8px 12px 24px 12px;
}

.sf-rpanel-settings-footer {
    padding: 10px 12px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.sf-rp-field { margin-bottom: 14px; }

.sf-rp-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-bottom: 4px;
}

/* Hint when no block selected */
.sf-rpanel-hint {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: .3;
    padding: 20px;
}
.sf-rpanel-hint i { font-size: 28px; color: rgba(255,255,255,.4); margin-bottom: 8px; }
.sf-rpanel-hint p { font-size: 11px; color: rgba(255,255,255,.4); text-align: center; margin: 0; }


/* ── Right panel dark overrides ─────────────────────────────────────────── */
.sf-builder-canvas-wrap .sf-right-panel .form-label-sf {
    color: rgba(255,255,255,.55);
}
.sf-builder-canvas-wrap .sf-right-panel .form-control-sf,
.sf-builder-canvas-wrap .sf-right-panel .form-select-sf {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.12);
    color: #f0ece4;
}
.sf-builder-canvas-wrap .sf-right-panel .form-control-sf::placeholder {
    color: rgba(255,255,255,.25);
}
.sf-builder-canvas-wrap .sf-right-panel hr {
    border-color: rgba(255,255,255,.08);
}

/* ══ FORM PAGE LAYOUT ════════════════════════════════════════════════════ */
.sf-form-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #f4f5f7;
}

.sf-form-page-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

.sf-form-page-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}
.sf-form-page-sub {
    font-size: 12px;
    color: #9ca3af;
    margin: 0;
}

.sf-form-back-btn {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #374151;
    cursor: pointer;
    font-size: 16px;
    transition: background .15s;
    flex-shrink: 0;
}
.sf-form-back-btn:hover { background: #e5e7eb; }

/* 3-column body */
.sf-form-page-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    padding: 20px 24px;
    overflow-y: auto;
    align-items: start;
}

.sf-form-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Cards */
.sf-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
}
.sf-card-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #6b7280;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
}

/* Featured card */
.sf-card-featured {
    border: 2px solid #e5e7eb;
    transition: border-color .2s, background .2s;
}
.sf-card-featured.featured-on {
    border-color: #fbbf24;
    background: #fffbeb;
}
.sf-featured-icon { font-size: 28px; flex-shrink: 0; }

/* Fields */
.sf-field { margin-bottom: 12px; }
.sf-field:last-child { margin-bottom: 0; }

.sf-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 5px;
}
.sf-label-hint {
    font-size: 11px;
    font-weight: 400;
    color: #9ca3af;
}
.sf-required { color: #ef4444; margin-left: 2px; }

.sf-input {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    color: #111827;
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.sf-input:focus {
    border-color: var(--sf-accent, #c9a84c);
    box-shadow: 0 0 0 3px rgba(201,168,76,.1);
}
.sf-input-num { text-align: center; }
.sf-textarea { resize: vertical; min-height: 100px; }
.sf-hint { font-size: 11px; color: #9ca3af; margin: 4px 0 0; }

.sf-select {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    color: #111827;
    background: #fff;
    outline: none;
    cursor: pointer;
    transition: border-color .15s;
}
.sf-select:focus { border-color: var(--sf-accent, #c9a84c); }

/* Input prefix/suffix */
.sf-input-prefix, .sf-input-suffix {
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.sf-input-prefix:focus-within, .sf-input-suffix:focus-within {
    border-color: var(--sf-accent, #c9a84c);
    box-shadow: 0 0 0 3px rgba(201,168,76,.1);
}
.sf-input-prefix span, .sf-input-suffix span {
    flex-shrink: 0;
    padding: 8px 10px;
    background: #f9fafb;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    border-right: 1px solid #e5e7eb;
}
.sf-input-suffix span { border-right: none; border-left: 1px solid #e5e7eb; }
.sf-input-prefix input, .sf-input-suffix input {
    flex: 1;
    border: none;
    padding: 8px 11px;
    font-size: 13px;
    color: #111827;
    outline: none;
    background: transparent;
}

/* Spec icon */
.sf-spec-icon { margin-right: 5px; }

/* Badge toggles */
.sf-badge-toggle {
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    user-select: none;
}
.sf-badge-toggle.sf-badge-active { opacity: 1; transform: scale(1.05); }
.sf-badge-toggle.sf-badge-inactive { opacity: .35; }

/* Image preview */
.sf-img-preview {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #f3f4f6;
}
.sf-img-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-img-remove {
    position: absolute;
    top: 6px; right: 6px;
    width: 26px; height: 26px;
    background: rgba(0,0,0,.55);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.sf-img-remove:hover { background: #ef4444; }

/* Action footer card */
.sf-form-action-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
}

@media (max-width: 1100px) {
    .sf-form-page-body { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .sf-form-page-body { grid-template-columns: 1fr; }
}

/* ── Multi-step form: Step Indicator ─────────────────────────────────── */
.sf-steps { display:flex; align-items:flex-start; margin-bottom:32px; }
.sf-step-item { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.sf-step-connector { flex:1; height:2px; background:rgba(0,0,0,.12); margin-top:19px; border-radius:2px; transition:background .4s; min-width:20px; }
.sf-step-connector.done { background:var(--sf-accent); }
.sf-step-circle { width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,.06); border:2px solid rgba(0,0,0,.12); display:flex; align-items:center; justify-content:center; font-size:16px; color:rgba(0,0,0,.3); position:relative; z-index:1; transition:all .3s; flex-shrink:0; }
.sf-step-item.sf-step-active .sf-step-circle { background:var(--sf-accent); border-color:var(--sf-accent); color:#fff; box-shadow:0 2px 12px rgba(0,0,0,.2); }
.sf-step-item.sf-step-done .sf-step-circle { background:rgba(0,0,0,.04); border-color:var(--sf-accent); color:var(--sf-accent); }
.sf-step-label { font-size:11px; font-weight:600; color:rgba(0,0,0,.3); margin-top:6px; text-align:center; white-space:nowrap; }
.sf-step-item.sf-step-active .sf-step-label { color:var(--sf-accent); }
.sf-step-item.sf-step-done  .sf-step-label { color:rgba(0,0,0,.55); }

/* ── Drop Zone ───────────────────────────────────────────────────────── */
/* ── Profile Form ────────────────────────────────────────────────────── */
.sf-pf-card { background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:10px; padding:20px 22px; }
.sf-pf-card-title { font-size:11px; font-weight:700; color:var(--sf-muted,#6c757d); text-transform:uppercase; letter-spacing:.07em; margin-bottom:16px; display:flex; align-items:center; gap:6px; }
/* info tooltip */
.sf-info-btn { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.1); color:#9ca3af; font-size:11px; cursor:help; flex-shrink:0; transition:background .15s,color .15s,border-color .15s; padding:0; line-height:1; }
.sf-info-btn:hover { background:rgba(155,127,78,.15); color:#9b7f4e; border-color:rgba(155,127,78,.4); }
.sf-info-wrap { position:relative; margin-left:auto; }
.sf-info-popup { position:absolute; top:calc(100% + 10px); right:0; width:300px; background:#1e2130; border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:0; z-index:300; box-shadow:0 16px 40px rgba(0,0,0,.55); pointer-events:none; text-align:left; overflow:hidden; }
.sf-info-popup::before { content:''; position:absolute; top:-6px; right:8px; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid rgba(255,255,255,.1); }
.sf-info-popup-header { background:rgba(255,255,255,.05); padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.07); }
.sf-info-popup-title { font-size:12px; font-weight:700; color:#f0ece4; letter-spacing:.03em; }
.sf-info-popup-body { padding:12px 14px; font-size:12px; color:#9ca3af; line-height:1.6; }
.sf-info-mockup { background:#0d0f1a; border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,.08); margin-top:10px; }
.sf-info-mockup-bar { background:#1a1c2e; padding:6px 10px; display:flex; align-items:center; gap:6px; border-bottom:1px solid rgba(255,255,255,.06); }
.sf-info-mockup-dots { display:flex; gap:4px; }
.sf-info-mockup-dots span { width:7px; height:7px; border-radius:50%; display:block; }
.sf-info-mockup-url { flex:1; background:rgba(255,255,255,.05); border-radius:3px; padding:3px 8px; font-family:monospace; font-size:10px; color:#9ca3af; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sf-info-mockup-content { padding:10px 12px; }
.sf-pf-avatar-preview { width:90px; height:90px; border-radius:50%; border:2px solid var(--sf-accent,#9b7f4e); background:rgba(0,0,0,.05); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.sf-pf-tab-row { display:flex; gap:4px; }
.sf-pf-tab { font-size:12px; font-weight:600; padding:5px 12px; border-radius:6px; border:1px solid rgba(0,0,0,.12); background:transparent; color:var(--sf-muted,#6c757d); cursor:pointer; transition:all .15s; }
.sf-pf-tab-active { background:var(--sf-accent,#9b7f4e); border-color:var(--sf-accent,#9b7f4e); color:#fff; }
.sf-pf-upload-zone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:14px 16px; border:1.5px dashed rgba(0,0,0,.15); border-radius:8px; cursor:pointer; transition:border-color .2s; width:100%; text-align:center; }
.sf-pf-upload-zone:hover { border-color:var(--sf-accent,#9b7f4e); }
.sf-pf-domain-wrap { display:flex; align-items:center; border:1px solid #e5e7eb; border-radius:7px; overflow:hidden; }
.sf-pf-domain-prefix { padding:0 10px; background:#f3f4f6; font-size:12px; color:#6b7280; border-right:1px solid #e5e7eb; white-space:nowrap; height:38px; display:flex; align-items:center; }
.sf-pf-domain-input { border:none !important; border-radius:0 !important; flex:1; min-width:0; }
.sf-pf-domain-input:focus { box-shadow:none !important; outline:none; }
.sf-pf-domain-info { background:rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.06); border-radius:7px; padding:12px 14px; margin-top:10px; }
.sf-pf-domain-info-title { font-size:12px; font-weight:600; color:#374151; margin-bottom:6px; }

.sf-drop-zone { border:2px dashed rgba(0,0,0,.18); border-radius:12px; padding:40px 24px; text-align:center; cursor:pointer; transition:all .2s; background:rgba(0,0,0,.02); color:var(--sf-muted); }
.sf-drop-zone:hover,.sf-drop-zone.drag-over { border-color:var(--sf-accent); background:rgba(0,0,0,.04); }
.sf-upload-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-top:16px; }
.sf-upload-thumb { position:relative; border-radius:8px; overflow:hidden; background:rgba(0,0,0,.05); aspect-ratio:4/3; cursor:grab; }
.sf-upload-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.sf-upload-thumb-overlay { position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .2s; display:flex; align-items:center; justify-content:center; gap:8px; }
.sf-upload-thumb:hover .sf-upload-thumb-overlay { opacity:1; }
.sf-cover-badge { position:absolute; top:4px; left:4px; font-size:9px; font-weight:700; background:var(--sf-accent); color:#fff; padding:2px 6px; border-radius:4px; letter-spacing:.04em; text-transform:uppercase; }