/* ==========================================================================
   AIRBORN HIGH FIVE x20 — MMOWEB 4 CUSTOM STYLESHEET
   Style: Lineage II Epic Dark Fantasy Theme (AirBorn Edition)
   ========================================================================== */

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

/* --- Root Palette Variables --- */
:root {
    --ab-bg-main: #080b12;
    --ab-bg-card: rgba(14, 18, 28, 0.90);
    --ab-bg-card-secondary: rgba(10, 13, 20, 0.80);
    --ab-bg-input: rgba(7, 9, 15, 0.85);
    
    --ab-gold-primary: #e5b869;
    --ab-gold-light: #fbe3a1;
    --ab-gold-dark: #b88632;
    --ab-gold-glow: rgba(229, 184, 105, 0.35);
    --ab-gold-gradient: linear-gradient(135deg, #fbe3a1 0%, #e5b869 50%, #b88632 100%);
    
    --ab-border-gold: 1px solid rgba(229, 184, 105, 0.25);
    --ab-border-gold-hover: 1px solid rgba(229, 184, 105, 0.55);
    
    --ab-text-light: #f1f5f9;
    --ab-text-muted: #94a3b8;
    --ab-text-dim: #64748b;
    
    --ab-font-serif: 'Cinzel', 'Times New Roman', serif;
    --ab-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --- Global Page & Background --- */
html, body {
    background-color: var(--ab-bg-main) !important;
    color: var(--ab-text-light) !important;
    font-family: var(--ab-font-sans) !important;
}

#page-container {
    background-color: var(--ab-bg-main) !important;
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(229, 184, 105, 0.12) 0%, transparent 60%),
        radial-gradient(circle at 10% 40%, rgba(56, 189, 248, 0.05) 0%, transparent 40%),
        linear-gradient(180deg, rgba(8, 11, 18, 0.82) 0%, rgba(8, 11, 18, 0.94) 100%),
        url('https://airborn.fun/assets/images/banner_dragon_siege.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    min-height: 100vh !important;
}

#main-container {
    background: transparent !important;
}

/* --- Typography & Global Contrast --- */
h1, h2, h3, h4, h5, h6, .block-title, .h4 {
    font-family: var(--ab-font-serif) !important;
    letter-spacing: 0.05em !important;
    color: var(--ab-text-light) !important;
}

.content-full .h4 {
    color: var(--ab-gold-light) !important;
    text-shadow: 0 0 20px rgba(229, 184, 105, 0.4), 0 2px 4px rgba(0, 0, 0, 0.8);
    font-size: 1.6rem !important;
    font-weight: 800 !important;
}

.text-muted, .text-black, .text-dark {
    color: var(--ab-text-muted) !important;
}

code {
    background: rgba(229, 184, 105, 0.15) !important;
    color: var(--ab-gold-light) !important;
    border: 1px solid rgba(229, 184, 105, 0.35) !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    font-size: 0.95em !important;
    font-weight: 600 !important;
}

/* --- Navigation Header (Top Bar) --- */
#page-header {
    background: rgba(8, 11, 18, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(229, 184, 105, 0.22) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

.text-dual-primary-dark {
    font-family: var(--ab-font-serif) !important;
    font-weight: 800 !important;
    font-size: 1.4rem !important;
    letter-spacing: 2px !important;
    background: var(--ab-gold-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
    text-shadow: 0 0 15px rgba(229, 184, 105, 0.4);
}

/* Top Menu Server Dropdown & Links */
.nav-main-header > li > a.nav-submenu,
.nav-main-header > li > a {
    background: rgba(18, 23, 36, 0.8) !important;
    border: 1px solid rgba(229, 184, 105, 0.3) !important;
    color: var(--ab-gold-light) !important;
    font-family: var(--ab-font-serif) !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    padding: 7px 18px !important;
    transition: all 0.2s ease !important;
}

.nav-main-header > li > a:hover {
    background: rgba(229, 184, 105, 0.15) !important;
    border-color: var(--ab-gold-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(229, 184, 105, 0.3) !important;
}

.nav-main-header a {
    color: #cbd5e1 !important;
    font-size: 0.92rem !important;
}

.nav-main-header a:hover,
.nav-main-header a.active {
    color: var(--ab-gold-light) !important;
}

.nav-main-header a i {
    color: var(--ab-gold-primary) !important;
}

/* Top Buttons (Logout, User dropdown) */
.btn-dual-secondary {
    background: rgba(18, 23, 36, 0.7) !important;
    border: 1px solid rgba(229, 184, 105, 0.25) !important;
    color: var(--ab-text-light) !important;
    border-radius: 6px !important;
    font-family: var(--ab-font-serif) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.05em !important;
    transition: all 0.2s ease !important;
}

.btn-dual-secondary:hover, 
.btn-dual-secondary.active {
    background: rgba(229, 184, 105, 0.15) !important;
    border-color: var(--ab-gold-primary) !important;
    color: var(--ab-gold-light) !important;
    box-shadow: 0 0 12px rgba(229, 184, 105, 0.3) !important;
}

/* Dropdown Menus */
.dropdown-menu {
    background: rgba(12, 16, 26, 0.97) !important;
    backdrop-filter: blur(16px) !important;
    border: var(--ab-border-gold) !important;
    border-radius: 8px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(229, 184, 105, 0.15) !important;
}

.dropdown-menu .dropdown-item {
    color: #cbd5e1 !important;
    transition: all 0.2s ease !important;
}

.dropdown-menu .dropdown-item:hover {
    background: rgba(229, 184, 105, 0.15) !important;
    color: var(--ab-gold-light) !important;
}

.dropdown-divider {
    border-top: 1px solid rgba(229, 184, 105, 0.2) !important;
}

/* --- Dashboard Stat Widgets (Email, Balance, Discount, Bonus Code) --- */
.options-container {
    background: var(--ab-bg-card) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: var(--ab-border-gold) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(229, 184, 105, 0.08) !important;
}

.options-container .font-size-h4 {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.options-container .text-primary-light {
    color: var(--ab-gold-primary) !important;
}

.options-container .badge-secondary {
    background: rgba(229, 184, 105, 0.2) !important;
    color: var(--ab-gold-light) !important;
    border: 1px solid rgba(229, 184, 105, 0.3) !important;
}

/* ⚠️ CRITICAL FIX: The white flash overlay on widgets (Bonus Code / Balance) */
.options-overlay,
.options-overlay.bg-white {
    background: rgba(14, 18, 28, 0.95) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(229, 184, 105, 0.35) !important;
    border-radius: 10px !important;
    color: #f1f5f9 !important;
}

.options-overlay .h4, 
.options-overlay .h5, 
.options-overlay .h6, 
.options-overlay a, 
.options-overlay span {
    color: #f1f5f9 !important;
}

.options-overlay .nav-link {
    color: var(--ab-gold-light) !important;
}

.options-overlay .nav-link:hover {
    color: #ffffff !important;
    background: rgba(229, 184, 105, 0.15) !important;
}

/* --- Card Blocks (General) --- */
.block {
    background: var(--ab-bg-card) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: var(--ab-border-gold) !important;
    border-radius: 12px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.75), 0 0 25px rgba(229, 184, 105, 0.1) !important;
    overflow: hidden !important;
}

.block-header {
    background: linear-gradient(90deg, rgba(229, 184, 105, 0.18) 0%, rgba(14, 18, 28, 0.8) 100%) !important;
    border-bottom: 1px solid rgba(229, 184, 105, 0.25) !important;
    padding: 14px 20px !important;
}

.block-header.bg-gd-dusk,
.block-header.bg-gd-emerald,
.block-header.bg-gd-primary,
.block-header.bg-primary-dark {
    background: linear-gradient(90deg, rgba(229, 184, 105, 0.2) 0%, rgba(14, 18, 28, 0.85) 100%) !important;
}

.block-title {
    color: var(--ab-gold-light) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

.block-content {
    background: transparent !important;
    color: var(--ab-text-light) !important;
}

.block-content.bg-body-light {
    background: var(--ab-bg-card-secondary) !important;
    border-top: 1px solid rgba(229, 184, 105, 0.18) !important;
}

/* --- Form Fields & Inputs --- */
label {
    color: var(--ab-gold-light) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 6px !important;
}

.form-control {
    background-color: var(--ab-bg-input) !important;
    border: 1px solid rgba(229, 184, 105, 0.25) !important;
    color: var(--ab-text-light) !important;
    border-radius: 6px !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease-in-out !important;
}

.form-control:focus {
    background-color: rgba(12, 16, 26, 0.95) !important;
    border-color: var(--ab-gold-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(229, 184, 105, 0.35) !important;
}

.form-control::placeholder {
    color: var(--ab-text-dim) !important;
}

select.form-control option {
    background-color: #0d121c !important;
    color: #f1f5f9 !important;
}

/* Checkbox & Radio */
.custom-control-label {
    color: var(--ab-text-muted) !important;
    font-size: 0.88rem !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ab-gold-primary) !important;
    border-color: var(--ab-gold-primary) !important;
}

/* --- Buttons --- */
.btn-alt-primary,
.btn-primary,
.submit-form {
    background: var(--ab-gold-gradient) !important;
    border: 1px solid #fbe3a1 !important;
    color: #080b12 !important;
    font-family: var(--ab-font-serif) !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 15px rgba(229, 184, 105, 0.3) !important;
    transition: all 0.25s ease !important;
}

.btn-alt-primary:hover,
.btn-primary:hover,
.submit-form:hover {
    background: linear-gradient(135deg, #ffffff 0%, #fbe3a1 50%, #e5b869 100%) !important;
    color: #000000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 22px rgba(229, 184, 105, 0.55) !important;
}

.btn-alt-secondary {
    background: rgba(22, 28, 42, 0.8) !important;
    border: 1px solid rgba(229, 184, 105, 0.3) !important;
    color: var(--ab-gold-light) !important;
    font-family: var(--ab-font-serif) !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.btn-alt-secondary:hover {
    background: rgba(229, 184, 105, 0.15) !important;
    border-color: var(--ab-gold-primary) !important;
    color: #ffffff !important;
}

/* Refresh character list & secondary outline buttons */
.btn-outline-info,
.btn-outline-primary {
    border-color: rgba(229, 184, 105, 0.4) !important;
    color: var(--ab-gold-light) !important;
    background: rgba(14, 18, 28, 0.6) !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease !important;
}

.btn-outline-info:hover,
.btn-outline-primary:hover {
    background: rgba(229, 184, 105, 0.2) !important;
    border-color: var(--ab-gold-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(229, 184, 105, 0.35) !important;
}

/* --- Secondary Links --- */
.link-effect {
    color: var(--ab-text-muted) !important;
    font-size: 0.88rem !important;
    transition: all 0.2s ease !important;
}

.link-effect:hover {
    color: var(--ab-gold-light) !important;
    text-shadow: 0 0 10px rgba(229, 184, 105, 0.5) !important;
}

.link-effect i {
    color: var(--ab-gold-primary) !important;
}

/* --- Tabs on Sign Up / Reminder --- */
.nav-tabs-alt {
    border-bottom: 1px solid rgba(229, 184, 105, 0.2) !important;
    background: rgba(10, 13, 20, 0.6) !important;
}

.nav-tabs-alt .nav-link {
    color: var(--ab-text-muted) !important;
    border-bottom: 2px solid transparent !important;
    font-family: var(--ab-font-serif) !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.nav-tabs-alt .nav-link.active,
.nav-tabs-alt .nav-link:hover {
    color: var(--ab-gold-light) !important;
    border-bottom: 2px solid var(--ab-gold-primary) !important;
    background: rgba(229, 184, 105, 0.1) !important;
}

/* --- Registration Completed Screen (signup_completed) Glass Box --- */
.content-full .py-30.h6 {
    background: var(--ab-bg-card) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: var(--ab-border-gold) !important;
    border-radius: 12px !important;
    padding: 30px 35px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(229, 184, 105, 0.12) !important;
    color: #cbd5e1 !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    font-family: var(--ab-font-sans) !important;
}

/* Tables & Stats Inside Cabinet --- */
.table {
    color: var(--ab-text-light) !important;
}

.table th {
    border-top: none !important;
    border-bottom: 1px solid rgba(229, 184, 105, 0.25) !important;
    color: var(--ab-gold-light) !important;
    font-family: var(--ab-font-serif) !important;
    font-weight: 700 !important;
}

.table td {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(229, 184, 105, 0.08) !important;
}

/* Account Credentials Table */
.table-bordered {
    background: rgba(7, 9, 15, 0.75) !important;
    border: 1px solid rgba(229, 184, 105, 0.25) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 25px 0 !important;
}

.table-bordered td {
    border: 1px solid rgba(229, 184, 105, 0.18) !important;
    padding: 12px 18px !important;
    font-size: 0.95rem !important;
}

.table-bordered td:first-child {
    color: var(--ab-gold-light) !important;
    font-weight: 600 !important;
    width: 48% !important;
}

.table-bordered td:last-child {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Save to .txt button */
.table-bordered a.link-effect {
    background: var(--ab-gold-gradient) !important;
    color: #080b12 !important;
    font-family: var(--ab-font-serif) !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 10px 24px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(229, 184, 105, 0.3) !important;
    transition: all 0.25s ease !important;
}

.table-bordered a.link-effect:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(229, 184, 105, 0.55) !important;
    color: #000000 !important;
}

.table-bordered a.link-effect i {
    color: #080b12 !important;
    margin-right: 6px !important;
}

/* --- Sidebar (When Logged In) --- */
#sidebar {
    background: rgba(8, 11, 18, 0.98) !important;
    border-right: 1px solid rgba(229, 184, 105, 0.2) !important;
}

.nav-main a {
    color: var(--ab-text-muted) !important;
    font-family: var(--ab-font-sans) !important;
}

.nav-main a:hover,
.nav-main a.active {
    color: var(--ab-gold-light) !important;
    background: rgba(229, 184, 105, 0.12) !important;
    border-left: 3px solid var(--ab-gold-primary) !important;
}

.nav-main a i {
    color: var(--ab-gold-primary) !important;
}

/* --- Modals --- */
.modal-content {
    background: var(--ab-bg-card) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: var(--ab-border-gold) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 30px rgba(229, 184, 105, 0.2) !important;
}

.modal-header {
    border-bottom: 1px solid rgba(229, 184, 105, 0.25) !important;
}

.modal-footer {
    border-top: 1px solid rgba(229, 184, 105, 0.2) !important;
}

/* --- Badges --- */
.badge {
    border-radius: 4px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
}

.badge-primary,
.badge-warning {
    background: var(--ab-gold-gradient) !important;
    color: #080b12 !important;
}

/* --- Scrollbars --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #080b12;
}
::-webkit-scrollbar-thumb {
    background: #2a3449;
    border-radius: 4px;
    border: 1px solid rgba(229, 184, 105, 0.2);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--ab-gold-dark);
}

/* --- Compact Auth Screens (Fits 100vh without vertical scrollbar) --- */
#main-container .content.content-full {
    padding-top: 20px !important;
    padding-bottom: 15px !important;
}

.js-validation-signin .block,
.js-validation-reminder .block {
    margin-bottom: 0 !important;
}

.js-validation-signin .block-header,
.js-validation-reminder .block-header {
    padding: 12px 20px !important;
    min-height: 48px !important;
}

.js-validation-signin .block-title,
.js-validation-reminder .block-title {
    font-size: 1.05rem !important;
    letter-spacing: 0.04em !important;
}

.js-validation-signin .block-content,
.js-validation-reminder .block-content {
    padding: 18px 22px !important;
}

.js-validation-signin .form-group,
.js-validation-reminder .form-group {
    margin-bottom: 12px !important;
}

.js-validation-signin .form-group label,
.js-validation-reminder .form-group label {
    margin-bottom: 4px !important;
    font-size: 0.85rem !important;
}

.js-validation-signin .form-text,
.js-validation-reminder .form-text {
    margin-top: 3px !important;
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
}

.js-validation-signin .block-content.bg-body-light,
.js-validation-reminder .block-content.bg-body-light {
    padding: 10px 18px !important;
}

.js-validation-signin .nav-tabs-alt,
.js-validation-reminder .nav-tabs-alt {
    margin-bottom: 0 !important;
}

/* --- Скрытие старого верхнего заголовка Welcome to the Account Panel --- */
.content.content-full > .pb-20.text-center,
.content.content-full > .text-center:first-child,
.pb-20.text-center,
.pb-20.text-center h1.h4,
h1.h4.font-w700.mt-30.mb-10 {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.js-validation-signin,
#form_signup,
.js-validation-reminder {
    margin-top: 6px !important;
}

/* --- Сверхкомпактные формы (без лишних отступов и скролла) --- */
#main-container .content.content-full {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.js-validation-signin .block,
#form_signup .block,
.js-validation-reminder .block {
    margin-bottom: 8px !important;
}

.js-validation-signin .block-header,
#form_signup .block-header,
.js-validation-reminder .block-header {
    padding: 10px 18px !important;
    min-height: 42px !important;
}

.js-validation-signin .block-content,
#form_signup .block-content,
.js-validation-reminder .block-content {
    padding: 14px 20px 8px 20px !important;
}

.js-validation-signin .block-content.bg-body-light,
#form_signup .block-content.bg-body-light,
.js-validation-reminder .block-content.bg-body-light {
    padding: 8px 16px !important;
}

.js-validation-signin .form-group,
#form_signup .form-group,
.js-validation-reminder .form-group {
    margin-bottom: 8px !important;
}

.js-validation-signin .form-text,
#form_signup .form-text,
.js-validation-reminder .form-text {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    font-size: 0.74rem !important;
    line-height: 1.25 !important;
}

.js-validation-signin .push,
#form_signup .push,
.js-validation-reminder .push {
    margin-bottom: 6px !important;
}

.js-validation-signin .submit-form,
#form_signup .submit-form,
.js-validation-reminder .submit-form {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    padding: 9px 22px !important;
    font-size: 0.88rem !important;
}

.custom-control.custom-checkbox {
    margin-bottom: 4px !important;
    min-height: 1.3rem !important;
}

.custom-control-label {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
}