/* =====================================================================
   HYPER 2026 — Dark Gaming Neon Design System
   Accent: Cyber Cyan -> Mint Green
   Rewritten theme. Maps all legacy .hyper-* classes to a modern dark UI
   so every page (front + admin) is reskinned with no markup change needed.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&family=Rajdhani:wght@500;600;700&display=swap');

:root{
  /* base surfaces */
  --bg-0:#070b16;
  --bg-1:#0b1120;
  --bg-2:#0f1729;
  --surface:rgba(20,29,50,.72);
  --surface-2:rgba(28,39,64,.85);
  --surface-solid:#111a2e;
  --modal-solid:#141d31;
  --ink-rgb:9,14,26;      /* dark base ink for translucent panels/navbar (flips in light mode) */
  --nav-bg:rgba(var(--ink-rgb),.72);
  --line:rgba(126,160,214,.14);
  --line-strong:rgba(126,160,214,.28);

  /* text */
  --text:#e8eefb;
  --text-dim:#aeb9d4;
  --text-mut:#7f8cae;

  /* accent (cyber cyan -> mint) */
  --a1:#22d3ee;   /* cyan   */
  --a2:#34e4b0;   /* teal   */
  --a3:#4ade80;   /* green  */
  --a1-rgb:34,211,238;   /* keep in sync with --a1 (for rgba glows) */
  --a2-rgb:52,228,176;   /* keep in sync with --a2 */
  --a3-rgb:74,222,128;   /* keep in sync with --a3 */
  --grad:linear-gradient(120deg,var(--a1) 0%,var(--a2) 55%,var(--a3) 100%);
  --grad-soft:linear-gradient(120deg,rgba(var(--a1-rgb),.16),rgba(var(--a3-rgb),.16));
  --glow:0 0 0 1px rgba(var(--a2-rgb),.35),0 8px 30px -8px rgba(var(--a1-rgb),.45);

  /* semantic */
  --amber:#f5b544;
  --pink:#fb5fa6;
  --violet:#a78bfa;
  --red:#ff5470;
  --blue:#38bdf8;

  --r-lg:20px;
  --r-md:15px;
  --r-sm:11px;
  --shadow:0 18px 40px -18px rgba(0,0,0,.75);
}

/* ============================ LIGHT MODE ============================ */
:root[data-theme="light"]{
  --bg-0:#eef2f8;
  --bg-1:#e7edf6;
  --bg-2:#dee6f1;
  --surface:rgba(255,255,255,.80);
  --surface-2:#ffffff;
  --surface-solid:#ffffff;
  --modal-solid:#ffffff;
  --line:rgba(30,50,90,.12);
  --line-strong:rgba(30,50,90,.22);
  --text:#18233a;
  --text-dim:#3c4a66;
  --text-mut:#697591;
  --ink-rgb:214,223,238;
  --shadow:0 16px 38px -18px rgba(30,50,90,.32);
}
:root[data-theme="light"] body{color:var(--text);}
:root[data-theme="light"] .navbar-light .navbar-toggler-icon,
:root[data-theme="light"] .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='%2318233a' stroke-width='2.4' stroke-linecap='round' d='M5 8h20M5 15h20M5 22h20'/%3E%3C/svg%3E") !important;
}

/* ------------------------------ base ------------------------------ */
*{scrollbar-width:thin;scrollbar-color:rgba(var(--a2-rgb),.45) transparent;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:'Kanit',system-ui,sans-serif !important;
  color:var(--text);
  background-color:var(--bg-0);
  background-image:
    radial-gradient(1100px 600px at 12% -8%,rgba(var(--a1-rgb),.16),transparent 60%),
    radial-gradient(1000px 620px at 100% 0%,rgba(var(--a3-rgb),.12),transparent 55%),
    radial-gradient(900px 700px at 50% 120%,rgba(56,189,248,.10),transparent 60%),
    linear-gradient(180deg,var(--bg-0),var(--bg-1) 40%,var(--bg-0));
  background-attachment:fixed;
  min-height:100vh;
  letter-spacing:.1px;
}
body::before{ /* subtle grid overlay */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(126,160,214,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,160,214,.045) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(circle at 50% 0%,#000 0%,transparent 78%);
          mask-image:radial-gradient(circle at 50% 0%,#000 0%,transparent 78%);
}
.container{position:relative;z-index:1;}

::selection{background:rgba(var(--a2-rgb),.30);color:#fff;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--a1),var(--a3));border-radius:20px;border:2px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-track{background:transparent;}

h1,h2,h3,h4,h5,h6{font-weight:600;letter-spacing:.2px;color:var(--text);}
b,strong{font-weight:700;}
a{text-decoration:none !important;color:var(--a1);transition:color .2s;}
a:hover{color:var(--a3);}
hr{border-color:var(--line);}
pre{color:var(--text-dim);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;font-family:'Kanit',sans-serif;margin:0;}
.text-muted,.text-secondary,font.text-muted{color:var(--text-mut) !important;}

/* gradient text helper (usable via markup) */
.brand-gradient,.text-gradient{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.stat-num{font-family:'Rajdhani','Kanit',sans-serif;font-weight:700;line-height:1;letter-spacing:.5px;}

/* ------------------------ radius / shadows ------------------------ */
.radius-border{border-radius:var(--r-lg) !important;}
.radius-border-6{border-radius:var(--r-md) !important;}
.radius-border-2{border-radius:var(--r-sm) !important;}
.shadow-dark{box-shadow:var(--shadow) !important;}

/* ------------------------------ cards ----------------------------- */
.card,
.hyper-bg-white{
  background:var(--surface) !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  position:relative;
}
.hyper-bg-dark{
  background:var(--surface-solid) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
}
.card{overflow:hidden;}
/* thin top accent line on cards */
.card::after{content:"";position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--grad);opacity:.55;}
.card .card-body{position:relative;z-index:1;}

/* interactive game/menu tiles */
.hyper-card{
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s;
  border:1px solid var(--line) !important;
  cursor:pointer;
}
.hyper-card:hover{
  transform:translateY(-6px);
  border:1px solid rgba(var(--a2-rgb),.55) !important;
  box-shadow:0 22px 46px -20px rgba(0,0,0,.8),0 0 0 1px rgba(var(--a2-rgb),.25),0 14px 40px -18px rgba(var(--a1-rgb),.5);
}
a:hover .hyper-card{border:1px solid rgba(var(--a2-rgb),.55) !important;}

/* entrance animation */
@keyframes hy-up{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.card{animation:hy-up .5s ease both;}

/* ------------------------------ navbar ---------------------------- */
.navbar{
  background:rgba(var(--ink-rgb),.72) !important;
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.7) !important;
  padding-top:.55rem;padding-bottom:.55rem;
}
.navbar-brand{display:flex;align-items:center;gap:.6rem;font-weight:700;}
.navbar-brand img{
  border-radius:14px !important;
  border:1.5px solid rgba(var(--a2-rgb),.5);
  box-shadow:0 0 18px -4px rgba(var(--a2-rgb),.6);
  width:52px !important;height:52px !important;object-fit:cover;
}
.navbar-toggler{border:1px solid var(--line-strong) !important;border-radius:12px;color:var(--text);}
.navbar-toggler:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--a2-rgb),.25);}
.navbar-light .navbar-toggler-icon,
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' d='M5 8h20M5 15h20M5 22h20'/%3E%3C/svg%3E") !important;
}
.navbar .form-inline{gap:.15rem;flex-wrap:wrap;}
.navbar .btn{white-space:nowrap;}

/* account dropdown (dark themed) */
.dropdown-menu{
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:12px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.85);padding:.4rem;margin-top:.4rem;z-index:1035;min-width:12rem;
}
.dropdown-item{color:var(--text-dim);border-radius:9px;padding:.55rem .8rem;font-family:'Kanit',sans-serif;font-size:.92rem;transition:all .15s;}
.dropdown-item:hover,.dropdown-item:focus{background:var(--grad-soft);color:var(--a2);}
.dropdown-item.hy-logout{color:var(--red);}
.dropdown-item.hy-logout:hover{background:rgba(255,84,112,.14);color:var(--red);}
.dropdown-divider{border-top:1px solid var(--line);margin:.35rem .2rem;}
.dropdown-toggle::after{vertical-align:.15em;margin-left:.4em;}

/* collapsed mobile menu: cap height + scroll, tidy dropdown */
@media (max-width:991.98px){
  .navbar-collapse{max-height:80vh;overflow-y:auto;margin-top:.5rem;}
  .navbar .dropdown-menu{background:rgba(var(--ink-rgb),.5);border:1px solid var(--line);box-shadow:none;margin:.15rem 0 .35rem;}
  .navbar-nav .nav-item{width:100%;}
}

/* ------------------------------ buttons --------------------------- */
.btn{
  font-family:'Kanit',sans-serif;
  border-radius:12px;
  font-weight:500;
  letter-spacing:.2px;
  padding:.5rem 1rem;
  border-width:1.5px;
  transition:all .22s ease;
}
.btn:focus{box-shadow:0 0 0 3px rgba(var(--a2-rgb),.22);}
.btn:active{transform:translateY(1px);}

/* --- primary CTA: gradient (buy / confirm) --- */
.hyper-btn-buy,
.hyper-btn-notoutline-success,
.hyper-btn-success-active,
.hyper-btn-primary-active{
  color:#04141a !important;font-weight:600;border:none !important;
  background:var(--grad) !important;
  box-shadow:0 10px 26px -10px rgba(var(--a1-rgb),.6);
}
.hyper-btn-buy:hover,
.hyper-btn-notoutline-success:hover,
.hyper-btn-notoutline-success:not([disabled]):hover,
.hyper-btn-success-active:hover,
.hyper-btn-primary-active:hover{
  color:#04141a !important;filter:brightness(1.07);
  box-shadow:0 14px 34px -10px rgba(var(--a2-rgb),.75);transform:translateY(-1px);
}

/* generic tinted "outline glass" factory */
.hyper-btn-success,.hyper-btn-primary,.hyper-btn-dark,.hyper-btn-info,
.hyper-btn-orange,.hyper-btn-pink,.hyper-btn-perple,.hyper-btn-danger,
.hyper-btn-dark-active,.hyper-btn-orange-active,.hyper-btn-pink-active,
.hyper-btn-perple-active,.hyper-btn-danger-active{
  font-family:'Kanit',sans-serif;font-weight:500;
  background:rgba(255,255,255,.03);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* accent (cyan-green) */
.hyper-btn-success,.hyper-btn-primary{color:var(--a2);border:1.5px solid rgba(var(--a2-rgb),.5);}
.hyper-btn-success:hover,.hyper-btn-primary:hover{background:var(--grad);color:#04141a !important;border-color:transparent;box-shadow:var(--glow);}
/* neutral glass (home / info / details) */
.hyper-btn-dark,.hyper-btn-info{color:var(--text);border:1.5px solid var(--line-strong);}
.hyper-btn-dark:hover,.hyper-btn-info:hover,
.hyper-btn-dark-active{background:rgba(126,160,214,.16);color:#fff !important;border-color:var(--line-strong);box-shadow:0 8px 22px -12px rgba(0,0,0,.8);}
.hyper-btn-info{background:rgba(126,160,214,.10);}
.hyper-btn-info:hover{background:rgba(126,160,214,.2);}
/* amber (profile / register) */
.hyper-btn-orange{color:var(--amber);border:1.5px solid rgba(245,181,68,.5);}
.hyper-btn-orange:hover,.hyper-btn-orange-active{background:var(--amber);color:#1b1405 !important;border-color:transparent;box-shadow:0 10px 26px -12px rgba(245,181,68,.6);}
/* pink (admin) */
.hyper-btn-pink{color:var(--pink);border:1.5px solid rgba(251,95,166,.5);}
.hyper-btn-pink:hover,.hyper-btn-pink-active{background:var(--pink);color:#1b0512 !important;border-color:transparent;box-shadow:0 10px 26px -12px rgba(251,95,166,.6);}
/* violet (history) */
.hyper-btn-perple{color:var(--violet);border:1.5px solid rgba(167,139,250,.5);}
.hyper-btn-perple:hover,.hyper-btn-perple-active{background:var(--violet);color:#120a26 !important;border-color:transparent;box-shadow:0 10px 26px -12px rgba(167,139,250,.6);}
/* red (logout / delete) */
.hyper-btn-danger,.hyper-btn-notoutline-danger{color:var(--red) !important;border:1.5px solid rgba(255,84,112,.55) !important;}
.hyper-btn-danger:hover,.hyper-btn-danger-active,
.hyper-btn-notoutline-danger,.hyper-btn-notoutline-danger:hover,.hyper-btn-notoutline-danger:focus{
  background:var(--red) !important;color:#fff !important;border-color:transparent !important;box-shadow:0 10px 26px -12px rgba(255,84,112,.6);
}
.hyper-btn-notoutline-danger{color:#fff !important;}

/* generic bootstrap buttons fallback */
.btn-primary{background:var(--grad);border:none;color:#04141a;font-weight:600;}
.btn-secondary{background:rgba(126,160,214,.16);border:1px solid var(--line-strong);color:var(--text);}
.btn-danger{background:var(--red);border:none;}
.btn-success{background:var(--grad);border:none;color:#04141a;}

/* ------------------------------ badges ---------------------------- */
.badge{font-weight:600;border-radius:9px;padding:.32em .6em;}
.badge-light{background:var(--grad) !important;color:#04141a !important;box-shadow:0 4px 14px -6px rgba(var(--a2-rgb),.7);}
.badge-secondary{background:rgba(126,160,214,.2);color:var(--text);}

/* ------------------------------ forms ----------------------------- */
.form-control,.hyper-form-control{
  font-family:'Kanit',sans-serif;
  color:var(--text) !important;
  background:rgba(var(--ink-rgb),.6) !important;
  border:1.5px solid var(--line-strong) !important;
  border-radius:12px !important;
  padding:.6rem .9rem;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.form-control::placeholder,.hyper-form-control::placeholder{color:var(--text-mut);opacity:1;}
.form-control:focus,.hyper-form-control:focus{
  color:var(--text) !important;
  background:rgba(var(--ink-rgb),.8) !important;
  border:1.5px solid rgba(var(--a2-rgb),.8) !important;
  outline:0;box-shadow:0 0 0 3.5px rgba(var(--a2-rgb),.16) !important;
}
.hyper-form-control:disabled,.form-control:disabled{
  color:var(--text-dim) !important;background:rgba(15,23,41,.9) !important;border-color:var(--line) !important;
}
select.form-control option{background:var(--surface-solid);color:var(--text);}
textarea.form-control{min-height:110px;}

/* input-group icon chips */
.input-group{border-radius:12px;}
.input-group-text{
  border:1.5px solid var(--line-strong) !important;
  border-right:none !important;
  color:var(--a2) !important;
  background:rgba(var(--a2-rgb),.10) !important;
  border-radius:12px 0 0 12px !important;
}
.input-group>.form-control:not(:first-child){border-top-left-radius:0 !important;border-bottom-left-radius:0 !important;}
.border-dark{border-color:var(--line-strong) !important;}

/* ---------------------------- carousel ---------------------------- */
.carousel{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);}
.carousel-inner{border-radius:var(--r-lg);}
.carousel img{filter:saturate(1.05) contrast(1.02);}
.carousel::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -60px 80px -40px rgba(7,11,22,.9),inset 0 0 0 1px rgba(255,255,255,.04);border-radius:var(--r-lg);}
.carousel-control-prev,.carousel-control-next{width:9%;opacity:.85;}
.carousel-control-prev-icon,.carousel-control-next-icon{
  background-color:rgba(var(--ink-rgb),.55);border-radius:50%;padding:14px;background-size:55%;
  border:1px solid rgba(var(--a2-rgb),.4);
}

/* ---------------------------- pagination -------------------------- */
.pagination{gap:.35rem;}
.page-link{
  border:1px solid var(--line-strong);
  color:var(--text-dim);
  background:var(--surface);
  border-radius:10px !important;
  padding:.5rem .85rem;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:all .2s;
}
.page-link:hover{color:#04141a;background:var(--grad);border-color:transparent;box-shadow:var(--glow);}
.page-link.active,.page-item.active .page-link,.page-link:focus{
  color:#04141a;background:var(--grad);border-color:transparent;box-shadow:var(--glow);z-index:3;
}
.page-item.disabled .page-link{opacity:.4;background:var(--surface);color:var(--text-mut);}

/* ------------------------------ tables ---------------------------- */
.table{color:var(--text);border-collapse:separate;border-spacing:0;}
.table thead th{
  border:none !important;
  color:var(--a2);
  text-transform:uppercase;font-size:.78rem;letter-spacing:.6px;font-weight:600;
  background:rgba(var(--a2-rgb),.06);
  padding:.9rem .8rem;
}
.table td,.table th{border-color:var(--line) !important;vertical-align:middle;padding:.8rem;}
.table tbody tr{transition:background .18s;}
.table tbody tr:hover{background:rgba(var(--a2-rgb),.06) !important;}
.table-striped tbody tr:nth-of-type(odd){background:rgba(126,160,214,.05);}
.table-bordered,.table-bordered td,.table-bordered th{border-color:var(--line) !important;}

/* DataTables paints tbody rows white by default (higher specificity) — force dark theme */
table.dataTable,
table.dataTable thead th,table.dataTable thead td,
table.dataTable tbody,table.dataTable tbody tr,
table.dataTable tbody th,table.dataTable tbody td{background-color:transparent !important;color:var(--text);}
table.dataTable thead th{color:var(--a2) !important;background:rgba(var(--a2-rgb),.06) !important;border-bottom:1px solid var(--line) !important;}
table.dataTable.stripe tbody tr.odd,table.dataTable.display tbody tr.odd,
table.dataTable tbody tr.odd{background-color:rgba(126,160,214,.05) !important;}
table.dataTable.stripe tbody tr.even,table.dataTable.display tbody tr.even,
table.dataTable tbody tr.even{background-color:transparent !important;}
table.dataTable.hover tbody tr:hover,table.dataTable.display tbody tr:hover,
table.dataTable tbody tr:hover,
table.dataTable.hover tbody tr.odd:hover,table.dataTable.display tbody tr.odd:hover,
table.dataTable.hover tbody tr.even:hover,table.dataTable.display tbody tr.even:hover{background-color:rgba(var(--a2-rgb),.08) !important;}
table.dataTable td,table.dataTable th{border-color:var(--line) !important;}
table.dataTable.no-footer{border-bottom:1px solid var(--line) !important;}
/* sort arrows */
table.dataTable thead .sorting:after,table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after{color:var(--a2);opacity:.6;}

/* DataTables chrome */
.dataTables_wrapper{color:var(--text-dim);}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{
  background:rgba(var(--ink-rgb),.6);border:1.5px solid var(--line-strong);color:var(--text);
  border-radius:10px;padding:.35rem .6rem;margin:0 .3rem;
}
.dataTables_wrapper .dataTables_filter input:focus{outline:none;border-color:rgba(var(--a2-rgb),.8);box-shadow:0 0 0 3px rgba(var(--a2-rgb),.16);}
.dataTables_wrapper .dataTables_info{color:var(--text-mut);}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  color:var(--text-dim) !important;border-radius:9px;border:1px solid var(--line-strong) !important;
  background:var(--surface) !important;margin:0 2px;padding:.3rem .7rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  color:#04141a !important;background:var(--grad) !important;border-color:transparent !important;box-shadow:var(--glow);
}

/* ------------------------------ modal ----------------------------- */
.modal-content{background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r-md);color:var(--text);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);}
.modal-header,.modal-footer{border-color:var(--line);}
.close{color:var(--text);text-shadow:none;opacity:.7;}
.close:hover{color:var(--a2);opacity:1;}

/* --------------------------- SweetAlert --------------------------- */
.swal-overlay{background:rgba(4,8,16,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.swal-modal{
  background:var(--modal-solid);border:1px solid var(--line-strong);
  border-radius:var(--r-md);box-shadow:0 30px 70px -20px rgba(0,0,0,.85),0 0 0 1px rgba(var(--a2-rgb),.12);
}
.swal-title{color:var(--text);font-family:'Kanit';font-weight:600;}
.swal-text{color:var(--text-dim) !important;text-align:center;font-family:'Kanit';}
.swal-footer{text-align:center;}
.swal-button{font-family:'Kanit';border-radius:11px;font-weight:600;padding:.6rem 1.4rem;}
.swal-button--confirm{background:var(--grad);color:#04141a;}
.swal-button--confirm:not([disabled]):hover{filter:brightness(1.07);background:var(--grad);}
.swal-button--cancel{background:rgba(126,160,214,.16);color:var(--text);}

/* --- icons: retheme so nothing shows as white on the dark modal --- */
/* success: the ring + check turn accent-green; the white "reveal/mask" parts
   must match the modal background so they blend in instead of flashing white */
.swal-icon--success{border-color:transparent;}
.swal-icon--success__ring{border-color:rgba(var(--a2-rgb),.45);}
.swal-icon--success__line{background-color:var(--a3);}
.swal-icon--success:after,.swal-icon--success:before,
.swal-icon--success__hide-corners{background:var(--modal-solid) !important;}
/* error (red) */
.swal-icon--error{border-color:var(--red);}
.swal-icon--error__line{background-color:var(--red);}
/* info / warning (cyan) */
.swal-icon--info,.swal-icon--warning{border-color:var(--a1);}
.swal-icon--info::after,.swal-icon--info::before,
.swal-icon--warning__body,.swal-icon--warning__dot{background-color:var(--a1);}
/* warning triangle bg mask */
.swal-icon--warning{border-color:var(--amber);}
.swal-icon--warning__body,.swal-icon--warning__dot{background-color:var(--amber);}

/* ----------------------------- misc ------------------------------- */
.footer-copyright{color:var(--text-mut) !important;}
img.rounded-circle{background:var(--surface-solid);}
.media img{border:1px solid var(--line);}
label{color:var(--text-dim);}

/* utility chips used by upgraded markup */
.hy-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:999px;
  background:var(--grad-soft);border:1px solid rgba(var(--a2-rgb),.3);color:var(--a2);font-size:.82rem;font-weight:500;}
.hy-eyebrow{letter-spacing:3px;text-transform:uppercase;font-size:.72rem;color:var(--a2);font-weight:600;}
.hy-price{font-family:'Rajdhani','Kanit';font-weight:700;color:var(--a2);}
.hy-divider{height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent);border:none;margin:1.25rem 0;}

/* =====================================================================
   ANIMATIONS  &  PAGE PRELOADER
   ===================================================================== */

/* ---- page preloader ---- */
#hy-preloader{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(700px 500px at 50% 30%,rgba(var(--a1-rgb),.18),transparent 60%),
    radial-gradient(600px 500px at 50% 90%,rgba(var(--a3-rgb),.14),transparent 60%),
    var(--bg-0);
  opacity:1;transition:opacity .55s ease,visibility .55s ease;
}
#hy-preloader.hy-done{opacity:0;visibility:hidden;}
.hy-loader-box{display:flex;flex-direction:column;align-items:center;gap:18px;}
.hy-spinner{position:relative;width:74px;height:74px;}
.hy-spinner span{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;}
.hy-spinner span:nth-child(1){border-top-color:var(--a1);animation:hy-spin 1s linear infinite;}
.hy-spinner span:nth-child(2){inset:9px;border-top-color:var(--a2);border-right-color:var(--a2);animation:hy-spin 1.4s linear infinite reverse;}
.hy-spinner span:nth-child(3){inset:18px;border-top-color:var(--a3);animation:hy-spin .8s linear infinite;}
.hy-loader-brand{font-family:'Rajdhani','Kanit';font-weight:700;font-size:1.9rem;letter-spacing:4px;
  background:var(--grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;animation:hy-shimmer 2.4s linear infinite;}
.hy-loader-bar{width:180px;height:4px;border-radius:999px;background:rgba(126,160,214,.16);overflow:hidden;}
.hy-loader-bar i{display:block;height:100%;width:40%;border-radius:999px;background:var(--grad);animation:hy-load 1.15s ease-in-out infinite;}
.hy-loader-text{color:var(--text-mut);font-size:.85rem;letter-spacing:2px;}

@keyframes hy-spin{to{transform:rotate(360deg);}}
@keyframes hy-load{0%{transform:translateX(-120%);}100%{transform:translateX(320%);}}
@keyframes hy-shimmer{to{background-position:200% center;}}

/* ---- navbar entrance ---- */
.navbar{animation:hy-drop .6s cubic-bezier(.2,.8,.25,1) both;}
@keyframes hy-drop{from{opacity:0;transform:translateY(-18px);}to{opacity:1;transform:none;}}

/* ---- brand text subtle shimmer ---- */
.brand-gradient{background-size:220% auto;animation:hy-shimmer 5s linear infinite;}

/* ---- staggered card entrance (grids feel alive) ---- */
.row .p-2:nth-child(1) .card{animation-delay:.03s;}
.row .p-2:nth-child(2) .card{animation-delay:.09s;}
.row .p-2:nth-child(3) .card{animation-delay:.15s;}
.row .p-2:nth-child(4) .card{animation-delay:.21s;}
.row .p-2:nth-child(5) .card{animation-delay:.27s;}
.row .p-2:nth-child(6) .card{animation-delay:.33s;}
.row .p-2:nth-child(7) .card{animation-delay:.39s;}
.row .p-2:nth-child(8) .card{animation-delay:.45s;}
.row .p-2:nth-child(9) .card{animation-delay:.51s;}

/* ---- button shine sweep on hover ---- */
.btn{position:relative;overflow:hidden;}
.btn::before{content:"";position:absolute;top:0;left:-120%;width:70%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:none;pointer-events:none;}
.btn:hover::before{animation:hy-shine .7s ease;}
@keyframes hy-shine{from{left:-120%;}to{left:150%;}}

/* ---- reveal on scroll (JS adds .hy-in) ---- */
.hy-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.25,1);}
.hy-reveal.hy-in{opacity:1;transform:none;}

/* ---- floating (hero logo) ---- */
@keyframes hy-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.hy-float{animation:hy-float 4.5s ease-in-out infinite;}

/* ---- icon pop on tile hover ---- */
.hyper-card:hover img.rounded-circle{transform:scale(1.06);transition:transform .28s;}

/* ---- table rows fade in ---- */
tbody tr{animation:hy-up .45s ease both;}

/* ---- respect reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .hy-reveal{opacity:1;transform:none;}
  .hy-spinner span{animation:hy-spin 1s linear infinite;} /* keep loader legible */
}