/* ==========================================================================
   Neo Store — Preview theo Font (preview-fonts.html)
   Layout riêng cho trang "gõ 1 lần, xem tất cả font": text step + color
   step giữ style của design.css (biến --panel/--accent/...), phần bảng
   preview font là layout mới hoàn toàn.
   ========================================================================== */

/* preview-fonts.html doesn't load bootstrap.css (index.html's global
   box-sizing:border-box reset lives there), so any width:100% + padding/
   border element here overflows its container under the default
   content-box model — #pf-content textarea included. Scope the reset to
   this page's own elements instead of a bare *, so it can't fight
   index.html's Bootstrap reset if this stylesheet is ever loaded there too. */
.box-content,
.box-content *,
.box-content *::before,
.box-content *::after {
    box-sizing: border-box;
}

.page-switcher {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.page-switcher a {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.page-switcher a:hover {
    color: var(--text);
    border-color: var(--accent);
}

.page-switcher a.active {
    background: rgba(34,211,238,.12);
    border-color: var(--accent);
    color: var(--accent);
}

/* ---- Layout: controls (text + color) trên cùng, bảng preview font dưới ---- */
.pf-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

@media (min-width: 700px) {
    .pf-controls {
        flex-direction: row;
    }
    .pf-controls > * {
        flex: 1 1 0;
    }
}

.pf-panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}

.pf-panel > p:first-child,
.pf-panel-heading {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 var(--space-2);
}

#pf-content {
    width: 100%;
    min-height: 90px;
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    padding: 14px 16px;
    font-size: 16px;
    resize: vertical;
}

#pf-content::placeholder {
    color: var(--text-muted);
}

#pf-content:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(34,211,238,.22);
}

#pf-viet-note {
    display: none;
    color: var(--text-muted);
    font-size: 12px;
    margin: 6px 0 0;
}

/* ---- Color options: white / green / blue, applied as text color, not a
   neon-glow effect (that's the .shadow-* system on index.html). ---- */
.pf-color-options {
    display: flex;
    gap: var(--space-1);
}

.pf-color-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--panel-alt);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    color: var(--text);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.pf-color-btn .pf-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.35);
}

.pf-color-btn.active {
    border-color: var(--accent);
    background: rgba(34,211,238,.12);
    box-shadow: 0 0 0 1px var(--accent) inset;
}

/* ---- Font size slider: scales every row's preview text together (the
   catalog's per-font % is the base, this is a multiplier on top). ---- */
.pf-font-size {
    font-weight: 600;
    color: var(--text);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
    font-size: 13px;
}

.pf-font-size .pf-fontsize-label,
.pf-zoom-fontsize-label {
    color: var(--accent);
}

input[type="range"].pf-fontsize,
input[type="range"].pf-zoom-fontsize {
    width: 100%;
    margin-top: 10px;
    accent-color: var(--accent);
}

/* ---- Background options: pick which shop-interior photo backs the whole
   preview table + zoom modal (.pf-storefront-bg's background-image, set
   inline via JS — see pfSetBackground in preview-fonts.js). ---- */
.pf-bg-options {
    display: flex;
    gap: var(--space-1);
}

.pf-bg-btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: var(--panel-alt);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px;
    color: var(--text);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
}

.pf-bg-thumb {
    width: 100%;
    height: 44px;
    border-radius: var(--radius-sm);
    background-size: cover;
    background-position: center;
}

.pf-bg-btn.active {
    border-color: var(--accent);
    background: rgba(34,211,238,.12);
    box-shadow: 0 0 0 1px var(--accent) inset;
}

/* Text-color rules live on .pf-row/.pf-zoom-panel (the pf-text-* class is
   set on the row/panel, not the text span) so the font-name label below
   can share the same tonal family via a second rule per color — a subtle
   dark drop-shadow (all 4 colors) keeps every color legible on the
   storefront photo. Label stays visually secondary (smaller, translucent)
   but matches light/dark family so it never clashes with the preview text
   above it (e.g. a bright gray label next to black preview text). */
.pf-row.pf-text-white .pf-row-text,
.pf-zoom-panel.pf-text-white .pf-zoom-text {
    color: #f8f9fc;
    text-shadow: 0 2px 6px rgba(0,0,0,.55);
}
.pf-row.pf-text-white .pf-row-label,
.pf-zoom-panel.pf-text-white .pf-zoom-label {
    color: rgba(248,249,252,.65);
}

.pf-row.pf-text-black .pf-row-text,
.pf-zoom-panel.pf-text-black .pf-zoom-text {
    color: #0a0a0a;
    text-shadow: 0 1px 0 rgba(255,255,255,.25);
    -webkit-text-stroke: .4px rgba(255,255,255,.35);
}
.pf-row.pf-text-black .pf-row-label,
.pf-zoom-panel.pf-text-black .pf-zoom-label {
    color: rgba(10,10,10,.7);
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.pf-row.pf-text-red .pf-row-text,
.pf-zoom-panel.pf-text-red .pf-zoom-text {
    color: #ff4d5e;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.pf-row.pf-text-red .pf-row-label,
.pf-zoom-panel.pf-text-red .pf-zoom-label {
    color: rgba(255,150,158,.75);
}

.pf-row.pf-text-blue .pf-row-text,
.pf-zoom-panel.pf-text-blue .pf-zoom-text {
    color: #4db2ff;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.pf-row.pf-text-blue .pf-row-label,
.pf-zoom-panel.pf-text-blue .pf-zoom-label {
    color: rgba(160,209,255,.75);
}

/* ---- Storefront background: defaults to a flat neutral gray (#3a3d42)
   that keeps all 4 text colors (white/black/red/blue) readable without a
   photo — pfSetBackground() in preview-fonts.js overrides this inline with
   a real shop photo when the user picks one from the "Chọn nền" panel.
   New photos just need a new .pf-bg-btn (preview-fonts.html) and a
   matching file in themes/default/font-preview/background/. ---- */
.pf-storefront-bg {
    background: #3a3d42;
}

/* ---- Font preview grid: numbered cell per font, big preview text, font
   name printed below it — mirrors the reference "1. Ngọc Hân / Fz Sign
   Rathi V2" style catalog sheet the client asked to match. No gap/border
   between cells — the shop photo shows through as one continuous wall. ---- */
#pf-table {
    margin-top: var(--space-3);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Section header between font groups (neon script vs. chữ nổi/alu-liner) —
   spans the full grid width regardless of column count. */
.pf-group-heading {
    grid-column: 1 / -1;
    background: var(--panel);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 12px var(--space-2);
}

/* Rows sit directly on #pf-table's shared storefront background (no
   per-row fill) so the wall reads as one continuous surface behind all 29
   fonts, like a real shop wall — hover only lifts brightness slightly. */
.pf-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(255,255,255,.03);
    padding: 16px var(--space-2) 14px;
    min-height: 92px;
    overflow: hidden;
    cursor: zoom-in;
    transition: background .12s ease;
}

.pf-row:hover {
    background: rgba(255,255,255,.08);
}

/* PV-FzSignRathi ships a 'dlig' (discretionary ligature) OpenType feature
   that draws the signature-style underline swash seen in the font's
   official sample sheet — browsers only auto-enable 'liga'/'kern' by
   default, so 'dlig' has to be turned on explicitly or the swash never
   renders. Confirmed via GSUB table inspection of FZSIGNRATHI_UPDATE.TTF. */
.pf-row[data-font="PV-FzSignRathi"] .pf-row-text,
.pf-zoom-panel[data-font="PV-FzSignRathi"] .pf-zoom-text {
    font-feature-settings: "dlig" 1, "liga" 1;
    font-variant-ligatures: discretionary-ligatures common-ligatures;
}

/* PV-SVN-Janelotus ships a 'swsh' (Swash) OpenType feature that replaces
   the digits 1-5 (typed anywhere in the text) with 5 independent flourish
   glyphs — a single substitution, not a ligature, so it needs 'swsh'
   turned on specifically (font-variant-ligatures doesn't cover it).
   Confirmed via GSUB table inspection of SVN-JANELOTUS.OTF. */
.pf-row[data-font="PV-SVN-Janelotus"] .pf-row-text,
.pf-zoom-panel[data-font="PV-SVN-Janelotus"] .pf-zoom-text {
    font-feature-settings: "swsh" 1;
}

.pf-row-index {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.pf-row-body {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Font size on each row comes from FONT_CATALOG's per-font % (60–220%) times
   this base — clamp so a 220% font can't blow past its grid cell. The base
   itself scales down on narrow screens via the media query below. */
.pf-row-text {
    font-size: clamp(14px, 30px, 40px);
    line-height: 1.3;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.pf-row-text:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    opacity: .7;
}

.pf-row-label {
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: .02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Đổi đầu"/"Đổi cuối"/"Đổi g" — only rendered for PF_RANDOMIZABLE_FONTS
   (FzSignRathi, SVN-Janelotus). Each button re-rolls only its own position
   independently — the rest keep their current pick. FzSignRathi can render
   1 "Đổi g" button per 'g' found in the text, so wrap instead of overflow. */
.pf-swash-reroll-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.pf-swash-reroll {
    background: var(--panel-alt);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 10px;
    padding: 3px 10px;
    cursor: pointer;
}

.pf-swash-reroll:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Trạng thái "đang bật" của nút toggle "Bật/✓ g6" (chữ g giữa chuỗi) —
   khác với "Đổi đầu"/"Đổi cuối" vốn không có khái niệm bật/tắt. */
.pf-swash-reroll-active {
    border-color: var(--accent);
    background: rgba(34,211,238,.15);
    color: var(--accent);
}

/* Font không hỗ trợ dấu tiếng Việt của text hiện tại -> ẩn hẳn khỏi bảng
   (JS thêm class này thay vì xoá DOM, để show lại tức thời khi xoá dấu). */
.pf-row.pf-unsupported {
    display: none;
}

/* ---- Zoom modal: click a row to focus that font full-screen. ---- */
.pf-zoom {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.pf-zoom.pf-zoom-open {
    display: flex;
}

.pf-zoom-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5,6,10,.88);
}

.pf-zoom-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Kích thước CỐ ĐỊNH (width + height, không phải max-*) — panel không
       tự nở/co theo nội dung. overflow:hidden ở CHÍNH panel (không phải
       auto) vì giờ cuộn xảy ra RIÊNG trong .pf-zoom-text-area — panel chỉ
       là khung ngoài cố định, .pf-zoom-controls-bar (đổi đầu/cuối/g, màu,
       cỡ chữ, nền, quay lại) luôn đứng yên ở đáy, không bị đẩy trôi theo
       khi chữ phóng to (phản ánh trước đó: kéo slider làm cả cụm nút bị
       cuốn theo/khuất khỏi tầm nhìn cùng với chữ). */
    width: min(90vw, 1100px);
    height: min(80vh, 640px);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-4) var(--space-3);
    text-align: center;
    box-shadow: 0 40px 80px -20px rgba(0,0,0,.7);
}

/* Vùng CHỈ chứa chữ preview — flex:1 chiếm hết chỗ còn lại sau khi trừ
   .pf-zoom-controls-bar, tự cuộn riêng khi chữ (đã nhân % slider) to hơn
   không gian này. */
.pf-zoom-text-area {
    flex: 1 1 auto;
    min-height: 0; /* bắt buộc để flex item cho phép overflow:auto con hoạt động, không thì nó tự giãn theo nội dung */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

/* Cố định ở đáy panel — KHÔNG co giãn (flex-shrink:0), luôn giữ nguyên vị
   trí bất kể .pf-zoom-text-area cuộn/phóng to thế nào. */
.pf-zoom-controls-bar {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding-top: var(--space-2);
}

.pf-zoom-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: 0;
    color: var(--text-muted);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}

.pf-zoom-close:hover {
    color: var(--text);
}

/* font-size 120px CỐ ĐỊNH — gốc duy nhất cho mọi dòng font trong modal
   (PF_ZOOM_BASE_FONT_SIZE, preview-fonts.js). Slider "Cỡ chữ" nhân % vào
   đúng số này, không có cơ chế tự "lấp đầy" khung theo kích thước panel
   nữa (bản trước làm chữ luôn phồng to hết cỡ mỗi khi mở modal, không
   theo ý người dùng). white-space:normal + max-width để tên dài tự xuống
   dòng thay vì tràn ngang — biên 75% (không phải 100%) chừa chỗ cho nét
   đuôi swash mảnh của font chữ ký vẽ tràn ra ngoài bounding box logic. */
.pf-zoom-text {
    font-size: 120px;
    line-height: 1.2;
    max-width: 75%;
    white-space: normal;
}

/* Mirrors the row's "Đổi đầu"/"Đổi cuối"/"Đổi g" swash buttons when zoomed
   in. flex-wrap: FzSignRathi can render 1 "Đổi g" button per 'g' in the
   text, so a long name can produce many buttons — must wrap instead of
   overflow the panel horizontally. Kept compact (not bigger than the
   in-table version) so the button row doesn't eat into space meant for
   the enlarged preview text. */
.pf-zoom-swash-controls .pf-swash-reroll-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
}

.pf-zoom-swash-controls .pf-swash-reroll {
    background: var(--panel-alt);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    cursor: pointer;
}

.pf-zoom-swash-controls .pf-swash-reroll:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Đổi màu/nền/cỡ chữ NGAY TRONG modal zoom — dùng chung .pf-color-btn/
   .pf-bg-btn/.pf-fontsize class với 3 panel điều khiển phía trên bảng
   chính (pfSetColor/pfSetBackground/pfApplyFontSize áp dụng đồng thời cho
   cả 2 nơi). Cố tình thu nhỏ MẠNH so với bản gốc phía trên bảng (padding,
   thumbnail, font-size đều giảm) — trong modal, mục tiêu chính là xem chữ
   to, các control chỉ nên chiếm diện tích tối thiểu cần thiết để bấm được,
   không cạnh tranh không gian với phần preview chữ. */
.pf-zoom-own-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    width: 100%;
    max-width: 640px;
}

.pf-zoom-control-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.pf-zoom-control-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pf-zoom-color-options,
.pf-zoom-bg-options {
    display: flex;
    gap: 4px;
}

/* Override .pf-color-btn/.pf-bg-btn (chung với panel gốc phía trên bảng
   chính) chỉ trong phạm vi modal — nút nhỏ hơn nhiều, chỉ đủ để bấm. */
.pf-zoom-color-options .pf-color-btn {
    padding: 4px 8px;
    font-size: 10px;
    gap: 4px;
    border-width: 1px;
}

.pf-zoom-color-options .pf-swatch {
    width: 10px;
    height: 10px;
}

.pf-zoom-bg-options .pf-bg-btn {
    padding: 3px;
    font-size: 9px;
    width: 44px;
}

.pf-zoom-bg-options .pf-bg-thumb {
    height: 20px;
}

.pf-zoom-fontsize {
    width: 100px;
}

.pf-zoom-back {
    margin-top: 6px;
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 14px;
    color: var(--text);
    font-weight: 600;
    font-size: 11px;
    cursor: pointer;
}

.pf-zoom-back:hover {
    border-color: var(--accent);
    color: var(--accent);
}

@media (max-width: 560px) {
    #pf-table {
        grid-template-columns: 1fr;
    }
    .pf-row-text {
        font-size: clamp(14px, 26px, 34px);
    }
}