/* =========================================================
   LOVES – Pink-Purple Theme
   Layered on top of /red/style.css + Bootstrap.
   Include AFTER the base CSS links on every page:
     <link href="/public/css/theme.css" rel="stylesheet">
   ========================================================= */

/* --- Design Tokens ---------------------------------------- */
:root {
    --t-grad-main:       linear-gradient(90deg, #e91e8c, #7b2ff2);
    --t-grad-action:     linear-gradient(90deg, #6529c9, #cc2996);
    --t-grad-recharge:   linear-gradient(20deg, #8673e5, #d958a4);
    --t-grad-vip:        linear-gradient(270deg, #eeb669, #fbe1b8);
    --t-grad-vip-btn:    linear-gradient(86deg,  #f78508, #f60);
    --t-color-icon:      #d958a4;
    --t-color-label:     #432788;
    --t-color-nav-active:#fc486d;
    --t-color-nav-muted: rgb(112, 112, 112);
    --t-radius-card:     15px;
    --t-radius-btn:      30vw;
    --t-shadow-card:     0 2px 10px rgba(0,0,0,0.08);
}

/* --- Global resets (keep bg white) ----------------------- */
html.deeppurple-theme,
body.deeppurple-theme {
    background: #f5f5f5;
    color: #333;
}

/* Override red/style.css pink gradient on wrapper */
.deeppurple-theme .wrapper {
    background: #f5f5f5 !important;
}

/* --- Page wrapper extra bottom padding for fixed nav ------ */
.wrapper { padding-bottom: 60px; }

/* =========================================================
   HEADER VARIANTS
   ========================================================= */

/* Inner-page gradient header: back | title | action-icon */
.t-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--t-grad-main);
    color: #fff;
    min-height: 48px;
}
.t-header .t-header-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    flex: 1;
    text-align: center;
    margin: 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.t-header a,
.t-header button {
    color: #fff;
    background: none;
    border: none;
    padding: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
}
.t-header .material-icons { font-size: 22px; }

/* Transparent/plain header override (home page) */
.t-header-plain {
    background: transparent;
}
.t-header-plain a,
.t-header-plain .material-icons {
    color: #432788;
}

/* --- Standardized Header: 48px height on ALL pages ----- */
.deeppurple-theme .header,
.standard-header,
header.bar-nav,
.top-bar,
.vip-header,
.my-header {
    background: var(--t-grad-main) !important;
    border-bottom: none !important;
    min-height: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    color: #fff !important;
    box-sizing: border-box !important;
}
.deeppurple-theme .header .btn-link,
.standard-header .btn-link {
    color: #fff !important;
}
.deeppurple-theme .header .material-icons,
.standard-header .material-icons {
    color: #fff;
}
/* Allow my-header to be taller since it has avatar + info */
.my-header {
    height: auto !important;
    min-height: 120px !important;
    padding: 16px !important;
}

/* =========================================================
   CARDS
   ========================================================= */
.deeppurple-theme .card {
    border-radius: var(--t-radius-card);
    border: none;
    box-shadow: var(--t-shadow-card);
}
.deeppurple-theme .card-body {
    padding: 14px 16px;
}

/* =========================================================
   BUTTONS
   ========================================================= */

/* Primary gradient pill (replaces .btn-default) */
.deeppurple-theme .btn-default,
.deeppurple-theme .btn-important {
    background: var(--t-grad-action) !important;
    border: none !important;
    border-radius: var(--t-radius-btn) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(101, 41, 201, 0.35);
}
.deeppurple-theme .btn-default:hover,
.deeppurple-theme .btn-important:hover {
    opacity: 0.92;
}

/* Recharge/top-up pill variant */
.t-btn-recharge {
    display: inline-block;
    padding: 0 4vw;
    color: #fff;
    background: var(--t-grad-recharge);
    font-size: 5vw;
    font-weight: 500;
    height: 9vw;
    line-height: 9vw;
    border-radius: 30vw;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

/* Full-width action button (exit / logout style) */
.t-btn-action {
    display: block;
    width: 100%;
    border: none;
    background: var(--t-grad-action);
    color: #fff;
    border-radius: 14px;
    height: 12vw;
    line-height: 12vw;
    font-size: 4vw;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    margin: 4vw 0;
}

/* =========================================================
   PROFILE CARD (top card on my/index)
   ========================================================= */
.t-profile-card {
    background: var(--t-grad-main);
    border-radius: var(--t-radius-card);
    color: #fff;
    padding: 16px;
    box-shadow: var(--t-shadow-card);
}
.t-profile-card h5,
.t-profile-card p,
.t-profile-card small { color: rgba(255,255,255,0.9); }

/* =========================================================
   VIP BAR
   ========================================================= */
.t-vip-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--t-grad-vip);
    border-radius: 8px;
    padding: 10px 14px;
}
.t-vip-bar p { color: #9f620e; font-size: 14px; margin: 0; }
.t-vip-bar-btn {
    background: var(--t-grad-vip-btn);
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 4px 14px;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

/* =========================================================
   MENU GRID (3-column icon menu)
   ========================================================= */
.t-menu {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border-radius: var(--t-radius-card);
    box-shadow: var(--t-shadow-card);
    padding-bottom: 8px;
}
.t-menu-item {
    width: 33.33%;
    text-align: center;
    padding: 12px 0 4px;
    cursor: pointer;
}
.t-menu-icon {
    width: 8vw;
    height: 8vw;
    margin: 0 auto 2vw;
    color: var(--t-color-icon);
    display: block;
    font-size: 8vw !important;
}
.t-menu-label {
    font-size: 3vw;
    font-weight: 500;
    color: var(--t-color-label);
    display: block;
}

/* =========================================================
   AUTH PAGES (login / register)
   ========================================================= */
.t-passport {
    min-height: 100vh;
    background-size: cover;
    background-position: center top;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 28px;
}
.t-passport::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
}
.t-passport > * { position: relative; z-index: 1; }
.t-passport-logo {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-align: center;
}
.t-passport-tagline {
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    text-align: center;
    margin-bottom: 28px;
    font-style: italic;
}
.t-passport-form { width: 100%; }
.t-passport-input {
    display: block;
    width: 100%;
    background: rgba(255,255,255,0.88);
    border: none;
    border-radius: 30px;
    padding: 14px 20px 14px 48px;
    font-size: 15px;
    margin-bottom: 14px;
    outline: none;
    color: #333;
}
.t-passport-input::placeholder { color: #888; }
.t-passport-btn {
    display: block;
    width: 100%;
    background: var(--t-grad-main);
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    letter-spacing: 1px;
    margin-top: 4px;
    box-shadow: 0 4px 18px rgba(125, 118, 239, 0.45);
}
.t-passport-links {
    width: 100%;
    text-align: center;
    margin-top: 18px;
}
.t-passport-links a {
    display: block;
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    margin-top: 10px;
    text-decoration: underline;
}

/* =========================================================
   STAT / BALANCE CARDS
   ========================================================= */
.t-balance-value {
    font-size: 22px;
    font-weight: 700;
    color: #6529c9;
}
.t-balance-label {
    font-size: 12px;
    color: #888;
}

/* =========================================================
   VIP LEVEL CARDS (on home + ctrl/vip)
   ========================================================= */
.t-vip-card {
    border-radius: var(--t-radius-card);
    margin-bottom: 12px;
    padding: 14px 16px;
    color: #fff;
    box-shadow: var(--t-shadow-card);
}
.t-vip-card h5 { color: #fff; margin-bottom: 6px; }
.t-vip-card p  { color: rgba(255,255,255,0.8); font-size: 12px; margin: 2px 0; }

/* =========================================================
   BOTTOM NAV — override foot active color
   ========================================================= */
.foot > ul > a > .active p { color: var(--t-color-nav-active) !important; }
.foot > ul > a > .active img { opacity: 1; }

/* =========================================================
   FORM INPUTS (dark-bg ctrl pages)
   ========================================================= */
.deeppurple-theme .form-control {
    border-radius: 10px;
    border: 1.5px solid #e0d0f0;
    background: #faf7ff;
}
.deeppurple-theme .form-control:focus {
    border-color: #a855f7;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
}

/* =========================================================
   SECTION HEADINGS
   ========================================================= */
.deeppurple-theme h6.subtitle,
.deeppurple-theme h6 {
    color: var(--t-color-label);
}

/* =========================================================
   UTILITY
   ========================================================= */
.t-text-pink  { color: var(--t-color-icon); }
.t-text-purple { color: var(--t-color-label); }
.t-divider {
    height: 1px;
    background: #f0eaf8;
    margin: 8px 0;
}