/*
 * pickytic_style.css
 * Shared design tokens, base reset, and common utility classes
 * for all standalone PickyTic pages (FreeAssessment, OnlineTest, etc.)
 *
 * Pages include this BEFORE their own inline <style> blocks so
 * page-specific rules can freely override these defaults.
 */

/* ══ Design Tokens ══════════════════════════════════════════════════════ */
:root {
    /* ── Brand: Blue ──────────────────────────────── */
    --pt-blue:        #2563eb;
    --pt-blue-dark:   #1e40af;
    --pt-blue-dk:     #1d4ed8;
    --pt-blue-bg:     #eff6ff;
    --pt-blue-light:  #dbeafe;

    /* ── Brand: Orange ────────────────────────────── */
    --pt-orange:      #f97316;
    --pt-orange-dk:   #ea580c;
    --pt-orange-bg:   #fff7ed;
    --pt-orange-bdr:  #fed7aa;

    /* ── Brand: Purple ────────────────────────────── */
    --pt-purple:      #7c3aed;
    --pt-purple-dk:   #6d28d9;
    --pt-purple-bg:   #f5f3ff;
    --pt-purple-lt:   #ede9fe;

    /* ── Brand: Teal / Green / Gold ───────────────── */
    --pt-teal:        #0d9488;
    --pt-teal-bg:     #f0fdfa;
    --pt-green:       #16b777;
    --pt-gold:        #f59e0b;

    /* ── Neutrals ─────────────────────────────────── */
    --pt-text:        #0f172a;
    --pt-dark:        #111827;
    --pt-muted:       #6b7280;
    --pt-border:      #e5e7eb;
    --pt-bg:          #f3f4f6;
    --pt-soft:        #eef7ff;

    /* ── Layout ───────────────────────────────────── */
    --pt-sidebar-w:   260px;
    --pt-header-h:    58px;
    --pt-radius-sm:   8px;
    --pt-radius-md:   12px;
    --pt-radius-lg:   18px;

    /* ── Legacy aliases (keep existing CSS working) ── */
    --blue:           var(--pt-blue);
    --blue-dk:        var(--pt-blue-dk);
    --blue-bg:        var(--pt-blue-bg);
    --blue-light:     var(--pt-blue-light);
    --orange:         var(--pt-orange);
    --orange-dk:      var(--pt-orange-dk);
    --orange-bg:      var(--pt-orange-bg);
    --orange-border:  var(--pt-orange-bdr);
    --purple:         var(--pt-purple);
    --purple-dk:      var(--pt-purple-dk);
    --purple-bg:      var(--pt-purple-bg);
    --purple-light:   var(--pt-purple-lt);
    --teal:           var(--pt-teal);
    --teal-bg:        var(--pt-teal-bg);
    --gold:           var(--pt-gold);
    --text:           var(--pt-dark);
    --muted:          var(--pt-muted);
    --border:         var(--pt-border);
    --bg:             var(--pt-bg);
    --sidebar-w:      var(--pt-sidebar-w);
    --header-h:       var(--pt-header-h);
}

/* ══ Base Reset ═════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }

body {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system,
                 BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color: var(--pt-text);
}

/* ══ Shared Animations ══════════════════════════════════════════════════ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes floatY {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%       { transform: translateY(-10px) rotate(4deg); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
@keyframes popIn {
    0%   { opacity: 0; transform: scale(.8); }
    70%  { transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}

/* ══ Shared Utility: Difficulty Badges ══════════════════════════════════ */
.pt-diff-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}
.diff-low    { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.diff-medium { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.diff-high   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* ══ Shared Utility: Token Badges ═══════════════════════════════════════ */
.pt-token-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #fefce8;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.pt-token-sm {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: #fefce8;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: 999px;
    padding: 1px 6px;
    font-size: .65rem;
    font-weight: 700;
}

/* ══ Shared Utility: Colour Chips ═══════════════════════════════════════ */
.chip-blue   { background: var(--pt-blue-bg);  color: var(--pt-blue);      border: 1px solid var(--pt-blue-light); }
.chip-orange { background: var(--pt-orange-bg); color: var(--pt-orange-dk); border: 1px solid var(--pt-orange-bdr); }
.chip-green  { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }

/* ══ Shared Utility: Free / Locked Badges ═══════════════════════════════ */
.b-free   { background: #fff7ed; color: var(--pt-orange-dk); }
.b-locked { background: #f3f4f6; color: #9ca3af; }

/* ══ Shared Utility: Loading / Empty States ══════════════════════════════ */
.pt-loading, .pt-empty-msg {
    text-align: center;
    padding: 48px 16px;
    color: #9ca3af;
    grid-column: 1 / -1;
}
.pt-loading .spinner-border { color: var(--pt-blue); }
.pt-empty-msg i { font-size: 2.2rem; display: block; margin-bottom: 10px; color: #d1d5db; }

/* ══ Shared Utility: Modal Base Overrides ═══════════════════════════════ */
.btn-modal-go {
    background: var(--pt-orange);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 22px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background .12s;
}
.btn-modal-go:hover    { background: var(--pt-orange-dk); }
.btn-modal-go:disabled { opacity: .6; cursor: not-allowed; }

#pt-loader{
      position:fixed;
      inset:0;
      z-index:99999;
      background:#fff;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:20px;
      transition:opacity .35s ease, visibility .35s ease;
    }
    #pt-loader.pt-loader-hide{
      opacity:0;
      visibility:hidden;
    }
    .pt-loader-logo{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .pt-loader-logo img{
      height:52px;
    }
    .pt-loader-spinner{
      width:36px;
      height:36px;
      border:3px solid #eaf4ff;
      border-top-color:#1478ff;
      border-radius:50%;
      animation:pt-spin .75s linear infinite;
    }
    @keyframes pt-spin{
      to{ transform:rotate(360deg); }
    }

    .d-none { display: none !important; }

/* ══ Toastr Overrides ══════════════════════════════════════════════════ */
#toast-container > div {
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08) !important;
    padding: 14px 16px 14px 56px !important;
    opacity: 1 !important;
    background-size: 20px !important;
    background-position: 18px center !important;
}
#toast-container > .toast-error {
    background-color: #dc2626 !important;
    border-left: 4px solid #991b1b;
}
#toast-container > .toast-success {
    background-color: #16a34a !important;
    border-left: 4px solid #15803d;
}
#toast-container > .toast-warning {
    background-color: #d97706 !important;
    border-left: 4px solid #92400e;
}
#toast-container > .toast-info {
    background-color: #2563eb !important;
    border-left: 4px solid #1e40af;
}
.pt-toast-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.3;
}
.pt-toast-title .bi { font-size: 1rem; flex-shrink: 0; }
.pt-toast-msg {
    display: block;
    font-size: .8rem;
    line-height: 1.45;
    margin-top: 2px;
    opacity: .92;
}