:root {
--bg-primary: #ffffff;
--bg-secondary: #ffffff;
--bg-card: #ffffff;
--bg-card-hover: #ffffff;
--bg-glass: rgba(255, 255, 255, 0.98);
--text-primary: #09090b;
--text-secondary: #4b5563;
--text-muted: #6b7280;
--accent-primary: #dc2626;
--accent-primary-hover: #b91c1c;
--accent-light: #fee2e2;
--accent-medium: #ef4444;
--border-color: #fecaca;
--border-highlight: #dc2626;
--shadow-lg: 0 14px 34px rgba(220, 38, 38, 0.08);
--shadow-glow: 0 10px 28px rgba(220, 38, 38, 0.14);
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--site-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cdefs%3E%3Cfilter id='cs' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='0' dy='1' stdDeviation='1.3' flood-color='%23000000' flood-opacity='0.75'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23cs)' d='M3.5 3.5 L10.2 22.2 L13.8 14.2 L22.2 10.6 Z' fill='%2309090b' stroke='%23ffffff' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 3 3, auto;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
cursor: var(--site-cursor) !important;
}
html {
scroll-behavior: smooth;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #ffffff;
color: var(--text-primary);
}
body {
background-color: #ffffff;
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
background-image: none;
}
h1,
h2,
h3,
h4,
.font-heading {
font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
letter-spacing: -0.02em;
color: var(--text-primary);
}
a {
color: inherit;
text-decoration: none;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 1.25rem;
}
.top-bar {
background: linear-gradient(90deg, #09090b 0%, #18181b 35%, #dc2626 68%, #991b1b 100%);
color: #ffffff;
font-size: 0.82rem;
padding: 0.55rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
position: relative;
z-index: 60;
}
.top-bar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.top-promo-badge {
background: linear-gradient(135deg, #fde047 0%, #f59e0b 100%);
color: #09090b;
font-weight: 900;
padding: 0.18rem 0.68rem;
border-radius: 999px;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-right: 0.45rem;
box-shadow: 0 2px 10px rgba(245, 158, 11, 0.45);
}
.top-bar-controls {
display: flex;
align-items: center;
gap: 0.65rem;
}
.pill-control {
background: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.28);
color: #ffffff;
padding: 0.24rem 0.75rem;
border-radius: 999px;
font-size: 0.76rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 0.35rem;
transition: all 0.2s ease;
}
.pill-control:hover {
background: #ffffff;
color: #09090b;
transform: translateY(-1px);
}
.navbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(220, 38, 38, 0.16);
box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.06);
}
.navbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 82px;
gap: 1rem;
}
.brand-logo {
display: flex;
align-items: center;
gap: 0.85rem;
}
.brand-icon-box {
width: 50px;
height: 50px;
border-radius: 12px;
background: #ffffff;
border: 1.5px solid #dc2626;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: 0 4px 18px rgba(220, 38, 38, 0.25);
flex-shrink: 0;
}
.brand-logo-img {
width: 100%;
height: 100%;
object-fit: contain;
background: #ffffff;
display: block;
}
.brand-title {
font-size: 1.45rem;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
}
.brand-title .part-1 {
color: #09090b;
}
.brand-title .part-2 {
color: #dc2626;
}
.brand-sub {
display: block;
font-size: 0.75rem;
font-weight: 500;
color: #6b7280;
margin-top: 1px;
}
.nav-links {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-link {
font-size: 0.95rem;
font-weight: 600;
color: #374151;
padding: 0.35rem 0;
position: relative;
transition: color 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.38rem;
}
.nav-link:hover {
color: #dc2626;
}
.nav-link.active {
color: #dc2626;
font-weight: 700;
}
.nav-link.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2.5px;
background: #dc2626;
border-radius: 999px;
}
.nav-team-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
background: linear-gradient(135deg, #111113 0%, #18181b 100%);
color: #f8fafc;
border: 1px solid rgba(239, 68, 68, 0.42);
font-size: 0.9rem;
font-weight: 700;
padding: 0.56rem 1.15rem;
border-radius: 10px;
box-shadow: 0 6px 20px rgba(153, 27, 27, 0.22);
transition: all 0.2s ease;
}
.nav-team-btn:hover {
background: linear-gradient(135deg, #18181b 0%, #dc2626 100%);
border-color: #ef4444;
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(220, 38, 38, 0.36);
}
.nav-wa-btn {
display: inline-flex;
align-items: center;
gap: 0.55rem;
background: #dc2626;
color: #ffffff;
font-size: 0.94rem;
font-weight: 700;
padding: 0.68rem 1.45rem;
border-radius: 10px;
box-shadow: 0 6px 22px rgba(220, 38, 38, 0.32);
transition: all 0.2s ease;
}
.nav-wa-btn:hover {
background: #b91c1c;
transform: translateY(-1px);
box-shadow: 0 10px 26px rgba(220, 38, 38, 0.42);
}
.nav-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.icon-btn {
position: relative;
width: 42px;
height: 42px;
border-radius: 12px;
background: #ffffff;
border: 1.5px solid #e5e7eb;
color: #09090b;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.icon-btn:hover {
border-color: #dc2626;
background: #ffffff;
transform: translateY(-1px);
}
.badge-count {
position: absolute;
top: -5px;
right: -5px;
background: #dc2626;
color: #ffffff;
font-size: 0.68rem;
font-weight: 800;
min-width: 19px;
height: 19px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-weight: 700;
font-size: 0.92rem;
padding: 0.68rem 1.25rem;
border-radius: 12px;
transition: all 0.22s ease;
white-space: nowrap;
}
.btn-primary {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
color: #ffffff;
box-shadow: 0 8px 22px rgba(220, 38, 38, 0.34);
}
.btn-primary:hover {
background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(220, 38, 38, 0.48);
}
.btn-whatsapp {
background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
color: #ffffff;
box-shadow: 0 8px 20px rgba(220, 38, 38, 0.25);
}
.btn-whatsapp:hover {
background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(220, 38, 38, 0.38);
}
.btn-outline {
background: #ffffff;
color: #09090b;
border: 1.5px solid #cbd5e1;
}
.btn-outline:hover {
background: #09090b;
border-color: #09090b;
color: #ffffff;
transform: translateY(-2px);
}
.ticker-wrap {
background: linear-gradient(90deg, #09090b 0%, #09090b 50%, #09090b 100%);
border-bottom: 1px solid rgba(220, 38, 38, 0.28);
padding: 0.55rem 1.25rem;
display: flex;
align-items: center;
gap: 0.9rem;
position: relative;
}
.ticker-label-box {
flex-shrink: 0;
display: flex;
align-items: center;
padding-right: 0.9rem;
border-right: 1.5px solid rgba(255, 255, 255, 0.15);
z-index: 5;
background: transparent;
}
.ticker-label {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
color: #ffffff;
font-size: 0.71rem;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.34rem 0.88rem;
border-radius: 999px;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 0.45rem;
box-shadow: 0 0 18px rgba(220, 38, 38, 0.45);
}
.pulse-dot {
width: 8px;
height: 8px;
background: #ffffff;
border-radius: 50%;
display: inline-block;
animation: pulseGlow 1.5s infinite;
}
@keyframes pulseGlow {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.3);
opacity: 0.7;
}
}
.ticker-viewport {
flex: 1;
overflow: hidden;
position: relative;
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 2.5%, #000 97.5%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, #000 2.5%, #000 97.5%, transparent 100%);
}
.ticker-track {
display: flex;
align-items: center;
width: max-content;
animation: tickerScroll 40s linear infinite;
gap: 0.85rem;
}
.ticker-track:hover {
animation-play-state: paused;
}
@keyframes tickerScroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.ticker-item {
font-size: 0.8rem;
color: #cbd5e1;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 0.3rem 0.85rem;
border-radius: 999px;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 0.42rem;
}
.ticker-item .t-icon {
font-size: 0.92rem;
}
.ticker-item strong {
color: #ffffff;
font-weight: 800;
}
.ticker-item .city {
color: #f87171;
font-weight: 800;
font-size: 0.76rem;
}
.ticker-item .t-tool {
color: #ffffff;
font-weight: 800;
background: rgba(220, 38, 38, 0.2);
border: 1px solid rgba(220, 38, 38, 0.35);
padding: 0.08rem 0.5rem;
border-radius: 6px;
}
.ticker-item .time {
color: #09090b;
background: #f87171;
font-size: 0.68rem;
font-weight: 900;
padding: 0.1rem 0.45rem;
border-radius: 999px;
}
.hero {
padding: 3.25rem 0 3rem;
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
position: relative;
}
.hero::before {
display: none;
}
.hero>.container {
position: relative;
z-index: 2;
}
.hero-grid {
display: grid;
grid-template-columns: 1.16fr 0.84fr;
gap: 2.75rem;
align-items: center;
}
.trust-pill {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.6rem;
background: #ffffff;
border: 1.5px solid #e5e7eb;
color: #09090b;
font-size: 0.8rem;
font-weight: 700;
padding: 0.34rem 0.9rem 0.34rem 0.4rem;
border-radius: 999px;
margin-bottom: 1.25rem;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.trust-pill-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: #dc2626;
color: #ffffff;
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 0.04em;
padding: 0.28rem 0.72rem;
border-radius: 999px;
}
.trust-pill-text {
color: #09090b;
font-weight: 800;
}
.trust-pill-rating {
display: inline-flex;
align-items: center;
gap: 0.2rem;
color: #f59e0b;
font-weight: 900;
padding-left: 0.55rem;
border-left: 1.5px solid #e2e8f0;
}
.trust-pill-rating span {
color: #64748b;
font-weight: 700;
font-size: 0.74rem;
}
.hero-title {
font-size: clamp(2.2rem, 3.85vw, 3.25rem);
font-weight: 900;
line-height: 1.12;
letter-spacing: -0.03em;
margin-bottom: 1rem;
color: #09090b;
}
.gradient-text {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-desc {
font-size: 1.02rem;
color: #4b5563;
max-width: 600px;
margin-bottom: 1.35rem;
line-height: 1.65;
}
.hero-search-bar {
display: flex;
align-items: center;
background: #ffffff;
border: 2px solid #e5e7eb;
border-radius: 16px;
padding: 0.38rem 0.42rem 0.38rem 1rem;
max-width: 580px;
margin-bottom: 1.15rem;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hero-search-bar:focus-within {
border-color: #dc2626;
box-shadow: 0 10px 28px rgba(220, 38, 38, 0.14);
}
.hero-search-icon {
font-size: 1rem;
margin-right: 0.65rem;
opacity: 0.65;
}
.hero-search-input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 0.92rem;
font-weight: 600;
color: #09090b;
padding: 0.45rem 0;
}
.hero-search-input::placeholder {
color: #9ca3af;
font-weight: 500;
}
.hero-search-btn {
background: #09090b;
color: #ffffff;
font-size: 0.85rem;
font-weight: 800;
padding: 0.68rem 1.25rem;
border-radius: 12px;
transition: background 0.2s ease;
white-space: nowrap;
}
.hero-search-btn:hover {
background: #dc2626;
}
.hero-perks-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.15rem;
margin-bottom: 1.5rem;
}
.hero-perk-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.84rem;
font-weight: 700;
color: #09090b;
}
.hero-perk-check {
width: 20px;
height: 20px;
border-radius: 50%;
background: #dc2626;
color: #ffffff;
font-size: 0.68rem;
font-weight: 900;
display: inline-flex;
align-items: center;
justify-content: center;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.85rem;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.8rem;
padding-top: 0.25rem;
}
.stat-box {
background: #ffffff;
border: 1.5px solid #e5e7eb;
border-radius: 14px;
padding: 0.85rem 0.9rem;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
transition: transform 0.2s ease, border-color 0.2s ease;
}
.stat-box:hover {
transform: translateY(-2px);
border-color: #dc2626;
}
.stat-box h4 {
font-size: 1.32rem;
font-weight: 900;
color: #dc2626;
background: none;
-webkit-text-fill-color: #dc2626;
line-height: 1.15;
margin-bottom: 0.15rem;
}
.stat-box p {
font-size: 0.75rem;
font-weight: 700;
color: #4b5563;
line-height: 1.3;
}
.google-ultra-card {
background: radial-gradient(ellipse at 30% 20%, rgba(220, 38, 38, 0.24), transparent 65%), rgba(9, 9, 11, 0.82);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
border: 1.5px solid rgba(220, 38, 38, 0.32);
border-radius: 26px;
padding: 1.45rem 1.45rem 1.35rem;
box-shadow:
0 36px 80px -12px rgba(0, 0, 0, 0.65),
0 0 42px rgba(220, 38, 38, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.google-ultra-card:hover {
transform: translateY(-4px);
border-color: rgba(248, 113, 113, 0.48);
box-shadow:
0 42px 90px -12px rgba(0, 0, 0, 0.72),
0 0 54px rgba(220, 38, 38, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.gu-top-header {
display: flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
margin-bottom: 1rem;
}
.gu-dots-icon {
display: grid;
grid-template-columns: repeat(5, 7px);
gap: 3px;
padding: 4px;
}
.gu-dots-icon span {
width: 7px;
height: 7px;
border-radius: 50%;
display: block;
box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.25);
}
.gu-main-title {
font-size: 1.75rem;
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0;
display: flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
}
.gu-main-title .g-b,
.gu-main-title .g-r,
.gu-main-title .g-y,
.gu-main-title .g-g {
color: #f8fafc;
text-shadow: 0 2px 12px rgba(226, 232, 240, 0.25);
}
.gu-ai-text {
background: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #ef4444 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900;
}
.gu-section-card {
background: rgba(18, 18, 21, 0.82);
border: 1px solid rgba(220, 38, 38, 0.25);
border-radius: 16px;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
margin-bottom: 0.95rem;
overflow: hidden;
position: relative;
}
.gu-section-card.gu-red-accent {
border-bottom: 3.5px solid #ef4444;
}
.gu-banner-bar {
display: flex;
align-items: center;
background: rgba(24, 24, 27, 0.92);
border-bottom: 1px solid rgba(220, 38, 38, 0.24);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
position: relative;
}
.gu-badge-box {
width: 66px;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
flex-shrink: 0;
}
.gu-badge-red {
background: linear-gradient(145deg, #dc2626, #ef4444);
color: #ffffff;
}
.gu-badge-black {
background: linear-gradient(145deg, #09090b, #b91c1c);
color: #ffffff;
width: 58px;
height: 48px;
}
.gu-banner-title {
font-size: 1.22rem;
font-weight: 900;
color: #ffffff;
letter-spacing: 0.01em;
padding: 0 0.85rem;
text-transform: uppercase;
}
.gu-banner-title span {
color: #f87171;
}
.gu-banner-title.gu-banner-sm {
font-size: 0.96rem;
padding: 0 0.6rem;
}
.gu-feature-list {
list-style: none;
padding: 0.75rem 1rem;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.42rem;
background: transparent;
}
.gu-feature-list li {
display: flex;
align-items: center;
gap: 0.65rem;
font-size: 0.9rem;
font-weight: 700;
color: #fee2e2;
}
.gu-f-icon {
width: 24px;
height: 24px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.82rem;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.gu-bottom-split {
display: grid;
grid-template-columns: 1.35fr 0.9fr;
gap: 0.85rem;
align-items: stretch;
}
.gu-bottom-split .gu-section-card {
margin-bottom: 0;
border-bottom: 3.5px solid #dc2626;
}
.gu-feature-list-sm {
padding: 0.65rem 0.75rem;
gap: 0.48rem;
}
.gu-feature-list-sm li {
font-size: 0.8rem;
gap: 0.5rem;
}
.gu-round-icon {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
color: #ffffff;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}
.gu-price-col {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
}
.gu-price-box {
width: 100%;
background: linear-gradient(145deg, #09090b, #09090b);
border: 2.5px solid #ef4444;
border-radius: 20px;
padding: 0.85rem 0.6rem;
text-align: center;
color: #ffffff;
box-shadow: 0 10px 28px rgba(220, 38, 38, 0.35), inset 0 1px 4px rgba(255, 255, 255, 0.12);
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.gu-price-box:hover {
transform: translateY(-2px);
border-color: #f59e0b;
}
.gu-price-label {
font-size: 1.1rem;
font-weight: 800;
color: #fca5a5;
line-height: 1.1;
}
.gu-price-num {
font-size: 2.35rem;
font-weight: 900;
color: #fbbf24;
line-height: 1.08;
letter-spacing: -0.02em;
margin: 0.1rem 0;
}
.gu-price-curr {
font-size: 1.25rem;
font-weight: 900;
color: #ffffff;
line-height: 1.1;
}
.gu-google-coin {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.96);
border: 2px solid rgba(248, 113, 113, 0.45);
box-shadow: 0 8px 22px rgba(220, 38, 38, 0.32), inset 0 -3px 6px rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 540px) {
.gu-bottom-split {
grid-template-columns: 1fr;
}
.gu-main-title {
font-size: 1.4rem;
}
}
.section {
padding: 4rem 0;
background: #ffffff;
}
.section-alt {
background: #ffffff;
border-top: 1px solid #e5e7eb;
border-bottom: 1px solid #e5e7eb;
}
.section-header {
text-align: center;
max-width: 680px;
margin: 0 auto 2.5rem;
}
.section-eyebrow {
display: inline-block;
font-size: 0.72rem;
font-family: 'Fira Code', monospace;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #dc2626;
background: #fee2e2;
border: 1px solid rgba(220, 38, 38, 0.24);
padding: 0.3rem 0.9rem;
border-radius: 999px;
margin-bottom: 0.75rem;
}
.section-title {
font-size: clamp(1.65rem, 3vw, 2.35rem);
font-weight: 800;
margin-bottom: 0.65rem;
color: #09090b;
}
.section-desc {
color: var(--text-secondary);
font-size: 0.98rem;
}
.tools-discover-section {
background: #ffffff;
padding-top: 2.75rem;
}
.discover-top-right {
display: flex;
justify-content: flex-end;
margin-bottom: -1rem;
}
.track-order-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
background: #ffffff;
border: 1px solid #e2e8f0;
color: #09090b;
font-size: 0.8rem;
font-weight: 700;
padding: 0.5rem 1.05rem;
border-radius: 999px;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
transition: all 0.2s ease;
}
.track-order-pill:hover {
border-color: #dc2626;
color: #dc2626;
transform: translateY(-1px);
}
.discover-header {
text-align: center;
max-width: 720px;
margin: 0 auto 2.2rem;
}
.discover-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: #ffffff;
border: 1px solid #e2e8f0;
color: #475569;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
padding: 0.35rem 0.9rem;
border-radius: 999px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
margin-bottom: 1.1rem;
}
.discover-title {
font-size: clamp(2.2rem, 4.4vw, 3.35rem);
font-weight: 900;
color: #09090b;
letter-spacing: -0.03em;
line-height: 1.12;
margin-bottom: 0.85rem;
}
.discover-highlight {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.discover-subtitle {
font-size: 0.96rem;
color: #475569;
line-height: 1.6;
margin-bottom: 1.65rem;
}
.discover-stats {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2.75rem;
flex-wrap: wrap;
}
.discover-stat-item {
text-align: center;
}
.discover-stat-num {
font-size: 1.18rem;
font-weight: 900;
color: #09090b;
display: flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
}
.discover-stat-num span {
color: #dc2626;
font-size: 1rem;
}
.discover-stat-label {
font-size: 0.72rem;
color: #64748b;
font-weight: 500;
}
.discover-search-card {
max-width: 980px;
margin: 0 auto 2.5rem;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 1.25rem 1.4rem;
box-shadow: 0 12px 35px rgba(15, 23, 42, 0.05);
}
.discover-search-input-wrap {
position: relative;
margin-bottom: 1rem;
}
.discover-search-icon {
position: absolute;
left: 1.1rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.92rem;
opacity: 0.55;
pointer-events: none;
}
.discover-search-input {
width: 100%;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 0.85rem 1rem 0.85rem 2.75rem;
font-size: 0.9rem;
color: #09090b;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.discover-search-input:focus {
border-color: #dc2626;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.discover-pills-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.category-tabs {
display: flex;
gap: 0.45rem;
overflow-x: auto;
padding-bottom: 0.2rem;
scrollbar-width: none;
}
.category-tabs::-webkit-scrollbar {
display: none;
}
.cat-tab {
background: #ffffff;
border: 1px solid #e5e7eb;
color: #09090b;
padding: 0.44rem 0.95rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
white-space: nowrap;
transition: all 0.2s ease;
}
.cat-tab:hover {
background: #dc2626;
color: #ffffff;
border-color: #dc2626;
}
.cat-tab.active {
background: #dc2626;
color: #ffffff;
border-color: #dc2626;
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.28);
}
.discover-sort-right {
display: flex;
align-items: center;
gap: 0.75rem;
}
.discover-count-fraction {
font-size: 0.78rem;
font-weight: 700;
color: #dc2626;
}
.discover-sort-select {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 0.45rem 0.85rem;
font-size: 0.8rem;
font-weight: 600;
color: #1e293b;
outline: none;
cursor: pointer;
}
.discover-main-layout {
display: grid;
grid-template-columns: 1fr !important;
gap: 1.5rem;
align-items: start;
}
.discover-sidebar {
display: none !important;
}
.sidebar-header-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.sidebar-header-row h4 {
font-size: 0.98rem;
font-weight: 800;
color: #09090b;
}
.sidebar-reset-btn {
font-size: 0.75rem;
font-weight: 700;
color: #dc2626;
}
.sidebar-reset-btn:hover {
text-decoration: underline;
}
.sidebar-found-box {
background: #f8fafc;
border: 1px solid #f1f5f9;
border-radius: 12px;
padding: 0.85rem 1rem;
margin-bottom: 1.35rem;
}
.sidebar-group-title {
font-size: 0.84rem;
font-weight: 800;
color: #09090b;
margin-bottom: 0.75rem;
}
.sidebar-radio-item {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 0.82rem;
color: #475569;
font-weight: 500;
padding: 0.38rem 0;
cursor: pointer;
transition: color 0.15s ease;
}
.sidebar-radio-item:hover {
color: #dc2626;
}
.sidebar-radio-item input[type="radio"] {
accent-color: #dc2626;
width: 15px;
height: 15px;
cursor: pointer;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
gap: 1.45rem;
}
.product-card {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 24px;
padding: 0.55rem 0.55rem 0;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
position: relative;
overflow: hidden;
box-shadow: 0 12px 30px -8px rgba(15, 23, 42, 0.06);
}
.product-card:hover {
transform: translateY(-8px);
border-color: #ef4444;
box-shadow:
0 24px 48px -12px rgba(220, 38, 38, 0.22),
0 0 0 1px rgba(220, 38, 38, 0.35);
}
.card-poster-banner {
height: 215px;
padding: 1.15rem 1rem;
border-radius: 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
text-align: center;
position: relative;
overflow: hidden;
background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.18), transparent 70%),
linear-gradient(145deg, #09090b 0%, #dc2626 55%, #09090b 100%);
box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.18);
}
.card-poster-banner.has-poster-img {
height: auto;
aspect-ratio: 1 / 1;
padding: 0;
border-radius: 18px;
background: #09090b;
box-shadow: 0 8px 22px -6px rgba(15, 23, 42, 0.2);
}
.card-poster-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-card:hover .card-poster-img {
transform: scale(1.045);
}
.card-poster-title {
color: #ffffff;
font-size: 1.22rem;
font-weight: 900;
line-height: 1.18;
letter-spacing: -0.02em;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
z-index: 2;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-3d-app-icon {
width: 102px;
height: 102px;
border-radius: 24px;
background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
border: 3px solid rgba(255, 255, 255, 0.85);
box-shadow:
0 14px 28px rgba(0, 0, 0, 0.38),
inset 0 -4px 8px rgba(0, 0, 0, 0.12),
inset 0 4px 8px rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 3.1rem;
position: relative;
z-index: 2;
transition: transform 0.25s ease;
}
.product-card:hover .card-3d-app-icon {
transform: scale(1.06) translateY(-2px);
}
.card-3d-badge {
position: absolute;
bottom: 6px;
background: #09090b;
color: #ffffff;
font-size: 0.52rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 999px;
}
.card-body-inner {
padding: 1rem 1.15rem 1.2rem;
display: flex;
flex-direction: column;
flex: 1;
justify-content: space-between;
}
.card-cat-tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-bottom: 0.65rem;
}
.card-cat-tag {
background: #ffffff;
color: #09090b;
border: 1px solid #e5e7eb;
font-size: 0.66rem;
font-weight: 700;
padding: 0.16rem 0.55rem;
border-radius: 6px;
}
@media (max-width: 960px) {
.discover-main-layout {
grid-template-columns: 1fr;
}
.discover-sidebar {
position: static;
}
}
.card-top-badges {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.discount-pill {
background: #dc2626;
color: #ffffff;
font-size: 0.72rem;
font-weight: 800;
padding: 0.22rem 0.65rem;
border-radius: 999px;
}
.access-pill {
background: #09090b;
color: #ffffff;
border: 1px solid #09090b;
font-size: 0.72rem;
font-weight: 700;
padding: 0.2rem 0.6rem;
border-radius: 999px;
}
.product-brand-row {
display: flex;
align-items: center;
gap: 0.9rem;
margin-bottom: 0.85rem;
}
.product-logo {
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.45rem;
font-weight: 800;
color: #ffffff;
background: #dc2626 !important;
flex-shrink: 0;
box-shadow: 0 6px 14px rgba(220, 38, 38, 0.22);
}
.product-title {
font-size: 1.1rem;
font-weight: 800;
line-height: 1.25;
margin-bottom: 0.2rem;
color: #09090b;
}
.product-meta {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 0.78rem;
color: var(--text-secondary);
}
.star-rating {
color: #dc2626;
font-weight: 800;
}
.product-desc {
font-size: 0.84rem;
color: var(--text-secondary);
margin-bottom: 0.9rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-perks {
list-style: none;
margin-bottom: 1rem;
display: flex;
flex-direction: column;
gap: 0.32rem;
}
.product-perks li {
font-size: 0.78rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 0.4rem;
font-weight: 500;
}
.product-perks li span.check {
color: #dc2626;
font-weight: 900;
}
.plan-selector {
display: flex;
gap: 0.35rem;
margin-bottom: 1rem;
background: #f1f5f9;
padding: 0.28rem;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.plan-btn {
flex: 1;
font-size: 0.72rem;
font-weight: 800;
padding: 0.38rem 0.3rem;
border-radius: 9px;
color: #475569;
transition: all 0.2s ease;
text-align: center;
}
.plan-btn:hover {
color: #09090b;
}
.plan-btn.active {
background: linear-gradient(135deg, #09090b 0%, #1e293b 100%);
color: #ffffff;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.22);
}
.card-price-footer {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 0.9rem;
padding-top: 0.7rem;
border-top: 1px dashed #e2e8f0;
}
.card-price {
font-size: 1.45rem;
font-weight: 900;
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.card-old-price {
font-size: 0.82rem;
color: #94a3b8;
text-decoration: line-through;
margin-left: 0.35rem;
}
.card-actions {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 0.45rem;
}
.btn-sm {
padding: 0.58rem 0.85rem;
font-size: 0.82rem;
border-radius: 10px;
}
.bundles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.5rem;
}
.ap-showcase-card {
display: grid;
grid-template-columns: 320px 1fr;
gap: 1.65rem;
background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
border: 2px solid rgba(220, 38, 38, 0.32);
border-radius: 28px;
padding: 1.55rem;
box-shadow:
0 24px 55px -12px rgba(220, 38, 38, 0.14),
0 0 0 1px rgba(220, 38, 38, 0.12);
align-items: stretch;
}
.ap-left-poster {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0.85rem;
}
.ap-poster-visual {
background: radial-gradient(ellipse at 30% 20%, rgba(239, 68, 68, 0.28), transparent 60%), linear-gradient(150deg, #09090b 0%, #09090b 55%, #18181b 100%);
border: 1px solid rgba(248, 113, 113, 0.25);
border-radius: 20px;
padding: 1.4rem 1.2rem;
text-align: center;
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
flex: 1;
box-shadow: 0 16px 36px rgba(18, 18, 21, 0.35);
position: relative;
overflow: hidden;
}
.ap-top-pill {
background: linear-gradient(135deg, #dc2626, #ef4444);
color: #ffffff;
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.05em;
padding: 0.25rem 0.75rem;
border-radius: 999px;
margin-bottom: 0.6rem;
box-shadow: 0 4px 14px rgba(220, 38, 38, 0.45);
}
.ap-poster-heading {
font-size: 1.75rem;
font-weight: 900;
color: #ffffff;
line-height: 1.1;
margin: 0 0 0.25rem;
letter-spacing: -0.02em;
}
.ap-poster-sub {
font-size: 0.8rem;
color: #fca5a5;
font-weight: 600;
margin: 0 0 1rem;
}
.ap-3d-tile {
width: 96px;
height: 96px;
border-radius: 24px;
background: linear-gradient(145deg, #ffffff 0%, #fee2e2 100%);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35), inset 0 2px 4px #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
margin-bottom: 1.1rem;
}
.ap-3d-emoji {
font-size: 2.6rem;
line-height: 1;
margin-bottom: 0.35rem;
}
.ap-3d-tag {
background: linear-gradient(135deg, #dc2626, #ef4444);
color: #ffffff;
font-size: 0.56rem;
font-weight: 900;
padding: 0.14rem 0.5rem;
border-radius: 999px;
letter-spacing: 0.05em;
}
.ap-price-badge-3d {
width: 100%;
background: #09090b;
border: 2.5px solid #ef4444;
border-radius: 16px;
padding: 0.7rem 0.6rem;
box-shadow: 0 8px 22px rgba(220, 38, 38, 0.35);
}
.ap-p-label {
font-size: 0.7rem;
font-weight: 700;
color: #fca5a5;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ap-p-num {
font-size: 1.95rem;
font-weight: 900;
color: #fbbf24;
line-height: 1.1;
margin: 0.1rem 0;
}
.ap-p-num span {
font-size: 1rem;
color: #f87171;
}
.ap-p-old {
font-size: 0.72rem;
color: #fecaca;
font-weight: 600;
}
.ap-left-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.ap-right-bento {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.ap-bento-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding-bottom: 0.85rem;
margin-bottom: 0.85rem;
border-bottom: 1.5px solid rgba(220, 38, 38, 0.15);
flex-wrap: wrap;
}
.ap-bento-title {
font-size: 1.2rem;
font-weight: 900;
color: #09090b;
margin: 0 0 0.15rem;
}
.ap-bento-sub {
font-size: 0.8rem;
color: #6b7280;
font-weight: 600;
margin: 0;
}
.ap-view-detail-btn {
background: #fee2e2;
color: #dc2626;
border: 1.5px solid rgba(220, 38, 38, 0.35);
border-radius: 10px;
padding: 0.42rem 0.85rem;
font-size: 0.78rem;
font-weight: 800;
cursor: pointer;
transition: all 0.2s ease;
}
.ap-view-detail-btn:hover {
background: linear-gradient(135deg, #dc2626, #ef4444);
border-color: #dc2626;
color: #ffffff;
}
.ap-bento-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.65rem;
}
.ap-cat-box {
background: #ffffff;
border: 1.5px solid rgba(220, 38, 38, 0.14);
border-radius: 14px;
padding: 0.7rem 0.85rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ap-cat-box:hover {
border-color: rgba(220, 38, 38, 0.35);
box-shadow: 0 8px 20px rgba(220, 38, 38, 0.08);
}
.ap-cat-box.ap-cat-wide {
grid-column: 1 / -1;
}
.ap-cat-head {
display: flex;
align-items: center;
gap: 0.45rem;
margin-bottom: 0.48rem;
}
.ap-cat-icon {
width: 24px;
height: 24px;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.78rem;
color: #ffffff;
flex-shrink: 0;
}
.ap-cat-title {
font-size: 0.84rem;
font-weight: 800;
color: #09090b;
}
.ap-cat-count {
margin-left: auto;
background: #fee2e2;
color: #dc2626;
font-size: 0.68rem;
font-weight: 800;
padding: 0.1rem 0.45rem;
border-radius: 999px;
}
.ap-chip-wrap {
display: flex;
flex-wrap: wrap;
gap: 0.32rem;
}
.ap-tool-chip {
display: inline-flex;
align-items: center;
gap: 0.28rem;
background: #ffffff;
border: 1px solid rgba(220, 38, 38, 0.16);
color: #09090b;
font-size: 0.74rem;
font-weight: 700;
padding: 0.18rem 0.52rem;
border-radius: 7px;
}
.ap-tool-chip i {
font-style: normal;
font-size: 0.55rem;
}
@media (max-width: 860px) {
.ap-showcase-card {
grid-template-columns: 1fr;
}
.ap-bento-grid {
grid-template-columns: 1fr;
}
}
.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.35rem;
margin-bottom: 3rem;
}
.step-card {
background: #ffffff;
border: 1.5px solid rgba(220, 38, 38, 0.16);
border-radius: var(--radius-lg);
padding: 1.6rem;
position: relative;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.step-card:hover {
transform: translateY(-4px);
border-color: rgba(220, 38, 38, 0.4);
box-shadow: 0 16px 36px rgba(220, 38, 38, 0.1);
}
.step-number {
width: 40px;
height: 40px;
border-radius: 12px;
background: linear-gradient(135deg, #dc2626, #ef4444);
color: #ffffff;
font-weight: 900;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35);
}
.payment-methods-bar {
background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
border: 1.5px solid rgba(220, 38, 38, 0.22);
border-radius: var(--radius-xl);
padding: 1.75rem;
text-align: center;
}
.payment-pills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.85rem;
margin-top: 1.1rem;
}
.payment-pill {
background: #ffffff;
border: 1.5px solid rgba(220, 38, 38, 0.22);
color: #09090b;
padding: 0.65rem 1.2rem;
border-radius: 12px;
font-weight: 700;
font-size: 0.88rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.track-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.75rem;
}
.panel-card {
background: #ffffff;
border: 1.5px solid #e5e7eb;
border-radius: var(--radius-xl);
padding: 2rem;
}
.form-group {
margin-bottom: 1rem;
}
.form-label {
display: block;
font-size: 0.84rem;
font-weight: 700;
margin-bottom: 0.4rem;
color: #09090b;
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
background: #ffffff;
border: 1.5px solid #e5e7eb;
color: #09090b;
padding: 0.78rem 1rem;
border-radius: 12px;
font-size: 0.92rem;
font-family: inherit;
outline: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
border-color: #dc2626;
background: #ffffff;
}
.wa-reviews-header {
text-align: center;
margin-bottom: 2.25rem;
}
.wa-reviews-title {
font-size: clamp(1.55rem, 2.6vw, 2rem);
font-weight: 900;
letter-spacing: 0.03em;
color: #09090b;
text-transform: uppercase;
margin-bottom: 0.55rem;
}
.wa-reviews-rating-row {
display: inline-flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.35rem;
}
.wa-stars {
color: #e11d48;
font-size: 1.35rem;
letter-spacing: 0.1em;
}
.wa-score-text {
font-size: 1.15rem;
font-weight: 800;
color: #09090b;
letter-spacing: 0.03em;
}
.wa-reviews-sub {
font-size: 0.88rem;
color: #4b5563;
font-weight: 500;
}
.wa-carousel-wrapper {
position: relative;
display: flex;
align-items: center;
}
.wa-carousel-track {
display: flex;
gap: 1.15rem;
overflow-x: auto;
padding: 0.5rem 0.25rem 1rem;
scrollbar-width: none;
-ms-overflow-style: none;
width: 100%;
}
.wa-carousel-track::-webkit-scrollbar {
display: none;
}
.wa-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: #09090b;
color: #ffffff;
font-size: 1.1rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
z-index: 15;
transition: transform 0.2s ease, background 0.2s ease;
}
.wa-carousel-arrow:hover {
background: #dc2626;
transform: translateY(-50%) scale(1.08);
}
.wa-carousel-arrow.prev {
left: -14px;
}
.wa-carousel-arrow.next {
right: -14px;
background: #1e3a8a;
}
.wa-screenshot-card {
flex: 0 0 268px;
width: 268px;
height: 545px;
background: #ffffff;
border-radius: 18px;
border: 1.5px solid #e5e7eb;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wa-screenshot-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 36px rgba(220, 38, 38, 0.18);
border-color: #dc2626;
}
.wa-screenshot-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
}
.wa-ios-statusbar {
background: #f6f6f6;
padding: 0.35rem 0.85rem 0.2rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.72rem;
font-weight: 700;
color: #09090b;
}
.wa-topbar {
background: #f6f6f6;
padding: 0.35rem 0.65rem 0.45rem;
border-bottom: 1px solid #e5e7eb;
display: flex;
align-items: center;
justify-content: space-between;
}
.wa-topbar-left {
display: flex;
align-items: center;
gap: 0.4rem;
}
.wa-back-count {
color: #09090b;
font-size: 0.82rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 2px;
}
.wa-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #dc2626, #09090b);
color: #fff;
font-size: 0.68rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
.wa-contact-name {
font-size: 0.82rem;
font-weight: 700;
color: #09090b;
line-height: 1.1;
}
.wa-contact-sub {
font-size: 0.62rem;
color: #6b7280;
}
.wa-topbar-icons {
display: flex;
align-items: center;
gap: 0.65rem;
font-size: 0.88rem;
color: #09090b;
}
.wa-chat-body {
flex: 1;
padding: 0.55rem 0.55rem;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.38rem;
background-color: #efeae2;
background-image: radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 0);
background-size: 14px 14px;
}
.wa-chat-body::-webkit-scrollbar {
width: 0;
}
.wa-msg {
max-width: 86%;
padding: 0.38rem 0.55rem 0.32rem;
border-radius: 9px;
font-size: 0.74rem;
line-height: 1.32;
color: #09090b;
position: relative;
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.08);
word-wrap: break-word;
}
.wa-msg.incoming {
align-self: flex-start;
background: #ffffff;
border-top-left-radius: 2px;
}
.wa-msg.outgoing {
align-self: flex-end;
background: #fee2e2;
border-top-right-radius: 2px;
}
.wa-msg-quote {
background: rgba(0, 0, 0, 0.05);
border-left: 3px solid #e11d48;
border-radius: 4px;
padding: 0.2rem 0.4rem;
margin-bottom: 0.25rem;
font-size: 0.66rem;
}
.wa-msg-quote strong {
color: #e11d48;
display: block;
}
.wa-highlight {
background: #fcd34d;
padding: 0 3px;
border-radius: 2px;
font-weight: 600;
}
.wa-censored {
background: #ef4444;
color: transparent;
border-radius: 3px;
padding: 0 6px;
user-select: none;
display: inline-block;
height: 0.72rem;
vertical-align: middle;
}
.wa-time {
float: right;
font-size: 0.58rem;
color: #6b7280;
margin-left: 0.45rem;
margin-top: 0.18rem;
display: inline-flex;
align-items: center;
gap: 2px;
}
.wa-ticks {
color: #f87171;
font-weight: 900;
letter-spacing: -2px;
margin-left: 1px;
}
.wa-reaction {
position: absolute;
bottom: -10px;
left: 10px;
background: #ffffff;
border-radius: 999px;
padding: 1px 5px;
font-size: 0.65rem;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
}
.wa-voice-row {
display: flex;
align-items: center;
gap: 0.4rem;
min-width: 165px;
padding: 0.15rem 0;
}
.wa-voice-wave {
flex: 1;
height: 14px;
background: repeating-linear-gradient(90deg,
#ef4444 0px,
#ef4444 2px,
transparent 2px,
transparent 4px);
opacity: 0.75;
border-radius: 2px;
}
.wa-bottom-bar {
background: #f6f6f6;
padding: 0.4rem 0.55rem;
border-top: 1px solid #e5e7eb;
display: flex;
align-items: center;
gap: 0.45rem;
color: #4b5563;
font-size: 0.9rem;
}
.wa-input-pill {
flex: 1;
background: #ffffff;
border: 1px solid #d1d5db;
border-radius: 999px;
height: 26px;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 0.5rem;
font-size: 0.75rem;
}
.team-section-container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #ffffff;
text-align: center;
}
.team-intro-section {
max-width: 800px;
margin: 0 auto 50px auto;
}
.say-hi-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 15px;
color: #b91c1c;
font-weight: 700;
margin-bottom: 12px;
}
.say-hi-line {
height: 2px;
background-color: #b91c1c;
border-radius: 2px;
}
.say-hi-line.long {
width: 30px;
}
.say-hi-line.short {
width: 10px;
}
.team-intro-section h2 {
font-size: clamp(1.85rem, 3.2vw, 2.38rem);
font-weight: 900;
color: #001e3d;
margin-bottom: 18px;
letter-spacing: -0.5px;
}
.team-intro-section p {
font-size: 15px;
color: #475569;
line-height: 1.65;
}
.curved-team-layout {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
flex-wrap: wrap;
}
.team-col {
display: flex;
flex-direction: column;
gap: 40px;
}
.center-col {
margin: 0 30px;
}
.center-member {
text-align: center;
}
.ring-outer {
border: 1px solid #e5e7eb;
padding: 25px;
border-radius: 50%;
display: inline-block;
}
.ring-inner {
border: 3px solid #ef4444;
padding: 15px;
border-radius: 50%;
display: inline-block;
}
.center-photo-bg {
background-color: #111113;
width: 240px;
height: 240px;
border-radius: 50%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.center-photo-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.center-member h3 {
font-size: 26px;
font-weight: 800;
color: #001e3d;
margin: 20px 0 5px 0;
}
.center-member p {
font-size: 15px;
color: #475569;
font-weight: 500;
}
.side-member {
display: flex;
align-items: center;
gap: 20px;
transition: transform 0.3s ease;
}
.side-member:hover {
transform: translateY(-5px);
}
.left-col .side-member {
text-align: right;
justify-content: flex-end;
}
.right-col .side-member {
flex-direction: row-reverse;
text-align: left;
justify-content: flex-end;
}
.tm-info h4 {
font-size: 18px;
font-weight: 800;
color: #001e3d;
margin-bottom: 4px;
}
.tm-info p {
font-size: 13px;
color: #475569;
font-weight: 500;
}
.tm-photo {
width: 110px;
height: 110px;
border-radius: 50%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: flex-end;
}
.bg-light-black {
background-color: #555555;
}
.tm-photo img {
width: 85%;
height: 85%;
object-fit: contain;
}
.left-col .tm-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.faq-list {
max-width: 820px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.faq-item {
background: #ffffff;
border: 1.5px solid #e5e7eb;
border-radius: var(--radius-md);
overflow: hidden;
}
.faq-question {
width: 100%;
text-align: left;
padding: 1.15rem 1.35rem;
font-weight: 700;
font-size: 0.98rem;
color: #09090b;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.faq-answer {
padding: 0 1.35rem 1.15rem;
color: var(--text-secondary);
font-size: 0.9rem;
display: none;
}
.faq-item.open .faq-answer {
display: block;
}
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
z-index: 100;
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
}
.modal-backdrop.open {
display: flex;
}
.modal-content {
background: #ffffff;
border: 2px solid #dc2626;
border-radius: var(--radius-xl);
width: 100%;
max-width: 620px;
max-height: 90vh;
overflow-y: auto;
padding: 1.85rem;
position: relative;
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);
}
.modal-close {
position: absolute;
top: 1.15rem;
right: 1.15rem;
width: 36px;
height: 36px;
border-radius: 10px;
background: #09090b;
border: 1px solid #09090b;
color: #ffffff;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
}
.bt-pdp-page {
background: #ffffff;
min-height: 82vh;
padding-bottom: 4.5rem;
}
.bt-breadcrumb-bar {
background: #ffffff;
border-bottom: 1px solid #f1f5f9;
padding: 0.78rem 0;
margin-bottom: 2.35rem;
}
.bt-breadcrumb-inner {
max-width: 1120px;
margin: 0 auto;
padding: 0 1.25rem;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.55rem;
font-size: 0.8rem;
color: #64748b;
}
.bt-breadcrumb-inner a {
color: #64748b;
font-weight: 500;
transition: color 0.18s ease;
}
.bt-breadcrumb-inner a:hover {
color: #dc2626;
}
.bt-breadcrumb-inner strong {
color: #09090b;
font-weight: 700;
}
.bt-pdp-grid {
max-width: 1120px;
margin: 0 auto;
padding: 0 1.25rem;
display: grid;
grid-template-columns: 1fr 1.12fr;
gap: 3rem;
align-items: start;
}
.bt-pdp-poster {
border-radius: 22px;
min-height: 365px;
padding: 1.75rem 1.75rem 2.2rem;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
}
.bt-pdp-poster.has-poster-img {
min-height: 0;
aspect-ratio: 1 / 1;
padding: 0;
background: #09090b;
}
.bt-pdp-poster-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bt-pdp-zoom-btn {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.88);
color: #09090b;
font-size: 0.92rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.bt-pdp-poster-title {
color: #ffffff;
font-size: clamp(1.75rem, 2.8vw, 2.25rem);
font-weight: 900;
text-align: center;
line-height: 1.12;
letter-spacing: -0.02em;
text-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
margin-bottom: 1rem;
max-width: 85%;
}
.bt-pdp-3d-icon {
width: 182px;
height: 182px;
border-radius: 38px;
background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
box-shadow:
0 22px 44px rgba(0, 0, 0, 0.38),
inset 0 -8px 14px rgba(0, 0, 0, 0.12),
inset 0 4px 8px rgba(255, 255, 255, 0.95);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.bt-pdp-3d-emoji {
font-size: 4.8rem;
line-height: 1;
filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18));
transform: translateY(-10px);
}
.bt-pdp-3d-pill {
position: absolute;
bottom: 14px;
background: linear-gradient(135deg, #dc2626, #b91c1c);
color: #ffffff;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
padding: 0.3rem 0.95rem;
border-radius: 999px;
text-transform: uppercase;
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.42);
}
.bt-pdp-trust-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.9rem;
margin-top: 1.25rem;
}
.bt-trust-box {
background: #ffffff;
border: 1px solid #eef2f6;
border-radius: 16px;
padding: 1.1rem 0.75rem;
text-align: center;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.45rem;
}
.bt-trust-icon {
width: 38px;
height: 38px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
}
.bt-trust-icon.green {
background: #fef2f2;
color: #ef4444;
}
.bt-trust-icon.blue {
background: #ffffff;
color: #dc2626;
}
.bt-trust-icon.purple {
background: #fef2f2;
color: #ef4444;
}
.bt-trust-label {
font-size: 0.76rem;
font-weight: 700;
color: #334155;
}
.bt-pdp-cat-pills {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-bottom: 0.85rem;
}
.bt-cat-pill {
background: #f8fafc;
border: 1px solid #e2e8f0;
color: #475569;
font-size: 0.72rem;
font-weight: 600;
padding: 0.28rem 0.75rem;
border-radius: 999px;
transition: all 0.18s ease;
}
.bt-cat-pill:hover {
border-color: #dc2626;
color: #dc2626;
background: #fef2f2;
}
.bt-pdp-title {
font-size: clamp(1.5rem, 2.4vw, 1.9rem);
font-weight: 900;
color: #09090b;
line-height: 1.24;
letter-spacing: -0.02em;
margin-bottom: 0.6rem;
}
.bt-pdp-rating-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.35rem;
font-size: 0.82rem;
}
.bt-stars {
color: #facc15;
font-size: 1rem;
letter-spacing: 0.06em;
}
.bt-rating-txt {
color: #475569;
font-weight: 600;
}
.bt-prem-badge {
color: #64748b;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.bt-license-header {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 0.9rem;
font-weight: 800;
color: #09090b;
margin-bottom: 0.85rem;
}
.bt-license-badge-icon {
width: 28px;
height: 28px;
border-radius: 50%;
background: #dc2626;
color: #ffffff;
font-size: 0.78rem;
display: flex;
align-items: center;
justify-content: center;
}
.bt-license-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.35rem;
}
.bt-license-card {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 16px;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.bt-license-card:hover {
border-color: #fca5a5;
box-shadow: 0 8px 22px rgba(220, 38, 38, 0.08);
}
.bt-license-card.active {
border: 2px solid #dc2626;
background: #ffffff;
box-shadow: 0 10px 26px rgba(220, 38, 38, 0.12);
}
.bt-license-left {
display: flex;
align-items: center;
gap: 0.85rem;
}
.bt-license-icon {
width: 40px;
height: 40px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 1.05rem;
flex-shrink: 0;
}
.bt-license-icon.tier-0 {
background: linear-gradient(135deg, #ef4444, #111113);
}
.bt-license-icon.tier-1 {
background: linear-gradient(135deg, #f59e0b, #b91c1c);
}
.bt-license-icon.tier-2 {
background: linear-gradient(135deg, #ef4444, #b91c1c);
}
.bt-license-name {
font-size: 0.92rem;
font-weight: 800;
color: #09090b;
line-height: 1.2;
}
.bt-license-sub {
font-size: 0.75rem;
color: #64748b;
margin-top: 2px;
}
.bt-license-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.25rem;
}
.bt-license-price {
font-size: 1.08rem;
font-weight: 900;
color: #09090b;
}
.bt-license-check {
width: 19px;
height: 19px;
border-radius: 50%;
background: #dc2626;
color: #ffffff;
font-size: 0.66rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
}
.bt-total-card {
background: #ffffff;
border: 1px solid #eef2f6;
border-radius: 20px;
padding: 1.35rem 1.5rem;
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}
.bt-total-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.1rem;
}
.bt-total-label {
font-size: 0.76rem;
color: #64748b;
font-weight: 600;
margin-bottom: 0.15rem;
}
.bt-total-price-wrap {
display: flex;
align-items: baseline;
gap: 0.55rem;
}
.bt-total-price {
font-size: 1.65rem;
font-weight: 900;
color: #dc2626;
letter-spacing: -0.02em;
}
.bt-total-old {
font-size: 0.85rem;
color: #94a3b8;
text-decoration: line-through;
}
.bt-save-pill {
background: #ef4444;
color: #ffffff;
font-size: 0.74rem;
font-weight: 800;
padding: 0.32rem 0.78rem;
border-radius: 999px;
}
.bt-proceed-btn {
width: 100%;
padding: 0.95rem 1.25rem;
border-radius: 13px;
background: #09090b;
color: #ffffff;
font-size: 0.92rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
box-shadow: 0 10px 24px rgba(17, 24, 39, 0.24);
transition: all 0.2s ease;
}
.bt-proceed-btn:hover {
background: #dc2626;
box-shadow: 0 12px 28px rgba(220, 38, 38, 0.32);
transform: translateY(-1px);
}
.bt-secure-foot {
text-align: center;
font-size: 0.74rem;
color: #64748b;
margin-top: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
}
@media (max-width: 900px) {
.bt-pdp-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.floating-wa-popup {
position: fixed;
bottom: 100px;
right: 24px;
z-index: 95;
width: 300px;
background: #ffffff;
border-radius: 18px;
border: 2px solid #dc2626;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
overflow: hidden;
display: none;
animation: slideUp 0.22s ease;
}
.floating-wa-popup.open {
display: block;
}
.floating-wa-popup-header {
background: #dc2626;
padding: 0.9rem 1.05rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.floating-wa-close {
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
font-size: 0.82rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
.floating-wa-close:hover {
background: rgba(255, 255, 255, 0.35);
}
.floating-wa-popup-body {
padding: 1.05rem;
background: #ffffff;
}
.floating-wa-number-box {
display: flex;
align-items: center;
justify-content: space-between;
background: #ffffff;
border: 1.5px solid #e5e7eb;
border-radius: 11px;
padding: 0.65rem 0.85rem;
}
.floating-wa-copy-btn {
background: #09090b;
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
padding: 0.35rem 0.65rem;
border-radius: 7px;
transition: background 0.2s ease;
}
.floating-wa-copy-btn:hover {
background: #dc2626;
}
.floating-wa {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 90;
width: 64px;
height: 64px;
border-radius: 50%;
background: #dc2626;
border: 3px solid #ffffff;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.floating-wa:hover {
transform: scale(1.09);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
.floating-wa-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
background: linear-gradient(135deg, #ff2e2e 0%, #dc2626 100%);
color: #ffffff;
font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
font-size: 0.76rem;
font-weight: 800;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #ffffff;
box-shadow: 0 4px 10px rgba(220, 38, 38, 0.55);
z-index: 4;
pointer-events: none;
}
.footer {
background: #ffffff;
color: var(--text-secondary);
padding: 4rem 0 2rem;
border-top: 1.5px solid #e5e7eb;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
gap: 2rem;
margin-bottom: 2.5rem;
}
.footer-title {
color: #09090b;
font-weight: 800;
font-size: 0.98rem;
margin-bottom: 1rem;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.55rem;
font-size: 0.88rem;
}
.footer-links a:hover {
color: #dc2626;
font-weight: 600;
}
.footer-bottom {
padding-top: 1.75rem;
border-top: 1px solid #e5e7eb;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 1rem;
font-size: 0.82rem;
color: var(--text-secondary);
}
.toast-container {
position: fixed;
bottom: 24px;
left: 24px;
z-index: 120;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.toast {
background: #ffffff;
border: 2px solid #dc2626;
color: #09090b;
padding: 0.8rem 1.15rem;
border-radius: 12px;
font-size: 0.86rem;
font-weight: 700;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
display: flex;
align-items: center;
gap: 0.55rem;
animation: slideUp 0.25s ease;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.admin-panel-page {
min-height: calc(100vh - 100px);
background: #f8fafc;
padding: 1.5rem 0 4rem;
}
.adm-login-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 68vh;
padding: 1.5rem;
}
.adm-login-card {
width: 100%;
max-width: 430px;
background: #ffffff;
border: 2px solid #e5e7eb;
border-radius: 22px;
padding: 2.25rem 2rem;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}
.adm-login-badge {
display: inline-block;
background: #dc2626;
color: #ffffff;
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.05em;
padding: 0.25rem 0.7rem;
border-radius: 999px;
margin-bottom: 0.75rem;
}
.adm-login-title {
font-size: 1.85rem;
font-weight: 900;
color: #09090b;
margin: 0 0 0.25rem;
}
.adm-login-title span {
color: #dc2626;
}
.adm-login-sub {
font-size: 0.84rem;
color: #64748b;
margin: 0 0 1.35rem;
}
.adm-error-box {
background: #fef2f2;
border: 1.5px solid #ef4444;
color: #dc2626;
font-size: 0.82rem;
font-weight: 700;
padding: 0.65rem 0.85rem;
border-radius: 10px;
margin-bottom: 1rem;
}
.adm-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 18px;
padding: 1rem 1.35rem;
margin-bottom: 1.25rem;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}
.adm-badge-pill {
display: inline-block;
background: #dc2626;
color: #ffffff;
font-size: 0.68rem;
font-weight: 900;
padding: 0.22rem 0.68rem;
border-radius: 999px;
letter-spacing: 0.04em;
margin-bottom: 0.25rem;
}
.adm-dash-title {
font-size: 1.4rem;
font-weight: 900;
color: #09090b;
margin: 0;
}
.adm-shell {
display: grid;
grid-template-columns: 278px minmax(0, 1fr);
gap: 1.35rem;
align-items: start;
}
.adm-sidebar {
position: sticky;
top: 86px;
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 20px;
padding: 0.9rem 0.75rem;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
max-height: calc(100vh - 104px);
overflow-y: auto;
}
.adm-sidebar-brand {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.65rem 0.75rem 0.85rem;
margin-bottom: 0.45rem;
border-bottom: 1.5px solid #f1f5f9;
}
.adm-sidebar-brand-ico {
width: 38px;
height: 38px;
border-radius: 11px;
background: linear-gradient(135deg, #dc2626, #b91c1c);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
font-weight: 900;
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
flex-shrink: 0;
}
.adm-sidebar-brand-title {
font-size: 0.95rem;
font-weight: 900;
color: #09090b;
line-height: 1.2;
}
.adm-sidebar-brand-sub {
font-size: 0.7rem;
font-weight: 700;
color: #dc2626;
}
.adm-side-group-lbl {
font-size: 0.66rem;
font-weight: 900;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.65rem 0.75rem 0.3rem;
}
.adm-side-nav-list {
display: flex;
flex-direction: column;
gap: 0.22rem;
}
.adm-side-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.55rem;
padding: 0.62rem 0.78rem;
border-radius: 12px;
border: 1.5px solid transparent;
background: transparent;
color: #334155;
font-size: 0.84rem;
font-weight: 700;
text-align: left;
cursor: pointer;
transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}
.adm-side-btn:hover {
background: #fef2f2;
color: #dc2626;
border-color: #fecaca;
transform: translateX(2px);
}
.adm-side-btn.active {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
color: #ffffff;
border-color: #dc2626;
font-weight: 800;
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.24);
}
.adm-side-btn-left {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
}
.adm-side-ico {
font-size: 1rem;
line-height: 1;
width: 22px;
text-align: center;
flex-shrink: 0;
}
.adm-side-lbl {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.adm-side-badge {
font-size: 0.68rem;
font-weight: 800;
padding: 0.12rem 0.48rem;
border-radius: 999px;
background: #f1f5f9;
color: #475569;
flex-shrink: 0;
}
.adm-side-btn.active .adm-side-badge {
background: rgba(255, 255, 255, 0.22);
color: #ffffff;
}
.adm-side-badge.is-alert {
background: #fef3c7;
color: #b45309;
}
.adm-main-area {
min-width: 0;
animation: admPaneFadeIn 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes admPaneFadeIn {
from { opacity: 0.55; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.adm-page-head-card {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.85rem;
background: linear-gradient(135deg, #09090b 0%, #09090b 100%);
color: #ffffff;
border-radius: 18px;
padding: 1.15rem 1.4rem;
margin-bottom: 1.25rem;
box-shadow: 0 10px 26px rgba(153, 27, 27, 0.15);
}
.adm-page-head-title {
font-size: 1.22rem;
font-weight: 900;
color: #ffffff;
margin: 0 0 0.2rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.adm-page-head-sub {
font-size: 0.8rem;
color: #cbd5e1;
margin: 0;
}
.adm-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
gap: 0.9rem;
margin-bottom: 1.25rem;
}
.adm-kpi-card {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 16px;
padding: 1.05rem 1.2rem;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.adm-kpi-card:hover {
transform: translateY(-2px);
border-color: #fca5a5;
box-shadow: 0 8px 20px rgba(220, 38, 38, 0.08);
}
.adm-kpi-label {
font-size: 0.74rem;
font-weight: 800;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.25rem;
}
.adm-kpi-num {
font-size: 1.65rem;
font-weight: 900;
color: #09090b;
}
@media (max-width: 980px) {
.adm-shell {
grid-template-columns: 1fr;
}
.adm-sidebar {
position: static;
max-height: none;
}
.adm-side-nav-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
gap: 0.4rem;
}
}
.adm-card {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 18px;
padding: 1.4rem;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
}
.adm-section-title {
font-size: 1.1rem;
font-weight: 900;
color: #09090b;
margin: 0 0 1rem;
}
.adm-table {
width: 100%;
border-collapse: collapse;
}
.adm-table th {
text-align: left;
font-size: 0.74rem;
font-weight: 800;
color: #64748b;
text-transform: uppercase;
padding: 0.65rem 0.75rem;
border-bottom: 2px solid #e2e8f0;
background: #f8fafc;
}
.adm-table td {
padding: 0.75rem;
border-bottom: 1px solid #f1f5f9;
vertical-align: middle;
}
.adm-table tr:hover td {
background: #f8fafc;
}
.adm-rev-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
gap: 1rem;
}
.adm-rev-item {
border: 1.5px solid #e5e7eb;
border-radius: 14px;
padding: 0.5rem;
background: #ffffff;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.adm-rev-item img {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 10px;
}
.adm-rev-del {
background: #fef2f2;
color: #dc2626;
border: 1px solid #fecaca;
border-radius: 8px;
padding: 0.38rem;
font-size: 0.76rem;
font-weight: 800;
cursor: pointer;
}
.adm-rev-del:hover {
background: #ef4444;
color: #ffffff;
}
.cart-drawer-backdrop {
justify-content: flex-end !important;
align-items: stretch !important;
padding: 0 !important;
}
.cart-drawer-panel {
width: 415px;
max-width: 100vw;
height: 100vh;
background: #ffffff;
display: flex;
flex-direction: column;
box-shadow: -12px 0 38px rgba(0, 0, 0, 0.16);
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
overflow: hidden;
}
.cart-drawer-backdrop.open .cart-drawer-panel {
transform: translateX(0);
}
.cart-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.35rem 1.35rem 1.15rem;
border-bottom: 1px solid #e5e7eb;
}
.cart-drawer-title {
font-size: 1.35rem;
font-weight: 700;
color: #09090b;
margin: 0;
letter-spacing: -0.01em;
}
.cart-drawer-close {
color: #09090b;
padding: 0.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.cart-drawer-col-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem 1.35rem 0.65rem;
border-bottom: 1px solid #f1f5f9;
font-size: 0.68rem;
font-weight: 600;
color: #6b7280;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.cart-drawer-items {
flex: 1;
overflow-y: auto;
padding: 1.15rem 1.35rem;
display: flex;
flex-direction: column;
gap: 1.35rem;
}
.cd-item-row {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.cd-item-thumb {
width: 84px;
height: 84px;
border-radius: 10px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.cd-thumb-inner {
width: 48px;
height: 48px;
border-radius: 12px;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.45rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.cd-item-details {
flex: 1;
min-width: 0;
}
.cd-item-name {
font-size: 0.92rem;
font-weight: 600;
color: #09090b;
line-height: 1.3;
margin-bottom: 0.35rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cd-item-price {
font-size: 1.02rem;
font-weight: 700;
color: #09090b;
margin-bottom: 0.55rem;
}
.cd-item-controls {
display: flex;
align-items: center;
justify-content: space-between;
}
.cd-qty-box {
display: inline-flex;
align-items: center;
justify-content: space-between;
border: 1px solid #9ca3af;
border-radius: 2px;
padding: 0.32rem 0.65rem;
min-width: 96px;
background: #ffffff;
}
.cd-qty-box button {
color: #09090b;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.1rem;
cursor: pointer;
}
.cd-qty-box span {
font-size: 0.86rem;
font-weight: 600;
color: #09090b;
padding: 0 0.5rem;
}
.cd-trash-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.25rem;
cursor: pointer;
opacity: 0.85;
transition: opacity 0.15s ease;
}
.cd-trash-btn:hover {
opacity: 1;
}
.cart-drawer-footer {
background: #ffffff;
border-top: 1px solid #e5e7eb;
box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.04);
}
.cd-order-note-bar {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.9rem 1.35rem;
border-bottom: 1px solid #e5e7eb;
font-size: 0.88rem;
font-weight: 500;
color: #09090b;
background: #ffffff;
cursor: pointer;
}
.cd-summary-body {
padding: 1.15rem 1.35rem 1.35rem;
}
.cd-subtotal-row {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 0.35rem;
}
.cd-subtotal-label {
font-size: 0.98rem;
font-weight: 700;
color: #09090b;
}
.cd-subtotal-val {
font-size: 1.35rem;
font-weight: 700;
color: #09090b;
}
.cd-subtotal-val small {
font-size: 0.88rem;
font-weight: 500;
color: #09090b;
}
.cd-tax-note {
font-size: 0.78rem;
color: #374151;
margin: 0 0 0.75rem;
}
.cd-delivery-note {
font-size: 0.78rem;
color: #6b7280;
line-height: 1.45;
margin: 0 0 0.95rem;
}
.cd-checkout-black-btn {
width: 100%;
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
color: #ffffff;
border: none;
border-radius: 12px;
padding: 0.95rem 1rem;
font-size: 0.92rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 8px 22px rgba(220, 38, 38, 0.25);
transition: all 0.2s ease;
}
.cd-checkout-black-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(220, 38, 38, 0.35);
}
.admin-panel-page {
min-height: calc(100vh - 100px);
background: #f8fafc;
padding: 1.5rem 0 4rem;
}
.adm-login-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 68vh;
padding: 1.5rem;
}
.adm-login-card {
width: 100%;
max-width: 430px;
background: #ffffff;
border: 2px solid #e5e7eb;
border-radius: 22px;
padding: 2.25rem 2rem;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}
.adm-login-badge {
display: inline-block;
background: #dc2626;
color: #ffffff;
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.05em;
padding: 0.25rem 0.7rem;
border-radius: 999px;
margin-bottom: 0.75rem;
}
.adm-login-title {
font-size: 1.85rem;
font-weight: 900;
color: #09090b;
margin: 0 0 0.25rem;
}
.adm-login-title span {
color: #dc2626;
}
.adm-login-sub {
font-size: 0.84rem;
color: #64748b;
margin: 0 0 1.35rem;
}
.adm-error-box {
background: #fef2f2;
border: 1.5px solid #ef4444;
color: #dc2626;
font-size: 0.82rem;
font-weight: 700;
padding: 0.65rem 0.85rem;
border-radius: 10px;
margin-bottom: 1rem;
}
.adm-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 18px;
padding: 1rem 1.35rem;
margin-bottom: 1.25rem;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}
.adm-badge-pill {
display: inline-block;
background: #dc2626;
color: #ffffff;
font-size: 0.68rem;
font-weight: 900;
padding: 0.22rem 0.68rem;
border-radius: 999px;
letter-spacing: 0.04em;
margin-bottom: 0.25rem;
}
.adm-dash-title {
font-size: 1.4rem;
font-weight: 900;
color: #09090b;
margin: 0;
}
.adm-shell {
display: grid;
grid-template-columns: 278px minmax(0, 1fr);
gap: 1.35rem;
align-items: start;
}
.adm-sidebar {
position: sticky;
top: 86px;
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 20px;
padding: 0.9rem 0.75rem;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
max-height: calc(100vh - 104px);
overflow-y: auto;
}
.adm-sidebar-brand {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.65rem 0.75rem 0.85rem;
margin-bottom: 0.45rem;
border-bottom: 1.5px solid #f1f5f9;
}
.adm-sidebar-brand-ico {
width: 38px;
height: 38px;
border-radius: 11px;
background: linear-gradient(135deg, #dc2626, #b91c1c);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
font-weight: 900;
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
flex-shrink: 0;
}
.adm-sidebar-brand-title {
font-size: 0.95rem;
font-weight: 900;
color: #09090b;
line-height: 1.2;
}
.adm-sidebar-brand-sub {
font-size: 0.7rem;
font-weight: 700;
color: #dc2626;
}
.adm-side-group-lbl {
font-size: 0.66rem;
font-weight: 900;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.65rem 0.75rem 0.3rem;
}
.adm-side-nav-list {
display: flex;
flex-direction: column;
gap: 0.22rem;
}
.adm-side-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.55rem;
padding: 0.62rem 0.78rem;
border-radius: 12px;
border: 1.5px solid transparent;
background: transparent;
color: #334155;
font-size: 0.84rem;
font-weight: 700;
text-align: left;
cursor: pointer;
transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}
.adm-side-btn:hover {
background: #fef2f2;
color: #dc2626;
border-color: #fecaca;
transform: translateX(2px);
}
.adm-side-btn.active {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
color: #ffffff;
border-color: #dc2626;
font-weight: 800;
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.24);
}
.adm-side-btn-left {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
}
.adm-side-ico {
font-size: 1rem;
line-height: 1;
width: 22px;
text-align: center;
flex-shrink: 0;
}
.adm-side-lbl {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.adm-side-badge {
font-size: 0.68rem;
font-weight: 800;
padding: 0.12rem 0.48rem;
border-radius: 999px;
background: #f1f5f9;
color: #475569;
flex-shrink: 0;
}
.adm-side-btn.active .adm-side-badge {
background: rgba(255, 255, 255, 0.22);
color: #ffffff;
}
.adm-side-badge.is-alert {
background: #fef3c7;
color: #b45309;
}
.adm-main-area {
min-width: 0;
animation: admPaneFadeIn 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes admPaneFadeIn {
from { opacity: 0.55; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.adm-page-head-card {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.85rem;
background: linear-gradient(135deg, #09090b 0%, #09090b 100%);
color: #ffffff;
border-radius: 18px;
padding: 1.15rem 1.4rem;
margin-bottom: 1.25rem;
box-shadow: 0 10px 26px rgba(153, 27, 27, 0.15);
}
.adm-page-head-title {
font-size: 1.22rem;
font-weight: 900;
color: #ffffff;
margin: 0 0 0.2rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.adm-page-head-sub {
font-size: 0.8rem;
color: #cbd5e1;
margin: 0;
}
.adm-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
gap: 0.9rem;
margin-bottom: 1.25rem;
}
.adm-kpi-card {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 16px;
padding: 1.05rem 1.2rem;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.adm-kpi-card:hover {
transform: translateY(-2px);
border-color: #fca5a5;
box-shadow: 0 8px 20px rgba(220, 38, 38, 0.08);
}
.adm-kpi-label {
font-size: 0.74rem;
font-weight: 800;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.25rem;
}
.adm-kpi-num {
font-size: 1.65rem;
font-weight: 900;
color: #09090b;
}
@media (max-width: 980px) {
.adm-shell {
grid-template-columns: 1fr;
}
.adm-sidebar {
position: static;
max-height: none;
}
.adm-side-nav-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
gap: 0.4rem;
}
}
.adm-card {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 18px;
padding: 1.4rem;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
}
.adm-section-title {
font-size: 1.1rem;
font-weight: 900;
color: #09090b;
margin: 0 0 1rem;
}
.adm-table {
width: 100%;
border-collapse: collapse;
}
.adm-table th {
text-align: left;
font-size: 0.74rem;
font-weight: 800;
color: #64748b;
text-transform: uppercase;
padding: 0.65rem 0.75rem;
border-bottom: 2px solid #e2e8f0;
background: #f8fafc;
}
.adm-table td {
padding: 0.75rem;
border-bottom: 1px solid #f1f5f9;
vertical-align: middle;
}
.adm-table tr:hover td {
background: #f8fafc;
}
.adm-rev-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
gap: 1rem;
}
.adm-rev-item {
border: 1.5px solid #e5e7eb;
border-radius: 14px;
padding: 0.5rem;
background: #ffffff;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.adm-rev-item img {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 10px;
}
.adm-rev-del {
background: #fef2f2;
color: #dc2626;
border: 1px solid #fecaca;
border-radius: 8px;
padding: 0.38rem;
font-size: 0.76rem;
font-weight: 800;
cursor: pointer;
}
.adm-rev-del:hover {
background: #ef4444;
color: #ffffff;
}
.cart-drawer-backdrop {
justify-content: flex-end !important;
align-items: stretch !important;
padding: 0 !important;
}
.cart-drawer-panel {
width: 415px;
max-width: 100vw;
height: 100vh;
background: #ffffff;
display: flex;
flex-direction: column;
box-shadow: -12px 0 38px rgba(0, 0, 0, 0.16);
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
overflow: hidden;
}
.cart-drawer-backdrop.open .cart-drawer-panel {
transform: translateX(0);
}
.cart-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.35rem 1.35rem 1.15rem;
border-bottom: 1px solid #e5e7eb;
}
.cart-drawer-title {
font-size: 1.35rem;
font-weight: 700;
color: #09090b;
margin: 0;
letter-spacing: -0.01em;
}
.cart-drawer-close {
color: #09090b;
padding: 0.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.cart-drawer-col-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem 1.35rem 0.65rem;
border-bottom: 1px solid #f1f5f9;
font-size: 0.68rem;
font-weight: 600;
color: #6b7280;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.cart-drawer-items {
flex: 1;
overflow-y: auto;
padding: 1.15rem 1.35rem;
display: flex;
flex-direction: column;
gap: 1.35rem;
}
.cd-item-row {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.cd-item-thumb {
width: 84px;
height: 84px;
border-radius: 10px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.cd-thumb-inner {
width: 48px;
height: 48px;
border-radius: 12px;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.45rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.cd-item-details {
flex: 1;
min-width: 0;
}
.cd-item-name {
font-size: 0.92rem;
font-weight: 600;
color: #09090b;
line-height: 1.3;
margin-bottom: 0.35rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cd-item-price {
font-size: 1.02rem;
font-weight: 700;
color: #09090b;
margin-bottom: 0.55rem;
}
.cd-item-controls {
display: flex;
align-items: center;
justify-content: space-between;
}
.cd-qty-box {
display: inline-flex;
align-items: center;
justify-content: space-between;
border: 1px solid #9ca3af;
border-radius: 2px;
padding: 0.32rem 0.65rem;
min-width: 96px;
background: #ffffff;
}
.cd-qty-box button {
color: #09090b;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.1rem;
cursor: pointer;
}
.cd-qty-box span {
font-size: 0.86rem;
font-weight: 600;
color: #09090b;
padding: 0 0.5rem;
}
.cd-trash-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.25rem;
cursor: pointer;
opacity: 0.85;
transition: opacity 0.15s ease;
}
.cd-trash-btn:hover {
opacity: 1;
}
.cart-drawer-footer {
background: #ffffff;
border-top: 1px solid #e5e7eb;
box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.04);
}
.cd-order-note-bar {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.9rem 1.35rem;
border-bottom: 1px solid #e5e7eb;
font-size: 0.88rem;
font-weight: 500;
color: #09090b;
background: #ffffff;
cursor: pointer;
}
.cd-summary-body {
padding: 1.15rem 1.35rem 1.35rem;
}
.cd-subtotal-row {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 0.35rem;
}
.cd-subtotal-label {
font-size: 0.98rem;
font-weight: 700;
color: #09090b;
}
.cd-subtotal-val {
font-size: 1.35rem;
font-weight: 700;
color: #09090b;
}
.cd-subtotal-val small {
font-size: 0.88rem;
font-weight: 500;
color: #09090b;
}
.cd-tax-note {
font-size: 0.78rem;
color: #374151;
margin: 0 0 0.75rem;
}
.cd-delivery-note {
font-size: 0.78rem;
color: #6b7280;
line-height: 1.45;
margin: 0 0 0.95rem;
}
.cd-checkout-black-btn {
width: 100%;
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
color: #ffffff;
border: none;
border-radius: 12px;
padding: 0.95rem 1rem;
font-size: 0.92rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 8px 22px rgba(220, 38, 38, 0.25);
transition: all 0.2s ease;
}
.cd-checkout-black-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(220, 38, 38, 0.35);
}
.rp-page {
background: #ffffff;
min-height: 75vh;
}
.rp-breadcrumb-bar {
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
padding: 0.85rem 0;
}
.rp-breadcrumb-inner {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 0.78rem;
color: #64748b;
font-weight: 500;
}
.rp-breadcrumb-inner a {
color: #64748b;
}
.rp-breadcrumb-inner a:hover {
color: #09090b;
}
.rp-breadcrumb-inner strong {
color: #09090b;
font-weight: 700;
}
.rp-hero {
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
padding: 3.75rem 0 3.25rem;
text-align: center;
}
.rp-top-pill {
display: inline-block;
background: #f1f5f9;
border: 1px solid #cbd5e1;
color: #334155;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.34rem 0.95rem;
border-radius: 999px;
margin-bottom: 1rem;
}
.rp-main-title {
font-size: clamp(2.25rem, 4vw, 3.2rem);
font-weight: 900;
color: #09090b;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0 0 0.65rem;
}
.rp-subtitle {
font-size: 1.02rem;
color: #475569;
font-weight: 500;
margin: 0 0 1.35rem;
}
.rp-updated-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
background: #ffffff;
border: 1px solid #e2e8f0;
color: #475569;
font-size: 0.76rem;
font-weight: 600;
padding: 0.36rem 0.9rem;
border-radius: 999px;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}
.rp-layout-grid {
display: grid;
grid-template-columns: 245px 1fr;
gap: 3.5rem;
padding-top: 3.25rem;
padding-bottom: 4.5rem;
align-items: start;
}
.rp-sidebar {
position: sticky;
top: 96px;
}
.rp-toc-head {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.74rem;
font-weight: 800;
color: #09090b;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 0.9rem;
}
.rp-toc-links {
display: flex;
flex-direction: column;
gap: 0.65rem;
margin-bottom: 1.75rem;
padding-left: 0.25rem;
}
.rp-toc-links a {
font-size: 0.84rem;
font-weight: 500;
color: #475569;
transition: color 0.15s ease;
}
.rp-toc-links a:hover {
color: #dc2626;
}
.rp-quick-help {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 1.15rem;
}
.rp-qh-title {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.82rem;
font-weight: 800;
color: #09090b;
margin-bottom: 0.45rem;
}
.rp-qh-desc {
font-size: 0.76rem;
color: #64748b;
line-height: 1.5;
margin: 0 0 0.65rem;
}
.rp-qh-link {
font-size: 0.78rem;
font-weight: 800;
color: #dc2626;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.rp-qh-link:hover {
text-decoration: underline;
}
.rp-intro-text {
font-size: 0.95rem;
color: #334155;
line-height: 1.7;
margin: 0 0 2.25rem;
}
.rp-section-block {
margin-bottom: 2.5rem;
}
.rp-sec-heading {
font-size: 1.45rem;
font-weight: 900;
color: #09090b;
padding-left: 0.75rem;
border-left: 3.5px solid #09090b;
line-height: 1.2;
margin: 0 0 1.25rem;
}
.rp-cards-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.rp-cond-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 1.15rem 1.25rem;
display: flex;
align-items: flex-start;
gap: 0.75rem;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
}
.rp-cond-card p {
font-size: 0.86rem;
color: #334155;
line-height: 1.55;
margin: 0;
font-weight: 500;
}
.rp-icon-check {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1.5px solid #dc2626;
color: #dc2626;
font-size: 0.68rem;
font-weight: 900;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.rp-icon-cross {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1.5px solid #ef4444;
color: #ef4444;
font-size: 0.65rem;
font-weight: 900;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.rp-support-card {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 14px;
padding: 1.35rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
flex-wrap: wrap;
}
@media (max-width: 860px) {
.rp-layout-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.rp-sidebar {
position: static;
}
.rp-cards-grid {
grid-template-columns: 1fr;
}
}
.checkout-full-page {
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 45%, #f8fafc 100%);
min-height: 85vh;
padding-bottom: 5rem;
}
.chk-page-container {
max-width: 1140px;
margin: 0 auto;
padding: 1.5rem 1.25rem 0;
}
.chk-hero-banner {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #09090b 0%, #111113 52%, #09090b 100%);
border-radius: 24px;
padding: 2rem 2.25rem 1.75rem;
margin-bottom: 2rem;
color: #ffffff;
box-shadow: 0 20px 50px rgba(153, 27, 27, 0.22);
border: 1px solid rgba(239, 68, 68, 0.28);
}
.chk-hero-banner::before {
content: '';
position: absolute;
top: -80px;
right: -60px;
width: 260px;
height: 260px;
border-radius: 50%;
background: radial-gradient(circle, rgba(239, 68, 68, 0.32) 0%, transparent 70%);
pointer-events: none;
}
.chk-hero-top {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.chk-eyebrow-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: rgba(239, 68, 68, 0.22);
border: 1px solid rgba(248, 113, 113, 0.45);
color: #fecaca;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.07em;
padding: 0.32rem 0.85rem;
border-radius: 999px;
margin-bottom: 0.65rem;
}
.chk-page-title {
font-size: clamp(1.65rem, 2.8vw, 2.2rem);
font-weight: 900;
color: #ffffff;
line-height: 1.15;
margin: 0 0 0.35rem;
letter-spacing: -0.02em;
}
.chk-page-subtitle {
font-size: 0.9rem;
color: rgba(254, 202, 202, 0.82);
margin: 0;
}
.chk-hero-amount-box {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 16px;
padding: 0.85rem 1.35rem;
text-align: right;
min-width: 185px;
}
.chk-hero-amount-box span {
display: block;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #fca5a5;
margin-bottom: 0.15rem;
}
.chk-hero-amount-box strong {
font-size: 1.5rem;
font-weight: 900;
color: #ffffff;
letter-spacing: -0.01em;
}
.chk-stepper-bar {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding-top: 1.35rem;
overflow-x: auto;
}
.chk-stepper-item {
display: flex;
align-items: center;
flex: 1;
min-width: max-content;
}
.chk-stepper-item:last-child {
flex: 0 0 auto;
}
.chk-stepper-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.95rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.65);
font-size: 0.8rem;
font-weight: 700;
transition: all 0.25s ease;
}
.chk-stepper-pill.is-curr {
background: #ffffff;
border-color: #ffffff;
color: #09090b;
font-weight: 800;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.chk-stepper-pill.is-done {
background: rgba(220, 38, 38, 0.22);
border-color: rgba(248, 113, 113, 0.55);
color: #fca5a5;
}
.chk-stepper-num {
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 900;
}
.chk-stepper-pill.is-curr .chk-stepper-num {
background: linear-gradient(135deg, #dc2626, #b91c1c);
color: #ffffff;
}
.chk-stepper-pill.is-done .chk-stepper-num {
background: #ef4444;
color: #ffffff;
}
.chk-stepper-line {
flex: 1;
height: 2px;
min-width: 18px;
margin: 0 0.55rem;
background: rgba(255, 255, 255, 0.16);
border-radius: 999px;
}
.chk-stepper-line.is-done {
background: #ef4444;
}
.chk-main-grid {
display: grid;
grid-template-columns: 1.42fr 1fr;
gap: 2rem;
align-items: start;
}
.chk-left-col {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.chk-section-card {
background: #ffffff;
border: 1.5px solid #fee2e2;
border-radius: 22px;
padding: 2rem;
box-shadow: 0 14px 38px rgba(185, 28, 28, 0.06);
}
.chk-wiz-head {
margin-bottom: 1.5rem;
padding-bottom: 1.15rem;
border-bottom: 1px solid #f1f5f9;
}
.chk-wiz-badge {
display: inline-block;
background: #fef2f2;
border: 1px solid #fecaca;
color: #dc2626;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.07em;
padding: 0.24rem 0.7rem;
border-radius: 999px;
margin-bottom: 0.55rem;
}
.chk-wiz-title {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 1.32rem;
font-weight: 900;
color: #09090b;
margin: 0 0 0.35rem;
}
.chk-wiz-sub {
font-size: 0.88rem;
color: #64748b;
margin: 0;
line-height: 1.5;
}
.chk-bank-instant-tag {
margin-left: auto;
background: #fef2f2;
color: #dc2626;
border: 1px solid #fecaca;
font-size: 0.7rem;
font-weight: 800;
padding: 0.24rem 0.65rem;
border-radius: 999px;
white-space: nowrap;
}
.chk-form-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.chk-wizard-primary-btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
color: #ffffff;
border: none;
border-radius: 14px;
padding: 0.98rem 1.5rem;
font-size: 0.96rem;
font-weight: 800;
cursor: pointer;
box-shadow: 0 10px 26px rgba(220, 38, 38, 0.28);
transition: all 0.2s ease;
}
.chk-wizard-primary-btn:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(220, 38, 38, 0.38);
}
.chk-wizard-confirm-btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
color: #ffffff;
border: none;
border-radius: 14px;
padding: 1rem 1.5rem;
font-size: 0.98rem;
font-weight: 900;
cursor: pointer;
box-shadow: 0 10px 26px rgba(220, 38, 38, 0.3);
transition: all 0.2s ease;
}
.chk-wizard-confirm-btn:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(220, 38, 38, 0.4);
}
.chk-wizard-back-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
background: #f8fafc;
color: #334155;
border: 1.5px solid #e2e8f0;
border-radius: 14px;
padding: 0.92rem 1.35rem;
font-size: 0.9rem;
font-weight: 800;
cursor: pointer;
transition: all 0.2s ease;
}
.chk-wizard-back-btn:hover {
background: #f1f5f9;
border-color: #cbd5e1;
color: #09090b;
}
.chk-right-col {
position: sticky;
top: 96px;
}
.chk-summary-card {
background: #ffffff;
border: 1.5px solid #fee2e2;
border-radius: 22px;
padding: 1.65rem;
box-shadow: 0 14px 38px rgba(185, 28, 28, 0.06);
}
.chk-summary-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
padding-bottom: 0.85rem;
border-bottom: 1.5px solid #f1f5f9;
}
.chk-summary-head h3 {
font-size: 1.12rem;
font-weight: 900;
color: #09090b;
margin: 0;
}
.chk-summary-head button {
font-size: 0.78rem;
font-weight: 800;
color: #dc2626;
background: #fef2f2;
border: 1px solid #fecaca;
padding: 0.28rem 0.7rem;
border-radius: 999px;
cursor: pointer;
transition: all 0.18s ease;
}
.chk-summary-head button:hover {
background: #fee2e2;
}
.chk-summary-items-list {
display: flex;
flex-direction: column;
gap: 0.85rem;
max-height: 340px;
overflow-y: auto;
padding-right: 0.25rem;
margin-bottom: 1.1rem;
}
.chk-summary-item {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.65rem 0;
border-bottom: 1px solid #f1f5f9;
}
.chk-summary-item:last-child {
border-bottom: none;
}
.chk-summary-thumb {
width: 60px;
height: 60px;
border-radius: 14px;
overflow: hidden;
flex-shrink: 0;
border: 1px solid #fee2e2;
background: #f8fafc;
}
.chk-summary-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.chk-summary-thumb-fallback {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.55rem;
color: #ffffff;
}
.chk-summary-item-title {
font-size: 0.88rem;
font-weight: 800;
color: #09090b;
line-height: 1.25;
}
.chk-summary-item-plan {
font-size: 0.74rem;
font-weight: 600;
color: #dc2626;
margin: 0.15rem 0 0.4rem;
}
.chk-summary-item-qty {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.chk-summary-item-qty button {
width: 24px;
height: 24px;
border-radius: 7px;
border: 1px solid #e2e8f0;
background: #f8fafc;
font-weight: 800;
font-size: 0.84rem;
color: #09090b;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s ease;
}
.chk-summary-item-qty button:hover {
border-color: #fca5a5;
background: #fef2f2;
color: #b91c1c;
}
.chk-summary-item-qty span {
font-size: 0.8rem;
font-weight: 800;
min-width: 16px;
text-align: center;
color: #09090b;
}
.chk-summary-del {
border-color: #fecaca !important;
background: #fef2f2 !important;
font-size: 0.72rem !important;
margin-left: 0.25rem;
}
.chk-summary-item-price {
font-size: 0.94rem;
font-weight: 900;
color: #09090b;
white-space: nowrap;
}
.chk-promo-box {
margin: 0.85rem 0 1.1rem;
padding: 0.85rem;
background: #f8fafc;
border: 1.5px dashed #fecaca;
border-radius: 14px;
}
.chk-promo-lbl {
font-size: 0.72rem;
font-weight: 800;
color: #18181b;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.45rem;
}
.chk-promo-row {
display: flex;
gap: 0.45rem;
}
.chk-promo-btn {
background: #dc2626;
color: #ffffff;
border: none;
border-radius: 10px;
padding: 0.48rem 0.95rem;
font-size: 0.8rem;
font-weight: 800;
cursor: pointer;
transition: background 0.18s ease;
}
.chk-promo-btn:hover {
background: #b91c1c;
}
.chk-promo-applied {
display: flex;
align-items: center;
justify-content: space-between;
background: #fef2f2;
border: 1px solid #fca5a5;
padding: 0.45rem 0.7rem;
border-radius: 10px;
}
.chk-promo-applied span {
font-size: 0.8rem;
font-weight: 800;
color: #b91c1c;
}
.chk-promo-applied button {
font-size: 0.74rem;
font-weight: 800;
color: #ef4444;
background: none;
border: none;
cursor: pointer;
}
.chk-summary-totals {
border-top: 1.5px solid #f1f5f9;
padding-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.chk-tot-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.88rem;
color: #475569;
}
.chk-tot-grand {
margin-top: 0.35rem;
padding-top: 0.8rem;
border-top: 1.5px dashed #e2e8f0;
font-size: 1.02rem;
font-weight: 900;
color: #09090b;
}
.chk-grand-price {
font-size: 1.45rem;
font-weight: 900;
background: linear-gradient(135deg, #dc2626, #b91c1c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.chk-grand-price small {
font-size: 0.8rem;
color: #64748b;
-webkit-text-fill-color: #64748b;
}
.chk-wa-order-link {
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
width: 100%;
margin-top: 0.65rem;
padding: 0.78rem 1rem;
border-radius: 12px;
background: #fef2f2;
border: 1.5px solid #fecaca;
color: #b91c1c;
font-size: 0.84rem;
font-weight: 800;
text-decoration: none;
transition: all 0.2s ease;
}
.chk-wa-order-link:hover {
background: #fee2e2;
border-color: #fca5a5;
}
.chk-trust-badges {
margin-top: 1.2rem;
padding-top: 1rem;
border-top: 1px solid #f1f5f9;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.chk-trust-item {
display: flex;
align-items: center;
gap: 0.7rem;
font-size: 0.8rem;
}
.chk-trust-ico {
width: 34px;
height: 34px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
flex-shrink: 0;
}
.chk-trust-item strong {
display: block;
color: #09090b;
font-size: 0.8rem;
font-weight: 800;
}
.chk-trust-item small {
color: #64748b;
font-size: 0.73rem;
}
.chk-empty-card {
background: #ffffff;
border: 1.5px solid #fee2e2;
border-radius: 24px;
padding: 3.25rem 2rem;
box-shadow: 0 16px 40px rgba(185, 28, 28, 0.06);
}
.chk-empty-ico {
width: 72px;
height: 72px;
border-radius: 50%;
background: #fef2f2;
border: 1.5px solid #fecaca;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
margin: 0 auto 1rem;
}
.chk-empty-card h2 {
font-size: 1.55rem;
font-weight: 900;
color: #09090b;
margin: 0 0 0.45rem;
}
.chk-empty-card p {
color: #64748b;
font-size: 0.94rem;
margin: 0 0 1.65rem;
}
.chk-confirmed-card {
position: relative;
overflow: hidden;
background: #ffffff;
border: 1.5px solid #fee2e2;
border-radius: 24px;
padding: 2.5rem 2.25rem;
text-align: center;
box-shadow: 0 22px 55px rgba(185, 28, 28, 0.1);
}
.chk-confirmed-topbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, #ef4444, #dc2626, #ef4444);
}
.chk-confirmed-icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, #ef4444, #b91c1c);
color: #ffffff;
font-size: 2.2rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
box-shadow: 0 10px 25px rgba(220, 38, 38, 0.3);
}
.chk-confirmed-pill {
display: inline-block;
background: #fef2f2;
border: 1px solid #fecaca;
color: #b91c1c;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.07em;
padding: 0.28rem 0.85rem;
border-radius: 999px;
margin-bottom: 0.6rem;
}
.chk-confirmed-title {
font-size: 1.9rem;
font-weight: 900;
color: #09090b;
margin: 0 0 0.45rem;
}
.chk-confirmed-sub {
font-size: 0.92rem;
color: #475569;
max-width: 540px;
margin: 0 auto 1.5rem;
line-height: 1.55;
}
.chk-order-id-banner {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
border: 1.5px solid #fca5a5;
border-radius: 18px;
padding: 1.15rem 1.4rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
text-align: left;
margin-bottom: 1.35rem;
}
.chk-order-id-lbl {
font-size: 0.7rem;
font-weight: 800;
color: #b91c1c;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.chk-order-id-val {
font-size: 1.75rem;
font-weight: 900;
color: #09090b;
font-family: monospace;
line-height: 1.15;
}
.chk-order-id-hint {
font-size: 0.75rem;
color: #64748b;
margin-top: 0.15rem;
}
.chk-copy-id-btn {
background: #dc2626;
color: #ffffff;
border: none;
border-radius: 10px;
padding: 0.55rem 1rem;
font-size: 0.82rem;
font-weight: 800;
cursor: pointer;
transition: background 0.18s ease;
}
.chk-copy-id-btn:hover {
background: #b91c1c;
}
.chk-details-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
gap: 0.75rem;
text-align: left;
margin-bottom: 1.15rem;
}
.chk-detail-box {
border: 1.5px solid #f1f5f9;
border-radius: 12px;
padding: 0.75rem 0.9rem;
background: #f8fafc;
}
.chk-detail-box span {
display: block;
font-size: 0.7rem;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
margin-bottom: 0.2rem;
}
.chk-detail-box strong {
font-size: 0.88rem;
font-weight: 800;
color: #09090b;
}
.chk-status-pill-row {
margin-bottom: 1.4rem;
}
.chk-status-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: #fffbeb;
border: 1px solid #fde68a;
color: #d97706;
font-size: 0.8rem;
font-weight: 800;
padding: 0.38rem 0.95rem;
border-radius: 999px;
}
.chk-confirmed-actions {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.chk-wa-support-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #ffffff;
border-radius: 14px;
padding: 0.92rem 1.4rem;
font-size: 0.94rem;
font-weight: 800;
text-decoration: none;
box-shadow: 0 8px 22px rgba(220, 38, 38, 0.25);
transition: all 0.2s ease;
}
.chk-wa-support-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(220, 38, 38, 0.35);
}
@media (max-width: 920px) {
.chk-main-grid {
grid-template-columns: 1fr;
}
.chk-right-col {
position: static;
}
.chk-hero-banner {
padding: 1.5rem 1.35rem;
}
.chk-hero-amount-box {
width: 100%;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
}
}
@media (max-width: 600px) {
.chk-form-row-2 {
grid-template-columns: 1fr;
}
.chk-section-card {
padding: 1.35rem;
}
.chk-stepper-lbl {
font-size: 0.74rem;
}
}
@media (max-width: 992px) {
.hero-grid,
.track-grid {
grid-template-columns: 1fr;
}
.nav-links {
display: none;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.hero-stats {
grid-template-columns: 1fr 1fr;
}
.spotlight-features {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
}
.top-bar-inner {
justify-content: center;
text-align: center;
}
}
:root {
--brand-purple: #991b1b;
--brand-purple-light: #ef4444;
--brand-yellow: #F59E0B;
--brand-black: #09090b;
--brand-white: #FFFFFF;
--accent-primary: #dc2626;
--accent-primary-hover: #b91c1c;
--accent-medium: #ef4444;
--border-highlight: #dc2626;
}
html,
body {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
color-scheme: light only;
overflow-x: hidden;
max-width: 100%;
}
h1,
h2,
h3,
h4,
.font-heading,
.bt-hero-headline,
.bt-sec-title,
.bt-card-title {
font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
letter-spacing: -0.025em;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: var(--brand-purple);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--brand-purple-light);
}
.navbar {
background: #ffffff;
border-bottom: 1px solid rgba(220, 38, 38, 0.12);
box-shadow: 0 10px 30px -10px rgba(17, 24, 39, 0.08);
}
.brand-icon-box {
border-color: #dc2626;
box-shadow: 0 4px 18px rgba(220, 38, 38, 0.25);
}
.brand-title .part-1 {
color: #dc2626;
}
.brand-title .part-2 {
color: #991b1b;
}
.nav-link:hover,
.nav-link.active {
color: #991b1b;
}
.nav-link.active::after {
background: #dc2626;
}
.ticker-wrap {
background: #09090b;
border-bottom: 1px solid rgba(220, 38, 38, 0.22);
}
.ticker-label-box {
background: linear-gradient(135deg, #dc2626, #ef4444);
}
.bt-hero-section {
position: relative;
overflow: hidden;
padding: 5.5rem 0 5.5rem;
min-height: calc(100vh - 82px);
display: flex;
align-items: center;
background:
radial-gradient(circle at 18% 18%, rgba(220, 38, 38, 0.14), transparent 34%),
radial-gradient(circle at 82% 78%, rgba(245, 158, 11, 0.08), transparent 30%),
radial-gradient(circle at 50% 50%, rgba(248, 113, 113, 0.05), transparent 42%),
linear-gradient(135deg, #09090b, #09090b 52%, #050507);
border-bottom: 1px solid rgba(220, 38, 38, 0.18);
}
.bt-hero-bg-grid {
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(220, 38, 38, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(220, 38, 38, 0.035) 1px, transparent 1px);
background-size: 60px 60px;
z-index: 0;
}
.bt-hero-orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.bt-hero-orb-1 {
width: 500px;
height: 500px;
top: 10%;
left: 10%;
background: radial-gradient(ellipse, rgba(220, 38, 38, 0.12), transparent 65%);
filter: blur(55px);
}
.bt-hero-orb-2 {
width: 360px;
height: 360px;
bottom: 12%;
right: 8%;
background: radial-gradient(ellipse, rgba(245, 158, 11, 0.06), transparent 65%);
filter: blur(50px);
}
.bt-hero-rings-wrap {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 0;
}
.bt-hero-ring {
position: absolute;
border-radius: 50%;
}
.bt-hero-ring-1 {
width: 700px;
height: 700px;
border: 1px solid rgba(220, 38, 38, 0.06);
animation: btHeroSpin 90s linear infinite;
}
.bt-hero-ring-2 {
width: 950px;
height: 950px;
border: 1px solid rgba(220, 38, 38, 0.035);
animation: btHeroSpinReverse 120s linear infinite;
}
.bt-ring-dot {
position: absolute;
border-radius: 50%;
}
.bt-ring-dot-top {
top: -6px;
left: 50%;
width: 12px;
height: 12px;
background: #f87171;
opacity: 0.35;
box-shadow: 0 0 14px #dc2626;
}
.bt-ring-dot-bottom {
bottom: -4px;
left: 50%;
width: 8px;
height: 8px;
background: #f59e0b;
opacity: 0.25;
box-shadow: 0 0 10px #f59e0b;
}
@keyframes btHeroSpin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes btHeroSpinReverse {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
.bt-corner-badge {
position: absolute;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.85rem;
border-radius: 12px;
background: rgba(9, 9, 11, 0.78);
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
border: 1px solid rgba(220, 38, 38, 0.16);
font-family: 'Fira Code', monospace;
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.12em;
color: #94a3b8;
pointer-events: none;
}
.bt-cb-icon {
color: #f87171;
font-size: 0.82rem;
}
.bt-cb-tl {
top: 14%;
left: 4%;
animation: btBadgeFloat 5s ease-in-out infinite;
}
.bt-cb-tr {
top: 12%;
right: 4%;
animation: btBadgeFloat 5.6s ease-in-out 1.2s infinite;
}
.bt-cb-bl {
bottom: 16%;
left: 4%;
animation: btBadgeFloat 5.2s ease-in-out 2.4s infinite;
}
.bt-cb-br {
bottom: 14%;
right: 4%;
animation: btBadgeFloat 5.8s ease-in-out 0.8s infinite;
}
@keyframes btBadgeFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
@media (max-width: 1280px) {
.bt-corner-badge {
display: none;
}
}
.bt-mono-pill {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.45rem 1rem;
border-radius: 999px;
background: rgba(220, 38, 38, 0.12);
border: 1px solid rgba(220, 38, 38, 0.28);
margin-bottom: 1.5rem;
animation: btGlowPulse 4s ease-in-out infinite;
}
@keyframes btGlowPulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35);
}
50% {
box-shadow: 0 0 0 12px rgba(220, 38, 38, 0);
}
}
.bt-pulse-wrap {
position: relative;
display: inline-flex;
width: 7px;
height: 7px;
}
.bt-pulse-ping {
position: absolute;
inset: 0;
border-radius: 50%;
background: #f87171;
opacity: 0.75;
animation: btPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.bt-pulse-dot {
position: relative;
width: 7px;
height: 7px;
border-radius: 50%;
background: #f87171;
}
@keyframes btPing {
75%,
100% {
transform: scale(2.3);
opacity: 0;
}
}
.bt-mono-text {
font-family: 'Fira Code', monospace;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.14em;
color: #f87171;
text-transform: uppercase;
}
.bt-hero-headline {
font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: clamp(2.6rem, 4.9vw, 4.6rem);
font-weight: 800;
line-height: 1.06;
letter-spacing: -0.03em;
color: #ffffff;
margin-bottom: 1.5rem;
}
.bt-headline-top {
display: block;
color: #ffffff;
}
.bt-headline-rotator-wrap {
display: block;
min-height: 1.26em;
line-height: 1.24;
padding-bottom: 0.08em;
overflow: visible;
}
@keyframes btGradX {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.bt-headline-gradient {
display: inline-block;
color: #f87171;
background: linear-gradient(90deg, #f87171, #f87171, #ef4444, #f87171, #f87171);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: btGradX 5s ease infinite;
font-weight: 800;
line-height: 1.22;
padding-bottom: 0.08em;
filter: drop-shadow(0 2px 16px rgba(248, 113, 113, 0.28));
transition: opacity 0.26s ease, transform 0.26s ease;
}
.bt-headline-gradient.bt-word-exit {
opacity: 0;
transform: translateY(14px);
}
.bt-hero-divider {
height: 1px;
width: 192px;
background: linear-gradient(90deg, transparent, rgba(248, 113, 113, 0.5), transparent);
margin-bottom: 1.5rem;
}
.bt-hero-desc {
font-size: 1.05rem;
color: #94a3b8;
line-height: 1.68;
max-width: 576px;
margin-bottom: 2rem;
}
.bt-hero-desc strong {
color: #f8fafc;
}
.bt-hero-cta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
margin-bottom: 2.5rem;
}
.bt-btn-shimmer {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.95rem 2rem;
border-radius: 12px;
background: linear-gradient(135deg, #dc2626, #ef4444);
color: #ffffff;
font-weight: 700;
font-size: 0.96rem;
box-shadow: 0 0 50px rgba(220, 38, 38, 0.42), 0 0 100px rgba(220, 38, 38, 0.12);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bt-btn-shimmer:hover {
transform: translateY(-2px);
box-shadow: 0 0 65px rgba(220, 38, 38, 0.6), 0 0 110px rgba(220, 38, 38, 0.22);
}
.bt-shimmer-sweep {
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.14) 45%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0.14) 55%, transparent 60%);
background-size: 250% 100%;
animation: btHeroShimmer 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes btHeroShimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.bt-btn-shimmer-content {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
.bt-btn-glass {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.95rem 2rem;
border-radius: 12px;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(12px);
border: 1px solid rgba(220, 38, 38, 0.25);
color: #cbd5e1;
font-weight: 600;
font-size: 0.96rem;
transition: all 0.25s ease;
}
.bt-btn-glass:hover {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(248, 113, 113, 0.45);
color: #ffffff;
transform: translateY(-2px);
}
.bt-inline-stats {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2rem;
margin-bottom: 2rem;
}
.bt-inline-stat {
display: flex;
flex-direction: column;
align-items: center;
}
.bt-stat-val {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.15;
color: #ffffff;
display: flex;
align-items: center;
gap: 0.35rem;
}
.bt-stat-ico {
font-size: 0.95rem;
color: rgba(248, 113, 113, 0.75);
}
.bt-stat-lbl {
font-family: 'Fira Code', monospace;
font-size: 0.65rem;
color: #6b7280;
margin-top: 3px;
}
.bt-stat-sep {
width: 1px;
height: 32px;
background: rgba(255, 255, 255, 0.08);
}
.bt-avatar-trust-row {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 2.25rem;
}
.bt-avatar-stack {
display: flex;
align-items: center;
}
.bt-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid #09090b;
background: rgba(220, 38, 38, 0.18);
color: #ffffff;
font-size: 0.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: -8px;
}
.bt-avatar:first-child {
margin-left: 0;
}
.bt-avatar-text {
font-family: 'Fira Code', monospace;
font-size: 0.65rem;
color: #6b7280;
}
.bt-scroll-cue {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.45rem;
opacity: 0.6;
}
.bt-scroll-txt {
font-family: 'Fira Code', monospace;
font-size: 0.58rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #64748b;
}
.bt-scroll-mouse {
width: 20px;
height: 32px;
border-radius: 999px;
border: 1px solid rgba(220, 38, 38, 0.28);
display: flex;
justify-content: center;
padding-top: 6px;
}
.bt-scroll-wheel {
width: 4px;
height: 8px;
border-radius: 999px;
background: #f87171;
animation: btScrollWheel 2s ease-in-out infinite;
}
@keyframes btScrollWheel {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(7px);
}
}
.bt-hero-right-wrap {
position: relative;
z-index: 2;
}
.bt-hero-float-box {
position: relative;
animation: btHeroFloat 10s ease-in-out infinite;
}
@keyframes btHeroFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.bt-bundle-glass-card {
position: relative;
border-radius: 24px;
overflow: hidden;
background: rgba(9, 9, 11, 0.62);
border: 1px solid rgba(220, 38, 38, 0.18);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.bt-bundle-radial-glow {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse at 30% 20%, rgba(220, 38, 38, 0.22), transparent 60%);
}
.bt-bundle-inner {
position: relative;
padding: 1.85rem 2rem;
}
.bt-bundle-top-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.bt-bundle-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.28rem 0.75rem;
border-radius: 999px;
background: rgba(220, 38, 38, 0.16);
border: 1px solid rgba(248, 113, 113, 0.16);
font-family: 'Fira Code', monospace;
font-size: 0.62rem;
color: #fca5a5;
margin-bottom: 0.65rem;
}
.bt-bundle-pill-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #f87171;
}
.bt-bundle-title {
font-size: 1.5rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 0.2rem;
}
.bt-bundle-sub {
font-size: 0.76rem;
color: #fca5a5;
}
.bt-bundle-save-badge {
text-align: center;
padding: 0.5rem 0.8rem;
border-radius: 12px;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
box-shadow: 0 4px 20px rgba(245, 158, 11, 0.25);
flex-shrink: 0;
}
.bt-save-lbl {
font-family: 'Fira Code', monospace;
font-size: 0.56rem;
font-weight: 700;
color: #78350f;
}
.bt-save-val {
font-size: 1.15rem;
font-weight: 800;
color: #78350f;
line-height: 1.1;
}
.bt-bundle-thumbs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.bt-bundle-thumb {
border-radius: 12px;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.07);
aspect-ratio: 1 / 1;
cursor: pointer;
transition: transform 0.25s ease, border-color 0.25s ease;
}
.bt-bundle-thumb:hover {
transform: scale(1.04);
border-color: rgba(248, 113, 113, 0.45);
}
.bt-bundle-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bt-bundle-features {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.bt-bundle-feat-item {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 0.78rem;
color: #fecaca;
}
.bt-feat-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #f59e0b;
flex-shrink: 0;
}
.bt-bundle-bottom-row {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
gap: 1rem;
}
.bt-bundle-price {
font-size: 1.55rem;
font-weight: 800;
color: #ffffff;
line-height: 1.15;
}
.bt-bundle-old-price {
font-size: 0.76rem;
text-decoration: line-through;
color: rgba(255, 255, 255, 0.35);
}
.bt-bundle-cta-btn {
padding: 0.68rem 1.35rem;
border-radius: 12px;
background: linear-gradient(135deg, #dc2626, #ef4444);
color: #ffffff;
font-size: 0.88rem;
font-weight: 700;
box-shadow: 0 0 24px rgba(220, 38, 38, 0.36);
transition: all 0.25s ease;
}
.bt-bundle-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 0 34px rgba(220, 38, 38, 0.55);
}
.bt-bundle-backglow {
position: absolute;
inset: 0;
z-index: -1;
border-radius: 24px;
background: radial-gradient(ellipse, rgba(220, 38, 38, 0.22), transparent 65%);
filter: blur(30px);
transform: scale(1.15);
pointer-events: none;
}
.bt-float-mini-card {
position: absolute;
z-index: 12;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.9rem 1rem;
width: 210px;
border-radius: 16px;
background: rgba(12, 12, 14, 0.88);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(220, 38, 38, 0.18);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.bt-fmc-tr {
top: -52px;
right: -12px;
animation: btBadgeFloat 4.5s ease-in-out infinite;
}
.bt-fmc-bl {
bottom: -54px;
left: -12px;
animation: btBadgeFloat 5.2s ease-in-out 1.4s infinite;
}
.bt-fmc-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.bt-fmc-green {
background: rgba(220, 38, 38, 0.15);
color: #ef4444;
}
.bt-fmc-purple {
background: rgba(220, 38, 38, 0.15);
color: #f87171;
}
.bt-fmc-title {
font-size: 0.84rem;
font-weight: 700;
color: #ffffff;
line-height: 1.2;
}
.bt-fmc-sub {
font-size: 0.72rem;
color: #6b7280;
}
@media (max-width: 768px) {
.bt-float-mini-card {
display: none;
}
}
.bt-marquee-bar {
position: relative;
overflow: hidden;
padding: 0.85rem 0;
background: #09090b;
border-top: 1px solid rgba(239, 68, 68, 0.12);
border-bottom: 1px solid rgba(239, 68, 68, 0.12);
}
.bt-marquee-track {
display: flex;
align-items: center;
width: max-content;
gap: 2.25rem;
animation: tickerScroll 35s linear infinite;
}
.bt-marquee-track span {
font-family: 'Fira Code', monospace;
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.06em;
color: #cbd5e1;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 2.25rem;
}
.bt-marquee-track .bt-star {
font-style: normal;
color: #f87171;
font-size: 0.85rem;
}
.bt-promise-section {
position: relative;
overflow: hidden;
padding: 6rem 0;
background: #09090b;
border-bottom: 1px solid rgba(220, 38, 38, 0.18);
}
.bt-promise-orb-1 {
position: absolute;
top: 10%;
left: -10%;
width: 500px;
height: 500px;
background: radial-gradient(ellipse, rgba(220, 38, 38, 0.16), transparent 70%);
filter: blur(50px);
pointer-events: none;
animation: btPromiseOrbFloat 9s ease-in-out infinite alternate;
}
.bt-promise-orb-2 {
position: absolute;
bottom: 10%;
right: -5%;
width: 400px;
height: 400px;
background: radial-gradient(ellipse, rgba(239, 68, 68, 0.12), transparent 70%);
filter: blur(50px);
pointer-events: none;
animation: btPromiseOrbFloat 11s ease-in-out 1.5s infinite alternate-reverse;
}
.bt-promise-center-glow {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle at 50% 50%, rgba(248, 113, 113, 0.22), transparent 44%);
transition: transform 0.12s linear, opacity 0.12s linear;
}
.bt-promise-ring {
position: absolute;
left: 50%;
top: 50%;
width: 420px;
height: 420px;
border-radius: 50%;
border: 1px solid rgba(248, 113, 113, 0.18);
transform: translate(-50%, -50%);
pointer-events: none;
will-change: transform, opacity;
}
.bt-promise-ring-dot {
position: absolute;
width: 8px;
height: 8px;
border-radius: 999px;
background: #f87171;
box-shadow: 0 0 14px 3px rgba(248, 113, 113, 0.75);
}
.bt-promise-ring-dot.dot-1 {
top: -4px;
left: 50%;
transform: translateX(-50%);
}
.bt-promise-ring-dot.dot-2 {
bottom: -4px;
left: 50%;
transform: translateX(-50%);
}
@keyframes btPromiseOrbFloat {
0% {
transform: translate3d(0, 0, 0) scale(1);
}
100% {
transform: translate3d(30px, -25px, 0) scale(1.12);
}
}
.bt-promise-inner {
max-width: 1024px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.bt-promise-eyebrow {
display: flex;
align-items: center;
gap: 0.55rem;
font-family: 'Fira Code', monospace;
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #f87171;
margin-bottom: 1.25rem;
will-change: transform, opacity;
}
.bt-promise-line {
width: 24px;
height: 1px;
background: #ef4444;
}
.bt-promise-line-mask {
overflow: hidden;
padding-bottom: 0.12rem;
}
.bt-promise-lines p {
font-size: clamp(1.75rem, 3.8vw, 3.4rem);
font-weight: 800;
line-height: 1.18;
letter-spacing: -0.025em;
color: #ffffff;
margin-bottom: 0.3rem;
will-change: transform, opacity;
}
.bt-p-word {
display: inline-block;
margin-right: 0.18em;
transition: color 0.18s ease, text-shadow 0.25s ease;
}
.bt-promise-lines p .hl {
color: #f87171;
}
.bt-promise-progress-row {
margin-top: 2rem;
display: flex;
align-items: center;
gap: 1rem;
}
.bt-promise-bar-track {
flex: 1;
height: 3px;
background: rgba(255, 255, 255, 0.08);
border-radius: 999px;
overflow: hidden;
}
.bt-promise-bar-fill {
width: 0%;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #dc2626, #ef4444, #f87171);
box-shadow: 0 0 12px rgba(239, 68, 68, 0.65);
}
.bt-promise-pct {
font-family: 'Fira Code', monospace;
font-size: 0.75rem;
font-weight: 600;
color: #f87171;
min-width: 38px;
text-align: right;
}
.tools-discover-section {
background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #ffffff 100%) !important;
}
.discover-badge {
background: rgba(255, 255, 255, 0.75) !important;
border: 1px solid rgba(220, 38, 38, 0.16) !important;
color: #dc2626 !important;
font-family: 'Fira Code', monospace !important;
}
.discover-highlight {
background: linear-gradient(90deg, #dc2626, #ef4444, #f87171) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
.cat-tab {
background: #fef2f2 !important;
color: #dc2626 !important;
border: 1px solid rgba(220, 38, 38, 0.12) !important;
}
.cat-tab:hover {
background: #fee2e2 !important;
}
.cat-tab.active {
background: linear-gradient(135deg, #dc2626, #ef4444) !important;
color: #ffffff !important;
border-color: transparent !important;
box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3) !important;
}
.sidebar-reset-btn {
color: #dc2626 !important;
}
.bt-3d-card {
border-radius: 18px;
border: 1px solid rgba(220, 38, 38, 0.15);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.86));
backdrop-filter: blur(20px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(220, 38, 38, 0.05);
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
will-change: transform;
}
.bt-3d-card:hover {
border-color: rgba(220, 38, 38, 0.4);
box-shadow:
0 24px 48px -8px rgba(220, 38, 38, 0.22),
0 12px 28px rgba(0, 0, 0, 0.12);
}
.bt-card-badges-tl {
position: absolute;
top: 12px;
left: 12px;
z-index: 6;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
pointer-events: none;
}
.bt-badge-discount {
font-family: 'Fira Code', monospace;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: #ffffff;
font-size: 0.64rem;
font-weight: 700;
padding: 0.28rem 0.65rem;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}
.bt-badge-featured {
font-family: 'Fira Code', monospace;
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
color: #ffffff;
font-size: 0.64rem;
font-weight: 700;
padding: 0.28rem 0.65rem;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}
.bt-badge-trending {
font-family: 'Fira Code', monospace;
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: #ffffff;
font-size: 0.64rem;
font-weight: 700;
padding: 0.26rem 0.62rem;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}
.bt-card-actions-tr {
position: absolute;
top: 12px;
right: 12px;
z-index: 6;
display: flex;
flex-direction: column;
gap: 7px;
}
.bt-circle-action {
width: 36px;
height: 36px;
border-radius: 11px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
border: 1px solid rgba(220, 38, 38, 0.2);
color: #64748b;
font-size: 0.92rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
transition: all 0.2s ease;
}
.bt-circle-action:hover,
.bt-circle-action.active {
background: #dc2626;
color: #ffffff;
border-color: #dc2626;
transform: scale(1.08);
}
.pc-shimmer-overlay {
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.28) 50%, transparent 62%);
transform: translateX(-120%);
transition: transform 0.65s ease;
pointer-events: none;
z-index: 4;
}
.bt-3d-card:hover .pc-shimmer-overlay {
transform: translateX(120%);
}
.pc-bottom-progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 5;
}
.bt-3d-card:hover .pc-bottom-progress {
transform: scaleX(1);
}
.bt-3d-card .card-cat-tag {
font-family: 'Fira Code', monospace;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
background: rgba(220, 38, 38, 0.1);
color: #dc2626;
border: 1px solid rgba(220, 38, 38, 0.15);
padding: 0.2rem 0.55rem;
border-radius: 7px;
}
.bt-card-title {
font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
font-size: 1.02rem;
font-weight: 700;
color: #09090b;
margin-bottom: 0.35rem;
transition: color 0.2s ease;
}
.bt-3d-card:hover .bt-card-title {
color: #dc2626;
}
.bt-card-rating-row {
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.55rem;
}
.bt-stars {
color: #f59e0b;
font-size: 0.8rem;
letter-spacing: 1px;
}
.bt-review-cnt {
font-family: 'Fira Code', monospace;
font-size: 0.66rem;
color: #9ca3af;
}
.bt-bestseller-pill {
margin-left: auto;
font-family: 'Fira Code', monospace;
font-size: 0.58rem;
font-weight: 700;
padding: 0.14rem 0.5rem;
border-radius: 999px;
background: rgba(245, 158, 11, 0.15);
color: #b45309;
}
.bt-card-trust-row {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.85rem;
font-family: 'Fira Code', monospace;
font-size: 0.64rem;
color: #9ca3af;
margin-bottom: 0.65rem;
}
.bt-card-trust-row i {
font-style: normal;
}
.bt-card-divider {
height: 1px;
background: rgba(220, 38, 38, 0.1);
margin-bottom: 0.7rem;
}
.bt-card-price-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.65rem;
}
.bt-price-line {
display: flex;
align-items: baseline;
gap: 0.35rem;
}
.bt-3d-card .now-price {
color: #09090b !important;
font-size: 1.35rem !important;
font-weight: 800 !important;
}
.bt-save-pill {
display: inline-block;
margin-top: 2px;
font-family: 'Fira Code', monospace;
font-size: 0.6rem;
font-weight: 700;
color: #ef4444;
}
.bt-view-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.6rem 1rem;
border-radius: 12px;
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
color: #ffffff;
font-size: 0.78rem;
font-weight: 700;
box-shadow: 0 4px 14px rgba(220, 38, 38, 0.28);
transition: all 0.2s ease;
}
.bt-view-btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 26px rgba(220, 38, 38, 0.42);
}
.bt-card-quick-bar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.45rem;
}
.bt-quick-cart-btn {
padding: 0.5rem 0.65rem;
border-radius: 10px;
background: rgba(220, 38, 38, 0.1);
color: #dc2626;
border: 1px solid rgba(220, 38, 38, 0.18);
font-size: 0.75rem;
font-weight: 700;
transition: all 0.2s ease;
}
.bt-quick-cart-btn:hover {
background: #dc2626;
color: #ffffff;
}
.bt-quick-wa-btn {
padding: 0.5rem 0.65rem;
border-radius: 10px;
background: #fef2f2;
color: #dc2626;
border: 1px solid rgba(220, 38, 38, 0.25);
font-size: 0.75rem;
font-weight: 700;
transition: all 0.2s ease;
}
.bt-quick-wa-btn:hover {
background: #dc2626;
color: #ffffff;
}
.bt-included-section {
padding: 5rem 0;
background: #ffffff;
border-top: 1px solid rgba(220, 38, 38, 0.1);
}
.bt-sec-header {
text-align: center;
max-width: 680px;
margin: 0 auto 3rem;
}
.bt-sec-mono {
display: inline-block;
font-family: 'Fira Code', monospace;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #dc2626;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.22);
padding: 0.35rem 0.9rem;
border-radius: 999px;
margin-bottom: 0.9rem;
}
.bt-sec-title {
font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
font-size: clamp(2rem, 3.6vw, 3rem);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.15;
color: #09090b;
margin-bottom: 0.85rem;
}
.bt-sec-sub {
font-size: 1rem;
color: #64748b;
line-height: 1.65;
}
.bt-bento-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.15rem;
}
.bt-bento-card {
padding: 1.75rem;
border-radius: 18px;
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(20px);
border: 1px solid rgba(220, 38, 38, 0.12);
transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
cursor: default;
}
.bt-bento-card:hover {
background: #09090b;
border-color: rgba(220, 38, 38, 0.35);
transform: translateY(-5px);
box-shadow: 0 24px 48px -12px rgba(220, 38, 38, 0.28);
}
.bt-bento-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(220, 38, 38, 0.12);
color: #dc2626;
font-size: 1.35rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
transition: all 0.45s ease;
}
.bt-bento-card:hover .bt-bento-icon {
background: rgba(220, 38, 38, 0.25);
color: #f87171;
transform: scale(1.15) rotate(-6deg);
}
.bt-bento-title {
font-size: 1.12rem;
font-weight: 700;
color: #09090b;
margin-bottom: 0.45rem;
transition: color 0.3s ease;
}
.bt-bento-card:hover .bt-bento-title {
color: #f87171;
}
.bt-bento-desc {
font-size: 0.88rem;
color: #64748b;
line-height: 1.62;
transition: color 0.3s ease;
}
.bt-bento-card:hover .bt-bento-desc {
color: #94a3b8;
}
@media (max-width: 960px) {
.bt-bento-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.bt-bento-grid {
grid-template-columns: 1fr;
}
}
.bt-emerald-banner {
position: relative;
overflow: hidden;
padding: 4.5rem 0;
background: linear-gradient(90deg, #b91c1c 0%, #dc2626 50%, #ef4444 100%);
color: #ffffff;
}
.bt-emerald-grid-overlay {
display: none;
}
.bt-emerald-stats-row {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
text-align: center;
}
.bt-es-val {
font-size: clamp(2.25rem, 4vw, 3.1rem);
font-weight: 800;
line-height: 1.05;
color: #ffffff;
margin-bottom: 0.4rem;
}
.bt-es-lbl {
font-size: 0.95rem;
font-weight: 500;
color: #fecaca;
}
@media (max-width: 768px) {
.bt-emerald-stats-row {
grid-template-columns: repeat(2, 1fr);
}
}
.bt-ready-cta-section {
position: relative;
overflow: hidden;
padding: 5.5rem 0;
background: #09090b;
}
.bt-ready-orb-1 {
position: absolute;
top: -10%;
left: -5%;
width: 520px;
height: 520px;
background: radial-gradient(ellipse, rgba(220, 38, 38, 0.12), transparent 70%);
filter: blur(50px);
pointer-events: none;
}
.bt-ready-orb-2 {
position: absolute;
bottom: -10%;
right: -5%;
width: 420px;
height: 420px;
background: radial-gradient(ellipse, rgba(245, 158, 11, 0.08), transparent 70%);
filter: blur(50px);
pointer-events: none;
}
.bt-ready-glass-box {
position: relative;
z-index: 2;
max-width: 1024px;
margin: 0 auto;
border-radius: 32px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 3.5rem 2rem;
text-align: center;
}
.bt-ready-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.42rem 1rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
font-family: 'Fira Code', monospace;
font-size: 0.65rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fca5a5;
margin-bottom: 1.25rem;
}
.bt-ready-title {
font-size: clamp(2rem, 4vw, 3.25rem);
font-weight: 800;
line-height: 1.15;
color: #ffffff;
margin-bottom: 1rem;
}
.bt-ready-desc {
color: rgba(255, 255, 255, 0.65);
max-width: 580px;
margin: 0 auto 2rem;
font-size: 1rem;
}
.bt-ready-btns {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1rem;
}
.bt-ready-trust-foot {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
margin-top: 2.5rem;
padding-top: 2.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.bt-policy-page {
min-height: 80vh;
background: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #fef2f2 100%);
padding: 2.5rem 0 4rem;
}
.bt-pol-breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.88rem;
color: #6b7280;
margin-bottom: 1.75rem;
}
.bt-pol-breadcrumb a {
color: #6b7280;
transition: color 0.2s ease;
}
.bt-pol-breadcrumb a:hover {
color: #dc2626;
}
.bt-pol-breadcrumb strong {
color: #09090b;
}
.bt-pol-header {
text-align: center;
max-width: 820px;
margin: 0 auto 2.5rem;
}
.bt-pol-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.42rem 1.1rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(220, 38, 38, 0.16);
font-family: 'Fira Code', monospace;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #dc2626;
margin-bottom: 1rem;
}
.bt-pol-title {
font-size: clamp(2.25rem, 4.5vw, 3.5rem);
font-weight: 900;
color: #09090b;
line-height: 1.12;
margin-bottom: 0.75rem;
}
.bt-pol-grad {
background: linear-gradient(90deg, #dc2626, #ef4444, #f87171);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.bt-pol-sub {
font-size: 1.04rem;
color: #4b5563;
max-width: 640px;
margin: 0 auto;
}
.bt-pol-notice-banner {
margin-top: 1.75rem;
padding: 1.25rem 1.5rem;
border-radius: 18px;
border-left: 4px solid #f59e0b;
background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.03));
display: flex;
align-items: flex-start;
gap: 1rem;
text-align: left;
}
.bt-pol-notice-icon {
width: 40px;
height: 40px;
border-radius: 12px;
background: #fef3c7;
color: #d97706;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
flex-shrink: 0;
}
.bt-pol-notice-banner h4 {
font-size: 1rem;
font-weight: 800;
color: #09090b;
margin-bottom: 0.2rem;
}
.bt-pol-notice-banner p {
font-size: 0.9rem;
color: #374151;
margin: 0;
}
.bt-pol-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.75rem;
align-items: start;
}
.bt-pol-main {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.bt-pol-card {
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(220, 38, 38, 0.14);
border-radius: 24px;
padding: 1.85rem;
box-shadow: 0 12px 32px rgba(220, 38, 38, 0.05);
}
.bt-pol-card-head {
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 1.35rem;
}
.bt-pol-icon-box {
width: 46px;
height: 46px;
border-radius: 14px;
color: #ffffff;
font-size: 1.2rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bt-pol-card-head h2 {
font-size: 1.45rem;
font-weight: 800;
color: #09090b;
margin: 0;
}
.bt-pol-elig-list {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.bt-pol-elig-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.bt-elig-chk {
width: 22px;
height: 22px;
border-radius: 50%;
background: #fee2e2;
color: #dc2626;
font-size: 0.75rem;
font-weight: 900;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.bt-pol-elig-item p {
font-size: 0.95rem;
color: #374151;
font-weight: 500;
margin: 0;
}
.bt-pol-nonref-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.85rem;
}
.bt-pol-nonref-item {
display: flex;
align-items: flex-start;
gap: 0.65rem;
padding: 0.85rem;
border-radius: 14px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(239, 68, 68, 0.14);
}
.bt-nonref-x {
color: #f87171;
font-weight: 900;
font-size: 0.9rem;
margin-top: 1px;
}
.bt-pol-nonref-item strong {
display: block;
font-size: 0.88rem;
color: #09090b;
margin-bottom: 0.15rem;
}
.bt-pol-nonref-item p {
font-size: 0.78rem;
color: #6b7280;
margin: 0;
}
.bt-pol-steps {
display: flex;
flex-direction: column;
}
.bt-pol-step {
display: flex;
gap: 1rem;
}
.bt-pol-step-line-col {
display: flex;
flex-direction: column;
align-items: center;
}
.bt-pol-step-ico {
width: 44px;
height: 44px;
border-radius: 12px;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.bt-pol-step-line {
width: 2px;
flex: 1;
background: linear-gradient(180deg, #fca5a5, transparent);
margin-top: 0.4rem;
}
.bt-pol-step-body {
padding-bottom: 1.5rem;
}
.bt-pol-step-title-row {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.3rem;
}
.bt-step-tag {
font-family: 'Fira Code', monospace;
font-size: 0.78rem;
font-weight: 700;
color: #dc2626;
}
.bt-pol-step-title-row h4 {
font-size: 1.05rem;
font-weight: 800;
color: #09090b;
margin: 0;
}
.bt-pol-step-body p {
font-size: 0.9rem;
color: #4b5563;
margin: 0;
}
.bt-pol-faq-list {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.bt-pol-faq-item {
border-radius: 14px;
background: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(220, 38, 38, 0.14);
padding: 0.9rem 1.15rem;
}
.bt-pol-faq-item summary {
font-weight: 700;
color: #09090b;
cursor: pointer;
font-size: 0.94rem;
}
.bt-pol-faq-item p {
margin: 0.6rem 0 0;
font-size: 0.88rem;
color: #4b5563;
}
.bt-pol-sidebar {
display: flex;
flex-direction: column;
gap: 1.25rem;
position: sticky;
top: 96px;
}
.bt-pol-side-title {
font-size: 1.1rem;
font-weight: 800;
color: #09090b;
margin-bottom: 1rem;
}
.bt-pol-contact-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.15rem;
}
.bt-pol-contact-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.65rem 0.75rem;
border-radius: 12px;
background: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(220, 38, 38, 0.1);
}
.bt-pol-c-ico {
width: 36px;
height: 36px;
border-radius: 10px;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bt-pol-contact-row small {
display: block;
font-size: 0.72rem;
color: #6b7280;
}
.bt-pol-contact-row a,
.bt-pol-contact-row strong {
font-size: 0.86rem;
font-weight: 700;
color: #09090b;
}
.bt-pol-tf-list {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.bt-pol-tf-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.65rem 0.75rem;
border-radius: 12px;
background: rgba(255, 255, 255, 0.65);
font-size: 0.85rem;
color: #374151;
}
.bt-tf-badge {
padding: 0.2rem 0.65rem;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 700;
}
.bt-pol-tips-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
font-size: 0.86rem;
color: #4b5563;
}
.bt-pol-tips-list li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.bt-pol-tips-list li span {
color: #dc2626;
font-weight: 900;
}
.bt-pol-summary-banner {
margin-top: 2.25rem;
border-radius: 26px;
padding: 2rem 2.25rem;
background: linear-gradient(135deg, #09090b 0%, #09090b 55%, #050507 100%);
color: #ffffff;
border: 1px solid rgba(248, 113, 113, 0.25);
}
.bt-pol-sum-top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1.25rem;
}
.bt-pol-sum-head {
display: flex;
align-items: center;
gap: 1rem;
}
.bt-pol-sum-ico {
width: 56px;
height: 56px;
border-radius: 16px;
background: linear-gradient(135deg, #dc2626, #ef4444);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
}
.bt-pol-sum-head h3 {
font-size: 1.45rem;
font-weight: 800;
color: #ffffff;
margin: 0 0 0.15rem;
}
.bt-pol-sum-head p {
font-size: 0.88rem;
color: #9ca3af;
margin: 0;
}
.bt-pol-sum-btns {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.bt-pol-sum-badges {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.88rem;
color: #d1d5db;
font-weight: 600;
}
@media (max-width: 900px) {
.bt-pol-grid {
grid-template-columns: 1fr;
}
.bt-pol-nonref-grid,
.bt-pol-sum-badges {
grid-template-columns: 1fr 1fr;
}
}
.bt-dark-footer {
background: linear-gradient(180deg, #09090b 0%, #030712 100%) !important;
color: #ffffff !important;
padding: 4rem 0 2.5rem !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.bt-footer-top-grid {
display: grid;
grid-template-columns: 1.8fr 1fr 1fr 1fr;
gap: 2.25rem;
padding-bottom: 2.5rem;
border-bottom: 1px solid #1f2937;
}
.bt-footer-wa-box {
max-width: 420px;
}
.bt-footer-wa-row {
display: flex;
gap: 0.75rem;
align-items: stretch;
flex-wrap: wrap;
}
.bt-footer-wa-num-card {
flex: 1;
background: #1f2937;
border: 1px solid #374151;
border-radius: 10px;
padding: 0.6rem 0.9rem;
}
.bt-footer-chat-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #ffffff;
font-weight: 700;
font-size: 0.9rem;
padding: 0.65rem 1.35rem;
border-radius: 10px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bt-footer-chat-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
}
.bt-footer-col-title {
color: #ffffff;
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 1.15rem;
}
.bt-footer-nav-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.68rem;
}
.bt-footer-nav-list a {
color: #9ca3af;
font-size: 0.9rem;
transition: color 0.2s ease;
}
.bt-footer-nav-list a:hover {
color: #ef4444;
}
.bt-footer-why-wrap {
padding: 2.25rem 0;
border-bottom: 1px solid #1f2937;
text-align: center;
}
.bt-footer-why-heading {
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
.bt-footer-why-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
.bt-footer-why-ico {
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, #dc2626, #b91c1c);
color: #ffffff;
font-size: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.65rem;
}
.bt-footer-why-item h4 {
color: #ffffff;
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 0.2rem;
}
.bt-footer-why-item p {
color: #9ca3af;
font-size: 0.8rem;
margin: 0;
}
.bt-footer-stay-updated {
margin-top: 2.5rem;
background: linear-gradient(90deg, #1f2937 0%, #09090b 100%);
border: 1px solid rgba(55, 65, 81, 0.45);
border-radius: 12px;
padding: 1.5rem 1.75rem;
}
.bt-footer-stay-updated h3 {
color: #ffffff;
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.bt-footer-stay-updated p {
color: #9ca3af;
font-size: 0.88rem;
margin: 0;
}
.bt-footer-pay-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
padding: 1.5rem 0 0.75rem;
border-top: 1px solid #1f2937;
}
.bt-footer-copy-left {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: #9ca3af;
font-size: 0.84rem;
}
.bt-footer-pay-right {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.bt-footer-pay-badges {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.45rem;
font-size: 0.82rem;
color: #9ca3af;
}
.bt-pay-chip {
background: #1f2937;
border: 1px solid #374151;
color: #e5e7eb;
padding: 0.22rem 0.6rem;
border-radius: 5px;
font-size: 0.74rem;
font-weight: 600;
}
.bt-footer-rp-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: rgba(220, 38, 38, 0.16);
border: 1px solid rgba(220, 38, 38, 0.35);
color: #ef4444;
font-size: 0.84rem;
font-weight: 600;
padding: 0.45rem 0.95rem;
border-radius: 8px;
transition: all 0.2s ease;
}
.bt-footer-rp-btn:hover {
background: rgba(220, 38, 38, 0.28);
border-color: #ef4444;
}
.bt-footer-mini-stats {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2.5rem;
margin: 1.25rem 0 1.75rem;
text-align: center;
}
.bt-footer-mini-stats strong {
display: block;
font-size: 1.4rem;
font-weight: 800;
color: #ef4444;
line-height: 1.15;
}
.bt-footer-mini-stats span {
font-size: 0.75rem;
color: #9ca3af;
}
.bt-footer-policy-box {
text-align: center;
max-width: 720px;
margin: 0 auto;
}
.bt-footer-rp-notice {
background: rgba(31, 41, 55, 0.55);
border: 1px solid rgba(55, 65, 81, 0.7);
border-radius: 12px;
padding: 1rem 1.25rem;
}
@media (max-width: 900px) {
.bt-footer-top-grid {
grid-template-columns: 1fr 1fr;
}
.bt-footer-why-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 560px) {
.bt-footer-top-grid,
.bt-footer-why-grid {
grid-template-columns: 1fr;
}
}
.discover-right-col {
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
}
.bt-load-more-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 2.5rem;
margin-bottom: 3rem;
}
.bt-load-more-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.78rem 1.85rem;
border-radius: 12px;
background: linear-gradient(135deg, #dc2626, #ef4444);
color: #ffffff;
font-size: 0.92rem;
font-weight: 700;
box-shadow: 0 8px 24px rgba(220, 38, 38, 0.32);
transition: all 0.25s ease;
}
.bt-load-more-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(220, 38, 38, 0.46);
}
.bt-showing-count {
font-family: 'Fira Code', monospace;
font-size: 0.76rem;
color: #9ca3af;
margin-top: 0.75rem;
}
.bt-custom-solution-card {
border-radius: 28px;
padding: 3rem 2rem;
background: linear-gradient(135deg, #fee2e2 0%, #fee2e2 55%, #fef2f2 100%);
border: 1px solid rgba(220, 38, 38, 0.14);
text-align: center;
margin-top: 0.5rem;
box-shadow: 0 14px 40px rgba(220, 38, 38, 0.06);
}
.bt-cs-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.36rem 0.95rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(220, 38, 38, 0.12);
font-family: 'Fira Code', monospace;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #ef4444;
margin-bottom: 1rem;
}
.bt-cs-title {
font-size: clamp(1.75rem, 3.2vw, 2.35rem);
font-weight: 800;
color: #09090b;
line-height: 1.18;
margin-bottom: 0.55rem;
}
.bt-cs-grad {
background: linear-gradient(90deg, #dc2626, #ef4444);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.bt-cs-sub {
font-size: 0.95rem;
color: #4b5563;
max-width: 480px;
margin: 0 auto 1.65rem;
}
.bt-cs-btns {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.85rem;
}
.bt-cs-btn-primary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 1.85rem;
border-radius: 12px;
background: linear-gradient(135deg, #dc2626, #ef4444);
color: #ffffff;
font-size: 0.92rem;
font-weight: 700;
box-shadow: 0 8px 24px rgba(220, 38, 38, 0.32);
transition: all 0.25s ease;
}
.bt-cs-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(220, 38, 38, 0.45);
}
.bt-cs-btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 1.85rem;
border-radius: 12px;
background: rgba(255, 255, 255, 0.85);
border: 1.5px solid rgba(220, 38, 38, 0.25);
color: #dc2626;
font-size: 0.92rem;
font-weight: 700;
transition: all 0.25s ease;
}
.bt-cs-btn-outline:hover {
background: #ffffff;
border-color: #dc2626;
transform: translateY(-2px);
}
.bt-cs-divider {
max-width: 520px;
height: 1px;
background: rgba(220, 38, 38, 0.1);
margin: 2rem auto 1.35rem;
}
.bt-cs-trust-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1.75rem;
font-family: 'Fira Code', monospace;
font-size: 0.72rem;
color: #6b7280;
}
.bt-cs-trust-row span {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.bt-cs-ico {
font-style: normal;
color: #dc2626;
}
.bt-ax-card {
position: relative;
border-radius: 24px;
overflow: hidden;
background: #ffffff;
border: 1px solid #fee2e2;
box-shadow: 0 10px 25px -5px rgba(220, 38, 38, 0.08), 0 4px 10px -4px rgba(220, 38, 38, 0.04);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
cursor: pointer;
}
.bt-ax-card:hover {
border-color: #fca5a5;
box-shadow: 0 22px 45px -10px rgba(220, 38, 38, 0.18), 0 8px 20px -6px rgba(220, 38, 38, 0.1);
}
.bt-ax-img-wrap {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
height: auto !important;
overflow: hidden;
background: linear-gradient(135deg, #09090b 0%, #18181b 100%);
flex-shrink: 0;
}
.bt-ax-img {
width: 100%;
height: 100%;
object-fit: contain !important;
display: block;
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.bt-ax-card:hover .bt-ax-img {
transform: scale(1.04);
}
.bt-ax-img-fade {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.bt-ax-card:hover .bt-ax-img-fade {
opacity: 1;
}
.bt-ax-shimmer {
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.25) 50%, transparent 65%);
transform: translateX(-120%);
transition: transform 0.9s ease;
pointer-events: none;
}
.bt-ax-card:hover .bt-ax-shimmer {
transform: translateX(120%);
}
.bt-ax-actions-tr {
position: absolute;
top: 12px;
right: 12px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 4;
}
.bt-ax-circle-btn {
width: 36px;
height: 36px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.6);
color: #4b5563;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: all 0.25s ease;
cursor: pointer;
}
.bt-ax-circle-btn:hover {
background: #ffffff;
color: #dc2626;
transform: scale(1.08);
}
.bt-ax-circle-btn.is-wish {
background: #ef4444;
color: #ffffff;
border-color: #ef4444;
}
.bt-ax-bottom-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #dc2626, #ef4444, #ef4444);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s ease;
}
.bt-ax-card:hover .bt-ax-bottom-bar {
transform: scaleX(1);
}
.bt-ax-body {
padding: 1.25rem;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
background: #ffffff;
}
.bt-ax-cats {
display: flex;
flex-wrap: wrap;
gap: 0.38rem;
margin-bottom: 0.65rem;
}
.bt-ax-cat-pill {
font-family: 'Fira Code', monospace;
font-size: 0.62rem;
font-weight: 600;
padding: 0.16rem 0.62rem;
border-radius: 999px;
background: #ffffff;
color: #dc2626;
border: 1px solid #fecaca;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.bt-ax-title {
font-size: 1rem;
font-weight: 700;
color: #09090b;
margin: 0 0 0.45rem;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.2s ease;
}
.bt-ax-card:hover .bt-ax-title {
color: #b91c1c;
}
.bt-ax-rating-row {
display: flex;
align-items: center;
gap: 0.42rem;
margin-bottom: 0.55rem;
}
.bt-ax-stars {
display: inline-flex;
align-items: center;
gap: 2px;
}
.bt-ax-rev-cnt {
font-family: 'Fira Code', monospace;
font-size: 0.69rem;
color: #9ca3af;
}
.bt-ax-bestseller {
font-family: 'Fira Code', monospace;
font-size: 0.62rem;
font-weight: 600;
background: #fffbeb;
color: #d97706;
border: 1px solid #fde68a;
padding: 0.1rem 0.48rem;
border-radius: 999px;
}
.bt-ax-desc {
font-size: 0.76rem;
color: #6b7280;
line-height: 1.55;
margin: 0 0 0.95rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bt-ax-trust-row {
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 0.75rem;
font-family: 'Fira Code', monospace;
font-size: 0.68rem;
color: #9ca3af;
}
.bt-ax-trust-item {
display: inline-flex;
align-items: center;
gap: 0.28rem;
}
.bt-ax-divider {
height: 1px;
background: linear-gradient(90deg, transparent, #fecaca, transparent);
margin-bottom: 0.75rem;
}
.bt-ax-price-wrap {
margin-bottom: 0.75rem;
}
.bt-ax-price {
font-size: 1.25rem;
font-weight: 800;
color: #09090b;
letter-spacing: -0.02em;
}
.bt-ax-btn-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.bt-ax-view-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.65rem 1rem;
border-radius: 12px;
background: linear-gradient(90deg, #dc2626 0%, #dc2626 50%, #dc2626 100%);
color: #ffffff;
font-size: 0.85rem;
font-weight: 600;
border: none;
box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
transition: all 0.25s ease;
cursor: pointer;
}
.bt-ax-view-btn:hover {
background: linear-gradient(90deg, #b91c1c 0%, #b91c1c 50%, #b91c1c 100%);
box-shadow: 0 8px 20px rgba(220, 38, 38, 0.35);
}
.bt-ax-arrow {
transition: transform 0.25s ease;
}
.bt-ax-view-btn:hover .bt-ax-arrow {
transform: translateX(3px);
}
.bt-ax-wish-sq {
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid #fecaca;
background: rgba(254, 242, 242, 0.65);
color: #9ca3af;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
cursor: pointer;
flex-shrink: 0;
}
.bt-ax-wish-sq:hover {
border-color: #f87171;
color: #ef4444;
background: #ffffff;
}
.bt-ax-wish-sq.is-wish {
background: #fef2f2;
border-color: #fca5a5;
color: #ef4444;
}
#productDetailPage {
padding: 0 !important;
max-width: 100% !important;
}
.bt-sv-page-wrap {
min-height: 100vh;
background: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #fef2f2 100%);
position: relative;
overflow: hidden;
padding-bottom: 4rem;
}
.bt-sv-bg-blobs {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.bt-sv-blob {
position: absolute;
border-radius: 999px;
filter: blur(90px);
}
.bt-sv-blob-1 {
top: 5rem;
left: -8rem;
width: 24rem;
height: 24rem;
background: rgba(252, 165, 165, 0.28);
}
.bt-sv-blob-2 {
top: 20rem;
right: -8rem;
width: 24rem;
height: 24rem;
background: rgba(254, 202, 202, 0.35);
}
.bt-sv-breadcrumb-bar {
position: sticky;
top: 0;
z-index: 30;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(16px);
border-bottom: 1px solid #fee2e2;
}
.bt-sv-breadcrumb-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0.9rem 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
}
.bt-sv-breadcrumb-inner a {
color: #6b7280;
font-weight: 500;
transition: color 0.2s ease;
}
.bt-sv-breadcrumb-inner a:hover {
color: #dc2626;
}
.bt-sv-bc-sep {
color: #d1d5db;
font-size: 1rem;
}
.bt-sv-bc-curr {
color: #09090b;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bt-sv-container {
max-width: 1280px;
margin: 0 auto;
padding: 2.5rem 1.5rem;
position: relative;
z-index: 2;
}
.bt-sv-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3.5rem;
align-items: start;
}
.bt-sv-sticky-box {
position: sticky;
top: 5.5rem;
}
.bt-sv-img-card {
position: relative;
border-radius: 24px;
overflow: hidden;
background: rgba(255, 255, 255, 0.8);
border: 1px solid #fee2e2;
box-shadow: 0 25px 50px -12px rgba(220, 38, 38, 0.16);
cursor: zoom-in;
}
.bt-sv-img-stage {
position: relative;
aspect-ratio: 1 / 1;
height: auto;
overflow: hidden;
background: #ffffff;
}
.bt-sv-main-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.bt-sv-img-card:hover .bt-sv-main-img {
transform: scale(1.04);
}
.bt-sv-img-fade {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.18), transparent 45%);
pointer-events: none;
}
.bt-sv-zoom-btn {
position: absolute;
top: 16px;
right: 16px;
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.8);
color: #374151;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
transition: all 0.25s ease;
cursor: pointer;
}
.bt-sv-zoom-btn:hover {
background: #ffffff;
color: #dc2626;
transform: scale(1.08);
}
.bt-sv-trust-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin-top: 1rem;
}
.bt-sv-trust-card {
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(12px);
border: 1px solid rgba(254, 202, 202, 0.6);
border-radius: 16px;
padding: 0.85rem 0.5rem;
text-align: center;
transition: transform 0.25s ease;
}
.bt-sv-trust-card:hover {
transform: translateY(-2px);
}
.bt-sv-trust-ico {
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.35rem;
}
.bt-sv-trust-txt {
font-size: 0.75rem;
font-weight: 600;
color: #374151;
}
.bt-sv-cats {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.bt-sv-cat-pill {
padding: 0.28rem 0.82rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
background: #fee2e2;
color: #dc2626;
border: 1px solid #fecaca;
}
.bt-sv-title {
font-size: clamp(1.75rem, 3vw, 2.35rem);
font-weight: 800;
color: #09090b;
line-height: 1.2;
margin: 0 0 1rem;
}
.bt-sv-rating-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem;
margin-bottom: 1.6rem;
}
.bt-sv-stars {
display: inline-flex;
align-items: center;
gap: 3px;
}
.bt-sv-rating-txt {
font-size: 0.875rem;
color: #6b7280;
font-weight: 500;
}
.bt-sv-dot {
color: #d1d5db;
}
.bt-sv-prem-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.85rem;
font-weight: 600;
color: #dc2626;
}
.bt-sv-plans-wrap {
margin-bottom: 1.65rem;
}
.bt-sv-sec-heading {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 1.1rem;
font-weight: 700;
color: #09090b;
margin: 0 0 0.95rem;
}
.bt-sv-sec-ico {
width: 32px;
height: 32px;
border-radius: 10px;
background: linear-gradient(135deg, #dc2626, #ef4444);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}
.bt-sv-plans-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.bt-sv-plan-card {
position: relative;
padding: 1.15rem 1.25rem;
border-radius: 18px;
background: rgba(255, 255, 255, 0.8);
border: 2px solid #fee2e2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
cursor: pointer;
transition: all 0.25s ease;
}
.bt-sv-plan-card:hover {
border-color: #f87171;
background: #ffffff;
}
.bt-sv-plan-card.is-selected {
border-color: #dc2626;
background: rgba(254, 242, 242, 0.85);
box-shadow: 0 10px 25px -5px rgba(220, 38, 38, 0.14);
}
.bt-sv-plan-left {
display: flex;
align-items: center;
gap: 0.95rem;
}
.bt-sv-plan-ico {
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bt-sv-plan-ico-day {
background: linear-gradient(135deg, #fbbf24, #dc2626);
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.28);
}
.bt-sv-plan-ico-month {
background: linear-gradient(135deg, #dc2626, #ef4444);
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.28);
}
.bt-sv-plan-ico-year {
background: linear-gradient(135deg, #ef4444, #dc2626);
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.28);
}
.bt-sv-plan-title {
font-size: 1rem;
font-weight: 700;
color: #09090b;
margin-bottom: 0.2rem;
}
.bt-sv-plan-sub {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.82rem;
color: #6b7280;
}
.bt-sv-plan-right {
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.3rem;
}
.bt-sv-plan-price {
font-size: 1.35rem;
font-weight: 800;
color: #09090b;
}
.bt-sv-plan-check {
width: 24px;
height: 24px;
border-radius: 999px;
background: #dc2626;
display: inline-flex;
align-items: center;
justify-content: center;
}
.bt-sv-checkout-card {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(14px);
border: 1px solid #fecaca;
border-radius: 20px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 12px 30px rgba(220, 38, 38, 0.08);
}
.bt-sv-total-row {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 1.1rem;
}
.bt-sv-total-lbl {
display: block;
font-size: 0.85rem;
color: #6b7280;
margin-bottom: 0.2rem;
}
.bt-sv-total-prices {
display: flex;
align-items: baseline;
gap: 0.7rem;
}
.bt-sv-total-main {
font-size: 2.2rem;
font-weight: 800;
background: linear-gradient(90deg, #dc2626, #ef4444, #ef4444);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.bt-sv-total-strike {
font-size: 1.05rem;
color: #9ca3af;
text-decoration: line-through;
}
.bt-sv-save-badge {
padding: 0.35rem 0.85rem;
border-radius: 999px;
background: linear-gradient(135deg, #ef4444, #b91c1c);
color: #ffffff;
font-size: 0.78rem;
font-weight: 700;
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.28);
}
.bt-sv-proceed-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
padding: 1rem 1.5rem;
border-radius: 14px;
background: linear-gradient(90deg, #dc2626 0%, #dc2626 50%, #dc2626 100%);
color: #ffffff;
font-size: 1.05rem;
font-weight: 700;
border: none;
box-shadow: 0 10px 25px rgba(220, 38, 38, 0.32);
cursor: pointer;
transition: all 0.25s ease;
}
.bt-sv-proceed-btn:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(220, 38, 38, 0.44);
}
.bt-sv-proc-arrow {
transition: transform 0.25s ease;
}
.bt-sv-proceed-btn:hover .bt-sv-proc-arrow {
transform: translateX(4px);
}
.bt-sv-secure-foot {
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
margin-top: 0.85rem;
font-size: 0.76rem;
color: #9ca3af;
}
.bt-sv-included-card {
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(12px);
border: 1px solid #fee2e2;
border-radius: 20px;
padding: 1.35rem 1.5rem;
}
.bt-sv-included-card h3 {
font-size: 0.98rem;
font-weight: 700;
color: #09090b;
margin: 0 0 0.95rem;
}
.bt-sv-included-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.8rem;
}
.bt-sv-inc-item {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.85rem;
font-weight: 500;
color: #374151;
}
.bt-sv-inc-ico {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bt-sv-desc-card {
margin-top: 3.5rem;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(12px);
border: 1px solid #fee2e2;
border-radius: 24px;
padding: 2.25rem;
box-shadow: 0 12px 32px rgba(220, 38, 38, 0.06);
}
.bt-sv-block-head {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.35rem;
}
.bt-sv-block-head h2 {
font-size: 1.45rem;
font-weight: 800;
color: #09090b;
margin: 0;
}
.bt-sv-block-ico {
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bt-sv-ico-blue {
background: linear-gradient(135deg, #dc2626, #ef4444);
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25);
}
.bt-sv-ico-amber {
background: linear-gradient(135deg, #fbbf24, #dc2626);
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25);
}
.bt-sv-ico-purple {
background: linear-gradient(135deg, #dc2626, #ef4444);
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25);
}
.bt-sv-prose {
color: #374151;
font-size: 0.96rem;
line-height: 1.75;
}
.bt-sv-prose h1,
.bt-sv-prose h2,
.bt-sv-prose h3 {
color: #09090b;
font-weight: 800;
margin-top: 1.4rem;
margin-bottom: 0.65rem;
line-height: 1.3;
}
.bt-sv-prose h1 { font-size: 1.4rem; }
.bt-sv-prose h2 { font-size: 1.22rem; }
.bt-sv-prose h3 { font-size: 1.08rem; }
.bt-sv-prose p {
margin-bottom: 0.9rem;
}
.bt-sv-prose ul,
.bt-sv-prose ol {
padding-left: 1.4rem;
margin-bottom: 1rem;
}
.bt-sv-prose li {
margin-bottom: 0.4rem;
}
.bt-sv-reviews-sec {
margin-top: 3rem;
}
.bt-sv-reviews-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.35rem;
}
.bt-sv-viewall-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.9rem;
font-weight: 600;
color: #dc2626;
}
.bt-sv-viewall-link:hover {
color: #b91c1c;
}
.bt-sv-rev-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.bt-sv-rev-card {
background: rgba(255, 255, 255, 0.88);
border: 1px solid #fee2e2;
border-radius: 18px;
padding: 1.35rem 1.5rem;
box-shadow: 0 6px 20px rgba(220, 38, 38, 0.05);
}
.bt-sv-rev-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.75rem;
}
.bt-sv-rev-user {
display: flex;
align-items: center;
gap: 0.85rem;
}
.bt-sv-rev-avatar {
width: 42px;
height: 42px;
border-radius: 999px;
background: linear-gradient(135deg, #dc2626, #ef4444);
color: #ffffff;
font-weight: 700;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.bt-sv-rev-name-row {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.bt-sv-rev-name {
font-weight: 700;
color: #09090b;
font-size: 0.95rem;
}
.bt-sv-rev-verified {
font-size: 0.7rem;
font-weight: 600;
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fecaca;
padding: 0.1rem 0.5rem;
border-radius: 999px;
}
.bt-sv-rev-date {
font-size: 0.75rem;
color: #9ca3af;
}
.bt-sv-rev-stars {
display: inline-flex;
gap: 2px;
}
.bt-sv-rev-comment {
color: #4b5563;
font-size: 0.92rem;
line-height: 1.6;
margin: 0;
}
.bt-sv-rev-ShareLink {
text-align: center;
padding-top: 0.5rem;
}
.bt-sv-rev-ShareLink a {
font-size: 0.88rem;
font-weight: 600;
color: #dc2626;
}
.bt-sv-rev-empty {
background: rgba(255, 255, 255, 0.85);
border: 1px solid #fee2e2;
border-radius: 20px;
padding: 2.5rem 1.5rem;
text-align: center;
}
.bt-sv-rev-empty-ico {
width: 64px;
height: 64px;
border-radius: 999px;
background: #fee2e2;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.85rem;
}
.bt-sv-rev-empty h3 {
font-size: 1.15rem;
font-weight: 700;
color: #09090b;
margin: 0 0 0.25rem;
}
.bt-sv-rev-empty p {
font-size: 0.88rem;
color: #6b7280;
margin: 0 0 1.15rem;
}
.bt-sv-write-rev-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.68rem 1.35rem;
border-radius: 12px;
background: linear-gradient(90deg, #dc2626, #ef4444);
color: #ffffff;
font-size: 0.86rem;
font-weight: 600;
border: none;
cursor: pointer;
box-shadow: 0 6px 18px rgba(220, 38, 38, 0.28);
}
.bt-sv-related-sec {
margin-top: 3.5rem;
}
.bt-sv-related-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.bt-p2-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.bt-p2-controls {
position: absolute;
top: 1.25rem;
right: 1.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
z-index: 10;
}
.bt-p2-ctrl-btn,
.bt-p2-ctrl-pct {
height: 40px;
padding: 0 0.85rem;
border-radius: 12px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ffffff;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
}
.bt-p2-ctrl-btn:hover,
.bt-p2-ctrl-pct:hover {
background: rgba(255, 255, 255, 0.24);
}
.bt-p2-img-stage img {
max-width: 90vw;
max-height: 82vh;
border-radius: 16px;
object-fit: contain;
transition: transform 0.25s ease;
}
.bt-p2-caption {
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
padding: 0.45rem 1.2rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
font-size: 0.85rem;
}
.bt-ev-overlay,
.bt-tv-overlay {
position: fixed;
inset: 0;
z-index: 9990;
background: rgba(15, 23, 42, 0.65);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
overflow-y: auto;
}
.bt-ev-modal {
background: #ffffff;
border-radius: 24px;
max-width: 580px;
width: 100%;
max-height: 92vh;
overflow-y: auto;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
border: 1px solid #fecaca;
}
.bt-ev-header {
background: linear-gradient(135deg, #09090b 0%, #09090b 55%, #09090b 100%);
color: #ffffff;
padding: 1.5rem;
border-radius: 24px 24px 0 0;
}
.bt-ev-header-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.bt-ev-header-top h2 {
font-size: 1.3rem;
font-weight: 800;
color: #ffffff;
margin: 0 0 0.2rem;
}
.bt-ev-header-top p {
font-size: 0.85rem;
color: #fca5a5;
margin: 0;
}
.bt-ev-close-btn {
width: 36px;
height: 36px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
border: none;
color: #ffffff;
font-size: 1rem;
cursor: pointer;
}
.bt-ev-stepper {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1.25rem;
}
.bt-ev-step-item {
display: flex;
align-items: center;
flex: 1;
}
.bt-ev-step-item:last-child {
flex: 0;
}
.bt-ev-step-pill {
display: inline-flex;
align-items: center;
gap: 0.38rem;
padding: 0.35rem 0.72rem;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 600;
background: rgba(255, 255, 255, 0.1);
color: #9ca3af;
white-space: nowrap;
}
.bt-ev-step-pill.is-curr {
background: #ffffff;
color: #09090b;
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}
.bt-ev-step-pill.is-done {
background: #ef4444;
color: #ffffff;
}
.bt-ev-step-line {
flex: 1;
height: 2px;
background: rgba(255, 255, 255, 0.18);
margin: 0 0.35rem;
}
.bt-ev-step-line.is-done {
background: #ef4444;
}
.bt-ev-body {
padding: 1.5rem;
}
.bt-ev-amount-banner {
background: #ffffff;
border: 1px solid #fecaca;
border-radius: 16px;
padding: 0.95rem 1.2rem;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
}
.bt-ev-amount-banner span {
font-size: 0.88rem;
font-weight: 600;
color: #b91c1c;
}
.bt-ev-amount-banner strong {
font-size: 1.45rem;
font-weight: 800;
color: #b91c1c;
}
.bt-ev-error-alert {
background: #fef2f2;
border: 1px solid #fecaca;
color: #dc2626;
padding: 0.75rem 1rem;
border-radius: 12px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 1rem;
}
.bt-ev-sec-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.05rem;
font-weight: 700;
color: #09090b;
margin: 0 0 1rem;
}
.bt-ev-bank-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.bt-ev-bank-card {
border: 2px solid #e5e7eb;
border-radius: 16px;
padding: 1rem;
cursor: pointer;
transition: all 0.2s ease;
}
.bt-ev-bank-card.is-selected {
border-color: #dc2626;
background: #ffffff;
}
.bt-ev-bank-head {
display: flex;
align-items: center;
gap: 0.75rem;
}
.bt-ev-radio {
width: 20px;
height: 20px;
border-radius: 999px;
border: 2px solid #9ca3af;
display: flex;
align-items: center;
justify-content: center;
}
.bt-ev-radio.is-selected {
border-color: #dc2626;
background: #dc2626;
}
.bt-ev-radio-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: #ffffff;
}
.bt-ev-bank-name {
font-weight: 700;
color: #09090b;
font-size: 0.95rem;
}
.bt-ev-bank-holder {
font-size: 0.8rem;
color: #6b7280;
}
.bt-ev-bank-details {
margin-top: 0.85rem;
background: #ffffff;
border: 1px solid #fecaca;
border-radius: 12px;
padding: 0.85rem 1rem;
}
.bt-ev-acc-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.bt-ev-acc-lbl {
font-size: 0.72rem;
color: #6b7280;
text-transform: uppercase;
}
.bt-ev-acc-num {
font-family: 'Fira Code', monospace;
font-size: 1rem;
font-weight: 700;
color: #09090b;
}
.bt-ev-copy-btn {
padding: 0.35rem 0.75rem;
border-radius: 8px;
background: #fee2e2;
color: #dc2626;
border: 1px solid #fca5a5;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
}
.bt-ev-acc-note {
font-size: 0.78rem;
color: #4b5563;
line-height: 1.45;
}
.bt-ev-selected-bank-pill {
background: #f3f4f6;
border-radius: 10px;
padding: 0.6rem 0.9rem;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.82rem;
color: #374151;
margin-bottom: 1rem;
}
.bt-ev-selected-bank-pill button {
background: none;
border: none;
color: #dc2626;
font-weight: 700;
cursor: pointer;
}
.bt-ev-field {
margin-bottom: 1rem;
}
.bt-ev-field label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: #374151;
margin-bottom: 0.38rem;
}
.bt-ev-field label span {
color: #ef4444;
}
.bt-ev-input {
width: 100%;
padding: 0.75rem 0.95rem;
border-radius: 12px;
border: 1.5px solid #e5e7eb;
font-size: 0.9rem;
color: #09090b;
outline: none;
}
.bt-ev-input:focus {
border-color: #dc2626;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.bt-ev-hint {
display: block;
font-size: 0.75rem;
color: #6b7280;
margin-top: 0.3rem;
}
.bt-ev-upload-box {
display: block;
border: 2px dashed #fca5a5;
border-radius: 16px;
padding: 1.25rem;
text-align: center;
background: #ffffff;
cursor: pointer;
transition: border-color 0.2s ease;
}
.bt-ev-upload-box:hover {
border-color: #dc2626;
}
.bt-ev-upload-ico {
font-size: 1.75rem;
margin-bottom: 0.3rem;
}
.bt-ev-upload-txt {
font-size: 0.88rem;
font-weight: 600;
color: #b91c1c;
}
.bt-ev-upload-sub {
font-size: 0.75rem;
color: #9ca3af;
}
.bt-ev-upload-preview img {
max-height: 150px;
border-radius: 10px;
margin: 0 auto 0.5rem;
display: block;
}
.bt-ev-upload-fname {
font-size: 0.8rem;
font-weight: 600;
color: #b91c1c;
}
.bt-ev-review-box {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 0.9rem 1.1rem;
margin-bottom: 0.85rem;
}
.bt-ev-rev-head {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
color: #6b7280;
margin-bottom: 0.5rem;
}
.bt-ev-rev-head button {
background: none;
border: none;
color: #dc2626;
font-weight: 700;
cursor: pointer;
}
.bt-ev-rev-grid {
display: flex;
flex-direction: column;
gap: 0.28rem;
font-size: 0.86rem;
color: #374151;
}
.bt-ev-btn-row {
display: flex;
gap: 0.75rem;
margin-top: 1.25rem;
}
.bt-ev-back-btn {
padding: 0.85rem 1.25rem;
border-radius: 12px;
background: #f3f4f6;
border: 1px solid #e5e7eb;
color: #374151;
font-weight: 600;
cursor: pointer;
}
.bt-ev-primary-btn {
flex: 1;
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.88rem 1.35rem;
border-radius: 12px;
background: linear-gradient(90deg, #dc2626, #dc2626);
color: #ffffff;
font-size: 0.95rem;
font-weight: 700;
border: none;
cursor: pointer;
}
.bt-ev-confirm-btn {
flex: 1;
padding: 0.88rem 1.35rem;
border-radius: 12px;
background: linear-gradient(90deg, #b91c1c, #ef4444);
color: #ffffff;
font-size: 0.95rem;
font-weight: 700;
border: none;
cursor: pointer;
box-shadow: 0 8px 20px rgba(220, 38, 38, 0.3);
}
.bt-tv-modal {
position: relative;
background: #ffffff;
border-radius: 24px;
max-width: 440px;
width: 100%;
padding: 2rem;
text-align: center;
overflow: hidden;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}
.bt-tv-top-bar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, #ef4444, #ef4444, #dc2626);
}
.bt-tv-icon-wrap {
margin-bottom: 1rem;
}
.bt-tv-icon-circle {
width: 72px;
height: 72px;
border-radius: 999px;
background: linear-gradient(135deg, #f87171, #b91c1c);
color: #ffffff;
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
box-shadow: 0 12px 28px rgba(220, 38, 38, 0.35);
}
.bt-tv-title {
font-size: 1.55rem;
font-weight: 800;
color: #09090b;
margin: 0 0 0.35rem;
}
.bt-tv-sub {
font-size: 0.88rem;
color: #6b7280;
margin: 0 0 1.25rem;
}
.bt-tv-id-card {
background: linear-gradient(135deg, #ffffff, #fee2e2);
border: 2px solid #fecaca;
border-radius: 16px;
padding: 1rem;
margin-bottom: 1.25rem;
}
.bt-tv-id-lbl {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
color: #dc2626;
margin-bottom: 0.25rem;
}
.bt-tv-id-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.bt-tv-id-num {
font-family: 'Fira Code', monospace;
font-size: 1.75rem;
font-weight: 800;
color: #09090b;
}
.bt-tv-copy-btn {
border: none;
background: #ffffff;
border-radius: 8px;
padding: 0.3rem 0.55rem;
cursor: pointer;
}
.bt-tv-id-hint {
font-size: 0.75rem;
color: #dc2626;
margin-top: 0.25rem;
}
.bt-tv-summary {
background: #f9fafb;
border-radius: 14px;
padding: 0.9rem 1.1rem;
margin-bottom: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.bt-tv-sum-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.85rem;
color: #4b5563;
}
.bt-tv-green {
color: #b91c1c;
}
.bt-tv-status-pill {
background: #fef3c7;
color: #b45309;
font-size: 0.72rem;
font-weight: 700;
padding: 0.15rem 0.6rem;
border-radius: 999px;
}
.bt-tv-actions {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.bt-tv-track-btn {
width: 100%;
padding: 0.88rem 1.2rem;
border-radius: 12px;
background: linear-gradient(90deg, #dc2626, #dc2626);
color: #ffffff;
font-weight: 700;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.bt-tv-cont-btn {
width: 100%;
padding: 0.8rem 1.2rem;
border-radius: 12px;
background: #f3f4f6;
color: #374151;
font-weight: 600;
border: none;
cursor: pointer;
}
@media (max-width: 960px) {
.bt-sv-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.bt-sv-sticky-box {
position: static;
}
.bt-sv-related-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.bt-sv-related-grid,
.bt-sv-included-grid {
grid-template-columns: 1fr;
}
.bt-ev-step-lbl {
display: none;
}
}
.bt-ax-card {
position: relative;
border-radius: 24px;
overflow: hidden;
background: #ffffff;
border: 1px solid #fee2e2;
box-shadow: 0 10px 25px -5px rgba(220, 38, 38, 0.08), 0 4px 10px -4px rgba(220, 38, 38, 0.04);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
cursor: pointer;
}
.bt-ax-card:hover {
border-color: #fca5a5;
box-shadow: 0 22px 45px -10px rgba(220, 38, 38, 0.18), 0 8px 20px -6px rgba(220, 38, 38, 0.1);
}
.bt-ax-img-wrap {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
height: auto !important;
overflow: hidden;
background: linear-gradient(135deg, #09090b 0%, #18181b 100%);
flex-shrink: 0;
}
.bt-ax-img {
width: 100%;
height: 100%;
object-fit: contain !important;
display: block;
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.bt-ax-card:hover .bt-ax-img {
transform: scale(1.04);
}
.bt-ax-img-fade {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.bt-ax-card:hover .bt-ax-img-fade {
opacity: 1;
}
.bt-ax-shimmer {
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.25) 50%, transparent 65%);
transform: translateX(-120%);
transition: transform 0.9s ease;
pointer-events: none;
}
.bt-ax-card:hover .bt-ax-shimmer {
transform: translateX(120%);
}
.bt-ax-actions-tr {
position: absolute;
top: 12px;
right: 12px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 4;
}
.bt-ax-circle-btn {
width: 36px;
height: 36px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.6);
color: #4b5563;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: all 0.25s ease;
cursor: pointer;
}
.bt-ax-circle-btn:hover {
background: #ffffff;
color: #dc2626;
transform: scale(1.08);
}
.bt-ax-circle-btn.is-wish {
background: #ef4444;
color: #ffffff;
border-color: #ef4444;
}
.bt-ax-bottom-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #dc2626, #ef4444, #ef4444);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s ease;
}
.bt-ax-card:hover .bt-ax-bottom-bar {
transform: scaleX(1);
}
.bt-ax-body {
padding: 1.25rem;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
background: #ffffff;
}
.bt-ax-cats {
display: flex;
flex-wrap: wrap;
gap: 0.38rem;
margin-bottom: 0.65rem;
}
.bt-ax-cat-pill {
font-family: 'Fira Code', monospace;
font-size: 0.62rem;
font-weight: 600;
padding: 0.16rem 0.62rem;
border-radius: 999px;
background: #ffffff;
color: #dc2626;
border: 1px solid #fecaca;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.bt-ax-title {
font-size: 1rem;
font-weight: 700;
color: #09090b;
margin: 0 0 0.45rem;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.2s ease;
}
.bt-ax-card:hover .bt-ax-title {
color: #b91c1c;
}
.bt-ax-rating-row {
display: flex;
align-items: center;
gap: 0.42rem;
margin-bottom: 0.55rem;
}
.bt-ax-stars {
display: inline-flex;
align-items: center;
gap: 2px;
}
.bt-ax-rev-cnt {
font-family: 'Fira Code', monospace;
font-size: 0.69rem;
color: #9ca3af;
}
.bt-ax-bestseller {
font-family: 'Fira Code', monospace;
font-size: 0.62rem;
font-weight: 600;
background: #fffbeb;
color: #d97706;
border: 1px solid #fde68a;
padding: 0.1rem 0.48rem;
border-radius: 999px;
}
.bt-ax-desc {
font-size: 0.76rem;
color: #6b7280;
line-height: 1.55;
margin: 0 0 0.95rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bt-ax-trust-row {
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 0.75rem;
font-family: 'Fira Code', monospace;
font-size: 0.68rem;
color: #9ca3af;
}
.bt-ax-trust-item {
display: inline-flex;
align-items: center;
gap: 0.28rem;
}
.bt-ax-divider {
height: 1px;
background: linear-gradient(90deg, transparent, #fecaca, transparent);
margin-bottom: 0.75rem;
}
.bt-ax-price-wrap {
margin-bottom: 0.75rem;
}
.bt-ax-price {
font-size: 1.25rem;
font-weight: 800;
color: #09090b;
letter-spacing: -0.02em;
}
.bt-ax-btn-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.bt-ax-view-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.65rem 1rem;
border-radius: 12px;
background: linear-gradient(90deg, #dc2626 0%, #dc2626 50%, #dc2626 100%);
color: #ffffff;
font-size: 0.85rem;
font-weight: 600;
border: none;
box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
transition: all 0.25s ease;
cursor: pointer;
}
.bt-ax-view-btn:hover {
background: linear-gradient(90deg, #b91c1c 0%, #b91c1c 50%, #b91c1c 100%);
box-shadow: 0 8px 20px rgba(220, 38, 38, 0.35);
}
.bt-ax-arrow {
transition: transform 0.25s ease;
}
.bt-ax-view-btn:hover .bt-ax-arrow {
transform: translateX(3px);
}
.bt-ax-wish-sq {
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid #fecaca;
background: rgba(254, 242, 242, 0.65);
color: #9ca3af;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
cursor: pointer;
flex-shrink: 0;
}
.bt-ax-wish-sq:hover {
border-color: #f87171;
color: #ef4444;
background: #ffffff;
}
.bt-ax-wish-sq.is-wish {
background: #fef2f2;
border-color: #fca5a5;
color: #ef4444;
}
#productDetailPage {
padding: 0 !important;
max-width: 100% !important;
}
.bt-sv-page-wrap {
min-height: 100vh;
background: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #fef2f2 100%);
position: relative;
overflow: hidden;
padding-bottom: 4rem;
}
.bt-sv-bg-blobs {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.bt-sv-blob {
position: absolute;
border-radius: 999px;
filter: blur(90px);
}
.bt-sv-blob-1 {
top: 5rem;
left: -8rem;
width: 24rem;
height: 24rem;
background: rgba(252, 165, 165, 0.28);
}
.bt-sv-blob-2 {
top: 20rem;
right: -8rem;
width: 24rem;
height: 24rem;
background: rgba(254, 202, 202, 0.35);
}
.bt-sv-breadcrumb-bar {
position: sticky;
top: 0;
z-index: 30;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(16px);
border-bottom: 1px solid #fee2e2;
}
.bt-sv-breadcrumb-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0.9rem 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
}
.bt-sv-breadcrumb-inner a {
color: #6b7280;
font-weight: 500;
transition: color 0.2s ease;
}
.bt-sv-breadcrumb-inner a:hover {
color: #dc2626;
}
.bt-sv-bc-sep {
color: #d1d5db;
font-size: 1rem;
}
.bt-sv-bc-curr {
color: #09090b;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bt-sv-container {
max-width: 1280px;
margin: 0 auto;
padding: 2.5rem 1.5rem;
position: relative;
z-index: 2;
}
.bt-sv-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3.5rem;
align-items: start;
}
.bt-sv-sticky-box {
position: sticky;
top: 5.5rem;
}
.bt-sv-img-card {
position: relative;
border-radius: 24px;
overflow: hidden;
background: rgba(255, 255, 255, 0.8);
border: 1px solid #fee2e2;
box-shadow: 0 25px 50px -12px rgba(220, 38, 38, 0.16);
cursor: zoom-in;
}
.bt-sv-img-stage {
position: relative;
aspect-ratio: 1 / 1;
height: auto;
overflow: hidden;
background: #ffffff;
}
.bt-sv-main-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.bt-sv-img-card:hover .bt-sv-main-img {
transform: scale(1.04);
}
.bt-sv-img-fade {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.18), transparent 45%);
pointer-events: none;
}
.bt-sv-zoom-btn {
position: absolute;
top: 16px;
right: 16px;
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.8);
color: #374151;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
transition: all 0.25s ease;
cursor: pointer;
}
.bt-sv-zoom-btn:hover {
background: #ffffff;
color: #dc2626;
transform: scale(1.08);
}
.bt-sv-trust-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin-top: 1rem;
}
.bt-sv-trust-card {
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(12px);
border: 1px solid rgba(254, 202, 202, 0.6);
border-radius: 16px;
padding: 0.85rem 0.5rem;
text-align: center;
transition: transform 0.25s ease;
}
.bt-sv-trust-card:hover {
transform: translateY(-2px);
}
.bt-sv-trust-ico {
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.35rem;
}
.bt-sv-trust-txt {
font-size: 0.75rem;
font-weight: 600;
color: #374151;
}
.bt-sv-cats {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.bt-sv-cat-pill {
padding: 0.28rem 0.82rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
background: #fee2e2;
color: #dc2626;
border: 1px solid #fecaca;
}
.bt-sv-title {
font-size: clamp(1.75rem, 3vw, 2.35rem);
font-weight: 800;
color: #09090b;
line-height: 1.2;
margin: 0 0 1rem;
}
.bt-sv-rating-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem;
margin-bottom: 1.6rem;
}
.bt-sv-stars {
display: inline-flex;
align-items: center;
gap: 3px;
}
.bt-sv-rating-txt {
font-size: 0.875rem;
color: #6b7280;
font-weight: 500;
}
.bt-sv-dot {
color: #d1d5db;
}
.bt-sv-prem-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.85rem;
font-weight: 600;
color: #dc2626;
}
.bt-sv-plans-wrap {
margin-bottom: 1.65rem;
}
.bt-sv-sec-heading {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 1.1rem;
font-weight: 700;
color: #09090b;
margin: 0 0 0.95rem;
}
.bt-sv-sec-ico {
width: 32px;
height: 32px;
border-radius: 10px;
background: linear-gradient(135deg, #dc2626, #ef4444);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}
.bt-sv-plans-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.bt-sv-plan-card {
position: relative;
padding: 1.15rem 1.25rem;
border-radius: 18px;
background: rgba(255, 255, 255, 0.8);
border: 2px solid #fee2e2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
cursor: pointer;
transition: all 0.25s ease;
}
.bt-sv-plan-card:hover {
border-color: #f87171;
background: #ffffff;
}
.bt-sv-plan-card.is-selected {
border-color: #dc2626;
background: rgba(254, 242, 242, 0.85);
box-shadow: 0 10px 25px -5px rgba(220, 38, 38, 0.14);
}
.bt-sv-plan-left {
display: flex;
align-items: center;
gap: 0.95rem;
}
.bt-sv-plan-ico {
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bt-sv-plan-ico-day {
background: linear-gradient(135deg, #fbbf24, #dc2626);
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.28);
}
.bt-sv-plan-ico-month {
background: linear-gradient(135deg, #dc2626, #ef4444);
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.28);
}
.bt-sv-plan-ico-year {
background: linear-gradient(135deg, #ef4444, #dc2626);
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.28);
}
.bt-sv-plan-title {
font-size: 1rem;
font-weight: 700;
color: #09090b;
margin-bottom: 0.2rem;
}
.bt-sv-plan-sub {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.82rem;
color: #6b7280;
}
.bt-sv-plan-right {
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.3rem;
}
.bt-sv-plan-price {
font-size: 1.35rem;
font-weight: 800;
color: #09090b;
}
.bt-sv-plan-check {
width: 24px;
height: 24px;
border-radius: 999px;
background: #dc2626;
display: inline-flex;
align-items: center;
justify-content: center;
}
.bt-sv-checkout-card {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(14px);
border: 1px solid #fecaca;
border-radius: 20px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 12px 30px rgba(220, 38, 38, 0.08);
}
.bt-sv-total-row {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 1.1rem;
}
.bt-sv-total-lbl {
display: block;
font-size: 0.85rem;
color: #6b7280;
margin-bottom: 0.2rem;
}
.bt-sv-total-prices {
display: flex;
align-items: baseline;
gap: 0.7rem;
}
.bt-sv-total-main {
font-size: 2.2rem;
font-weight: 800;
background: linear-gradient(90deg, #dc2626, #ef4444, #ef4444);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.bt-sv-total-strike {
font-size: 1.05rem;
color: #9ca3af;
text-decoration: line-through;
}
.bt-sv-save-badge {
padding: 0.35rem 0.85rem;
border-radius: 999px;
background: linear-gradient(135deg, #ef4444, #b91c1c);
color: #ffffff;
font-size: 0.78rem;
font-weight: 700;
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.28);
}
.bt-sv-proceed-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
padding: 1rem 1.5rem;
border-radius: 14px;
background: linear-gradient(90deg, #dc2626 0%, #dc2626 50%, #dc2626 100%);
color: #ffffff;
font-size: 1.05rem;
font-weight: 700;
border: none;
box-shadow: 0 10px 25px rgba(220, 38, 38, 0.32);
cursor: pointer;
transition: all 0.25s ease;
}
.bt-sv-proceed-btn:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(220, 38, 38, 0.44);
}
.bt-sv-proc-arrow {
transition: transform 0.25s ease;
}
.bt-sv-proceed-btn:hover .bt-sv-proc-arrow {
transform: translateX(4px);
}
.bt-sv-secure-foot {
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
margin-top: 0.85rem;
font-size: 0.76rem;
color: #9ca3af;
}
.bt-sv-included-card {
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(12px);
border: 1px solid #fee2e2;
border-radius: 20px;
padding: 1.35rem 1.5rem;
}
.bt-sv-included-card h3 {
font-size: 0.98rem;
font-weight: 700;
color: #09090b;
margin: 0 0 0.95rem;
}
.bt-sv-included-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.8rem;
}
.bt-sv-inc-item {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.85rem;
font-weight: 500;
color: #374151;
}
.bt-sv-inc-ico {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bt-sv-desc-card {
margin-top: 3.5rem;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(12px);
border: 1px solid #fee2e2;
border-radius: 24px;
padding: 2.25rem;
box-shadow: 0 12px 32px rgba(220, 38, 38, 0.06);
}
.bt-sv-block-head {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.35rem;
}
.bt-sv-block-head h2 {
font-size: 1.45rem;
font-weight: 800;
color: #09090b;
margin: 0;
}
.bt-sv-block-ico {
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bt-sv-ico-blue {
background: linear-gradient(135deg, #dc2626, #ef4444);
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25);
}
.bt-sv-ico-amber {
background: linear-gradient(135deg, #fbbf24, #dc2626);
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25);
}
.bt-sv-ico-purple {
background: linear-gradient(135deg, #dc2626, #ef4444);
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25);
}
.bt-sv-prose {
color: #374151;
font-size: 0.96rem;
line-height: 1.75;
}
.bt-sv-prose h1,
.bt-sv-prose h2,
.bt-sv-prose h3 {
color: #09090b;
font-weight: 800;
margin-top: 1.4rem;
margin-bottom: 0.65rem;
line-height: 1.3;
}
.bt-sv-prose h1 { font-size: 1.4rem; }
.bt-sv-prose h2 { font-size: 1.22rem; }
.bt-sv-prose h3 { font-size: 1.08rem; }
.bt-sv-prose p {
margin-bottom: 0.9rem;
}
.bt-sv-prose ul,
.bt-sv-prose ol {
padding-left: 1.4rem;
margin-bottom: 1rem;
}
.bt-sv-prose li {
margin-bottom: 0.4rem;
}
.bt-sv-reviews-sec {
margin-top: 3rem;
}
.bt-sv-reviews-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.35rem;
}
.bt-sv-viewall-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.9rem;
font-weight: 600;
color: #dc2626;
}
.bt-sv-viewall-link:hover {
color: #b91c1c;
}
.bt-sv-rev-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.bt-sv-rev-card {
background: rgba(255, 255, 255, 0.88);
border: 1px solid #fee2e2;
border-radius: 18px;
padding: 1.35rem 1.5rem;
box-shadow: 0 6px 20px rgba(220, 38, 38, 0.05);
}
.bt-sv-rev-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.75rem;
}
.bt-sv-rev-user {
display: flex;
align-items: center;
gap: 0.85rem;
}
.bt-sv-rev-avatar {
width: 42px;
height: 42px;
border-radius: 999px;
background: linear-gradient(135deg, #dc2626, #ef4444);
color: #ffffff;
font-weight: 700;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.bt-sv-rev-name-row {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.bt-sv-rev-name {
font-weight: 700;
color: #09090b;
font-size: 0.95rem;
}
.bt-sv-rev-verified {
font-size: 0.7rem;
font-weight: 600;
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fecaca;
padding: 0.1rem 0.5rem;
border-radius: 999px;
}
.bt-sv-rev-date {
font-size: 0.75rem;
color: #9ca3af;
}
.bt-sv-rev-stars {
display: inline-flex;
gap: 2px;
}
.bt-sv-rev-comment {
color: #4b5563;
font-size: 0.92rem;
line-height: 1.6;
margin: 0;
}
.bt-sv-rev-ShareLink {
text-align: center;
padding-top: 0.5rem;
}
.bt-sv-rev-ShareLink a {
font-size: 0.88rem;
font-weight: 600;
color: #dc2626;
}
.bt-sv-rev-empty {
background: rgba(255, 255, 255, 0.85);
border: 1px solid #fee2e2;
border-radius: 20px;
padding: 2.5rem 1.5rem;
text-align: center;
}
.bt-sv-rev-empty-ico {
width: 64px;
height: 64px;
border-radius: 999px;
background: #fee2e2;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.85rem;
}
.bt-sv-rev-empty h3 {
font-size: 1.15rem;
font-weight: 700;
color: #09090b;
margin: 0 0 0.25rem;
}
.bt-sv-rev-empty p {
font-size: 0.88rem;
color: #6b7280;
margin: 0 0 1.15rem;
}
.bt-sv-write-rev-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.68rem 1.35rem;
border-radius: 12px;
background: linear-gradient(90deg, #dc2626, #ef4444);
color: #ffffff;
font-size: 0.86rem;
font-weight: 600;
border: none;
cursor: pointer;
box-shadow: 0 6px 18px rgba(220, 38, 38, 0.28);
}
.bt-sv-related-sec {
margin-top: 3.5rem;
}
.bt-sv-related-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.bt-p2-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.bt-p2-controls {
position: absolute;
top: 1.25rem;
right: 1.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
z-index: 10;
}
.bt-p2-ctrl-btn,
.bt-p2-ctrl-pct {
height: 40px;
padding: 0 0.85rem;
border-radius: 12px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ffffff;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
}
.bt-p2-ctrl-btn:hover,
.bt-p2-ctrl-pct:hover {
background: rgba(255, 255, 255, 0.24);
}
.bt-p2-img-stage img {
max-width: 90vw;
max-height: 82vh;
border-radius: 16px;
object-fit: contain;
transition: transform 0.25s ease;
}
.bt-p2-caption {
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
padding: 0.45rem 1.2rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
font-size: 0.85rem;
}
.bt-ev-overlay,
.bt-tv-overlay {
position: fixed;
inset: 0;
z-index: 9990;
background: rgba(15, 23, 42, 0.65);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
overflow-y: auto;
}
.bt-ev-modal {
background: #ffffff;
border-radius: 24px;
max-width: 580px;
width: 100%;
max-height: 92vh;
overflow-y: auto;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
border: 1px solid #fecaca;
}
.bt-ev-header {
background: linear-gradient(135deg, #09090b 0%, #09090b 55%, #09090b 100%);
color: #ffffff;
padding: 1.5rem;
border-radius: 24px 24px 0 0;
}
.bt-ev-header-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.bt-ev-header-top h2 {
font-size: 1.3rem;
font-weight: 800;
color: #ffffff;
margin: 0 0 0.2rem;
}
.bt-ev-header-top p {
font-size: 0.85rem;
color: #fca5a5;
margin: 0;
}
.bt-ev-close-btn {
width: 36px;
height: 36px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
border: none;
color: #ffffff;
font-size: 1rem;
cursor: pointer;
}
.bt-ev-stepper {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1.25rem;
}
.bt-ev-step-item {
display: flex;
align-items: center;
flex: 1;
}
.bt-ev-step-item:last-child {
flex: 0;
}
.bt-ev-step-pill {
display: inline-flex;
align-items: center;
gap: 0.38rem;
padding: 0.35rem 0.72rem;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 600;
background: rgba(255, 255, 255, 0.1);
color: #9ca3af;
white-space: nowrap;
}
.bt-ev-step-pill.is-curr {
background: #ffffff;
color: #09090b;
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}
.bt-ev-step-pill.is-done {
background: #ef4444;
color: #ffffff;
}
.bt-ev-step-line {
flex: 1;
height: 2px;
background: rgba(255, 255, 255, 0.18);
margin: 0 0.35rem;
}
.bt-ev-step-line.is-done {
background: #ef4444;
}
.bt-ev-body {
padding: 1.5rem;
}
.bt-ev-amount-banner {
background: #ffffff;
border: 1px solid #fecaca;
border-radius: 16px;
padding: 0.95rem 1.2rem;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
}
.bt-ev-amount-banner span {
font-size: 0.88rem;
font-weight: 600;
color: #b91c1c;
}
.bt-ev-amount-banner strong {
font-size: 1.45rem;
font-weight: 800;
color: #b91c1c;
}
.bt-ev-error-alert {
background: #fef2f2;
border: 1px solid #fecaca;
color: #dc2626;
padding: 0.75rem 1rem;
border-radius: 12px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 1rem;
}
.bt-ev-sec-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.05rem;
font-weight: 700;
color: #09090b;
margin: 0 0 1rem;
}
.bt-ev-bank-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.bt-ev-bank-card {
border: 2px solid #e5e7eb;
border-radius: 16px;
padding: 1rem;
cursor: pointer;
transition: all 0.2s ease;
}
.bt-ev-bank-card.is-selected {
border-color: #dc2626;
background: #ffffff;
}
.bt-ev-bank-head {
display: flex;
align-items: center;
gap: 0.75rem;
}
.bt-ev-radio {
width: 20px;
height: 20px;
border-radius: 999px;
border: 2px solid #9ca3af;
display: flex;
align-items: center;
justify-content: center;
}
.bt-ev-radio.is-selected {
border-color: #dc2626;
background: #dc2626;
}
.bt-ev-radio-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: #ffffff;
}
.bt-ev-bank-name {
font-weight: 700;
color: #09090b;
font-size: 0.95rem;
}
.bt-ev-bank-holder {
font-size: 0.8rem;
color: #6b7280;
}
.bt-ev-bank-details {
margin-top: 0.85rem;
background: #ffffff;
border: 1px solid #fecaca;
border-radius: 12px;
padding: 0.85rem 1rem;
}
.bt-ev-acc-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.bt-ev-acc-lbl {
font-size: 0.72rem;
color: #6b7280;
text-transform: uppercase;
}
.bt-ev-acc-num {
font-family: 'Fira Code', monospace;
font-size: 1rem;
font-weight: 700;
color: #09090b;
}
.bt-ev-copy-btn {
padding: 0.35rem 0.75rem;
border-radius: 8px;
background: #fee2e2;
color: #dc2626;
border: 1px solid #fca5a5;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
}
.bt-ev-acc-note {
font-size: 0.78rem;
color: #4b5563;
line-height: 1.45;
}
.bt-ev-selected-bank-pill {
background: #f3f4f6;
border-radius: 10px;
padding: 0.6rem 0.9rem;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.82rem;
color: #374151;
margin-bottom: 1rem;
}
.bt-ev-selected-bank-pill button {
background: none;
border: none;
color: #dc2626;
font-weight: 700;
cursor: pointer;
}
.bt-ev-field {
margin-bottom: 1rem;
}
.bt-ev-field label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: #374151;
margin-bottom: 0.38rem;
}
.bt-ev-field label span {
color: #ef4444;
}
.bt-ev-input {
width: 100%;
padding: 0.75rem 0.95rem;
border-radius: 12px;
border: 1.5px solid #e5e7eb;
font-size: 0.9rem;
color: #09090b;
outline: none;
}
.bt-ev-input:focus {
border-color: #dc2626;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.bt-ev-hint {
display: block;
font-size: 0.75rem;
color: #6b7280;
margin-top: 0.3rem;
}
.bt-ev-upload-box {
display: block;
border: 2px dashed #fca5a5;
border-radius: 16px;
padding: 1.25rem;
text-align: center;
background: #ffffff;
cursor: pointer;
transition: border-color 0.2s ease;
}
.bt-ev-upload-box:hover {
border-color: #dc2626;
}
.bt-ev-upload-ico {
font-size: 1.75rem;
margin-bottom: 0.3rem;
}
.bt-ev-upload-txt {
font-size: 0.88rem;
font-weight: 600;
color: #b91c1c;
}
.bt-ev-upload-sub {
font-size: 0.75rem;
color: #9ca3af;
}
.bt-ev-upload-preview img {
max-height: 150px;
border-radius: 10px;
margin: 0 auto 0.5rem;
display: block;
}
.bt-ev-upload-fname {
font-size: 0.8rem;
font-weight: 600;
color: #b91c1c;
}
.bt-ev-review-box {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 0.9rem 1.1rem;
margin-bottom: 0.85rem;
}
.bt-ev-rev-head {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
color: #6b7280;
margin-bottom: 0.5rem;
}
.bt-ev-rev-head button {
background: none;
border: none;
color: #dc2626;
font-weight: 700;
cursor: pointer;
}
.bt-ev-rev-grid {
display: flex;
flex-direction: column;
gap: 0.28rem;
font-size: 0.86rem;
color: #374151;
}
.bt-ev-btn-row {
display: flex;
gap: 0.75rem;
margin-top: 1.25rem;
}
.bt-ev-back-btn {
padding: 0.85rem 1.25rem;
border-radius: 12px;
background: #f3f4f6;
border: 1px solid #e5e7eb;
color: #374151;
font-weight: 600;
cursor: pointer;
}
.bt-ev-primary-btn {
flex: 1;
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.88rem 1.35rem;
border-radius: 12px;
background: linear-gradient(90deg, #dc2626, #dc2626);
color: #ffffff;
font-size: 0.95rem;
font-weight: 700;
border: none;
cursor: pointer;
}
.bt-ev-confirm-btn {
flex: 1;
padding: 0.88rem 1.35rem;
border-radius: 12px;
background: linear-gradient(90deg, #b91c1c, #ef4444);
color: #ffffff;
font-size: 0.95rem;
font-weight: 700;
border: none;
cursor: pointer;
box-shadow: 0 8px 20px rgba(220, 38, 38, 0.3);
}
.bt-tv-modal {
position: relative;
background: #ffffff;
border-radius: 24px;
max-width: 440px;
width: 100%;
padding: 2rem;
text-align: center;
overflow: hidden;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}
.bt-tv-top-bar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, #ef4444, #ef4444, #dc2626);
}
.bt-tv-icon-wrap {
margin-bottom: 1rem;
}
.bt-tv-icon-circle {
width: 72px;
height: 72px;
border-radius: 999px;
background: linear-gradient(135deg, #f87171, #b91c1c);
color: #ffffff;
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
box-shadow: 0 12px 28px rgba(220, 38, 38, 0.35);
}
.bt-tv-title {
font-size: 1.55rem;
font-weight: 800;
color: #09090b;
margin: 0 0 0.35rem;
}
.bt-tv-sub {
font-size: 0.88rem;
color: #6b7280;
margin: 0 0 1.25rem;
}
.bt-tv-id-card {
background: linear-gradient(135deg, #ffffff, #fee2e2);
border: 2px solid #fecaca;
border-radius: 16px;
padding: 1rem;
margin-bottom: 1.25rem;
}
.bt-tv-id-lbl {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
color: #dc2626;
margin-bottom: 0.25rem;
}
.bt-tv-id-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.bt-tv-id-num {
font-family: 'Fira Code', monospace;
font-size: 1.75rem;
font-weight: 800;
color: #09090b;
}
.bt-tv-copy-btn {
border: none;
background: #ffffff;
border-radius: 8px;
padding: 0.3rem 0.55rem;
cursor: pointer;
}
.bt-tv-id-hint {
font-size: 0.75rem;
color: #dc2626;
margin-top: 0.25rem;
}
.bt-tv-summary {
background: #f9fafb;
border-radius: 14px;
padding: 0.9rem 1.1rem;
margin-bottom: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.bt-tv-sum-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.85rem;
color: #4b5563;
}
.bt-tv-green {
color: #b91c1c;
}
.bt-tv-status-pill {
background: #fef3c7;
color: #b45309;
font-size: 0.72rem;
font-weight: 700;
padding: 0.15rem 0.6rem;
border-radius: 999px;
}
.bt-tv-actions {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.bt-tv-track-btn {
width: 100%;
padding: 0.88rem 1.2rem;
border-radius: 12px;
background: linear-gradient(90deg, #dc2626, #dc2626);
color: #ffffff;
font-weight: 700;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.bt-tv-cont-btn {
width: 100%;
padding: 0.8rem 1.2rem;
border-radius: 12px;
background: #f3f4f6;
color: #374151;
font-weight: 600;
border: none;
cursor: pointer;
}
@media (max-width: 960px) {
.bt-sv-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.bt-sv-sticky-box {
position: static;
}
.bt-sv-related-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.bt-sv-related-grid,
.bt-sv-included-grid {
grid-template-columns: 1fr;
}
.bt-ev-step-lbl {
display: none;
}
}
.bt-star-picker {
display: flex;
align-items: center;
gap: 0.25rem;
height: 44px;
padding: 0 0.75rem;
border-radius: 12px;
border: 1.5px solid #e5e7eb;
background: #ffffff;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bt-star-picker:hover,
.bt-star-picker:focus-within {
border-color: #dc2626;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.bt-star-pick-btn {
background: none;
border: none;
padding: 0 2px;
font-size: 1.35rem;
line-height: 1;
color: #d1d5db;
cursor: pointer;
transition: transform 0.15s ease, color 0.15s ease;
}
.bt-star-pick-btn:hover {
transform: scale(1.2);
}
.bt-star-pick-btn.active {
color: #f59e0b;
text-shadow: 0 2px 6px rgba(245, 158, 11, 0.32);
}
.bt-star-pick-lbl {
margin-left: auto;
font-family: 'Fira Code', monospace;
font-size: 0.8rem;
font-weight: 700;
color: #6b7280;
}
.bt-text-reviews-wrap {
margin-top: 3rem;
padding-top: 2.5rem;
border-top: 1px solid #fee2e2;
}
.bt-text-reviews-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.75rem;
}
.bt-tr-eyebrow {
display: inline-block;
font-family: 'Fira Code', monospace;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
color: #dc2626;
background: #fee2e2;
border: 1px solid #fecaca;
padding: 0.22rem 0.75rem;
border-radius: 999px;
margin-bottom: 0.4rem;
}
.bt-tr-title {
font-size: 1.55rem;
font-weight: 800;
color: #09090b;
margin: 0;
}
.bt-tr-add-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.65rem 1.25rem;
border-radius: 12px;
background: #ffffff;
border: 1.5px solid #fca5a5;
color: #dc2626;
font-size: 0.86rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
}
.bt-tr-add-btn:hover {
background: #dc2626;
border-color: #dc2626;
color: #ffffff;
transform: translateY(-2px);
}
.bt-text-reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.bt-text-rev-card {
background: #ffffff;
border: 1px solid #fee2e2;
border-radius: 20px;
padding: 1.35rem 1.4rem;
box-shadow: 0 10px 25px -6px rgba(220, 38, 38, 0.08);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
display: flex;
flex-direction: column;
}
.bt-text-rev-card:hover {
transform: translateY(-4px);
border-color: #fca5a5;
box-shadow: 0 18px 36px -8px rgba(220, 38, 38, 0.14);
}
.bt-tr-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.85rem;
}
.bt-tr-user {
display: flex;
align-items: center;
gap: 0.75rem;
}
.bt-tr-avatar {
width: 42px;
height: 42px;
border-radius: 999px;
background: linear-gradient(135deg, #dc2626, #ef4444);
color: #ffffff;
font-size: 1rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}
.bt-tr-name-row {
display: flex;
align-items: baseline;
gap: 0.35rem;
flex-wrap: wrap;
}
.bt-tr-name {
font-size: 0.95rem;
font-weight: 700;
color: #09090b;
}
.bt-tr-city {
font-size: 0.76rem;
color: #6b7280;
}
.bt-tr-verified {
display: inline-block;
font-size: 0.68rem;
font-weight: 700;
color: #b91c1c;
background: #fef2f2;
border: 1px solid #fecaca;
padding: 0.08rem 0.48rem;
border-radius: 999px;
margin-top: 0.2rem;
}
.bt-tr-right {
text-align: right;
flex-shrink: 0;
}
.bt-tr-stars {
font-size: 0.95rem;
letter-spacing: 1px;
line-height: 1;
}
.bt-tr-star-on {
color: #f59e0b;
}
.bt-tr-star-off {
color: #e5e7eb;
}
.bt-tr-date {
font-size: 0.7rem;
color: #9ca3af;
margin-top: 0.22rem;
}
.bt-tr-tool-pill {
display: inline-flex;
align-items: center;
align-self: flex-start;
font-family: 'Fira Code', monospace;
font-size: 0.68rem;
font-weight: 600;
color: #b91c1c;
background: #ffffff;
border: 1px solid #fecaca;
padding: 0.18rem 0.65rem;
border-radius: 8px;
margin-bottom: 0.65rem;
}
.bt-tr-comment {
font-size: 0.88rem;
color: #374151;
line-height: 1.62;
margin: 0;
}
@media (max-width: 960px) {
.bt-text-reviews-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.bt-text-reviews-grid {
grid-template-columns: 1fr;
}
}
.bt-reviews-page-section {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #fef3c7 100%);
padding: 4rem 0 5rem;
}
.bt-rev-bg-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 0;
}
.bt-rev-blob-purple {
width: 500px;
height: 500px;
background: rgba(220, 38, 38, 0.06);
top: -5%;
left: -5%;
}
.bt-rev-blob-amber {
width: 450px;
height: 450px;
background: rgba(245, 158, 11, 0.06);
bottom: 10%;
right: -5%;
}
.bt-rev-container {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
}
.bt-rev-hero {
text-align: center;
max-width: 820px;
margin: 0 auto;
}
.bt-rev-eyebrow-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.25rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
border: 1px solid rgba(220, 38, 38, 0.12);
box-shadow: 0 4px 18px rgba(220, 38, 38, 0.06);
margin-bottom: 1.5rem;
font-family: 'Fira Code', monospace;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #dc2626;
}
.bt-rev-main-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(2.25rem, 4.8vw, 3.75rem);
font-weight: 800;
color: #09090b;
line-height: 1.12;
letter-spacing: -0.025em;
margin: 0 0 1rem;
}
.bt-rev-grad-text {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 55%, #ef4444 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.bt-rev-subtitle {
font-size: 1.08rem;
color: #4b5563;
max-width: 640px;
margin: 0 auto;
line-height: 1.6;
}
.bt-rev-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 2.5rem;
}
.bt-rev-stat-card {
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(14px);
border: 1px solid rgba(220, 38, 38, 0.1);
border-radius: 16px;
padding: 1.35rem 1.25rem;
text-align: center;
box-shadow: 0 8px 26px rgba(15, 23, 42, 0.035);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bt-rev-stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(220, 38, 38, 0.09);
}
.bt-rev-stat-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.75rem;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.bt-rev-stat-val {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.55rem;
font-weight: 800;
color: #09090b;
line-height: 1.2;
}
.bt-rev-stat-lbl {
font-family: 'Fira Code', monospace;
font-size: 0.65rem;
color: #6b7280;
letter-spacing: 0.06em;
margin-top: 0.2rem;
}
.bt-rev-dist-card {
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(14px);
border: 1px solid rgba(220, 38, 38, 0.1);
border-radius: 16px;
padding: 1.5rem 1.75rem;
margin: 2rem auto 0;
max-width: 768px;
box-shadow: 0 8px 26px rgba(15, 23, 42, 0.035);
}
.bt-rev-dist-flex {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1.15rem 1.75rem;
}
.bt-rev-dist-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.bt-rev-dist-star-lbl {
display: flex;
align-items: center;
gap: 0.25rem;
font-family: 'Fira Code', monospace;
font-size: 0.85rem;
font-weight: 600;
color: #09090b;
}
.bt-rev-dist-track {
width: 120px;
height: 8px;
background: #e5e7eb;
border-radius: 999px;
overflow: hidden;
}
.bt-rev-dist-fill {
height: 100%;
background: linear-gradient(90deg, #facc15, #eab308);
border-radius: 999px;
}
.bt-rev-dist-pct {
font-family: 'Fira Code', monospace;
font-size: 0.75rem;
color: #6b7280;
width: 34px;
}
.bt-rev-filter-card {
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(14px);
border: 1px solid rgba(220, 38, 38, 0.1);
border-radius: 16px;
padding: 1rem 1.15rem;
margin-top: 2rem;
box-shadow: 0 8px 26px rgba(15, 23, 42, 0.035);
}
.bt-rev-filter-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.bt-rev-search-wrap {
position: relative;
flex: 1;
min-width: 240px;
max-width: 440px;
}
.bt-rev-search-ico {
position: absolute;
left: 0.85rem;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
pointer-events: none;
}
.bt-rev-search-input {
width: 100%;
padding: 0.65rem 1rem 0.65rem 2.4rem;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #e5e7eb;
border-radius: 12px;
font-size: 0.88rem;
color: #09090b;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bt-rev-search-input:focus {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.bt-rev-filter-controls {
display: flex;
align-items: center;
gap: 0.65rem;
flex-wrap: wrap;
}
.bt-rev-select {
padding: 0.62rem 0.95rem;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #e5e7eb;
border-radius: 12px;
font-size: 0.85rem;
color: #1f2937;
outline: none;
cursor: pointer;
max-width: 220px;
}
.bt-rev-select:focus {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.bt-rev-star-btns {
display: flex;
align-items: center;
gap: 0.35rem;
}
.bt-rev-star-filter-btn {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.52rem 0.75rem;
border-radius: 10px;
font-size: 0.82rem;
font-weight: 600;
background: rgba(255, 255, 255, 0.75);
color: #4b5563;
border: 1px solid #e5e7eb;
cursor: pointer;
transition: all 0.2s ease;
}
.bt-rev-star-filter-btn:hover {
border-color: #fca5a5;
color: #b91c1c;
}
.bt-rev-star-filter-btn.active {
background: #fee2e2;
color: #b91c1c;
border-color: #f87171;
}
.bt-rev-reset-btn {
padding: 0.52rem 0.85rem;
background: none;
border: none;
color: #dc2626;
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
}
.bt-rev-list-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin: 2.25rem 0 1.35rem;
}
.bt-rev-list-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.28rem;
font-weight: 800;
color: #09090b;
margin: 0;
}
.bt-rev-write-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.65rem 1.25rem;
border-radius: 12px;
background: linear-gradient(135deg, #dc2626, #ef4444);
color: #ffffff;
font-size: 0.86rem;
font-weight: 700;
border: none;
cursor: pointer;
box-shadow: 0 8px 20px rgba(220, 38, 38, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bt-rev-write-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(220, 38, 38, 0.34);
}
.bt-rev-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.45rem;
}
.bt-gv-card {
background: rgba(255, 255, 255, 0.86);
backdrop-filter: blur(14px);
border: 1px solid rgba(220, 38, 38, 0.11);
border-radius: 18px;
padding: 1.5rem;
display: flex;
flex-direction: column;
height: 100%;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.bt-gv-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 38px rgba(220, 38, 38, 0.11);
border-color: rgba(220, 38, 38, 0.26);
}
.bt-gv-top {
display: flex;
align-items: flex-start;
gap: 0.95rem;
margin-bottom: 0.9rem;
}
.bt-gv-avatar {
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, #fee2e2, #fee2e2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bt-gv-user-meta {
flex: 1;
min-width: 0;
}
.bt-gv-name-row {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.bt-gv-name {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.96rem;
font-weight: 800;
color: #09090b;
margin: 0;
}
.bt-gv-city {
font-weight: 500;
font-size: 0.78rem;
color: #6b7280;
}
.bt-gv-verified-badge {
display: inline-flex;
align-items: center;
gap: 0.2rem;
padding: 0.12rem 0.5rem;
border-radius: 999px;
background: #fee2e2;
color: #b91c1c;
font-family: 'Fira Code', monospace;
font-size: 0.62rem;
font-weight: 600;
}
.bt-gv-rating-date {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.3rem;
}
.bt-gv-stars {
display: inline-flex;
align-items: center;
gap: 2px;
}
.bt-gv-date {
display: inline-flex;
align-items: center;
gap: 0.28rem;
font-family: 'Fira Code', monospace;
font-size: 0.65rem;
color: #9ca3af;
}
.bt-gv-quote-ico {
color: #fecaca;
opacity: 0.7;
margin-bottom: 0.45rem;
line-height: 1;
}
.bt-gv-comment {
font-size: 0.9rem;
color: #4b5563;
line-height: 1.62;
margin: 0 0 1.15rem;
flex: 1;
}
.bt-gv-footer {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: auto;
padding-top: 0.95rem;
border-top: 1px solid #fee2e2;
}
.bt-gv-prod-thumb {
width: 40px;
height: 40px;
border-radius: 10px;
object-fit: cover;
cursor: pointer;
flex-shrink: 0;
border: 1px solid rgba(220, 38, 38, 0.14);
}
.bt-gv-prod-info {
flex: 1;
min-width: 0;
}
.bt-gv-prod-lbl {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.7rem;
color: #6b7280;
margin-bottom: 0.1rem;
}
.bt-gv-prod-link {
background: none;
border: none;
padding: 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.84rem;
font-weight: 700;
color: #dc2626;
cursor: pointer;
text-align: left;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.bt-gv-prod-link:hover {
color: #b91c1c;
text-decoration: underline;
}
.bt-gv-helpful-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.38rem 0.7rem;
border-radius: 8px;
font-size: 0.75rem;
font-weight: 600;
background: #f3f4f6;
color: #4b5563;
border: none;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.bt-gv-helpful-btn:hover {
background: #fee2e2;
color: #dc2626;
}
.bt-gv-helpful-btn.voted {
background: #fee2e2;
color: #b91c1c;
}
.bt-rev-empty-state {
grid-column: 1 / -1;
text-align: center;
padding: 3.5rem 1.5rem;
background: rgba(255, 255, 255, 0.8);
border-radius: 20px;
border: 1px dashed #fca5a5;
}
.bt-rev-empty-ico {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.bt-rev-empty-state h4 {
font-size: 1.2rem;
font-weight: 800;
color: #09090b;
margin: 0 0 0.35rem;
}
.bt-rev-empty-state p {
font-size: 0.9rem;
color: #6b7280;
margin: 0 0 1.15rem;
}
.bt-rev-wa-proof-wrap {
margin-top: 3.5rem;
padding-top: 2.75rem;
border-top: 1px solid rgba(220, 38, 38, 0.12);
}
.bt-rev-wa-proof-head {
text-align: center;
margin-bottom: 1.75rem;
}
.bt-rev-wa-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.55rem;
font-weight: 800;
color: #09090b;
margin: 0 0 0.35rem;
}
.bt-rev-wa-sub {
font-size: 0.92rem;
color: #6b7280;
margin: 0;
}
.bt-rev-trust-banner {
margin-top: 3.25rem;
border-radius: 24px;
padding: 2.5rem 2rem;
text-align: center;
background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(220, 38, 38, 0.05));
border: 1px solid rgba(220, 38, 38, 0.12);
}
.bt-rev-trust-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.45rem 1rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(8px);
font-family: 'Fira Code', monospace;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #dc2626;
margin-bottom: 1rem;
}
.bt-rev-trust-heading {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(1.45rem, 2.8vw, 1.95rem);
font-weight: 800;
color: #09090b;
margin: 0 0 1.75rem;
}
.bt-rev-trust-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
max-width: 820px;
margin: 0 auto;
}
.bt-rev-trust-ico {
width: 48px;
height: 48px;
border-radius: 14px;
background: linear-gradient(135deg, #f87171, #ef4444);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.75rem;
box-shadow: 0 8px 18px rgba(220, 38, 38, 0.25);
}
.bt-rev-trust-col h4 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1rem;
font-weight: 800;
color: #09090b;
margin: 0 0 0.25rem;
}
.bt-rev-trust-col p {
font-size: 0.85rem;
color: #6b7280;
margin: 0;
}
@media (max-width: 980px) {
.bt-rev-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.bt-rev-cards-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.bt-rev-cards-grid,
.bt-rev-trust-grid {
grid-template-columns: 1fr;
}
.bt-rev-search-wrap {
max-width: 100%;
}
}
.bt-scroll-progress-bar {
position: fixed;
top: 0;
left: 0;
height: 3.5px;
width: 100%;
transform: scaleX(0);
transform-origin: left center;
background: linear-gradient(90deg, #dc2626 0%, #ef4444 50%, #ef4444 100%);
z-index: 10000;
box-shadow: 0 0 12px rgba(239, 68, 68, 0.65);
will-change: transform;
pointer-events: none;
}
.navbar {
transition: box-shadow 0.3s ease, background-color 0.3s ease, padding 0.3s ease;
}
.navbar.is-scrolled {
box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08), 0 2px 10px rgba(220, 38, 38, 0.06);
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(18px);
}
@keyframes btCardCascadeIn {
0% {
opacity: 0;
transform: translateY(32px) scale(0.96);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.bt-anim-reveal {
opacity: 0;
transform: translateY(30px) scale(0.965);
transition:
opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1) var(--anim-delay, 0ms),
transform 0.62s cubic-bezier(0.22, 1, 0.36, 1) var(--anim-delay, 0ms);
will-change: opacity, transform;
}
.bt-anim-reveal.is-revealed {
opacity: 1;
transform: translateY(0) scale(1);
}
@keyframes btSecPageEnter {
0% {
opacity: 0;
transform: translateY(22px) scale(0.99);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.bt-sec-page-enter {
animation: btSecPageEnter 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes btHeroSlideUp {
0% {
opacity: 0;
transform: translateY(32px);
filter: blur(4px);
}
100% {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
.bt-hero-left > * {
animation: btHeroSlideUp 0.78s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.bt-hero-left > *:nth-child(1) { animation-delay: 0.05s; }
.bt-hero-left > *:nth-child(2) { animation-delay: 0.14s; }
.bt-hero-left > *:nth-child(3) { animation-delay: 0.22s; }
.bt-hero-left > *:nth-child(4) { animation-delay: 0.30s; }
.bt-hero-left > *:nth-child(5) { animation-delay: 0.38s; }
.bt-hero-left > *:nth-child(6) { animation-delay: 0.46s; }
.bt-hero-left > *:nth-child(7) { animation-delay: 0.54s; }
@keyframes btHeroRightEnter {
0% {
opacity: 0;
transform: translateY(36px) scale(0.94);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes btSpotlightGentleFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.bt-hero-right-wrap {
animation: btHeroRightEnter 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}
.google-ultra-card {
animation: btSpotlightGentleFloat 5.5s ease-in-out infinite;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.bt-corner-badge.bt-cb-tl {
animation: btFloatBadgeTop 4.4s ease-in-out infinite;
}
.bt-corner-badge.bt-cb-tr {
animation: btFloatBadgeBottom 5s ease-in-out infinite;
}
.bt-corner-badge.bt-cb-bl {
animation: btFloatBadgeBottom 4.6s ease-in-out infinite 0.6s;
}
.bt-corner-badge.bt-cb-br {
animation: btFloatBadgeTop 5.2s ease-in-out infinite 0.9s;
}
@keyframes btFloatBadgeTop {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(1.5deg); }
}
@keyframes btFloatBadgeBottom {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(10px) rotate(-1.5deg); }
}
.bt-fmc-tr {
animation: btFloatBadgeTop 4.2s ease-in-out infinite;
}
.bt-fmc-bl {
animation: btFloatBadgeBottom 4.8s ease-in-out infinite;
}
@keyframes btGradientFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.bt-grad-word,
.bt-headline-gradient,
.discover-highlight,
.bt-cs-grad,
.bt-rev-grad-text,
.brand-title-purple {
background-size: 200% 200%;
animation: btGradientFlow 4.5s ease infinite;
}
.bt-ax-card,
.bt-gv-card,
.bt-rev-stat-card,
.bt-footer-why-item {
position: relative;
overflow: hidden;
transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.36s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}
.bt-ax-card:hover {
transform: translateY(-9px) scale(1.012);
box-shadow: 0 24px 48px rgba(220, 38, 38, 0.18), 0 8px 20px rgba(15, 23, 42, 0.08);
}
.bt-ax-card .bt-ax-img {
transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.bt-ax-card:hover .bt-ax-img {
transform: scale(1.07);
}
.bt-rev-stat-card:hover,
.bt-footer-why-item:hover {
transform: translateY(-6px);
}
.bt-ax-card::after,
.bt-gv-card::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
360px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
rgba(239, 68, 68, 0.11),
transparent 65%
);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 1;
}
.bt-ax-card:hover::after,
.bt-gv-card:hover::after {
opacity: 1;
}
@keyframes btBtnShineSweep {
0% { left: -120%; }
35%, 100% { left: 140%; }
}
.bt-btn-explore,
.bt-btn-shimmer,
.bt-ax-buy-btn,
.bt-sv-proceed-btn,
.chk-wizard-primary-btn,
.bt-rev-write-btn,
.nav-wa-btn,
.navbar-wa-cta {
position: relative;
overflow: hidden;
}
.bt-btn-explore::before,
.bt-ax-buy-btn::before,
.bt-sv-proceed-btn::before,
.chk-wizard-primary-btn::before,
.bt-rev-write-btn::before,
.nav-wa-btn::before,
.navbar-wa-cta::before {
content: '';
position: absolute;
top: 0;
left: -120%;
width: 55%;
height: 100%;
background: linear-gradient(
115deg,
transparent 0%,
rgba(255, 255, 255, 0.32) 50%,
transparent 100%
);
transform: skewX(-20deg);
animation: btBtnShineSweep 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes btGrowBarWidth {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.bt-rev-dist-fill {
transform-origin: left center;
animation: btGrowBarWidth 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes btWaRadarRing {
0% {
transform: scale(1);
opacity: 0.75;
}
100% {
transform: scale(1.75);
opacity: 0;
}
}
@keyframes btWaFloatPulse {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-5px) scale(1.04); }
}
.floating-wa {
animation: btWaFloatPulse 3.2s ease-in-out infinite;
}
.floating-wa::before,
.whatsapp-float::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2.5px solid #dc2626;
animation: btWaRadarRing 2.1s cubic-bezier(0.22, 1, 0.36, 1) infinite;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.bt-anim-reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
#our-team,
#faq,
#bt-ready-cta-section,
.bt-dark-footer {
content-visibility: auto;
contain-intrinsic-size: auto 650px;
}
.mobile-menu-toggle-btn {
display: none;
width: 40px;
height: 40px;
border-radius: 11px;
background: #fef2f2;
border: 1.5px solid #fecaca;
color: #b91c1c;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: all 0.2s ease;
}
.mobile-menu-toggle-btn .menu-ico-close {
display: none;
}
.mobile-menu-toggle-btn.open {
background: #b91c1c;
border-color: #b91c1c;
color: #ffffff;
}
.mobile-menu-toggle-btn.open .menu-ico-open {
display: none;
}
.mobile-menu-toggle-btn.open .menu-ico-close {
display: block;
}
.mobile-nav-drawer {
display: none;
background: #ffffff;
border-top: 1px solid rgba(220, 38, 38, 0.12);
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}
.mobile-nav-drawer.open {
display: block;
animation: btSecPageEnter 0.25s ease both;
}
.mobile-nav-drawer-inner {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.85rem 1.15rem 1.1rem;
}
.mobile-drawer-link {
display: flex !important;
align-items: center;
gap: 0.55rem;
padding: 0.68rem 0.9rem !important;
border-radius: 10px;
font-size: 0.94rem !important;
font-weight: 700 !important;
color: #1f2937;
background: #f9fafb;
}
.mobile-drawer-link.active {
background: #fee2e2;
color: #b91c1c !important;
}
.mobile-drawer-link.active::after {
display: none !important;
}
.mobile-drawer-btns {
display: flex;
align-items: center;
gap: 0.6rem;
margin-top: 0.45rem;
}
@media (max-width: 992px) {
.navbar-inner {
height: auto !important;
flex-wrap: wrap;
padding: 0.55rem 0 0.45rem;
gap: 0.45rem 0.4rem;
}
.brand-logo {
order: 1;
gap: 0.45rem;
min-width: 0;
flex-shrink: 1;
}
.brand-icon-box {
width: 36px;
height: 36px;
border-radius: 9px;
}
.brand-title {
font-size: 1.12rem;
white-space: nowrap;
}
.brand-sub {
display: none;
}
.nav-actions {
order: 2;
gap: 0.38rem;
margin-left: auto;
flex-shrink: 0;
}
.icon-btn {
width: 36px;
height: 36px;
border-radius: 9px;
font-size: 0.9rem;
}
.mobile-menu-toggle-btn {
display: inline-flex;
width: 36px;
height: 36px;
border-radius: 9px;
}
.nav-wa-btn {
padding: 0.44rem 0.68rem;
font-size: 0.74rem;
border-radius: 9px;
gap: 0.3rem;
white-space: nowrap;
}
.nav-wa-btn svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.nav-links {
display: none !important;
}
.bt-hero-section {
padding: 2.25rem 0 3rem;
min-height: auto;
overflow-x: hidden;
}
.hero-grid,
.bt-hero-grid {
grid-template-columns: minmax(0, 1fr) !important;
gap: 2rem;
width: 100%;
max-width: 100%;
}
.hero-left-col,
.bt-hero-left,
.bt-hero-right-wrap,
.bt-hero-float-box {
min-width: 0;
max-width: 100%;
width: 100%;
}
.bt-mono-pill {
padding: 0.38rem 0.8rem;
margin-bottom: 1rem;
max-width: 100%;
}
.bt-mono-text {
font-size: 0.58rem;
letter-spacing: 0.1em;
white-space: normal;
}
.bt-hero-headline {
font-size: clamp(1.95rem, 8vw, 2.65rem);
line-height: 1.16;
margin-bottom: 1.1rem;
word-break: break-word;
}
.bt-headline-gradient {
color: #f87171 !important;
-webkit-text-fill-color: #f87171 !important;
background: none !important;
text-shadow: 0 0 24px rgba(248, 113, 113, 0.42);
filter: none;
}
.gu-ai-text {
color: #f87171 !important;
-webkit-text-fill-color: #f87171 !important;
background: none !important;
}
.bt-rev-grad-text,
.discover-highlight {
color: #dc2626 !important;
-webkit-text-fill-color: #dc2626 !important;
background: none !important;
}
.bt-hero-desc {
font-size: 0.94rem;
line-height: 1.62;
max-width: 100%;
margin-bottom: 1.5rem;
padding-right: 0.25rem;
}
.bt-hero-cta-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.65rem;
width: 100%;
margin-bottom: 1.75rem;
}
.bt-btn-shimmer,
.bt-btn-glass {
width: 100%;
justify-content: center;
padding: 0.82rem 0.75rem;
font-size: 0.84rem;
white-space: nowrap;
}
.bt-inline-stats {
gap: 0.75rem;
justify-content: space-between;
width: 100%;
}
.bt-stat-val {
font-size: 1.05rem;
}
.bt-stat-lbl {
font-size: 0.68rem;
}
.google-ultra-card {
padding: 1.05rem;
border-radius: 20px;
max-width: 100%;
box-sizing: border-box;
}
.gu-main-title {
font-size: 1.35rem;
}
.gu-banner-title {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.bt-hero-cta-row {
grid-template-columns: 1fr;
}
.gu-bottom-split {
grid-template-columns: 1fr;
}
}
:root {
--brand-purple: #dc2626;
--brand-purple-light: #ef4444;
--accent-primary: #dc2626;
--accent-primary-hover: #b91c1c;
--accent-medium: #ef4444;
--border-highlight: #dc2626;
}
.bt-scroll-progress-bar {
background: linear-gradient(90deg, #dc2626 0%, #ef4444 55%, #94a3b8 100%) !important;
box-shadow: 0 0 12px rgba(239, 68, 68, 0.65) !important;
}
::-webkit-scrollbar-thumb {
background: #dc2626 !important;
}
.navbar {
border-bottom: 1px solid rgba(220, 38, 38, 0.16) !important;
}
.brand-icon-box {
background: #ffffff !important;
border: 1.5px solid #dc2626 !important;
box-shadow: 0 4px 18px rgba(220, 38, 38, 0.28) !important;
}
.brand-title .part-1 {
color: #09090b !important;
}
.brand-title .part-2 {
color: #dc2626 !important;
}
.nav-link:hover,
.nav-link.active {
color: #b91c1c !important;
}
.nav-link.active::after {
background: #dc2626 !important;
}
.mobile-menu-toggle-btn {
background: #fef2f2 !important;
border-color: #fecaca !important;
color: #b91c1c !important;
}
.mobile-menu-toggle-btn.open {
background: #dc2626 !important;
border-color: #dc2626 !important;
color: #ffffff !important;
}
.mobile-drawer-link.active {
background: #fee2e2 !important;
color: #b91c1c !important;
}
.bt-hero-section {
background:
radial-gradient(circle at 18% 18%, rgba(239, 68, 68, 0.14), transparent 36%),
radial-gradient(circle at 82% 78%, rgba(148, 163, 184, 0.08), transparent 32%),
radial-gradient(circle at 50% 50%, rgba(220, 38, 38, 0.06), transparent 44%),
linear-gradient(135deg, #09090b 0%, #111113 52%, #050507 100%) !important;
border-bottom: 1px solid rgba(239, 68, 68, 0.2) !important;
}
.bt-hero-bg-grid {
background-image:
linear-gradient(rgba(239, 68, 68, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(239, 68, 68, 0.04) 1px, transparent 1px) !important;
}
.bt-hero-orb-1 {
background: radial-gradient(ellipse, rgba(239, 68, 68, 0.14), transparent 65%) !important;
}
.bt-hero-orb-2 {
background: radial-gradient(ellipse, rgba(226, 232, 240, 0.07), transparent 65%) !important;
}
.bt-hero-ring-1 {
border-color: rgba(239, 68, 68, 0.08) !important;
}
.bt-ring-dot-top {
background: #f87171 !important;
box-shadow: 0 0 14px #ef4444 !important;
}
.bt-mono-pill {
background: rgba(220, 38, 38, 0.14) !important;
border: 1px solid rgba(248, 113, 113, 0.32) !important;
}
.bt-pulse-ping,
.bt-pulse-dot {
background: #f87171 !important;
}
.bt-mono-text {
color: #fca5a5 !important;
}
.bt-headline-gradient {
color: #f87171 !important;
background: linear-gradient(90deg, #f87171, #ef4444, #e2e8f0, #ef4444, #f87171) !important;
background-size: 300% 100% !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
filter: drop-shadow(0 2px 16px rgba(239, 68, 68, 0.32)) !important;
}
@media (max-width: 992px) {
.bt-headline-gradient {
color: #f87171 !important;
-webkit-text-fill-color: #f87171 !important;
background: none !important;
text-shadow: 0 0 24px rgba(248, 113, 113, 0.38) !important;
}
}
.bt-hero-divider {
background: linear-gradient(90deg, transparent, rgba(248, 113, 113, 0.5), transparent) !important;
}
.bt-btn-shimmer {
background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
box-shadow: 0 0 45px rgba(220, 38, 38, 0.42), 0 0 90px rgba(220, 38, 38, 0.15) !important;
}
.bt-btn-shimmer:hover {
box-shadow: 0 0 60px rgba(239, 68, 68, 0.58), 0 0 100px rgba(239, 68, 68, 0.25) !important;
}
.bt-btn-glass {
border-color: rgba(248, 113, 113, 0.3) !important;
}
.bt-btn-glass:hover {
border-color: rgba(248, 113, 113, 0.55) !important;
}
.google-ultra-card {
background: radial-gradient(ellipse at 30% 20%, rgba(239, 68, 68, 0.2), transparent 65%), rgba(9, 9, 11, 0.88) !important;
border-color: rgba(239, 68, 68, 0.34) !important;
box-shadow: 0 36px 80px -12px rgba(0, 0, 0, 0.7), 0 0 42px rgba(220, 38, 38, 0.22) !important;
}
.gu-section-card {
background: rgba(18, 18, 21, 0.88) !important;
border-color: rgba(239, 68, 68, 0.26) !important;
}
.gu-section-card.gu-red-accent,
.gu-bottom-split .gu-section-card {
border-bottom-color: #ef4444 !important;
}
.gu-banner-bar {
background: rgba(24, 24, 27, 0.94) !important;
border-bottom-color: rgba(239, 68, 68, 0.24) !important;
}
.gu-badge-red {
background: linear-gradient(145deg, #dc2626, #b91c1c) !important;
}
.gu-badge-black {
background: linear-gradient(145deg, #09090b, #991b1b) !important;
}
.gu-banner-title span {
color: #f87171 !important;
}
.gu-price-box {
background: linear-gradient(145deg, #141417, #09090b) !important;
border-color: #ef4444 !important;
box-shadow: 0 10px 28px rgba(220, 38, 38, 0.32) !important;
}
.bt-marquee-bar,
.ticker-wrap {
background: #09090b !important;
border-color: rgba(239, 68, 68, 0.16) !important;
}
.ticker-label-box {
background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
}
.bt-promise-sec {
background: linear-gradient(180deg, #09090b 0%, #111113 50%, #09090b 100%) !important;
}
.bt-promise-eyebrow-line,
.bt-promise-bar-fill {
background: linear-gradient(90deg, #dc2626, #f87171) !important;
}
.bt-promise-eyebrow-txt,
.bt-promise-pct {
color: #f87171 !important;
}
.tools-discover-section {
background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #f8fafc 100%) !important;
}
.discover-badge {
border-color: rgba(220, 38, 38, 0.22) !important;
color: #b91c1c !important;
}
.discover-highlight,
.bt-rev-grad-text {
background: linear-gradient(90deg, #dc2626, #ef4444, #b91c1c) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
@media (max-width: 992px) {
.discover-highlight,
.bt-rev-grad-text {
color: #dc2626 !important;
-webkit-text-fill-color: #dc2626 !important;
background: none !important;
}
}
.cat-tab {
background: #fef2f2 !important;
color: #b91c1c !important;
border: 1px solid rgba(220, 38, 38, 0.16) !important;
}
.cat-tab:hover {
background: #fee2e2 !important;
}
.cat-tab.active,
.bt-ax-view-btn,
.bt-sv-proceed-btn,
.chk-wizard-primary-btn,
.bt-rev-write-btn {
background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
color: #ffffff !important;
border-color: transparent !important;
box-shadow: 0 8px 22px rgba(220, 38, 38, 0.28) !important;
}
.bt-ax-bottom-bar {
background: linear-gradient(90deg, #dc2626, #ef4444, #94a3b8) !important;
}
.bt-ax-cat-pill {
background: #fef2f2 !important;
color: #b91c1c !important;
border-color: rgba(220, 38, 38, 0.18) !important;
}
.bt-ax-card:hover {
border-color: rgba(220, 38, 38, 0.35) !important;
box-shadow: 0 20px 42px rgba(220, 38, 38, 0.12) !important;
}
.bt-ax-card:hover .bt-ax-title {
color: #b91c1c !important;
}
.bt-reviews-page-section {
background: linear-gradient(135deg, #ffffff 0%, #ffffff 52%, #f8fafc 100%) !important;
}
.bt-rev-eyebrow-pill,
.bt-rev-trust-pill {
color: #b91c1c !important;
border-color: rgba(220, 38, 38, 0.18) !important;
}
.bt-gv-avatar {
background: linear-gradient(135deg, #fee2e2, #f1f5f9) !important;
}
.bt-gv-prod-link,
.bt-rev-reset-btn {
color: #b91c1c !important;
}
.bt-rev-star-filter-btn.active {
background: #fee2e2 !important;
color: #b91c1c !important;
border-color: #fca5a5 !important;
}
.chk-hero-banner {
background: linear-gradient(135deg, #09090b 0%, #18181b 52%, #7f1d1d 100%) !important;
border-color: rgba(239, 68, 68, 0.32) !important;
box-shadow: 0 20px 50px rgba(153, 27, 27, 0.25) !important;
}
.chk-eyebrow-pill {
background: rgba(239, 68, 68, 0.2) !important;
border-color: rgba(248, 113, 113, 0.45) !important;
color: #fecaca !important;
}
.chk-step-item.is-active .chk-step-circle {
background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.28) !important;
}
.pt-welcome-overlay {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(0, 0, 0, 0.62);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
display: none;
align-items: center;
justify-content: center;
padding: 1.25rem;
opacity: 0;
transition: opacity 0.28s ease;
}
.pt-welcome-overlay.is-open {
display: flex;
opacity: 1;
}
.pt-welcome-card {
width: 100%;
max-width: 475px;
background: #ffffff;
color: #09090b;
border-radius: 28px;
padding: 2rem 2rem 1.85rem;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.38);
animation: ptWelcomePopIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes ptWelcomePopIn {
0% {
opacity: 0;
transform: scale(0.92) translateY(16px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.pt-welcome-title {
font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
font-size: 1.42rem;
font-weight: 800;
color: #09090b;
margin: 0 0 1.05rem;
letter-spacing: -0.02em;
}
.pt-welcome-para {
font-size: 0.96rem;
line-height: 1.58;
color: #52525b;
margin: 0 0 1.05rem;
font-weight: 400;
}
.pt-welcome-check-row {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin: 0.25rem 0 1.2rem;
font-size: 0.88rem;
color: #6b7280;
cursor: pointer;
user-select: none;
}
.pt-welcome-check-row input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #dc2626;
cursor: pointer;
}
.pt-welcome-close-btn {
width: 100%;
padding: 0.92rem 1.5rem;
border-radius: 999px;
border: none;
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
color: #ffffff;
font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
font-size: 1rem;
font-weight: 800;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 10px 24px rgba(220, 38, 38, 0.28);
}
.pt-welcome-close-btn:hover {
background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(220, 38, 38, 0.36);
}
@media (max-width: 540px) {
.pt-welcome-card {
padding: 1.55rem 1.35rem 1.45rem;
border-radius: 24px;
}
.pt-welcome-title {
font-size: 1.26rem;
}
.pt-welcome-para {
font-size: 0.9rem;
margin-bottom: 0.9rem;
}
}

/* ==========================================================================
   PAK TOOLS BRANDED OPENING REVEAL ANIMATION & ENTRANCE CHOREOGRAPHY
   ========================================================================== */
.pt-site-intro-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background:
    radial-gradient(circle at 50% 38%, rgba(220, 38, 38, 0.36) 0%, rgba(153, 27, 27, 0.45) 45%, transparent 74%),
    linear-gradient(155deg, #09090b 0%, #111113 48%, #09090b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  will-change: opacity, transform;
  transition:
    opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.64s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.64s ease;
  animation: ptIntroAutoFallback 0.58s cubic-bezier(0.22, 1, 0.36, 1) 1.55s forwards;
}

.pt-intro-ambient-orb {
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 113, 113, 0.28) 0%, rgba(220, 38, 38, 0.08) 52%, transparent 74%);
  filter: blur(32px);
  animation: ptOrbBreath 1.2s ease-in-out infinite alternate;
  pointer-events: none;
}

.pt-intro-bg-crescent {
  position: absolute;
  font-size: 23rem;
  color: rgba(255, 255, 255, 0.035);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%) rotate(-12deg);
  pointer-events: none;
  user-select: none;
}

.pt-intro-rays {
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(248, 113, 113, 0.06) 30deg,
    transparent 60deg,
    rgba(255, 255, 255, 0.04) 120deg,
    transparent 160deg,
    rgba(248, 113, 113, 0.06) 240deg,
    transparent 300deg
  );
  animation: ptRaysSpin 12s linear infinite;
  pointer-events: none;
}

@keyframes ptRaysSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes ptOrbBreath {
  0% {
    transform: scale(0.88);
    opacity: 0.65;
  }
  100% {
    transform: scale(1.18);
    opacity: 1;
  }
}

.pt-site-intro-loader.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(1.06) translate3d(0, -34px, 0) !important;
}

@keyframes ptIntroAutoFallback {
  0% {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.06) translate3d(0, -34px, 0);
  }
}

.pt-intro-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem;
  animation: ptIntroContentPop 0.62s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ptIntroContentPop {
  0% {
    opacity: 0;
    transform: scale(0.82) translate3d(0, 24px, 0);
  }
  65% {
    opacity: 1;
    transform: scale(1.03) translate3d(0, -3px, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
  }
}

.pt-intro-pk-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.36rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #fee2e2;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-bottom: 1.35rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.pt-intro-pk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f87171;
  box-shadow: 0 0 10px #f87171;
}

/* Centerpiece Row: Waving Pakistan Flag + Pak Tools Crest */
.pt-intro-crest-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.15rem;
  margin-bottom: 1.25rem;
}

.pt-pk-flag-stage {
  position: relative;
  display: flex;
  align-items: stretch;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 28px rgba(239, 68, 68, 0.38));
}

.pt-pk-flagpole {
  width: 5px;
  height: 102px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fde047 0%, #eab308 50%, #a16207 100%);
  position: relative;
  z-index: 3;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.5);
}

.pt-pk-pole-top {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fef08a, #ca8a04);
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.8);
}

.pt-pk-flag-cloth {
  width: 132px;
  height: 88px;
  margin-top: 2px;
  border-radius: 3px 12px 12px 3px;
  overflow: hidden;
  display: flex;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  transform-origin: left center;
  animation: ptFlagWave3D 0.95s ease-in-out infinite alternate;
}

@keyframes ptFlagWave3D {
  0% {
    transform: perspective(420px) rotateY(-8deg) skewY(-2deg) scaleY(0.99);
  }
  50% {
    transform: perspective(420px) rotateY(6deg) skewY(1.5deg) scaleY(1.01);
  }
  100% {
    transform: perspective(420px) rotateY(-5deg) skewY(2.5deg) scaleY(0.99);
  }
}

.pt-pk-flag-white {
  width: 26%;
  height: 100%;
  background: linear-gradient(90deg, #f8fafc 0%, #ffffff 70%, #e2e8f0 100%);
  flex-shrink: 0;
}

.pt-pk-flag-green {
  width: 74%;
  height: 100%;
  background: linear-gradient(135deg, #991b1b 0%, #dc2626 52%, #7f1d1d 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pt-pk-crescent-svg {
  width: 76%;
  height: 76%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.pt-pk-wave-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.18) 38%,
    rgba(0, 0, 0, 0.16) 56%,
    rgba(255, 255, 255, 0.14) 74%,
    transparent 90%
  );
  background-size: 220% 100%;
  animation: ptFlagSheenMove 1.2s linear infinite;
  pointer-events: none;
}

@keyframes ptFlagSheenMove {
  0% { background-position: 200% 0; }
  100% { background-position: -40% 0; }
}

.pt-intro-crest-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(248, 113, 113, 0.14);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: #fde047;
  font-size: 0.85rem;
  box-shadow: 0 0 16px rgba(248, 113, 113, 0.3);
}

.pt-intro-logo-ring {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 24px;
  padding: 4px;
  background: linear-gradient(135deg, #ffffff 0%, #f87171 50%, #fde047 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 20px 50px rgba(220, 38, 38, 0.52),
    0 0 65px rgba(239, 68, 68, 0.35);
  animation: ptLogoRingPulse 0.9s ease-in-out infinite alternate;
}

@keyframes ptLogoRingPulse {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 16px 40px rgba(220, 38, 38, 0.38), 0 0 45px rgba(239, 68, 68, 0.25);
  }
  100% {
    transform: translate3d(0, -5px, 0) scale(1.05);
    box-shadow: 0 24px 58px rgba(220, 38, 38, 0.62), 0 0 76px rgba(248, 113, 113, 0.45);
  }
}

.pt-intro-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 20px;
  display: block;
  background: #ffffff;
}

.pt-intro-brand-name {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  margin-bottom: 0.35rem;
}

.pt-intro-pak {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 65%, #cbd5e1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.pt-intro-tools {
  margin-left: 0.28rem;
  background: linear-gradient(135deg, #f87171 0%, #ef4444 55%, #fde047 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.pt-intro-tagline {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #fecaca;
  margin-bottom: 1.25rem;
}

.pt-intro-bar-wrap {
  width: 245px;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.pt-intro-bar-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.pt-intro-bar-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 24%, #ef4444 25%, #f87171 80%, #fde047 100%);
  box-shadow: 0 0 16px rgba(248, 113, 113, 0.75);
  transform-origin: left center;
  animation: ptIntroBarSweep 1.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.pt-intro-bar-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fee2e2;
}

#ptIntroPctText {
  font-family: 'Fira Code', monospace;
  color: #fde047;
  font-weight: 800;
}

@keyframes ptIntroBarSweep {
  0% {
    transform: scaleX(0.08);
  }
  100% {
    transform: scaleX(1);
  }
}

/* Staggered Opening Entrance Choreography for Navbar & Hero Section */
@keyframes ptNavbarEntrance {
  0% {
    opacity: 0;
    transform: translate3d(0, -16px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ptHeroCascadeUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ptHeroCardEntrance {
  0% {
    opacity: 0;
    transform: translate3d(0, 26px, 0) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.navbar {
  animation: ptNavbarEntrance 0.52s cubic-bezier(0.22, 1, 0.36, 1) 1.22s both;
}

.bt-hero-left > .bt-trust-pill {
  animation: ptHeroCascadeUp 0.54s cubic-bezier(0.22, 1, 0.36, 1) 1.28s both;
}

.bt-hero-left > .bt-hero-h1 {
  animation: ptHeroCascadeUp 0.56s cubic-bezier(0.22, 1, 0.36, 1) 1.34s both;
}

.bt-hero-left > .bt-hero-divider {
  animation: ptHeroCascadeUp 0.52s cubic-bezier(0.22, 1, 0.36, 1) 1.39s both;
}

.bt-hero-left > .bt-hero-p {
  animation: ptHeroCascadeUp 0.56s cubic-bezier(0.22, 1, 0.36, 1) 1.44s both;
}

.bt-hero-left > .bt-cta-row {
  animation: ptHeroCascadeUp 0.56s cubic-bezier(0.22, 1, 0.36, 1) 1.49s both;
}

.bt-hero-left > .bt-inline-stats {
  animation: ptHeroCascadeUp 0.56s cubic-bezier(0.22, 1, 0.36, 1) 1.54s both;
}

.bt-hero-left > .bt-avatar-trust-row {
  animation: ptHeroCascadeUp 0.56s cubic-bezier(0.22, 1, 0.36, 1) 1.59s both;
}

.bt-hero-right-wrap {
  animation: ptHeroCardEntrance 0.64s cubic-bezier(0.16, 1, 0.3, 1) 1.36s both;
}

/* Below-the-fold Rendering & Scroll Acceleration */
#why-choose,
#bt-emerald-section,
#how-it-works,
#track-order,
#reviews,
#our-team,
#faq,
#bt-ready-cta-section,
.bt-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 650px;
}

@media (prefers-reduced-motion: reduce) {
  .pt-site-intro-loader {
    display: none !important;
  }
  .navbar,
  .bt-hero-left > *,
  .bt-hero-right-wrap {
    animation: none !important;
  }
}

/* Product Detail Page & Card Add-to-Cart Button Styles */
.bt-sv-cta-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.bt-sv-addcart-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.15rem;
  border-radius: 14px;
  border: 2px solid #dc2626;
  background: #fef2f2;
  color: #b91c1c;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.22s ease;
}

.bt-sv-addcart-btn:hover {
  background: #dc2626;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(220, 38, 38, 0.24);
}

.bt-ax-cart-sq {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1.5px solid rgba(220, 38, 38, 0.28);
  background: #fef2f2;
  color: #b91c1c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bt-ax-cart-sq:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25);
}

@media (max-width: 560px) {
  .bt-sv-cta-actions-grid {
    grid-template-columns: 1fr;
  }
}

.bt-gv-rating-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 6px;
  padding: 0.08rem 0.38rem;
  line-height: 1.2;
}

/* ==========================================
   Pak Tools Courses & Learning Section (/courses)
   ========================================== */
.pt-courses-section {
  padding: 3.5rem 0;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  border-top: 1px solid rgba(220, 38, 38, 0.12);
  border-bottom: 1px solid rgba(220, 38, 38, 0.12);
}

.pt-courses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.pt-course-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1.5px solid #fee2e2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 28px -8px rgba(15, 23, 42, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pt-course-card:hover {
  transform: translateY(-6px);
  border-color: #dc2626;
  box-shadow: 0 20px 42px -12px rgba(220, 38, 38, 0.18);
}

.pt-course-img-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #09090b;
  overflow: hidden;
  cursor: pointer;
}

.pt-course-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.pt-course-card:hover .pt-course-img-wrap img {
  transform: scale(1.05);
}

.pt-course-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.85);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.4);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.26rem 0.68rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.pt-course-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pt-course-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.74rem;
}

.pt-course-tag {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-weight: 700;
}

.pt-course-rating {
  color: #d97706;
  font-weight: 700;
}

.pt-course-title {
  font-size: 1.08rem;
  font-weight: 800;
  color: #09090b;
  margin: 0 0 0.45rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.pt-course-title:hover {
  color: #dc2626;
}

.pt-course-desc {
  font-size: 0.84rem;
  color: #475569;
  line-height: 1.55;
  margin: 0 0 1.15rem;
  flex: 1;
}

.pt-course-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid #e2e8f0;
}

.pt-course-price-box {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.pt-course-price {
  font-size: 1.22rem;
  font-weight: 900;
  color: #b91c1c;
}

.pt-course-old {
  font-size: 0.8rem;
  color: #94a3b8;
  text-decoration: line-through;
}

.pt-course-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.pt-course-cart-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1.5px solid #fecaca;
  background: #fef2f2;
  cursor: pointer;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.pt-course-cart-btn:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
}

.pt-course-buy-btn {
  padding: 0.56rem 1rem;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.24);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pt-course-buy-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.34);
}

@media (max-width: 960px) {
  .pt-courses-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .pt-courses-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PREMIUM FINTECH BANK & WALLET ACCOUNT NUMBER DISPLAY ON CHECKOUT
   ========================================================================== */
.bt-ev-bank-card {
  border: 2px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.05rem 1.15rem;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.22s ease;
}

.bt-ev-bank-card:hover {
  border-color: #fca5a5;
  box-shadow: 0 8px 24px -6px rgba(220, 38, 38, 0.12);
}

.bt-ev-bank-card.is-selected {
  border-color: #dc2626;
  background: linear-gradient(180deg, #fef2f2 0%, #ffffff 100%);
  box-shadow: 0 14px 34px -10px rgba(220, 38, 38, 0.22);
}

.bt-ev-bank-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.bt-ev-bank-logo-pill {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16);
}

.bt-ev-bank-info {
  flex: 1;
  min-width: 0;
}

.bt-ev-bank-name {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800;
  color: #09090b;
  font-size: 1.02rem;
  line-height: 1.25;
}

.bt-ev-bank-holder {
  font-size: 0.8rem;
  color: #475569;
  margin-top: 2px;
}

.bt-ev-bank-details {
  margin-top: 1rem;
  background: #ffffff;
  border: 1.5px solid #fecaca;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.bt-ev-holder-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.bt-ev-holder-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bt-ev-holder-lbl {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #64748b;
  text-transform: uppercase;
}

.bt-ev-holder-val {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 0.98rem;
  font-weight: 800;
  color: #09090b;
}

.bt-ev-verified-pill {
  font-size: 0.72rem;
  font-weight: 800;
  color: #b91c1c;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  padding: 0.24rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
}

.bt-ev-acc-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #09090b 0%, #18181b 100%);
  border: 1px solid rgba(248, 113, 113, 0.35);
  box-shadow: 0 10px 24px -8px rgba(9, 9, 11, 0.35);
}

.bt-ev-iban-tile {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1.5px solid #fca5a5;
  box-shadow: none;
}

.bt-ev-acc-meta {
  min-width: 0;
  flex: 1;
}

.bt-ev-acc-tile .bt-ev-acc-lbl {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fca5a5;
  margin-bottom: 0.25rem;
}

.bt-ev-iban-tile .bt-ev-acc-lbl {
  color: #b91c1c;
}

.bt-ev-acc-num {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-variant-numeric: tabular-nums;
  font-size: 1.32rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em;
  color: #ffffff !important;
  cursor: pointer;
  line-height: 1.2;
  word-break: break-all;
}

.bt-ev-acc-iban {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #09090b;
  cursor: pointer;
  line-height: 1.35;
  word-break: break-all;
}

.bt-ev-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(220, 38, 38, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.bt-ev-copy-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.45);
}

.bt-ev-copy-iban-btn {
  background: #ffffff;
  color: #b91c1c;
  border: 1.5px solid #dc2626;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.12);
}

.bt-ev-copy-iban-btn:hover {
  background: #dc2626;
  color: #ffffff;
}

.bt-ev-acc-note {
  font-size: 0.8rem;
  color: #334155;
  background: #f8fafc;
  border-left: 3px solid #dc2626;
  padding: 0.55rem 0.8rem;
  border-radius: 0 10px 10px 0;
  line-height: 1.45;
}

@media (max-width: 540px) {
  .bt-ev-acc-tile {
    flex-direction: column;
    align-items: stretch;
  }
  .bt-ev-copy-btn {
    width: 100%;
  }
}

/* ==========================================================================
   FULL MOBILE VIEW OPTIMIZATION SUITE (<= 900px, <= 768px, <= 640px, <= 480px)
   ========================================================================== */

/* 1. Touch Devices: Native Cursor & Zero Tap Delay */
@media (hover: none), (pointer: coarse) {
  *, *::before, *::after {
    cursor: auto !important;
    -webkit-tap-highlight-color: transparent;
  }
  a, button, input, select, textarea, label, [role="button"] {
    touch-action: manipulation;
  }
}

/* 2. Tablet & Mobile Catalog Layout (<= 900px) */
@media (max-width: 900px) {
  /* Hide duplicate vertical category box on mobile/tablet so products show right below pill tabs */
  .discover-sidebar {
    display: none !important;
  }
  .discover-main-layout,
  .discover-layout {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .discover-top-right {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 0.75rem !important;
  }
}

/* 3. Core Mobile View Optimization (<= 768px) */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Prevent iOS Safari / Mobile Chrome auto-zoom on input focus */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  select,
  textarea,
  .form-input,
  .form-select,
  .discover-search-input,
  .bt-rev-search-input,
  .bt-ev-input {
    font-size: 16px !important;
  }

  /* Sticky Navbar & Sleek Scrollable Quick-Navigation Pill Bar */
  .navbar-inner {
    padding: 0.55rem 0.85rem !important;
    gap: 0.45rem !important;
  }
  .brand-logo-wrap {
    width: 38px !important;
    height: 38px !important;
  }
  .brand-name {
    font-size: 1.05rem !important;
  }
  .brand-tagline {
    font-size: 0.62rem !important;
  }
  .navbar-actions {
    gap: 0.4rem !important;
  }
  .nav-wa-btn {
    padding: 0.42rem 0.72rem !important;
    font-size: 0.76rem !important;
  }
  .cart-trigger {
    padding: 0.42rem 0.65rem !important;
  }
  .nav-links {
    display: none !important;
  }

  /* Hero Section & Google AI Ultra Card */
  .hero-v2 {
    padding: 1.5rem 0 2.5rem !important;
    min-height: auto !important;
  }
  .hero-v2-grid {
    gap: 1.65rem !important;
  }
  .hero-title-v2 {
    font-size: clamp(1.75rem, 7vw, 2.35rem) !important;
    line-height: 1.16 !important;
    margin-bottom: 0.75rem !important;
  }
  .hero-desc-v2 {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    margin-bottom: 1.25rem !important;
  }
  .bt-hero-cta-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.65rem !important;
    width: 100% !important;
  }
  .btn-bt-emerald,
  .btn-bt-glass {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.78rem 0.9rem !important;
    font-size: 0.86rem !important;
  }
  .bt-inline-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
    padding: 0.85rem 0.65rem !important;
    width: 100% !important;
    margin-top: 1.25rem !important;
    text-align: center !important;
  }
  .bt-stat-sep {
    display: none !important;
  }
  .bt-stat-col {
    align-items: center !important;
  }
  .bt-stat-num {
    font-size: 1.15rem !important;
  }
  .bt-stat-lbl {
    font-size: 0.65rem !important;
  }
  .bt-float-mini-card,
  .bt-scroll-cue {
    display: none !important;
  }
  .google-ultra-card {
    padding: 1.25rem 1.1rem !important;
    border-radius: 20px !important;
  }
  .g-ultra-price {
    font-size: 1.6rem !important;
  }

  /* Our Team Section (Clean Mobile Stack) */
  .team-section {
    padding: 2.75rem 0 !important;
  }
  .curved-team-layout {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.25rem !important;
    margin-top: 1.5rem !important;
  }
  .curved-team-layout .center-col {
    order: 1 !important;
    margin: 0 0 0.5rem 0 !important;
  }
  .curved-team-layout .left-col {
    order: 2 !important;
    width: 100% !important;
    max-width: 360px !important;
  }
  .curved-team-layout .right-col {
    order: 3 !important;
    width: 100% !important;
    max-width: 360px !important;
  }
  .ring-outer {
    padding: 14px !important;
  }
  .ring-inner {
    padding: 10px !important;
  }
  .center-photo-bg {
    width: 185px !important;
    height: 185px !important;
  }
  .center-info {
    margin-top: 0.85rem !important;
  }
  .center-info h3 {
    font-size: 1.35rem !important;
  }
  .left-col .side-member,
  .right-col .side-member {
    flex-direction: row !important;
    justify-content: flex-start !important;
    text-align: left !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 0.85rem 1.1rem !important;
    width: 100% !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04) !important;
  }
  .left-col .side-member .side-avatar {
    order: -1 !important;
  }
  .side-avatar {
    width: 64px !important;
    height: 64px !important;
    flex-shrink: 0 !important;
  }

  /* Reviews, Stats & WhatsApp Carousel on Mobile */
  .bt-rev-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  .bt-rev-stat-card {
    padding: 1rem 0.75rem !important;
  }
  .bt-rev-stat-num {
    font-size: 1.55rem !important;
  }
  .bt-rev-trust-grid {
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
  }
  .wa-carousel-wrapper {
    padding: 0 0.25rem !important;
  }
  .wa-carousel-arrow.prev {
    left: 4px !important;
  }
  .wa-carousel-arrow.next {
    right: 4px !important;
  }
  .wa-screenshot-card {
    flex: 0 0 240px !important;
    width: 240px !important;
    height: 480px !important;
  }

  /* Product Detail Page & Payment Verification Modal */
  .bt-sv-container {
    padding: 1.25rem 0.95rem 2.5rem !important;
  }
  .bt-sv-title {
    font-size: 1.65rem !important;
  }
  .bt-sv-total-main {
    font-size: 1.7rem !important;
  }
  .bt-sv-desc-card {
    padding: 1.35rem 1.05rem !important;
  }
  .bt-ev-overlay {
    padding: 0.55rem !important;
    align-items: flex-end !important;
  }
  .bt-ev-modal {
    max-height: 92vh !important;
    border-radius: 22px 22px 16px 16px !important;
  }
  .bt-ev-header {
    padding: 1.1rem 1.15rem !important;
  }
  .bt-ev-body {
    padding: 1.1rem !important;
  }
  .bt-ev-acc-num {
    font-size: 1.08rem !important;
    word-break: break-all !important;
  }

  /* Full-Page Checkout Mobile Polish */
  .chk-page-container {
    padding: 1rem 0.85rem 2rem !important;
  }
  .chk-hero-banner {
    padding: 1.25rem 1.1rem !important;
    border-radius: 18px !important;
  }
  .chk-hero-title {
    font-size: 1.45rem !important;
  }
  .chk-stepper-pill {
    padding: 0.35rem 0.65rem !important;
    font-size: 0.72rem !important;
  }
  .chk-card {
    padding: 1.15rem 1rem !important;
    border-radius: 18px !important;
  }

  /* Admin Panel (/w-p/admin) Mobile Layout */
  .adm-topbar-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.65rem !important;
    padding: 0.75rem 1rem !important;
  }
  .adm-topbar-actions {
    width: 100% !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
  }
  .adm-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem !important;
  }
  .adm-kpi-card {
    padding: 0.85rem 0.9rem !important;
  }
  .adm-kpi-val {
    font-size: 1.35rem !important;
  }
  .adm-sidebar-card {
    padding: 0.75rem !important;
  }
  .adm-sidebar-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.4rem !important;
  }
  .adm-side-btn {
    padding: 0.52rem 0.6rem !important;
    font-size: 0.76rem !important;
  }
  .adm-card {
    padding: 1rem 0.9rem !important;
  }
  .adm-card form [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Floating WhatsApp Button, Popup & Toast Notifications */
  .floating-wa {
    bottom: 16px !important;
    right: 16px !important;
    width: 56px !important;
    height: 56px !important;
  }
  .floating-wa svg {
    width: 28px !important;
    height: 28px !important;
  }
  .floating-wa-popup {
    right: 12px !important;
    left: 12px !important;
    bottom: 82px !important;
    width: auto !important;
    max-width: 360px !important;
    margin-left: auto !important;
  }
  .toast-container {
    left: 12px !important;
    right: 12px !important;
    bottom: 16px !important;
  }
  .toast {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 4. Small Phones & Compact Screens (<= 540px & <= 480px) */
@media (max-width: 540px) {
  /* Track Order & Warranty Form 2-col inline grid collapse */
  #track-order form [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .discover-search-card {
    padding: 0.85rem !important;
    border-radius: 16px !important;
  }
  .category-tabs {
    gap: 0.4rem !important;
    padding-bottom: 0.35rem !important;
  }
  .category-tab {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.78rem !important;
  }
  .bt-ax-card-body {
    padding: 1rem !important;
  }
  .bt-ax-price-val {
    font-size: 1.35rem !important;
  }
}

@media (max-width: 480px) {
  /* Opening Pakistan Flag Loader Fit for Narrow Phones */
  .pt-intro-crest-row {
    gap: 0.55rem !important;
    transform: scale(0.9);
  }
  .pt-pk-flag-cloth {
    width: 108px !important;
    height: 72px !important;
  }
  .pt-pk-flag-pole {
    height: 98px !important;
  }
  .pt-intro-logo-ring {
    width: 74px !important;
    height: 74px !important;
  }
  .pt-intro-brand-name {
    font-size: 1.55rem !important;
  }
  .pt-intro-pk-pill {
    font-size: 0.6rem !important;
    padding: 0.3rem 0.65rem !important;
    letter-spacing: 0.08em !important;
  }
  .pt-intro-progress-wrap {
    width: min(230px, 78vw) !important;
  }

  /* Compact Navbar Top Row on <480px */
  .nav-wa-btn span {
    display: none !important;
  }
  .nav-wa-btn {
    padding: 0.45rem 0.55rem !important;
    border-radius: 10px !important;
  }
  .bt-hero-cta-row {
    grid-template-columns: 1fr !important;
  }
  .adm-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .adm-sidebar-nav {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   2-ROW x 3-COLUMN CONTINUOUS ROTATING TEXT REVIEWS CAROUSEL
   ========================================================================== */
.bt-txt-carousel-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 0.5rem;
}

.bt-rev-cards-grid.bt-rev-carousel-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 1.35rem !important;
  overflow-x: auto !important;
  scroll-behavior: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 0.5rem 0.25rem 0.85rem !important;
  align-items: stretch !important;
}

.bt-rev-cards-grid.bt-rev-carousel-track::-webkit-scrollbar {
  display: none !important;
}

.bt-gv-col {
  flex: 0 0 calc((100% - 2.7rem) / 3);
  width: calc((100% - 2.7rem) / 3);
  min-width: 310px;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.bt-gv-col .bt-gv-card {
  flex: 1 1 0;
  min-height: 245px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 980px) {
  .bt-gv-col {
    flex: 0 0 calc((100% - 1.35rem) / 2);
    width: calc((100% - 1.35rem) / 2);
    min-width: 280px;
  }
}

@media (max-width: 640px) {
  .bt-gv-col {
    flex: 0 0 88%;
    width: 88%;
    min-width: 265px;
    gap: 1rem;
  }
  .bt-gv-col .bt-gv-card {
    padding: 1.15rem !important;
    min-height: 220px;
  }
}

/* ==========================================================================
   FULL UNCROPPED 1:1 SQUARE PRODUCT POSTERS & LOGOS (DESKTOP + MOBILE)
   ========================================================================== */
.bt-ax-img-wrap,
.bt-sv-img-stage {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #09090b 0%, #18181b 100%) !important;
}

.bt-ax-img,
.bt-sv-main-img,
.chk-summary-thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: high-quality !important;
  transform: none !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  filter: contrast(1.03) saturate(1.04) !important;
}

.bt-ax-card:hover .bt-ax-img {
  transform: scale(1.03) !important;
}

.bt-ax-img-fade {
  display: none !important;
}

@media (max-width: 960px) {
  .bt-sv-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .bt-sv-sticky-box {
    position: static !important;
  }
  .bt-sv-left-col,
  .bt-sv-img-card,
  .bt-sv-img-stage {
    width: 100% !important;
    max-width: 440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ==========================================================================
   COMPACT HOME PAGE LAYOUT (SHORT & CLEAN '/' ROUTE)
   ========================================================================== */
#bt-promise-section {
  min-height: auto !important;
  padding: 3.2rem 0 !important;
}

body.is-home-route #reviews .bt-rev-stats-grid,
body.is-home-route #reviews .bt-rev-dist-card,
body.is-home-route #reviews .bt-rev-filter-card,
body.is-home-route #reviews .bt-rev-trust-banner,
body.is-home-route #catalog .bt-custom-solution-card {
  display: none !important;
}

body.is-home-route #catalog,
body.is-home-route #reviews,
body.is-home-route #our-team,
body.is-home-route #faq {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

#floatingWaPopup,
.floating-wa-popup,
.floating-wa-badge {
  display: none !important;
}

/* ==========================================================================
   1,000+ FREE COURSES HUB, SEARCH, CATEGORY PILLS & SIGNUP GATE (/courses)
   ========================================================================== */
.pt-cuser-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1.5px solid #fca5a5;
  border-radius: 16px;
  padding: 0.9rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  color: #09090b;
  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 50%, #fef2f2 100%);
  border: 2px solid #dc2626;
  border-radius: 18px;
  padding: 1rem 1.35rem;
  margin-bottom: 1.35rem;
  font-size: 0.92rem;
  color: #09090b;
  box-shadow: 0 10px 25px rgba(220, 38, 38, 0.12);
}

.pt-cuser-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 8px #dc2626;
  margin-right: 0.45rem;
}

.pt-courses-filter-box {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 1.2rem;
  margin-bottom: 1.85rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 50%, #ffffff 100%);
  border: 2px solid #fecaca;
  border-radius: 22px;
  padding: 1.35rem;
  margin-bottom: 2rem;
  box-shadow: 0 14px 36px rgba(220, 38, 38, 0.12);
}

.pt-courses-search-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.pt-courses-search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 250px;
}

.pt-courses-search-ico {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.05rem;
  pointer-events: none;
}

.pt-courses-search-input {
  width: 100%;
  padding: 0.82rem 1rem 0.82rem 2.75rem;
  border: 1.5px solid #cbd5e1;
  padding: 0.85rem 1rem 0.85rem 2.75rem;
  border: 2px solid #fecaca;
  border-radius: 14px;
  font-size: 0.92rem;
  font-size: 0.94rem;
  color: #09090b;
  background: #f8fafc;
  background: #ffffff;
  transition: all 0.2s ease;
}

.pt-courses-search-input:focus {
  outline: none;
  border-color: #dc2626;
  border-color: #dc2626;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.18);
}

.pt-courses-count-pill {
  background: #09090b;
  background: linear-gradient(135deg, #09090b 0%, #b91c1c 55%, #dc2626 100%);
  color: #ffffff;
  font-size: 0.82rem;
  font-size: 0.84rem;
  font-weight: 800;
  padding: 0.65rem 1.05rem;
  border-radius: 12px;
  padding: 0.72rem 1.15rem;
  border-radius: 14px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.28);
}

.pt-courses-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  gap: 0.55rem;
}

.pt-course-cat-pill {
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.48rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
  transition: all 0.2s ease;
}

.pt-course-cat-pill:hover {
  border-color: #dc2626;
  color: #b91c1c;
  background: #fef2f2;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}

.pt-course-cat-pill.active {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
.pt-colorful-course-card {
  border-width: 2px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.pt-colorful-course-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 42px rgba(220, 38, 38, 0.18) !important;
}

.pt-course-grad-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.35rem 1rem;
  min-height: 175px;
  padding: 1.45rem 1rem;
  min-height: 185px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.pt-course-orb {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.pt-course-orb-1 {
  width: 110px;
  height: 110px;
  top: -30px;
  right: -25px;
}

.pt-course-orb-2 {
  width: 85px;
  height: 85px;
  bottom: -25px;
  left: -20px;
}

.pt-course-banner-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  color: #ffffff;
  z-index: 1;
}

.pt-course-big-ico {
  font-size: 2.35rem;
  font-size: 2.5rem;
  line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
  background: rgba(255, 255, 255, 0.22);
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.pt-course-banner-topic {
  font-size: 0.98rem;
  font-weight: 800;
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.25;
  max-width: 92%;
  max-width: 94%;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.pt-course-banner-hours {
  font-size: 0.74rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.32);
  color: #fef2f2;
  padding: 0.24rem 0.65rem;
  font-weight: 800;
  background: rgba(15, 23, 42, 0.38);
  color: #ffffff;
  padding: 0.26rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.pt-rainbow-free-badge {
  background: linear-gradient(135deg, #facc15 0%, #f97316 50%, #ef4444 100%) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
}

.pt-course-num-tag {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  left: auto;
  background: rgba(15, 23, 42, 0.75);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.22rem 0.6rem;
  border-radius: 8px;
  backdrop-filter: blur(4px);
}

.pt-course-old-strike {
  text-decoration: line-through;
  background: #fee2e2;
  color: #dc2626;
  font-size: 0.84rem;
  font-weight: 900;
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  white-space: nowrap;
}

.pt-course-zero-price {
  color: #dc2626;
  font-size: 1.32rem;
  font-weight: 900;
  white-space: nowrap;
}

.pt-course-free-chip {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid #fca5a5;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.3);
  white-space: nowrap;
}

.pt-colorful-claim-btn {
  border: none !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  padding: 0.6rem 1.05rem !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16) !important;
  transition: transform 0.18s ease, filter 0.18s ease !important;
}

.pt-colorful-claim-btn:hover {
  transform: scale(1.03) !important;
  filter: brightness(1.08) !important;
}

.pt-course-real-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 2 !important;
  display: block !important;
  transition: transform 0.35s ease !important;
}

.pt-colorful-course-card:hover .pt-course-real-img {
  transform: scale(1.05) !important;
}

.pt-course-img-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.25) 0%, rgba(15, 23, 42, 0.05) 45%, rgba(15, 23, 42, 0.65) 100%);
  z-index: 3;
  pointer-events: none;
}

.pt-course-hours-floating {
  position: absolute !important;
  bottom: 0.65rem !important;
  left: 0.75rem !important;
  z-index: 4 !important;
  background: rgba(15, 23, 42, 0.78) !important;
  backdrop-filter: blur(6px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.pt-rainbow-free-badge,
.pt-course-num-tag {
  z-index: 4 !important;
}