/* =====================================================
   NAX Word-Style Live Editor
   ===================================================== */

/* ── Body offset for fixed toolbar ───────────────── */
.nax-editing-site { 
    padding-top: 130px !important; 
    transition: padding-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nax-editing-site.toolbar-collapsed { 
    padding-top: 100px !important; 
}

/* Push navbar down when toolbar is visible */
.nax-editing-site .navbar {
    top: 50px;
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nax-editing-site.toolbar-collapsed .navbar {
    top: 0;
}
.nax-show-toolbar-btn {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 100000;
    background: #4f46e5;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    font-weight: 500;
    display: none; /* hidden by default */
}
.nax-show-toolbar-btn:hover { background: #4338ca; }


.nax-toolbar.show {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    transform: none;
    max-width: 100%;
    height: 50px;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
    padding: 0 1rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nax-toolbar.show.collapsed { transform: translateY(-100%); }
.nax-toolbar.show::-webkit-scrollbar { display: none; }

/* ── Extra toolbar button variants ──────────────── */
.nax-tb-add {
    background: rgba(139,92,246,.15) !important;
    border: 1px solid rgba(139,92,246,.3) !important;
    color: #a78bfa !important;
    width: auto !important;
    padding: 0 .6rem !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    white-space: nowrap;
}
.nax-tb-add:hover { background: rgba(139,92,246,.3) !important; color:#c4b5fd !important; }

.nax-tb-save-btn {
    background: linear-gradient(135deg,#8b5cf6,#3b82f6) !important;
    color: #fff !important;
    width: auto !important;
    padding: 0 .75rem !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
}
.nax-tb-view { color: #34d399 !important; width:auto !important; padding:0 .6rem !important; font-size:.75rem !important; }
.nax-tb-logout-btn { color: #f87171 !important; font-size: 1rem !important; }

/* ── Section "Add" buttons ────────────────────────── */
.section-header { display:flex; align-items:center; justify-content:space-between; }

.nax-section-add-btn {
    padding: .4rem 1rem;
    background: rgba(139,92,246,.15);
    border: 1px solid rgba(139,92,246,.3);
    border-radius: 8px;
    color: #a78bfa;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    font-family: 'Inter', sans-serif;
}
.nax-section-add-btn:hover { background: rgba(139,92,246,.3); color: #c4b5fd; transform: translateY(-1px); }

/* ── Empty hint ────────────────────────────────────── */
.nax-empty-hint {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #475569;
    font-size: .9rem;
    font-family: 'Inter', sans-serif;
    border: 2px dashed rgba(255,255,255,.06);
    border-radius: 14px;
}
.nax-empty-hint strong { color: #a78bfa; }



/* ── Edit Mode Toggle FAB ──────────────────────── */
.nax-edit-fab {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 99999;
    font-family: 'Inter', sans-serif;
}

.nax-edit-fab-btn {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
    border: none;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(139,92,246,.65);
    transition: all .25s;
    display: flex; align-items: center; justify-content: center;
}
.nax-edit-fab-btn:hover { transform: scale(1.08); box-shadow: 0 6px 30px rgba(139,92,246,.8); }
.nax-edit-fab-btn.editing {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 24px rgba(16,185,129,.65);
}
.nax-edit-fab-btn.editing:hover { box-shadow: 0 6px 30px rgba(16,185,129,.8); }

.nax-edit-fab-label {
    position: absolute;
    right: 64px;
    top: 50%;
    transform: translateY(-50%);
    background: #0f0f1a;
    border: 1px solid rgba(255,255,255,.1);
    color: #e2e8f0;
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 12px rgba(0,0,0,.5);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}
.nax-edit-fab:hover .nax-edit-fab-label { opacity: 1; }

/* ── Speed-dial menu ──────────────────────────── */
.nax-fab-menu {
    position: absolute;
    bottom: 64px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all .25s cubic-bezier(.4,0,.2,1);
}
.nax-fab-menu.open { opacity: 1; pointer-events: all; transform: translateY(0); }

.nax-fab-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .9rem .5rem .7rem;
    background: #0f0f1a;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    color: #e2e8f0; font-size: .8rem; font-weight: 600;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    box-shadow: 0 2px 14px rgba(0,0,0,.5);
    transition: all .2s; font-family: 'Inter', sans-serif;
}
.nax-fab-item:hover { background: rgba(139,92,246,.15); border-color: rgba(139,92,246,.4); transform: translateX(-3px); }
.nax-fab-save  { border-color: rgba(16,185,129,.35); }
.nax-fab-logout { color: #f87171; }
.nax-fab-logout:hover { background: rgba(239,68,68,.1) !important; border-color: rgba(239,68,68,.3) !important; }

/* ── WORD-STYLE FLOATING TOOLBAR ───────────────── */
.nax-toolbar {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    border: 1px solid rgba(139,92,246,.3);
    border-radius: 12px;
    padding: .45rem .6rem;
    display: flex;
    align-items: center;
    gap: .2rem;
    z-index: 999998;
    box-shadow: 0 8px 40px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
    font-family: 'Inter', sans-serif;
    transition: top .25s cubic-bezier(.4,0,.2,1), opacity .2s;
    opacity: 0;
    pointer-events: none;
    flex-wrap: wrap;
    max-width: calc(100vw - 2rem);
}
.nax-toolbar.show {
    top: 8px;
    opacity: 1;
    pointer-events: all;
}

/* Toolbar groups separated by dividers */
.nax-tb-group {
    display: flex; align-items: center; gap: .15rem;
}
.nax-tb-sep {
    width: 1px; height: 22px;
    background: rgba(255,255,255,.1);
    margin: 0 .3rem;
    flex-shrink: 0;
}

/* Toolbar buttons */
.nax-tb-btn {
    width: 32px; height: 32px;
    border: none; border-radius: 7px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer; font-size: .95rem;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
    font-family: 'Inter', sans-serif;
    flex-shrink: 0;
    position: relative;
}
.nax-tb-btn:hover { background: rgba(255,255,255,.08); color: #f1f5f9; }
.nax-tb-btn.active { background: rgba(139,92,246,.25); color: #a78bfa; }
.nax-tb-btn[title]:hover::after {
    content: attr(title);
    position: absolute;
    top: 38px; left: 50%;
    transform: translateX(-50%);
    background: #0f0f1a;
    border: 1px solid rgba(255,255,255,.1);
    color: #e2e8f0;
    padding: .2rem .5rem;
    border-radius: 5px;
    font-size: .65rem;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

/* Font size input */
.nax-font-size {
    width: 44px; height: 28px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    color: #e2e8f0;
    font-size: .78rem;
    text-align: center;
    outline: none;
    font-family: 'Inter', sans-serif;
    padding: 0 .25rem;
}
.nax-font-size:focus { border-color: #8b5cf6; }

/* Font family select */
.nax-font-sel {
    height: 28px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    color: #e2e8f0;
    font-size: .72rem;
    outline: none;
    padding: 0 .4rem;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    max-width: 110px;
}
.nax-font-sel option { background: #1a1a2e; }
.nax-font-sel:focus { border-color: #8b5cf6; }

/* Heading select */
.nax-heading-sel {
    height: 28px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    color: #e2e8f0;
    font-size: .72rem;
    outline: none;
    padding: 0 .4rem;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    max-width: 90px;
}
.nax-heading-sel option { background: #1a1a2e; }

/* Color pickers */
.nax-color-wrap { position: relative; }
.nax-color-btn {
    width: 32px; height: 32px;
    border: none; border-radius: 7px;
    background: transparent;
    cursor: pointer;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1px; padding: 3px;
}
.nax-color-btn:hover { background: rgba(255,255,255,.08); }
.nax-color-btn .icon { font-size: .85rem; line-height: 1; color: #94a3b8; }
.nax-color-swatch { width: 18px; height: 3px; border-radius: 2px; }
.nax-color-inp { position: absolute; opacity: 0; width: 0; height: 0; }

/* ── Edit mode: editable area styling ──────────── */
body.nax-editing [data-editable] {
    outline: 2px dashed rgba(139,92,246,.3);
    outline-offset: 2px;
    border-radius: 4px;
    cursor: text;
    transition: outline .15s;
}
body.nax-editing [data-editable]:hover {
    outline-color: #8b5cf6;
    background: rgba(139,92,246,.05) !important;
}
body.nax-editing [data-editable]:focus {
    outline: 2px solid #8b5cf6;
    background: rgba(139,92,246,.08) !important;
}

/* ── Delete X on cards ──────────────────────────── */
.nax-item { position: relative; }
.nax-del-x {
    position: absolute; top: .5rem; right: .5rem;
    width: 28px; height: 28px;
    background: rgba(239,68,68,.9); border: none;
    color: #fff; border-radius: 50%; font-size: .75rem;
    cursor: pointer; display: none;
    align-items: center; justify-content: center;
    z-index: 20; transition: transform .15s;
    font-family: 'Inter',sans-serif;
}
body.nax-editing .nax-item:hover .nax-del-x { display: flex; }
.nax-del-x:hover { transform: scale(1.15); background: #ef4444; }

/* ── Add image placeholder ──────────────────────── */
.nax-add-image-btn {
    border: 2px dashed rgba(139,92,246,.35);
    border-radius: 10px; padding: 1.25rem;
    text-align: center; cursor: pointer;
    color: #64748b; font-size: .82rem;
    transition: all .2s; margin-bottom: .75rem;
    font-family: 'Inter', sans-serif;
}
body.nax-editing .nax-add-image-btn:hover { border-color:#8b5cf6; color:#a78bfa; background:rgba(139,92,246,.05); }

/* clickable images */
body.nax-editing img[data-imgclick] { cursor: pointer; transition: opacity .15s, box-shadow .15s; }
body.nax-editing img[data-imgclick]:hover { opacity:.78; box-shadow:0 0 0 3px #8b5cf6; }

/* ── Save bar ────────────────────────────────────── */
.nax-save-bar {
    position: fixed; bottom: -60px; left: 50%;
    transform: translateX(-50%);
    background: #0f0f1a; border: 1px solid rgba(139,92,246,.3);
    border-radius: 999px; padding: .55rem 1rem;
    display: flex; align-items: center; gap: .75rem;
    z-index: 99998;
    box-shadow: 0 6px 30px rgba(0,0,0,.5);
    font-family: 'Inter', sans-serif; font-size: .8rem; color: #94a3b8;
    transition: bottom .3s cubic-bezier(.4,0,.2,1); white-space: nowrap;
}
.nax-save-bar.show { bottom: 1.5rem; }
.nax-save-bar span { color: #f59e0b; font-weight: 600; }
.nax-save-bar-btn {
    padding: .35rem .9rem;
    background: linear-gradient(135deg,#8b5cf6,#3b82f6);
    border: none; border-radius: 999px;
    color: #fff; font-size: .78rem; font-weight: 700;
    cursor: pointer; font-family: 'Inter', sans-serif; transition: all .2s;
}
.nax-save-bar-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139,92,246,.5); }
.nax-save-bar-discard { background: none; border: none; color: #475569; font-size: .8rem; cursor: pointer; font-family: 'Inter', sans-serif; }
.nax-save-bar-discard:hover { color: #f87171; }

/* ── Toast ───────────────────────────────────────── */
.nax-toast {
    position: fixed; bottom: 5rem; left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: .6rem 1.2rem; border-radius: 999px;
    font-family: 'Inter', sans-serif; font-size: .82rem; font-weight: 600;
    z-index: 999999; opacity: 0; transition: all .3s; pointer-events: none;
    box-shadow: 0 4px 20px rgba(0,0,0,.5); white-space: nowrap;
}
.nax-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.nax-toast.success { background: #10b981; color: #fff; }
.nax-toast.error   { background: #ef4444; color: #fff; }
.nax-toast.info    { background: #3b82f6; color: #fff; }

/* ── Dialog ──────────────────────────────────────── */
.nax-dialog-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.65);
    backdrop-filter: blur(5px); z-index: 999997;
    display: none; align-items: center; justify-content: center; padding: 1rem;
}
.nax-dialog-overlay.open { display: flex; }
.nax-dialog {
    background: #0f0f1a; border: 1px solid rgba(139,92,246,.25);
    border-radius: 18px; width: 100%; max-width: 460px;
    box-shadow: 0 20px 60px rgba(0,0,0,.7); font-family: 'Inter', sans-serif;
    animation: dlgIn .2s ease;
}
@keyframes dlgIn { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
.nax-dialog-header {
    padding: 1.1rem 1.4rem .9rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 700; font-size: .95rem; color: #f1f5f9;
}
.nax-dialog-close { background: rgba(255,255,255,.06); border: none; color: #64748b; width: 28px; height: 28px; border-radius: 7px; cursor: pointer; }
.nax-dialog-close:hover { background: rgba(239,68,68,.15); color: #f87171; }
.nax-dialog-body { padding: 1.1rem 1.4rem; }
.nax-dialog-footer { padding: .9rem 1.4rem 1.1rem; display: flex; justify-content: flex-end; gap: .6rem; border-top: 1px solid rgba(255,255,255,.06); }
.nax-btn-cancel { padding: .5rem 1rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; color: #64748b; font-family: 'Inter', sans-serif; font-size: .85rem; cursor: pointer; }
.nax-btn-confirm { padding: .5rem 1.2rem; background: linear-gradient(135deg,#8b5cf6,#3b82f6); border: none; border-radius: 8px; color: #fff; font-family: 'Inter', sans-serif; font-size: .85rem; font-weight: 700; cursor: pointer; transition: all .2s; }
.nax-btn-confirm:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(139,92,246,.5); }
.dlg-group { margin-bottom: .9rem; }
.dlg-label { display:block; font-size:.7rem; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.07em; margin-bottom:.3rem; }
.dlg-input { width:100%; padding:.65rem .85rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:8px; color:#f1f5f9; font-family:'Inter',sans-serif; font-size:.875rem; outline:none; box-sizing:border-box; transition:border-color .2s; }
.dlg-input:focus { border-color:#8b5cf6; }
.dlg-input::placeholder { color:#475569; }
textarea.dlg-input { resize:vertical; min-height:80px; }
select.dlg-input option { background:#1a1a2e; }
.dlg-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }

@keyframes spin { to{transform:rotate(360deg)} }
.nax-spinner { display:inline-block; width:13px; height:13px; border:2px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; vertical-align:middle; margin-right:3px; }

@media (max-width:480px) {
    .nax-edit-fab { bottom:1rem; right:1rem; }
    .nax-toolbar { border-radius:0 0 12px 12px; width:100%; max-width:100%; left:0; transform:none; border-left:none; border-right:none; }
    .nax-save-bar { width:calc(100% - 2rem); justify-content:center; }
}

.nax-placeholder-text:empty:before { content: attr(data-placeholder); opacity: 0.5; font-style: italic; pointer-events: none; }


/* Fix for gradient text invisibility during edit */
[contenteditable="true"]:focus {
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}