/*
 * polish.css — Phase 2 visible polish layer.
 * Loads AFTER style.css and styleidx.css so it overrides specific
 * surfaces with the "glossier premium casino" treatment. The layer is
 * scoped to a small set of high-impact selectors; the underlying
 * stylesheets are unchanged.
 *
 * All colors flow through the tenant theme vars (--brand-*), so every
 * preset (blue / cat / fc / pink / red / smu / speed / zeeds / magenta)
 * gets the polish in its own brand color automatically.
 *
 * Conventions:
 *   - touch targets ≥ 48px on inputs and primary CTAs.
 *   - transitions ease-out, 180–280ms. No bounce.
 *   - every transform/opacity reveal honors prefers-reduced-motion.
 *   - color-mix is used to derive tinted-surface variants without
 *     adding new tokens; supported by all current evergreen browsers.
 */

/* ─── Type hierarchy ────────────────────────────────────────────── */

/* The site uses Sarabun across the board. Sarabun's display weights
 * (600/700) carry the premium feel; the existing CSS shipped a lot of
 * 100/200 weights that look anemic against gradient backgrounds. */
h1, h2, h3 {
    font-weight: 700;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
h1 { letter-spacing: -0.02em; }
h2 { letter-spacing: -0.015em; }

.headerlogin h2 {
    font-weight: 700;
    letter-spacing: -0.015em;
    font-size: clamp(22px, 5vw, 28px);
    line-height: 1.15;
    margin: 0;
}

/* ─── Login card (index.php) ────────────────────────────────────── */

.bginputlogin {
    padding: 28px 26px 30px;
    border-radius: 18px;
    /* keep the existing gradient border (::before); add a softer outer
     * brand halo so the card sits "lit" against the dark stage */
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--brand-ink-on-dark) 12%, transparent) inset,
        0 14px 40px -16px color-mix(in srgb, var(--brand-primary) 55%, transparent),
        0 30px 60px -28px #000000c8;
    transition: box-shadow .35s cubic-bezier(.16,1,.3,1);
}

/* Replace the flat 4-stop primary-only gradient with a real
 * primary→secondary→deep ramp so the border reads as metallic. */
.bginputlogin::before {
    background-image:
        linear-gradient(302deg, var(--brand-surface-1), var(--brand-surface-2)),
        linear-gradient(
            180deg,
            var(--brand-deep)      -10%,
            var(--brand-primary)    28%,
            var(--brand-secondary)  62%,
            var(--brand-tertiary)  112%
        );
}

/* The form-card "shine" highlight sits inside the card and gives the
 * surface depth — only on the login card, not anywhere else. */
.bginputlogin .inbgbeforelogin::before {
    content: "";
    position: absolute;
    inset: -1px -1px auto -1px;
    height: 60%;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--brand-tertiary) 14%, transparent),
        transparent 70%
    );
    border-radius: 10px 10px 0 0;
    pointer-events: none;
    z-index: 0;
}

/* ─── Inputs ────────────────────────────────────────────────────── */

.inputstyle {
    min-height: 48px;
    padding: 12px 14px 12px 38px;
    font-weight: 400;
    background: #00000059;
    border: 1px solid color-mix(in srgb, var(--brand-tertiary) 22%, transparent);
    box-shadow:
        0 1px 0 #ffffff10 inset,
        0 1px 2px #00000080 inset;
    transition:
        border-color .2s cubic-bezier(.16,1,.3,1),
        box-shadow   .2s cubic-bezier(.16,1,.3,1),
        background   .2s cubic-bezier(.16,1,.3,1);
}

/* WCAG: placeholders need 4.5:1 against their bg too. The original
 * #888 on a near-black bg sits around 3.5:1; this lifts it. */
.inputstyle::placeholder {
    color: #a8a8a8;
    opacity: 1;
}

.inputstyle:focus {
    background: #00000080;
    border-color: color-mix(in srgb, var(--brand-primary) 65%, transparent);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--brand-primary) 22%, transparent),
        0 1px 0 #ffffff14 inset;
    outline: none;
}

.inputstyle:read-only,
.inputstyle:disabled {
    background: #2a2a2a78;
}

/* The icon in front of each input — make it brand-secondary so it
 * stands out against the field, matches the lit-edge feel. */
.el-input i {
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand-secondary);
    opacity: .9;
    pointer-events: none;
}

/* ─── Primary CTA (login button — .loginbtn.active) ────────────── */

.loginbtn {
    min-height: 48px;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    transition:
        transform   .18s cubic-bezier(.16,1,.3,1),
        box-shadow  .25s cubic-bezier(.16,1,.3,1),
        background  .25s cubic-bezier(.16,1,.3,1),
        border-color .2s cubic-bezier(.16,1,.3,1);
}

.loginbtn.active {
    /* multi-stop brand gradient so blue/red/etc. all carry the same
     * "polished metal" feel as cat's gold */
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--brand-tertiary) 70%, var(--brand-primary)),
            var(--brand-primary)   38%,
            var(--brand-secondary) 78%,
            var(--brand-deep)     108%
        );
    color: var(--brand-ink-on-light);
    border: 1px solid color-mix(in srgb, var(--brand-deep) 70%, #000);
    box-shadow:
        0 1px 0 #ffffff66 inset,
        0 -1px 0 #00000040 inset,
        0 8px 22px -10px color-mix(in srgb, var(--brand-primary) 65%, transparent);
    text-shadow: 0 1px 0 color-mix(in srgb, var(--brand-tertiary) 45%, transparent);
}
.loginbtn.active:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 #ffffff77 inset,
        0 -1px 0 #00000040 inset,
        0 12px 30px -10px color-mix(in srgb, var(--brand-primary) 80%, transparent);
}
.loginbtn.active:active {
    transform: translateY(0);
    box-shadow:
        0 1px 0 #00000040 inset,
        0 6px 14px -10px color-mix(in srgb, var(--brand-primary) 55%, transparent);
}

/* Secondary button — outlined */
.loginbtn.regisbtn,
.loginbtn:not(.active) {
    background: color-mix(in srgb, var(--brand-primary) 8%, #00000050);
    border: 1px solid color-mix(in srgb, var(--brand-tertiary) 55%, transparent);
    color: var(--brand-tertiary);
}
.loginbtn.regisbtn:hover,
.loginbtn:not(.active):hover {
    background: color-mix(in srgb, var(--brand-primary) 16%, #00000060);
    border-color: var(--brand-tertiary);
    color: var(--brand-ink-on-dark);
    transform: translateY(-1px);
}

.wantregister {
    margin-top: 16px;
    color: #c4c4c4;
}
.wantregister a {
    color: var(--brand-tertiary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--brand-tertiary) 30%, transparent);
    transition: color .18s ease-out, border-color .18s ease-out;
}
.wantregister a:hover {
    color: var(--brand-secondary);
    border-bottom-color: var(--brand-secondary);
}

/* ─── Line / contact CTA ─────────────────────────────────────────── */

.linelogin button {
    transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .25s ease-out;
}
.linelogin button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -12px #06c75566;
}

/* ─── Member shell top bar (main.php — .circlecredit) ───────────── */

.circlecredit {
    box-shadow:
        0 1px 0 #ffffff14 inset,
        0 16px 40px -22px color-mix(in srgb, var(--brand-primary) 55%, transparent),
        0 30px 50px -32px #000000d0;
}

.incrcd b {
    font-weight: 600;
}
/* The big balance number — give it actual hierarchy */
.incrcd #amount {
    font-weight: 700;
    font-size: 1.15em;
    color: var(--brand-secondary);
    text-shadow: 0 1px 0 #00000080,
                 0 0 14px color-mix(in srgb, var(--brand-secondary) 35%, transparent);
}

/* ─── "เข้าเล่นเกม" CTA tile (.styles_GO_GAME) ──────────────────── */

.styles_GO_GAME {
    position: relative;
    overflow: hidden;
    transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .25s ease-out;
}
.styles_GO_GAME::after {
    /* a slow diagonal shimmer — the single deliberate motion on the
     * dashboard; reduced-motion disables it below */
    content: "";
    position: absolute;
    inset: -50% -10%;
    background: linear-gradient(
        115deg,
        transparent 30%,
        color-mix(in srgb, var(--brand-tertiary) 28%, transparent) 50%,
        transparent 70%
    );
    transform: translateX(-110%);
    animation: gogame-shimmer 4.5s cubic-bezier(.45,.05,.3,1) 1.6s infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}
.styles_GO_GAME:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--brand-primary) 70%, transparent);
}
@keyframes gogame-shimmer {
    0%   { transform: translateX(-110%); }
    35%  { transform: translateX(110%); }
    100% { transform: translateX(110%); }
}

/* ─── Form modal inputs (re-use the polished .inputstyle) ─────── */

/* Selects inherit .inputstyle in markup; bump their min-height too. */
select.inputstyle {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--brand-tertiary) 50%),
        linear-gradient(135deg, var(--brand-tertiary) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 13px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

/* ─── Brand-tinted scrollbars (subtle, premium feel) ────────────── */

* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--brand-primary) 45%, #00000080) #00000060;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: #00000060; }
*::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--brand-primary) 50%, #2a2a2a);
    border-radius: 8px;
}

/* ─── Reduced motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .bginputlogin,
    .inputstyle,
    .loginbtn,
    .linelogin button,
    .styles_GO_GAME {
        transition: none;
    }
    .styles_GO_GAME::after {
        animation: none;
        opacity: 0;
    }
    .loginbtn.active:hover,
    .loginbtn.regisbtn:hover,
    .loginbtn:not(.active):hover,
    .linelogin button:hover,
    .styles_GO_GAME:hover {
        transform: none;
    }
}