/* ==========================================================================
   Theme-E Official VIP Styling
   Matches Photo 2 (theme e.anotechsolutions.shop/account/vip)
   ========================================================================== */

/* 1. Header Bar */
.theme-e-vip-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(180deg, #002B9A 0%, #001A66 45%, #000B33 100%) !important;
    border-bottom: 1px solid #F7C948 !important;
    box-shadow: 0 0 12px rgba(255, 196, 0, 0.15), 0 0 20px rgba(0, 102, 255, 0.18) !important;
    padding: 7px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    box-sizing: border-box !important;
}
.theme-e-vip-header .theme-e-vip-back {
    color: #FFD54A !important;
    position: absolute !important;
    left: 12px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    user-select: none !important;
    width: 32px !important;
    height: 32px !important;
}
.theme-e-vip-header .theme-e-vip-back svg {
    fill: #FFD54A !important;
    width: 20px !important;
    height: 20px !important;
}
.theme-e-vip-header .theme-e-vip-title {
    text-align: center !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    background: linear-gradient(180deg, #FFF2A6 0%, #FFD54A 45%, #FFB300 75%, #C77700 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 10px rgba(255, 200, 0, 0.35) !important;
    letter-spacing: 0.5px !important;
}

/* 2. VIP Clone Container */
.vip-page-clone {
    background: transparent;
    color: #f5f3f0;
    padding: 8px;
    box-sizing: border-box;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    min-height: calc(100vh - 44px);
}

/* 3. Top VIP Card */
.vip-page-clone .vip-card {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    padding: 10px 10px 10px 6px;
    border-radius: 10px;
    box-sizing: border-box;
}
.vip-page-clone .vip-card .s {
    flex: 1;
    min-width: 0;
}
.vip-page-clone .vip-card .s .l1 {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.vip-page-clone .vip-card .s .icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
}
.vip-page-clone .vip-card .s .l1 .v {
    flex: 1;
    width: 100%;
    padding-top: 2px;
    min-width: 0;
}
.vip-page-clone .vip-card .s .l1 .v .v1 {
    font-size: 20px;
    line-height: 1.1;
    font-weight: 600;
    margin-bottom: 4px;
}
.vip-page-clone .vip-card .s .l1 .v .v2,
.vip-page-clone .vip-card .s .l1 .v .v3 {
    position: relative;
    left: -8px;
    width: calc(100% + 8px);
    box-sizing: border-box;
    padding-inline-start: 8px;
    overflow: hidden;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-height: 24px;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}
.vip-page-clone .vip-card .s .l1 .v .v3 {
    border-top: 1px solid rgba(133, 81, 62, 0.1);
    margin-bottom: 0;
}
.vip-page-clone .vip-card .v2,
.vip-page-clone .vip-card .v3 {
    background-color: #000b33bf;
}
.vip-page-clone .vip-card .line {
    background: linear-gradient(90deg, #fff2a6, #ffd54a 45%, #ffb300);
}
.vip-page-clone .vip-card .s .l1 .v .v2 span,
.vip-page-clone .vip-card .s .l1 .v .v3 span {
    position: relative;
    z-index: 2;
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}
.vip-page-clone .vip-card .s .l1 .v .line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    transition: width 0.4s ease;
    border-radius: 999px;
}
.vip-page-clone .vip-card .e {
    display: flex;
    gap: 6px;
    align-items: center;
    align-self: flex-start;
    padding-top: 4px;
}
.vip-page-clone .vip-card .e .icon-btn {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}
.vip-page-clone .vip-card .e .icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* Card Themes by VIP Level */
.vip-page-clone .vip-card.vip1,
.vip-page-clone .vip-card.vip2,
.vip-page-clone .vip-card.vip3 {
    border: 1px solid #ebc9b1;
    background: linear-gradient(104deg, #fff7ef 2.61%, #fff3eb 23.31%, #fee8d5 41.75%, #fff2e5 62.29%, #ffead7 76.67%, #fcc092 98%);
    box-shadow: 0 2px 1px #ffffffd9 inset, 0 4px 3px #f9ead9 inset, 0 -1px 3px #ffffff73 inset, 0 2px 12px #a87e6059;
    color: #7e4836;
}
.vip-page-clone .vip-card.vip1 .v2,
.vip-page-clone .vip-card.vip1 .v3,
.vip-page-clone .vip-card.vip2 .v2,
.vip-page-clone .vip-card.vip2 .v3,
.vip-page-clone .vip-card.vip3 .v2,
.vip-page-clone .vip-card.vip3 .v3 {
    background-color: #faddc5;
}
.vip-page-clone .vip-card.vip1 .line,
.vip-page-clone .vip-card.vip2 .line,
.vip-page-clone .vip-card.vip3 .line {
    background: linear-gradient(90deg, #ffeb93, #ff8653);
}

.vip-page-clone .vip-card.vip4,
.vip-page-clone .vip-card.vip5,
.vip-page-clone .vip-card.vip6,
.vip-page-clone .vip-card.vip7 {
    border: 1px solid #b1c2eb;
    background: linear-gradient(104deg, #eff3ff 2.61%, #ebf1ff 23.31%, #d5e1fe 41.75%, #e5ecff 62.29%, #d7e2ff 76.67%, #9dbffd 98%);
    box-shadow: 0 2px 1px #ffffffd9 inset, 0 4px 3px #d9e2f9 inset, 0 -1px 3px #ffffff73 inset, 0 2px 12px #6074a859;
    color: #3a5e9b;
}
.vip-page-clone .vip-card.vip4 .v2,
.vip-page-clone .vip-card.vip4 .v3,
.vip-page-clone .vip-card.vip5 .v2,
.vip-page-clone .vip-card.vip5 .v3,
.vip-page-clone .vip-card.vip6 .v2,
.vip-page-clone .vip-card.vip6 .v3,
.vip-page-clone .vip-card.vip7 .v2,
.vip-page-clone .vip-card.vip7 .v3 {
    background-color: #c5d7fa;
}
.vip-page-clone .vip-card.vip4 .line,
.vip-page-clone .vip-card.vip5 .line,
.vip-page-clone .vip-card.vip6 .line,
.vip-page-clone .vip-card.vip7 .line {
    background: linear-gradient(90deg, #d9e4ff 26.28%, #92cbff);
}

.vip-page-clone .vip-card.vip8 {
    border: 1px solid #ebb1b1;
    background: linear-gradient(104deg, #ffefef 2.61%, #ffebeb 23.31%, #fed5d5 41.75%, #ffe5e5 62.29%, #ffd7d7 76.67%, #fd9d9d 98%);
    box-shadow: 0 2px 1px #ffffffd9 inset, 0 4px 3px #f9d9d9 inset, 0 -1px 3px #ffffff73 inset, 0 2px 12px #a8606059;
    color: #9b3a3a;
}
.vip-page-clone .vip-card.vip8 .v2,
.vip-page-clone .vip-card.vip8 .v3 {
    background-color: #fac5c5;
}
.vip-page-clone .vip-card.vip8 .line {
    background: linear-gradient(90deg, #ffa797, #ff7070);
}

.vip-page-clone .vip-card.vip9,
.vip-page-clone .vip-card.vip10,
.vip-page-clone .vip-card.vip11,
.vip-page-clone .vip-card.vip12,
.vip-page-clone .vip-card.vip13,
.vip-page-clone .vip-card.vip14,
.vip-page-clone .vip-card.vip15,
.vip-page-clone .vip-card.vip16,
.vip-page-clone .vip-card.vip17,
.vip-page-clone .vip-card.vip18,
.vip-page-clone .vip-card.vip19,
.vip-page-clone .vip-card.vip20 {
    border: 1px solid #3f4653;
    background: linear-gradient(140deg, #2b313b, #21262f);
    box-shadow: inset 0 1px #ffffff0f;
    color: #d4e8ff;
}
.vip-page-clone .vip-card.vip9 .v2,
.vip-page-clone .vip-card.vip9 .v3,
.vip-page-clone .vip-card.vip10 .v2,
.vip-page-clone .vip-card.vip10 .v3 {
    background-color: #000b33bf;
}

.vip-next-hint {
    font-size: 11px;
    opacity: 0.75;
    margin-top: 4px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 4. Quick Action Cards */
.vip-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}
.vip-quick-item {
    background: linear-gradient(180deg, #002b9a, #001a66 45%, #000b33);
    border: 1px solid #f7c948;
    border-radius: 10px;
    padding: 8px 10px;
    min-height: 54px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}
.vip-quick-item span {
    color: #f5f3f0;
    font-size: 12px;
    line-height: 1.1;
}
.vip-quick-item strong {
    color: #ffd54a;
    font-size: 18px;
    line-height: 1.2;
    margin-top: 4px;
    font-weight: 700;
}

/* 5. Main Content Wrap */
.vip-content-wrap {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: flex-start;
}

/* 6. Sidebar List */
.vip-sidebar-list {
    width: 64px;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
    max-height: calc(100vh - 200px);
}
.vip-side-item {
    width: 100%;
    min-height: 48px;
    padding: 5px 3px;
    margin-bottom: 6px;
    border-radius: 6px;
    background: linear-gradient(180deg, #002b9a, #001a66 45%, #000b33);
    color: #e4e9ff;
    border: 1px solid #f7c948;
    box-shadow: 0 0 10px #0066ff33;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.vip-side-item.active {
    background: linear-gradient(180deg, #fff2a6, #ffd54a 45%, #ffb300 75%, #c77700);
    color: #1f1400;
    box-shadow: 0 0 14px #ffc4004d;
}
.vip-side-item.active .vip-side-name {
    color: #1f1400;
}
.vip-side-row {
    display: flex;
    align-items: center;
    gap: 3px;
}
.vip-side-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
}
.vip-side-name {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}
.vip-current-tag {
    display: block;
    font-size: 10px;
    margin-top: 2px;
    color: #1e0ff4;
    font-weight: 700;
}
.vip-lock-tag {
    display: block;
    font-size: 10px;
    margin-top: 1px;
    color: #95a0ad;
    line-height: 1;
}

/* 7. Right Main Panels */
.vip-main-panels {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.vip-panel {
    background: linear-gradient(180deg, #002b9a, #001a66 45%, #000b33);
    border: 1px solid #f7c948;
    box-shadow: 0 0 14px #ffc4002e, 0 0 25px #0066ff2e, inset 0 0 8px #ffffff0a;
    border-radius: 9px;
    min-height: 86px;
    padding: 12px 14px;
    text-align: left;
    box-sizing: border-box;
}
.vip-panel h3 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #ffd54a;
    text-align: center;
    font-weight: 700;
}
.vip-panel p {
    margin: 0;
    font-size: 18px;
    color: #f5f3f0;
}
.vip-benefit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.vip-benefit-row:last-child {
    border-bottom: none;
}
.vip-benefit-row span {
    color: #f5f3f0;
    font-size: 13.5px;
    line-height: 1.2;
}
.vip-benefit-row strong {
    color: #ffd54a;
    font-size: 13.5px;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
}

/* Level Up Reward Card */
.vip-level-reward-amount {
    text-align: center;
    color: #ffd54a;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 10px;
}
.vip-claim-btn {
    width: 100%;
    border: 0;
    border-radius: 999px;
    height: 40px;
    background: linear-gradient(180deg, #fff2a6, #ffd54a 45%, #ffb300 75%, #c77700);
    color: #1f1400;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(255, 196, 0, 0.35);
    transition: all 0.2s ease;
}
.vip-claim-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}
.vip-claim-btn.received {
    background: #3a4870;
    color: #aeb9da;
    opacity: 0.8;
}

/* 8. Rules & History Modal */
.vip-info-panel {
    margin-top: 8px;
    background: linear-gradient(180deg, #002b9a, #001a66 45%, #000b33);
    border: 1px solid #f7c948;
    border-radius: 10px;
    box-shadow: 0 0 14px #ffc4002e, 0 0 25px #0066ff2e, inset 0 0 8px #ffffff0a;
    overflow: hidden;
    box-sizing: border-box;
}
.vip-info-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    color: #f5f3f0;
    background: linear-gradient(180deg, #002b9a, #001a66 45%, #000b33);
    border-bottom: 1px solid #f7c948;
}
.vip-info-head span {
    font-size: 15px;
    font-weight: 600;
    color: #ffd54a;
}
.vip-info-head button {
    border: 0;
    border-radius: 6px;
    padding: 4px 10px;
    background: linear-gradient(180deg, #fff2a6, #ffd54a 45%, #ffb300 75%, #c77700);
    color: #1f1400;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.history-rules-container {
    padding: 10px;
    box-sizing: border-box;
}
.history-section-group {
    display: flex;
    margin: 8px 0 14px;
    gap: 8px;
}
.history-tabs {
    flex: 1;
    padding: 10px;
    border: 1px solid #f7c948;
    border-radius: 6px;
    cursor: pointer;
    color: #e4e9ff;
    font-weight: 700;
    background: linear-gradient(180deg, #002b9a, #001a66 45%, #000b33);
    text-align: center;
}
.history-tabs.active {
    color: #1f1400;
    background: linear-gradient(180deg, #fff2a6, #ffd54a 45%, #ffb300 75%, #c77700);
    box-shadow: 0 0 14px #ffc4004d;
}
.rules-content h2 {
    font-size: 20px;
    color: #ffd54a;
    margin: 0 0 4px;
}
.rules-content p {
    font-size: 14px;
    margin: 0 0 10px;
    color: #f5f3f0;
}
.rules-card {
    color: #f5f3f0;
    background: linear-gradient(180deg, #002b9a, #001a66 45%, #000b33);
    border: 1px solid #f7c948;
    box-shadow: 0 0 14px #ffc4002e, 0 0 25px #0066ff2e, inset 0 0 8px #ffffff0a;
    padding: 0 10px 10px;
    margin: 14px 0;
    border-radius: 8px;
}
.rules-card-header {
    font-weight: 700;
    color: #1f1400;
    background: linear-gradient(180deg, #fff2a6, #ffd54a 45%, #ffb300 75%, #c77700);
    padding: 6px 14px;
    border-radius: 0 0 8px 8px;
    margin: 0 auto;
    width: max-content;
    font-size: 13px;
}
.rules-card-text {
    color: #f5f3f0;
    margin-top: 8px;
    font-size: 12px;
    text-align: justify;
    line-height: 1.5;
}
.no-data-container {
    text-align: center;
    padding: 30px 10px;
}
.no-data-history-img {
    width: 140px;
    height: auto;
    margin: 0 auto;
    display: block;
}
.no-data-history-text {
    display: block;
    margin-top: 10px;
    color: #cbd5e1;
    font-size: 13px;
}
.history-item {
    border-bottom: 1px solid rgba(247, 201, 72, 0.25);
    padding: 8px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.history-item-title {
    font-weight: 700;
    color: #ffd54a;
    font-size: 13px;
    margin: 0 0 2px;
}
.history-item-exp {
    color: #cbd5e1;
    font-size: 11px;
    margin: 0;
}
.history-item-date {
    color: #94a3b8;
    font-size: 10px;
    margin: 2px 0 0;
}
.history-item-description {
    color: #ffd54a;
    font-weight: 700;
    font-size: 14px;
    margin: 0;
}

/* ==========================================================================
   Full Top Placement & Complete Removal of Blank Space & Stray Elements
   ========================================================================== */
body.vip-page-active {
    overflow-x: hidden !important;
}

body.vip-page-active #app {
    padding-top: 0 !important;
    margin-top: 0 !important;
    position: relative !important;
}

/* Hide all other children inside #app except our Theme-E VIP container */
body.vip-page-active #app > *:not(#theme-e-vip-root) {
    display: none !important;
}

/* Hide old vue wrappers, blank spaces, and bottom tabbar */
body.vip-page-active .page-wrapper,
body.vip-page-active .tabbar-container,
body.vip-page-active .app-tabber,
body.vip-page-active .vipPage,
body.vip-page-active .privileges,
body.vip-page-active .upgrade-wrapper,
body.vip-page-active header:not(#theme-e-vip-app-bar),
body.vip-page-active .van-nav-bar {
    display: none !important;
}

/* Top-level VIP Root container pinned to top */
#theme-e-vip-root {
    display: block !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    min-height: 100vh !important;
    background: radial-gradient(circle at top, rgba(0, 102, 255, 0.15), transparent 30%), linear-gradient(180deg, #000B33 0%, #00071F 100%) !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    z-index: 100 !important;
}

/* Button exact match to Photo 2 */
.vip-claim-btn {
    width: 100% !important;
    border: 0 !important;
    border-radius: 999px !important;
    height: 40px !important;
    background: linear-gradient(180deg, #fff2a6, #ffd54a 45%, #ffb300 75%, #c77700) !important;
    color: #1f1400 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 0 12px rgba(255, 196, 0, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    margin-top: 4px !important;
}
.vip-claim-btn:active {
    transform: scale(0.98);
}