/* =====================================================================
   Winghorizon — Components (navbar, buttons, cards, forms)
   ===================================================================== */

/* ---------- NAVBAR ---------- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 2px solid var(--red-2);
    box-shadow: 0 4px 24px rgba(0,0,0,.4), 0 0 24px rgba(219,0,0,.15);
}
.navbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: .85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.navbar-brand img { height: 42px; transition: filter var(--transition); }
.navbar-brand:hover img { filter: drop-shadow(0 0 8px var(--red-glow)); }

.nav-links {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; align-items: center; gap: .25rem;
}
.nav-links a {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem 1rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: .85rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--gray-1);
    position: relative;
    transition: all var(--transition);
}
.nav-links a::after {
    content: '';
    position: absolute; left: 50%; bottom: 4px;
    width: 0; height: 2px;
    background: var(--red-1);
    transition: width var(--transition), left var(--transition);
}
.nav-links a:hover, .nav-links a.active {
    color: var(--white);
}
.nav-links a:hover::after, .nav-links a.active::after {
    width: 60%; left: 20%;
    box-shadow: 0 0 8px var(--red-glow);
}

.navbar-toggler {
    display: none;
    background: var(--red-2);
    border: 0;
    color: var(--white);
    padding: .55rem .8rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

@media (max-width: 992px) {
    .navbar-toggler { display: inline-flex; }
    .nav-links {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--bg-2);
        border-bottom: 2px solid var(--red-2);
        padding: 1rem;
        max-height: 0; overflow: hidden;
        transition: max-height .3s ease;
    }
    .nav-links.open { max-height: 500px; }
    .nav-links li { margin: .2rem 0; }
    .nav-links a { width: 100%; }
}

/* ---------- BUTTONS ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .75rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: .85rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    color: var(--white);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
    background: linear-gradient(135deg, var(--red-2) 0%, var(--red-1) 100%);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(219,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255,26,26,.5), 0 0 24px var(--red-glow);
    color: var(--white);
}

.btn-outline {
    background: transparent;
    border-color: var(--red-2);
    color: var(--white);
}
.btn-outline:hover {
    background: var(--red-2);
    box-shadow: 0 0 18px var(--red-glow);
    color: var(--white);
}

.btn-ghost {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
}
.btn-ghost:hover {
    background: rgba(255,26,26,0.1);
    border-color: var(--red-1);
    color: var(--white);
}

.btn-success {
    background: linear-gradient(135deg, #1e7e34 0%, #28a745 100%);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(40,167,69,.35);
}
.btn-success:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(40,167,69,.5); color: var(--white); }

.btn-danger {
    background: linear-gradient(135deg, #8b0000 0%, #c0392b 100%);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(192,57,43,.35);
}
.btn-danger:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(192,57,43,.55); color: var(--white); }

.btn-facebook {
    background: #1877f2;
    color: var(--white);
    box-shadow: 0 4px 14px rgba(24,119,242,.4);
}
.btn-facebook:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(24,119,242,.55); color: var(--white); }

.btn-sm { padding: .5rem 1rem; font-size: .75rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }

/* Login chip (top right) */
.btn-login {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem 1.1rem;
    background: linear-gradient(135deg, var(--red-3) 0%, var(--red-2) 100%);
    color: var(--white);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    font-family: var(--font-display);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    transition: all var(--transition);
}
.btn-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--red-glow);
    color: var(--white);
}

/* ---------- Back button (page navigation) ---------- */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1.1rem .55rem .9rem;
    background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
    border: 1px solid rgba(255,255,255,.1);
    color: var(--white);
    border-radius: 999px;
    font-family: var(--font-display, sans-serif);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-decoration: none !important;
    transition: all var(--transition);
}
.btn-back i {
    transition: transform .25s ease;
    color: var(--red-1);
}
.btn-back:hover {
    background: linear-gradient(135deg, rgba(255,26,26,.18) 0%, rgba(255,26,26,.05) 100%);
    border-color: rgba(255,26,26,.4);
    color: var(--white);
    transform: translateX(-2px);
    box-shadow: 0 4px 14px rgba(255,26,26,.2);
}
.btn-back:hover i {
    transform: translateX(-3px);
}

/* ---------- Navbar: เติม Point chip + user-point ---------- */
.nav-topup {
    display: inline-flex !important;
    align-items: center;
    gap: .4rem;
    background: linear-gradient(135deg, rgba(255,26,26,.18), rgba(255,26,26,.05));
    border: 1px solid rgba(255,26,26,.35);
    color: var(--white) !important;
    padding: .4rem .9rem !important;
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem;
    transition: all var(--transition);
}
.nav-topup i { color: #ffd966; }
.nav-topup:hover {
    background: linear-gradient(135deg, rgba(255,26,26,.35), rgba(255,26,26,.15));
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255,26,26,.3);
}
.nav-topup.active {
    background: linear-gradient(135deg, var(--red-2), var(--red-3));
    border-color: var(--red-1);
}

.user-point {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: rgba(0,0,0,.3);
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    margin-left: .35rem;
}
.user-point i { color: #ffd966; font-size: .7rem; }

/* ---------- Navbar dropdown ---------- */
.has-dropdown {
    position: relative;
}
.dropdown-caret {
    font-size: .7rem;
    margin-left: .1rem;
    transition: transform .25s ease;
    opacity: .7;
}
.has-dropdown.open .dropdown-caret { transform: rotate(180deg); opacity: 1; }

.dropdown-menu {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    min-width: 260px;
    list-style: none;
    margin: 0;
    padding: .4rem;
    background: linear-gradient(160deg, var(--bg-3, #1a1a1a) 0%, var(--bg-2, #0f0f0f) 100%);
    border: 1px solid rgba(255,26,26,.25);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.97);
    transform-origin: top right;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index: 1000;
}
.has-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}

.dropdown-menu li { margin: 0; }
.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem .8rem;
    color: var(--white) !important;
    text-decoration: none;
    border-radius: 10px;
    transition: background .15s ease, transform .15s ease;
}
.dropdown-menu a:hover { background: rgba(255,26,26,.12); transform: translateX(2px); }
.dropdown-menu a.active { background: rgba(255,26,26,.18); }

.dd-icon {
    width: 38px; height: 38px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 6px 16px rgba(0,0,0,.3);
}
.dd-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.dd-title { font-weight: 700; font-size: .92rem; }
.dd-sub   { font-size: .72rem; color: var(--gray-2); font-weight: 400; }

/* Mobile — เปลี่ยน dropdown เป็น inline list */
@media (max-width: 900px) {
    .has-dropdown { width: 100%; }
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: rgba(255,255,255,.02);
        border-color: rgba(255,255,255,.06);
        margin-top: .3rem;
        display: none;
    }
    .has-dropdown.open .dropdown-menu { display: block; }
    .dropdown-caret { margin-left: auto; }
}

/* ---------- CARDS ---------- */
.card {
    background: linear-gradient(160deg, var(--bg-3) 0%, var(--bg-2) 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}
.card::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    border-radius: var(--radius);
    padding: 1px;
    background: linear-gradient(135deg, transparent 50%, var(--red-2) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition);
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md), 0 0 20px rgba(255,26,26,.15);
    border-color: rgba(255,26,26,.25);
}
.card:hover::before { opacity: 1; }

.card-icon {
    width: 64px; height: 64px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--red-2), var(--red-3));
    color: var(--white);
    font-size: 1.6rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 14px var(--red-glow);
}
.card-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin-bottom: .5rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.card-text {
    color: var(--gray-2);
    font-family: var(--font-thai);
    font-size: .95rem;
}

/* Service card with image */
.service-card { text-align: center; }
.service-card img {
    max-height: 110px;
    margin-bottom: 1rem;
    transition: transform var(--transition);
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.6));
}
.service-card:hover img { transform: scale(1.05) rotate(-2deg); }

/* ---------- FORMS ---------- */
.form-card {
    background: linear-gradient(160deg, var(--bg-3) 0%, var(--bg-2) 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    max-width: 480px;
    margin: 0 auto;
}
.form-group { margin-bottom: 1.1rem; }
.form-label {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-display);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--gray-1);
    margin-bottom: .4rem;
}
.form-label i { color: var(--red-1); }

.form-control {
    width: 100%;
    padding: .8rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--bg-1);
    border: 2px solid rgba(255,255,255,.08);
    color: var(--white);
    font-family: var(--font-body), var(--font-thai);
    font-size: .95rem;
    transition: all var(--transition);
}
.form-control:focus {
    outline: 0;
    border-color: var(--red-1);
    box-shadow: 0 0 0 3px rgba(255,26,26,.15);
    background: var(--bg-2);
}
.form-control::placeholder { color: var(--gray-3); }

/* checkbox / radio basic */
input[type="checkbox"], input[type="radio"] { accent-color: var(--red-1); }

/* ---------- FOOTER ---------- */
.footer {
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-0) 100%);
    border-top: 2px solid var(--red-2);
    color: var(--gray-2);
    padding: 2rem 0 1.2rem 0;
    margin-top: auto;
}
.footer-social {
    display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1rem;
}
.footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--gray-1);
    font-size: 1.1rem;
    transition: all var(--transition);
}
.footer-social a:hover {
    color: var(--white);
    background: var(--red-2);
    border-color: var(--red-1);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px var(--red-glow);
}
.footer-copyright {
    text-align: center;
    font-size: .85rem;
    color: var(--gray-3);
}
.footer-dbd img { max-height: 38px; opacity: .8; transition: opacity var(--transition); }
.footer-dbd img:hover { opacity: 1; }

/* ---------- ALERTS / FLASH ---------- */
.alert {
    padding: .8rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    border-left: 4px solid;
    background: rgba(255,255,255,.04);
    font-family: var(--font-thai);
}
.alert-success { border-color: #28a745; color: #c8f2cf; background: rgba(40,167,69,.1); }
.alert-error   { border-color: var(--red-1); color: #ffd2d2; background: rgba(255,26,26,.1); }
.alert-info    { border-color: #17a2b8; color: #c8eff5; background: rgba(23,162,184,.1); }

/* ---------- SOCIAL CONNECT LIST (profile page) ---------- */
.social-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.social-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}
.social-item:hover {
    background: rgba(255,255,255,.045);
    border-color: rgba(255,255,255,.12);
}
.social-item.soon { opacity: .55; }
.social-item.soon:hover { background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.06); }

.social-icon {
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    font-size: 1.4rem;
    background: rgba(255,255,255,.04);
    color: var(--social-color, var(--white));
    flex-shrink: 0;
}
.social-item[data-color="#1877f2"] .social-icon { color: #1877f2; background: rgba(24,119,242,.12); }
.social-item[data-color="#ea4335"] .social-icon { color: #ea4335; background: rgba(234,67,53,.12); }
.social-item[data-color="#5865f2"] .social-icon { color: #5865f2; background: rgba(88,101,242,.12); }

.social-info { flex: 1; min-width: 0; }
.social-name {
    font-family: var(--font-display);
    font-size: .9rem;
    letter-spacing: .05em;
    color: var(--white);
}
.social-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-thai);
    font-size: .8rem;
    color: var(--gray-2);
    margin-top: .2rem;
}
.status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-on   { background: #20c997; box-shadow: 0 0 8px rgba(32,201,151,.6); }
.status-off  { background: var(--gray-3); }
.status-soon { background: var(--gray-3); animation: pulse-soon 2s ease-in-out infinite; }
@keyframes pulse-soon {
    0%,100% { opacity: .4; }
    50%     { opacity: 1;  }
}

.social-action { flex-shrink: 0; }
.social-action .btn { white-space: nowrap; }

.pill {
    display: inline-block;
    padding: .35rem .8rem;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.pill-soon {
    background: rgba(255,255,255,.06);
    color: var(--gray-2);
    border: 1px solid rgba(255,255,255,.08);
}
.pill-off {
    background: rgba(139,0,0,.2);
    color: #ff8a8a;
    border: 1px solid rgba(139,0,0,.3);
}

@media (max-width: 540px) {
    .social-item { padding: .8rem; gap: .6rem; }
    .social-icon { width: 40px; height: 40px; font-size: 1.2rem; }
    .social-name { font-size: .85rem; }
}

/* ---------- LEGAL LINKS (login/register) ---------- */
.legal-links {
    margin-top: 1.8rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255,255,255,.08);
    text-align: center;
}
.legal-intro {
    font-family: var(--font-thai);
    font-size: .78rem;
    color: var(--gray-3);
    margin-bottom: .7rem;
    letter-spacing: .02em;
}
.legal-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.legal-row a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border-radius: 6px;
    font-family: var(--font-display);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray-2);
    transition: all var(--transition);
}
.legal-row a i { font-size: .8rem; color: var(--red-1); transition: color var(--transition); }
.legal-row a:hover {
    color: var(--white);
    background: rgba(255,26,26,.08);
}
.legal-row a:hover i { color: var(--red-1); filter: drop-shadow(0 0 6px var(--red-glow)); }
.legal-sep {
    color: var(--gray-3);
    font-weight: 700;
    opacity: .5;
}
@media (max-width: 480px) {
    .legal-row { gap: .3rem; }
    .legal-row a { padding: .3rem .5rem; font-size: .68rem; }
}

/* ---------- BADGES ---------- */
.badge {
    display: inline-block;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: var(--red-2);
    color: var(--white);
}