/* =========================================================================
REFERRAL SUB-BANNER
========================================================================= */

.referral-banner {
display: grid;
grid-template-columns: 1.6fr 1fr;
align-items: center;
background: linear-gradient(135deg, #1e1b4b 0%, #1e293b 100%);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 24px;
padding: 22px;
margin-bottom: 25px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.ref-content h3 {
font-size: 1.05rem;
font-weight: 700;
line-height: 1.4;
margin-bottom: 14px;
}

.ref-btn {
background-color: var(--purple);
color: #fff;
border: none;
border-radius: 12px;
padding: 10px 18px;
font-size: 0.8rem;
font-weight: bold;
cursor: pointer;
transition: background 0.2s;
}

.ref-btn:hover {
background-color: #7c3aed;
}

.gift-svg {
width: 95px;
height: 95px;
filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.3));
}

/* =========================================================================
MICRO SERVICE GRID
========================================================================= */

.micro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 25px;
}

.micro-card {
display: flex;
align-items: center;
gap: 10px;
background-color: var(--bg-card);
border-radius: 18px;
padding: 12px 14px;
cursor: pointer;
transition: transform 0.2s;
}

.micro-card:hover {
transform: translateY(-2px);
}

.micro-icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}

.micro-icon.p-purple {
background-color: rgba(139, 92, 246, 0.08);
color: var(--purple);
}

.micro-icon.p-green {
background-color: rgba(34, 197, 94, 0.08);
color: var(--green);
}

.micro-icon.p-blue {
background-color: rgba(59, 130, 246, 0.08);
color: #3b82f6;
}

.micro-icon.p-gold {
background-color: rgba(245, 158, 11, 0.08);
color: var(--gold);
}

.micro-text h5 {
font-size: 0.82rem;
font-weight: 700;
color: var(--text-white);
}

.micro-text p {
font-size: 0.68rem;
color: var(--text-gray);
margin-top: 1px;
}

/* =========================================================================
PREMIUM CARD
========================================================================= */

.premium-card {
background-color: var(--bg-card);
border: 1.5px solid #3b82f6;
border-radius: 24px;
padding: 22px;
margin-bottom: 30px;
position: relative;
box-shadow: 0 10px 30px rgba(59, 130, 246, 0.15);
}

.premium-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}

.premium-icon {
background-color: var(--accent);
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}

.premium-badge {
font-size: 1.05rem;
font-weight: bold;
}

.premium-badge span {
background-color: var(--gold);
color: var(--bg-primary);
font-size: 0.65rem;
font-weight: 900;
padding: 2px 6px;
border-radius: 6px;
vertical-align: middle;
margin-left: 4px;
}

.premium-card p {
font-size: 0.8rem;
color: var(--text-gray);
line-height: 1.5;
margin-bottom: 16px;
}

.upgrade-btn {
width: 100%;
padding: 12px;
border: none;
border-radius: 12px;
background-color: var(--accent);
color: #fff;
font-size: 0.9rem;
font-weight: bold;
cursor: pointer;
transition:
background 0.2s ease,
opacity 0.2s ease,
transform 0.15s ease;
}

.upgrade-btn:hover {
background-color: #1d4ed8;
}

.upgrade-btn:active {
transform: scale(0.98);
}

.upgrade-btn:disabled {
opacity: 0.7;
cursor: wait;
}

/* =========================================================================
PREMIUM STATUS
========================================================================= */

.premium-status {
display: inline-flex;
align-items: center;
min-height: 24px;
margin-bottom: 8px;
font-size: 0.78rem;
font-weight: 700;
color: var(--text-gray);
}

.premium-status.premium-active {
color: #4ade80;
}

/* =========================================================================
PREMIUM ACTIVE MODAL
========================================================================= */

.premium-modal {
position: fixed;
inset: 0;

width: 100%;
height: 100%;

z-index: 99999;

display: flex;
align-items: center;
justify-content: center;

padding: 20px;
box-sizing: border-box;

visibility: hidden;
opacity: 0;

pointer-events: none;

transition:
opacity 0.25s ease,
visibility 0.25s ease;
}

.premium-modal.show {
visibility: visible;
opacity: 1;
pointer-events: auto;
}

/* =========================================================================
MODAL OVERLAY
========================================================================= */

.premium-modal-overlay {
position: absolute;
inset: 0;

width: 100%;
height: 100%;

background: rgba(2, 6, 23, 0.78);

backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);

pointer-events: none;
}

.premium-modal.show .premium-modal-overlay {
pointer-events: auto;
}

/* =========================================================================
MODAL BOX
========================================================================= */

.premium-modal-box {
position: relative;
z-index: 2;

width: min(100%, 390px);
max-height: calc(100vh - 40px);

overflow-y: auto;

box-sizing: border-box;

background:
linear-gradient(
145deg,
#111827 0%,
#0f172a 55%,
#111827 100%
);

border: 1px solid rgba(59, 130, 246, 0.35);

border-radius: 28px;

padding: 30px 24px 24px;

text-align: center;

box-shadow:
0 30px 80px rgba(0, 0, 0, 0.55),
0 0 45px rgba(59, 130, 246, 0.12);

transform: translateY(20px) scale(0.96);

transition:
transform 0.3s ease;
}

.premium-modal.show .premium-modal-box {
transform: translateY(0) scale(1);
}

/* =========================================================================
MODAL CLOSE BUTTON
========================================================================= */

.premium-modal-close {
position: absolute;

top: 12px;
right: 14px;

width: 34px;
height: 34px;

border: none;
border-radius: 50%;

background: rgba(255, 255, 255, 0.06);

color: #94a3b8;

font-size: 24px;
line-height: 1;

cursor: pointer;

display: flex;
align-items: center;
justify-content: center;

z-index: 5;

transition:
background 0.2s ease,
color 0.2s ease,
transform 0.15s ease;
}

.premium-modal-close:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}

.premium-modal-close:active {
transform: scale(0.92);
}

/* =========================================================================
PREMIUM DIAMOND
========================================================================= */

.premium-modal-icon {
width: 70px;
height: 70px;

margin: 0 auto 15px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 22px;

background:
linear-gradient(
135deg,
rgba(59, 130, 246, 0.18),
rgba(139, 92, 246, 0.18)
);

border: 1px solid rgba(96, 165, 250, 0.25);

font-size: 36px;

box-shadow:
0 0 30px rgba(59, 130, 246, 0.15);
}

/* =========================================================================
PREMIUM LABEL
========================================================================= */

.premium-modal-label {
display: inline-block;

margin-bottom: 8px;

font-size: 0.68rem;

font-weight: 900;

letter-spacing: 2px;

color: #60a5fa;
}

/* =========================================================================
MODAL TITLE
========================================================================= */

.premium-modal-box h2 {
margin: 0 0 10px;

color: #fff;

font-size: 1.45rem;

font-weight: 800;

line-height: 1.25;
}

/* =========================================================================
MODAL DESCRIPTION
========================================================================= */

.premium-modal-description {
margin: 0 auto 22px;

max-width: 320px;

color: #94a3b8;

font-size: 0.82rem;

line-height: 1.6;
}

/* =========================================================================
PREMIUM BENEFITS
========================================================================= */

.premium-benefits {
text-align: left;

background: rgba(255, 255, 255, 0.035);

border: 1px solid rgba(255, 255, 255, 0.06);

border-radius: 18px;

padding: 14px 15px;

margin-bottom: 20px;
}

.premium-benefit {
display: flex;
align-items: center;

gap: 11px;

color: #e2e8f0;

font-size: 0.78rem;

line-height: 1.4;
}

.premium-benefit + .premium-benefit {
margin-top: 12px;
}

.benefit-check {
flex: 0 0 auto;

width: 22px;
height: 22px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: rgba(34, 197, 94, 0.12);

color: #4ade80;

font-size: 0.75rem;

font-weight: 900;
}

/* =========================================================================
AWESOME BUTTON
========================================================================= */

.premium-modal-ok {
width: 100%;

border: none;

border-radius: 14px;

padding: 13px 16px;

background:
linear-gradient(
135deg,
#2563eb,
#4f46e5
);

color: #fff;

font-size: 0.88rem;

font-weight: 800;

cursor: pointer;

box-shadow:
0 8px 25px rgba(37, 99, 235, 0.25);

transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}

.premium-modal-ok:hover {
transform: translateY(-1px);

box-shadow:
0 12px 30px rgba(37, 99, 235, 0.35);
}

.premium-modal-ok:active {
transform: scale(0.98);
}

/* =========================================================================
PREVENT PAGE SCROLL WHEN MODAL IS OPEN
========================================================================= */

body.modal-open {
overflow: hidden;
}

/* =========================================================================
BOTTOM NAVIGATION
========================================================================= */

/*
The navigation stays clickable during normal page use.
When the Premium modal is open, the modal intentionally sits above it.
*/

.bottom-nav {
position: fixed;
z-index: 1000;
pointer-events: auto;
}

.bottom-nav-item {
pointer-events: auto;
cursor: pointer;
}

/* =========================================================================
MOBILE
========================================================================= */

@media (max-width: 480px) {

.premium-modal {
padding: 16px;
}

.premium-modal-box {
width: 100%;

max-height: calc(100vh - 32px);

border-radius: 25px;

padding: 28px 20px 20px;

}

.premium-modal-icon {
width: 64px;
height: 64px;

font-size: 32px;

}

.premium-modal-box h2 {
font-size: 1.3rem;
}

.premium-modal-description {
font-size: 0.79rem;
}

}

/* =========================================================================
VERY SMALL PHONES
========================================================================= */

@media (max-height: 650px) {

.premium-modal-box {
padding-top: 22px;
padding-bottom: 18px;
}

.premium-modal-icon {
width: 56px;
height: 56px;

margin-bottom: 10px;

font-size: 28px;

}

.premium-modal-box h2 {
font-size: 1.2rem;
margin-bottom: 8px;
}

.premium-modal-description {
margin-bottom: 14px;
line-height: 1.45;
}

.premium-benefits {
padding: 11px 13px;
margin-bottom: 14px;
}

.premium-benefit + .premium-benefit {
margin-top: 8px;
}

.premium-modal-ok {
padding: 11px 14px;
}

}