/*
 Tam Jai Studio V2.1 — Button & Typography Polish
 Visual-only overlay. No PHP/SQL/payment/business logic is changed.
 Loaded after tamjai-v2.css so it can be removed instantly to revert this polish layer.
*/
:root{
  --tj-font-display:'Chakra Petch','Kanit','IBM Plex Sans Thai',sans-serif;
  --tj-font-ui:'Kanit','IBM Plex Sans Thai','LINE Seed Sans TH','Sarabun',sans-serif;
  --tj-font-body:'IBM Plex Sans Thai','LINE Seed Sans TH','Sarabun',sans-serif;
  --tj-btn-radius:14px;
  --tj-btn-border:rgba(255,255,255,.14);
  --tj-btn-shadow:0 12px 30px rgba(3,0,8,.34),0 8px 24px rgba(122,23,166,.17);
  --tj-btn-shadow-hover:0 16px 38px rgba(2,0,7,.42),0 12px 32px rgba(184,30,153,.28),0 0 22px rgba(139,44,255,.12);
}

/* ---------- Typography system ---------- */
body.tamjai-v2{
  font-family:var(--tj-font-body)!important;
  font-weight:400!important;
  font-size:15.5px;
  line-height:1.68;
  letter-spacing:.002em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body.tamjai-v2 h1,
body.tamjai-v2 h2,
body.tamjai-v2 h3,
body.tamjai-v2 h4,
body.tamjai-v2 h5,
body.tamjai-v2 h6{
  font-family:var(--tj-font-display)!important;
  font-weight:600!important;
  line-height:1.28!important;
  letter-spacing:.012em!important;
  text-wrap:balance;
  text-shadow:0 2px 18px rgba(0,0,0,.24);
}
body.tamjai-v2 h1{font-size:clamp(2rem,4vw,3.25rem)}
body.tamjai-v2 h2{font-size:clamp(1.65rem,3vw,2.45rem)}
body.tamjai-v2 h3{font-size:clamp(1.35rem,2.4vw,1.9rem)}
body.tamjai-v2 h4{font-size:clamp(1.12rem,2vw,1.42rem)}
body.tamjai-v2 h5{font-size:1.07rem}
body.tamjai-v2 h6{font-size:.98rem}

body.tamjai-v2 p,
body.tamjai-v2 label,
body.tamjai-v2 input,
body.tamjai-v2 textarea,
body.tamjai-v2 select,
body.tamjai-v2 td,
body.tamjai-v2 th,
body.tamjai-v2 small{
  font-family:var(--tj-font-body)!important;
}

body.tamjai-v2 .navbar,
body.tamjai-v2 .nav-link,
body.tamjai-v2 .dropdown-item,
body.tamjai-v2 .btn,
body.tamjai-v2 button,
body.tamjai-v2 .badge{
  font-family:var(--tj-font-ui)!important;
}

body.tamjai-v2 .text-head{
  font-family:var(--tj-font-display)!important;
  font-weight:600!important;
  font-size:clamp(1.15rem,2vw,1.34rem)!important;
  letter-spacing:.025em!important;
}

body.tamjai-v2 .product-name{
  font-family:var(--tj-font-ui)!important;
  font-weight:500!important;
  letter-spacing:.006em;
  line-height:1.5!important;
}

body.tamjai-v2 .class-thxk > h4,
body.tamjai-v2 .container > h4,
body.tamjai-v2 .row > div > h4{
  position:relative;
}

body.tamjai-v2 strong,
body.tamjai-v2 b,
body.tamjai-v2 .fw-bold{
  font-weight:600!important;
}

/* Better muted/body copy contrast */
body.tamjai-v2 .text-secondary,
body.tamjai-v2 .text-muted{color:#a99db4!important}
body.tamjai-v2 small{letter-spacing:.006em}

/* ---------- Premium button system ---------- */
body.tamjai-v2 .btn:not(.btn-close),
body.tamjai-v2 button:not(.btn-close){
  --btn-x:18px;
  min-height:44px;
  padding:.62rem var(--btn-x)!important;
  border-radius:var(--tj-btn-radius)!important;
  font-weight:500!important;
  font-size:.94rem!important;
  letter-spacing:.018em;
  line-height:1.15!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.48rem;
  vertical-align:middle;
  white-space:normal;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
}
body.tamjai-v2 .btn-sm{
  min-height:36px!important;
  padding:.42rem .78rem!important;
  border-radius:11px!important;
  font-size:.82rem!important;
}
body.tamjai-v2 .btn-lg{
  min-height:52px!important;
  padding:.78rem 1.35rem!important;
  border-radius:16px!important;
  font-size:1rem!important;
}
body.tamjai-v2 .btn i,
body.tamjai-v2 button i{
  font-size:1.03em;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.25));
}

/* Primary / buy / important actions */
body.tamjai-v2 .btn-zero,
body.tamjai-v2 .btn-primary,
body.tamjai-v2 .btn-danger,
body.tamjai-v2 .shopbtn{
  isolation:isolate;
  position:relative;
  overflow:hidden;
  color:#fff!important;
  border:1px solid var(--tj-btn-border)!important;
  background:
    radial-gradient(circle at 20% 0%,rgba(255,255,255,.22),transparent 34%),
    linear-gradient(112deg,#6f2cff 0%,#a92eff 32%,#e52bca 63%,#ff294f 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.18),
    var(--tj-btn-shadow)!important;
  text-shadow:0 1px 8px rgba(0,0,0,.28);
  transform:translateZ(0);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,filter .2s ease,border-color .2s ease!important;
}
body.tamjai-v2 .btn-zero::after,
body.tamjai-v2 .btn-primary::after,
body.tamjai-v2 .btn-danger::after,
body.tamjai-v2 .shopbtn::after{
  content:"";
  position:absolute;
  inset:1px;
  z-index:-1;
  pointer-events:none;
  border-radius:calc(var(--tj-btn-radius) - 2px);
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 42%);
}
body.tamjai-v2 .btn-zero::before,
body.tamjai-v2 .btn-primary::before,
body.tamjai-v2 .btn-danger::before,
body.tamjai-v2 .shopbtn::before{
  content:"";
  position:absolute;
  top:-70%;bottom:-70%;left:-38%;
  width:23%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:rotate(18deg) translateX(-220%);
  transition:transform .65s cubic-bezier(.25,.7,.25,1);
}
body.tamjai-v2 .btn-zero:hover,
body.tamjai-v2 .btn-primary:hover,
body.tamjai-v2 .btn-danger:hover,
body.tamjai-v2 .shopbtn:hover{
  color:#fff!important;
  transform:translateY(-2px) scale(1.012);
  filter:saturate(1.07) brightness(1.06);
  border-color:rgba(255,255,255,.25)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(0,0,0,.15),
    var(--tj-btn-shadow-hover)!important;
}
body.tamjai-v2 .btn-zero:hover::before,
body.tamjai-v2 .btn-primary:hover::before,
body.tamjai-v2 .btn-danger:hover::before,
body.tamjai-v2 .shopbtn:hover::before{transform:rotate(18deg) translateX(720%)}
body.tamjai-v2 .btn-zero:active,
body.tamjai-v2 .btn-primary:active,
body.tamjai-v2 .btn-danger:active,
body.tamjai-v2 .shopbtn:active{
  transform:translateY(1px) scale(.992)!important;
  box-shadow:inset 0 2px 7px rgba(0,0,0,.24),0 6px 16px rgba(44,0,57,.25)!important;
}

/* Success keeps semantic green but matches the premium surface */
body.tamjai-v2 .btn-success{
  color:#f5fff9!important;
  border:1px solid rgba(139,255,191,.2)!important;
  background:linear-gradient(115deg,#087d4a,#0ca966 52%,#22ca7d)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 26px rgba(0,96,57,.24)!important;
  transition:.2s ease!important;
}
body.tamjai-v2 .btn-success:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 14px 32px rgba(0,126,74,.3)!important}

/* Warning remains readable and premium */
body.tamjai-v2 .btn-warning{
  color:#241500!important;
  border:1px solid rgba(255,241,185,.28)!important;
  background:linear-gradient(115deg,#f7a91a,#ffca3f 55%,#ffe181)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 26px rgba(166,100,0,.2)!important;
  transition:.2s ease!important;
}
body.tamjai-v2 .btn-warning:hover{transform:translateY(-2px);filter:brightness(1.035)}

/* Secondary / back / neutral actions */
body.tamjai-v2 .btn-dark,
body.tamjai-v2 .btn-thxk,
body.tamjai-v2 .btn-outline-secondary,
body.tamjai-v2 .btn-secondary{
  color:#efe8f5!important;
  border:1px solid rgba(194,112,255,.25)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
    rgba(11,7,16,.82)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 8px 22px rgba(0,0,0,.17)!important;
  clip-path:none!important;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease!important;
}
body.tamjai-v2 .btn-dark:hover,
body.tamjai-v2 .btn-thxk:hover,
body.tamjai-v2 .btn-outline-secondary:hover,
body.tamjai-v2 .btn-secondary:hover{
  color:#fff!important;
  transform:translateY(-2px);
  border-color:rgba(220,139,255,.5)!important;
  background:
    linear-gradient(115deg,rgba(124,44,255,.16),rgba(255,35,79,.08)),
    rgba(13,8,20,.92)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.24),0 0 18px rgba(139,44,255,.08)!important;
}

/* Quantity +/- controls */
body.tamjai-v2 .input-group .btn-outline-secondary{
  min-width:44px!important;
  padding:.55rem .8rem!important;
  border-color:#3a2948!important;
  background:#120b1a!important;
}
body.tamjai-v2 .input-group .btn-outline-secondary:hover{
  background:linear-gradient(135deg,rgba(139,44,255,.24),rgba(255,35,79,.12))!important;
  border-color:#a653ef!important;
}

/* Close button: polished but preserves Bootstrap icon behavior */
body.tamjai-v2 .btn-close{
  width:2.15rem;height:2.15rem;
  border-radius:10px!important;
  background-color:rgba(255,255,255,.08)!important;
  filter:invert(1) grayscale(1) brightness(1.9);
  opacity:.78;
  transition:.18s ease;
}
body.tamjai-v2 .btn-close:hover{opacity:1;transform:rotate(4deg) scale(1.04)}

/* Disabled state */
body.tamjai-v2 .btn:disabled,
body.tamjai-v2 .btn.disabled,
body.tamjai-v2 button:disabled{
  opacity:.46!important;
  filter:saturate(.35)!important;
  transform:none!important;
  box-shadow:none!important;
  cursor:not-allowed!important;
}

/* Focus accessibility */
body.tamjai-v2 .btn:focus-visible,
body.tamjai-v2 button:focus-visible,
body.tamjai-v2 a:focus-visible{
  outline:0!important;
  box-shadow:0 0 0 3px rgba(8,5,12,.95),0 0 0 6px rgba(185,83,255,.55)!important;
}

/* Product purchase CTA gets a slightly taller luxury treatment */
body.tamjai-v2 .class-menu .btn-zero.w-100,
body.tamjai-v2 .modal .btn-zero.w-100,
body.tamjai-v2 .buyproduct-btn,
body.tamjai-v2 .submit_buyproduct,
body.tamjai-v2 .submit_buyproduct_app{
  min-height:48px!important;
  font-weight:600!important;
  letter-spacing:.025em!important;
  border-radius:14px!important;
}

/* Auth buttons */
body.page-login .btn.w-100,
body.page-register .btn.w-100,
body.tamjai-v2 .form-signin .btn.w-100{
  min-height:48px!important;
  border-radius:14px!important;
  margin-top:2px;
}

/* Navbar text feels cleaner and less heavy */
body.tamjai-v2 .navbar .nav-link,
body.tamjai-v2 .dropdown-item{
  font-weight:500!important;
  letter-spacing:.012em;
}
body.tamjai-v2 .navbar .nav-link{font-size:.92rem}

/* Tables and admin controls */
body.tamjai-v2 table th{
  font-family:var(--tj-font-ui)!important;
  font-weight:500!important;
  letter-spacing:.014em;
}
body.tamjai-v2 table td{font-weight:400!important}

/* Price-like visual emphasis without rewriting backend markup */
body.tamjai-v2 .product-name{
  color:#f8f4ff!important;
}
body.tamjai-v2 .product-name span[style*="lime"]{
  display:inline-flex;
  align-items:center;
  padding:.18rem .48rem;
  margin-left:.25rem;
  border-radius:999px;
  color:#a7ffd1!important;
  background:rgba(49,233,129,.09);
  border:1px solid rgba(49,233,129,.17);
  font-size:.78em;
  font-weight:500!important;
}

/* Mobile tuning */
@media (max-width:767.98px){
  body.tamjai-v2{font-size:14.5px;line-height:1.62}
  body.tamjai-v2 .btn:not(.btn-close),body.tamjai-v2 button:not(.btn-close){min-height:43px;padding:.58rem .9rem!important;font-size:.9rem!important}
  body.tamjai-v2 .btn-sm{min-height:34px!important;font-size:.78rem!important}
  body.tamjai-v2 h4{font-size:1.08rem}
  body.tamjai-v2 .product-name{font-size:.94rem!important}
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  body.tamjai-v2 .btn,
  body.tamjai-v2 button{transition:none!important}
  body.tamjai-v2 .btn::before,
  body.tamjai-v2 button::before{display:none!important}
}