/* OPSI 3: Fire Red - Vibrant & Dynamic */

:root {

    --primary: #ff4444;      /* Fire Red */

    --secondary: #D4AF37;    /* Antique Brass */

    --accent: #FFB6C1;       /* Light Pink */

    --tertiary: #A0522D;     /* Sienna */

    --neutral: #8B7D6B;      /* Taupe */

    --dark: #4C1C1F;         /* Dark Wine */

    --light: #F8F8FF;        /* Ghost White */

    

    /* Warna tambahan */

    --danger: #dc2626;

    --info: #2563eb;

    --warning: #f59e0b;

    --success: #10b981;

   

    /* RGB Values */

    --primary-rgb: 255, 68, 68;

    --secondary-rgb: 212, 175, 55;

    --accent-rgb: 255, 182, 193;

    --tertiary-rgb: 160, 82, 45;

    --neutral-rgb: 139, 125, 107;

    --dark-rgb: 76, 28, 31;

    --light-rgb: 248, 248, 255;



    --danger-rgb: 220, 38, 38;

    --info-rgb: 37, 99, 235;

    --warning-rgb: 245, 158, 11;

    --success-rgb: 16, 185, 129;



    /* Gradients */

    --primary-gradient: linear-gradient(135deg, #ff4444, #ff6b6b);

    --secondary-gradient: linear-gradient(135deg, #D4AF37, #E0C55B);

    --accent-gradient: linear-gradient(135deg, #FFB6C1, #FFC0CB);

    --tertiary-gradient: linear-gradient(135deg, #A0522D, #BC6C42);

    --neutral-gradient: linear-gradient(135deg, #8B7D6B, #A0927D);

    --dark-gradient: linear-gradient(135deg, #4C1C1F, #722F37);

    --card-gradient: linear-gradient(135deg, rgba(255, 68, 68, 0.95), rgba(76, 28, 31, 0.95));

    

    --danger-gradient: linear-gradient(135deg, #dc2626, #991b1b);

    --info-gradient: linear-gradient(135deg, #2563eb, #1d4ed8);

    

    --card-padding: 0.5rem;

    --card-radius: 1rem;

    

    --primary-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);

    --secondary-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

    --accent-shadow: 0 5px 15px rgba(var(--accent-rgb), 0.3);

    --card-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

    

    --hover-lift: translateY(-5px);

    

    --heading-line-height: 1.2;

    --body-line-height: 1.6;

    

    --text-primary: #ffffff;

    --text-secondary: rgba(255, 255, 255, 0.8);

    --text-muted: rgba(255, 255, 255, 0.6);

    --text-subtle: rgba(255, 255, 255, 0.5);

    --text-white: #FFFFFF;

    --text-red: #DC2626;

    

    --border-thin: rgba(229, 231, 235, 0.5);

    --border-medium: rgba(229, 231, 235, 0.8);

    --border-accent-light: rgba(var(--accent-rgb), 0.3);

    --border-accent-medium: rgba(var(--accent-rgb), 0.5);

    

    --bg-primary-light: rgba(var(--primary-rgb), 0.1);

    --bg-primary-medium: rgba(var(--primary-rgb), 0.2);

    --bg-primary-dark: rgba(var(--primary-rgb), 0.3);

    --bg-dark-light: rgba(var(--dark-rgb), 0.1);

    --bg-dark-medium: rgba(var(--dark-rgb), 0.2);

    --bg-dark-dark: rgba(var(--dark-rgb), 0.3);

    --bg-accent-light: rgba(var(--accent-rgb), 0.1);

    --bg-accent-medium: rgba(var(--accent-rgb), 0.2);

    --bg-accent-dark: rgba(var(--accent-rgb), 0.3);

    --bg-secondary-light: rgba(var(--secondary-rgb), 0.8);

    --bg-secondary-medium: rgba(var(--secondary-rgb), 0.9);

    --bg-secondary-dark: rgba(var(--secondary-rgb), 1);

}

/* Improved typography */

h1, h2, h3, h4, h5, h6 {

    font-family: 'Plus Jakarta Sans', sans-serif;

    line-height: var(--heading-line-height);

}



/* General Styles */

body {

    font-family: 'Plus Jakarta Sans', sans-serif;

    background-color: #272627;

    color: var(--text-primary);

    background-image: url("data:image/svg+xml,%3Csvg width='32' height='64' viewBox='0 0 32 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 28h20V16h-4v8H4V4h28v28h-4V8H8v12h4v-8h12v20H0v-4zm12 8h20v4H16v24H0v-4h12V36zm16 12h-4v12h8v4H20V44h12v12h-4v-8zM0 36h8v20H0v-4h4V40H0v-4z' fill='rgba(var(--accent-rgb), 0.04)' fill-opacity='0.04' fill-rule='evenodd'/%3E%3C/svg%3E");

    background-attachment: fixed;

}

/* Button Umum */

.button {

    padding: 0.5rem 1rem;

    border-radius: 0.5rem;

    font-weight: bold;

    cursor: pointer;

    transition: all 0.3s ease;

    text-align: center;

}



/* Button Primary */

.button-primary {

    background-color: var(--primary);

    color: var(--text-primary);

    border: 2px solid var(--primary);

}



.button-primary:hover {

    transform: var(--hover-lift);

    background-color: var(--primary-gradient);

    border-color: var(--primary-gradient);

}



/* Button Secondary */

.button-secondary {

    background-color: var(--secondary);

    color: var(--text-primary);

    border: 2px solid var(--secondary);

}



.button-secondary:hover {

    transform: var(--hover-lift);

    background-color: var(--secondary-gradient);

    border-color: var(--secondary-gradient);

}



/* Button Danger (Merah) */

.button-danger {

    background-color: var(--danger);

    color: var(--text-primary);

    border: 2px solid var(--danger);

}



.button-danger:hover {

    transform: var(--hover-lift);

    background-color: var(--danger-gradient);

    border-color: var(--danger-gradient);

}



/* Button Info (Biru) */

.button-info {

    background-color: var(--info);

    color: var(--text-primary);

    border: 2px solid var(--info);

}



.button-info:hover {

    transform: var(--hover-lift);

    background-color: var(--info-gradient);

    border-color: var(--info-gradient);

}



/* Button Dark */

.button-dark {

    background-color: var(--dark);

    color: var(--text-primary);

    border: 2px solid var(--dark);

}



.button-dark:hover {

    transform: var(--hover-lift);

    background-color: var(--dark-gradient);

    border-color: var(--dark-gradient);

}



/* Button Light */

.button-light {

    background-color: var(--light);

    color: var(--text-primary);

    border: 2px solid var(--light);

}



.button-light:hover {

    transform: var(--hover-lift);

    background-color: var(--light-gradient);

    border-color: var(--light-gradient);

}



/* Button Warning (Peringatan) */

.button-warning {

    background-color: var(--warning);

    color: var(--text-primary);

    border: 2px solid var(--warning);

}



.button-warning:hover {

    transform: var(--hover-lift);

    background-color: var(--warning-gradient);

    border-color: var(--warning-gradient);

}



/* Button Success (Keberhasilan) */

.button-success {

    background-color: var(--success);

    color: var(--text-primary);

    border: 2px solid var(--success);

}



.button-success:hover {

    transform: var(--hover-lift);

    background-color: var(--success-gradient);

    border-color: var(--success-gradient);

}





/* Navigation */

/* Navigation Styles */

/* Custom header styling */

.navbar-brand {

    font-weight: 800;

    font-size: 28px;

    letter-spacing: 1px;

    text-transform: uppercase;

    background: linear-gradient(to right, var(--secondary), var(--accent));

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}



.main-header {

    background-image: var(--dark-gradient);

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);

}



.h-16 {

    height: 64px;

}



.h-10 {

    height: 40px;

}



.h-9 {

    height: 36px;

}



.size-5 {

    width: 1.25rem;

    height: 1.25rem;

}



.size-20 {

    width: 20px;

    height: 20px;

}



.navbar-nav .nav-link {

    color: var(--text-muted);

    font-weight: 500;

    letter-spacing: 1px;

    transition: all 0.3s ease;

    margin: 0 10px;

    position: relative;

    padding: 0.5rem 0;

}



.navbar-nav .nav-link:hover,

.navbar-nav .nav-link.active {

    color: var(--text-primary);

}



.navbar-nav .nav-link::after {

    content: '';

    position: absolute;

    width: 0;

    height: 3px;

    bottom: -2px;

    left: 0;

    background-image: linear-gradient(to right, var(--secondary), var(--accent));

    transition: width 0.3s ease;

    border-radius: 3px;

}



.navbar-nav .nav-link:hover::after,

.navbar-nav .nav-link.active::after {

    width: 100%;

}



.navbar-nav .nav-item {

    display: flex;

    align-items: center;

    height: 100%;

}



.search-input {

    background-color: rgba(var(--primary-rgb), 0.3);

    border: 1px solid var(--border-thin);

    border-radius: 8px;

    color: var(--text-primary);

    padding: 0.5rem 2.25rem;

    transition: all 0.3s ease;

}



.search-input:focus {

    background-color: rgba(var(--primary-rgb), 0.5);

    border-color: var(--accent);

    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25);

    color: var(--text-primary);

}



.search-input::placeholder {

    color: var(--text-muted);

}



.search-icon {

    position: absolute;

    left: 0.6rem;

    top: 40%;

    transform: translateY(-60%);

    color: var(--text-muted);

}



.btn-menu {

    background-color: rgba(var(--primary-rgb), 0.3);

    border: 1px solid var(--border-thin);

    color: var(--text-primary);

    border-radius: 8px;

    width: 40px;

    height: 40px;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

}



.btn-menu:hover {

    background-color: rgba(var(--primary-rgb), 0.5);

    border-color: var(--border-medium);

    color: var(--text-primary);

}



.icon-container {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 20px;

    height: 20px;

    margin-right: 0.5rem;

}



.icon-container i {

    color: var(--text-primary);

    font-size: 1rem;

}



.sub-navbar {

    background-color: rgba(var(--dark-rgb), 0.8);

    backdrop-filter: blur(10px);

    border-bottom: 1px solid var(--border-thin);

}



/* Responsive adjustments */

@media (max-width: 992px) {

    .navbar-nav {

        padding-top: 1rem;

    }

    

    .navbar-nav .nav-link {

        padding: 0.75rem 0;

    }

    

    .navbar-nav .nav-link::after {

        bottom: 0;

    }

}

/* Hero Section */

.hero-section {

    padding: 120px 0;

    background-image: linear-gradient(135deg, rgba(var(--dark-rgb), 0.95), rgba(var(--primary-rgb), 0.92)),

        url('https://picsum.photos/1920/1080');

    background-size: cover;

    background-position: center;

    position: relative;

    overflow: hidden;

}



.hero-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+');

    z-index: 0;

}



.hero-content {

    position: relative;

    z-index: 1;

}



.hero-title {

    font-weight: 800;

    font-size: 3.5rem;

    margin-bottom: 20px;

    background: linear-gradient(to right, var(--secondary), var(--accent));

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-transform: uppercase;

    letter-spacing: 2px;

}



.hero-subtitle {

    font-size: 1.2rem;

    margin-bottom: 30px;

    color: var(--text-secondary);

    font-weight: 400;

}







/* Section Titles */

.section-title {

    font-weight: 800;

    font-size: 2.2rem;

    margin-bottom: 50px;

    text-align: center;

    position: relative;

    padding-bottom: 15px;

    text-transform: uppercase;

    letter-spacing: 2px;

    background: linear-gradient(to right, var(--secondary), var(--accent));

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}



.section-title::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 100px;

    height: 4px;

    background-image: linear-gradient(to right, var(--secondary), var(--accent));

    border-radius: 2px;

}



.section-title.text-start {

    text-align: left;

}



.section-title.text-start::after {

    left: 0;

    transform: translateX(0);

}



/* Flash Sale Section */

.flash-sale-header {

    background-image: var(--primary-gradient);

    border-radius: 15px 15px 0 0;

    padding: 20px;

    margin-bottom: 0;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

    overflow: hidden;

}





@media (max-width: 768px) {

    .flash-sale-header .row {

        flex-direction: column;

    }

    

    .flash-sale-header .col-md-6:last-child {

        text-align: left !important;

        margin-top: 15px;

    }

}



.flash-timer {

    background-color: rgba(0, 0, 0, 0.3);

    color: var(--secondary);

    padding: 10px 20px;

    border-radius: 50px;

    display: inline-block;

    font-weight: 700;

    font-size: 1rem;

    position: relative;

    z-index: 1;

}



/* Flash Sale Swiper */

.flashSaleSwiper {

    padding: 30px 10px;

    background-image: linear-gradient(135deg, rgba(var(--secondary-rgb), 0.1), rgba(var(--accent-rgb), 0.05));

    border-radius: 0 0 15px 15px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

    margin-bottom: 80px;

}



.flash-product-card {

    background-image: var(--card-gradient);

    border-radius: 15px;

    overflow: hidden;

    transition: all 0.3s ease;

    border: 1px solid var(--border-thin);

    box-shadow: var(--card-shadow);

    height: 100%;

    position: relative;

}



.flash-product-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);

    border: 1px solid var(--border-medium);

}



.discount-badge {

    position: absolute;

    top: 15px;

    right: 15px;

    background-color: var(--secondary);

    color: var(--primary);

    padding: 5px 10px;

    border-radius: 20px;

    font-weight: 700;

    font-size: 0.9rem;

    z-index: 2;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}



.flash-product-img {

    width: 100%;

    height: 200px;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.flash-product-card:hover .flash-product-img {

    transform: scale(1.05);

}



.flash-product-body {

    padding: 20px;

}



.flash-product-title {

    font-weight: 700;

    font-size: 1.25rem;

    margin-bottom: 5px;

    color: var(--accent);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.flash-product-game {

    color: var(--text-muted);

    font-size: 0.9rem;

    margin-bottom: 15px;

}





.flash-product-price {

    display: flex;

    flex-direction: column;

    margin-bottom: 15px;

}



.original-price {

    color: var(--text-subtle);

    text-decoration: line-through;

    font-size: 0.9rem;

}



.sale-price {

    color: var(--secondary);

    font-weight: 700;

    font-size: 1.2rem;

}

.flash-product-progress {

    height: 8px;

    background-color: rgba(255, 255, 255, 0.1);

    margin-bottom: 10px;

    border-radius: 4px;

}



.flash-product-progress .progress-bar {

    background-image: linear-gradient(to right, var(--accent), var(--secondary));

    border-radius: 4px;

}



.flash-product-stock {

    display: flex;

    justify-content: space-between;

    color: var(--text-muted);

    font-size: 0.8rem;

    margin-bottom: 15px;

}



/* Best Seller Cards */

.bestseller-card {

    background-image: var(--primary-gradient);

    border-radius: 15px;

    padding: 20px;

    position: relative;

    overflow: hidden;

    transition: all 0.3s ease;

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

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

    height: 100%;

}



.bestseller-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);

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

}



.bestseller-badge {

    position: absolute;

    top: 15px;

    right: 15px;

    background-color: var(--secondary);

    color: var(--primary);

    padding: 5px 10px;

    border-radius: 20px;

    font-weight: 700;

    font-size: 0.8rem;

    z-index: 2;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    display: flex;

    align-items: center;

    gap: 5px;

}



.bestseller-header {

    display: flex;

    align-items: center;

    margin-bottom: 20px;

}



.bestseller-logo {

    width: 60px;

    height: 60px;

    border-radius: 10px;

    margin-right: 15px;

    object-fit: cover;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}



.bestseller-title {

    font-weight: 700;

    font-size: 1.2rem;

    margin-bottom: 5px;

    color: #ffffff;

}



.bestseller-subtitle {

    color: rgba(255, 255, 255, 0.7);

    font-size: 0.9rem;

    margin-bottom: 5px;

}



.bestseller-rating {

    color: var(--secondary);

    font-size: 0.8rem;

}



.bestseller-rating span {

    color: rgba(255, 255, 255, 0.7);

    margin-left: 5px;

}



.bestseller-details {

    background-color: rgba(0, 0, 0, 0.2);

    border-radius: 10px;

    padding: 15px;

    margin-bottom: 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.bestseller-price-label {

    color: rgba(255, 255, 255, 0.7);

    font-size: 0.8rem;

    margin-bottom: 5px;

}



.bestseller-price-value {

    color: var(--accent);

    font-weight: 700;

    font-size: 1.2rem;

}



.bestseller-sold {

    color: rgba(255, 255, 255, 0.8);

    font-size: 0.9rem;

}



.game-card {

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    border-radius: 0.75rem;

    overflow: hidden;

    background-color: #fff;

    margin-bottom: 1rem;

    cursor: pointer;

}



.game-card:hover {

    transform: rotate(3deg);

    box-shadow: 0 1rem 3rem rgba(0,0,0,.175);

    border: 2px solid var(--border-medium);

}



.game-img {

    aspect-ratio: 1/1;

    object-fit: cover;

    object-position: center;

    border-top-left-radius: 0.75rem;

    border-top-right-radius: 0.75rem;

    width: 100%;

}



.game-info {

    border-bottom-left-radius: 0.75rem;

    border-bottom-right-radius: 0.75rem;

    padding: 0.5rem 0;

    background-image: linear-gradient(to right, var(--primary), var(--dark));

}



.game-title {

    font-weight: 600;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    margin-bottom: 0;

    color: var(--text-primary);

}



.game-server {

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    font-size: 0.75rem;

    color: var(--text-muted);

    margin-bottom: 0;

}

/* Button Styles */

.btn-cyber {

    background-image: var(--primary-gradient);

    border: none;

    color: var(--text-primary);

    font-weight: 600;

    letter-spacing: 1px;

    padding: 10px 25px;

    border-radius: 30px;

    box-shadow: var(--primary-shadow);

    transition: all 0.3s ease;

    position: relative;

    z-index: 1;

    overflow: hidden;

    text-transform: uppercase;

}



.btn-cyber::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 0%;

    height: 100%;

    background-image: linear-gradient(135deg, #1E4976, var(--primary));

    transition: all 0.5s ease;

    z-index: -1;

}



.btn-cyber:hover::before {

    width: 100%;

}



.btn-cyber:hover {

    box-shadow: 0 7px 20px rgba(var(--primary-rgb), 0.4);

    color: var(--text-primary);

    transform: translateY(-3px);

}



.btn-outline-cyber {

    background-color: transparent;

    border: 2px solid var(--accent);

    color: var(--accent);

    font-weight: 600;

    letter-spacing: 1px;

    padding: 9px 24px;

    border-radius: 30px;

    transition: all 0.3s ease;

    position: relative;

    z-index: 1;

    overflow: hidden;

    text-transform: uppercase;

}



.btn-outline-cyber::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 0%;

    height: 100%;

    background-image: var(--accent-gradient);

    transition: all 0.5s ease;

    z-index: -1;

}



.btn-outline-cyber:hover::before {

    width: 100%;

}



.btn-outline-cyber:hover {

    color: var(--text-primary);

    border-color: transparent;

    transform: translateY(-3px);

}



.btn-cyber-alt {

    background-image: var(--secondary-gradient);

    border: none;

    color: var(--primary);

    font-weight: 600;

    letter-spacing: 1px;

    padding: 10px 25px;

    border-radius: 30px;

    box-shadow: var(--accent-shadow);

    transition: all 0.3s ease;

    position: relative;

    z-index: 1;

    overflow: hidden;

    text-transform: uppercase;

}



.btn-cyber-alt::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 0%;

    height: 100%;

    background-image: linear-gradient(135deg, var(--accent), var(--secondary));

    transition: all 0.5s ease;

    z-index: -1;

}

.btn-cyber-alt:hover::before {

    width: 100%;

}



.btn-cyber-alt:hover {

    box-shadow: 0 7px 20px rgba(var(--accent-rgb), 0.4);

    color: var(--primary);

    transform: translateY(-3px);

}



/* Top-up Section */

.top-up-section {

    background-image: linear-gradient(135deg, var(--dark), var(--primary));

    border-radius: 20px;

    padding: 20px;

    margin-top: 20px;

    margin-bottom: 20px;

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

    position: relative;

    overflow: hidden;

}



.top-up-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+');

    z-index: 0;

}



.topup-content {

    position: relative;

    z-index: 1;

}



.game-banner {

    width: 100%;

    height: 300px;

    border-radius: 15px;

    position: relative;

    overflow: hidden;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);

}



.game-banner img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition: transform 0.5s ease;

}



.game-banner:hover img {

    transform: scale(1.05);

}



.game-banner-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(var(--primary-rgb), 0.9);

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 0 30px;

}



.game-banner-title {

    font-size: 2rem;

    font-weight: 700;

    color: #ffffff;

    margin-bottom: 10px;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

}



.game-banner-subtitle {

    font-size: 1rem;

    color: rgba(255, 255, 255, 0.9);

    max-width: 70%;

}



@media (max-width: 768px) {

    .game-banner {

        height: 300px;

    }

    

    .game-banner-title {

        font-size: 1.5rem;

    }

    

    .game-banner-subtitle {

        font-size: 0.9rem;

        max-width: 100%;

    }

}

/* Main Banner Swiper */

.mainBannerSwiper {

    width: 100%;

    height: 100%;

    margin-bottom: 30px;

    border-radius: 15px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

    overflow: hidden;

    perspective: 1000px;

    transform-style: preserve-3d;

}



.mainBannerSwiper .swiper-slide {

    position: relative;

    transform: translate3d(0, 0, 0);

    transition: transform 0.8s ease, box-shadow 0.8s ease;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

}



.mainBannerSwiper .swiper-slide-active {

    z-index: 2;

    transform: translate3d(0, 0, 20px) scale(1.02);

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);

}



.mainBannerSwiper .swiper-slide img {

    filter: brightness(0.85);

    transition: filter 0.8s ease;

}



.mainBannerSwiper .swiper-slide-active img {

    filter: brightness(1);

}



.swiper-slide {

    position: relative;

    overflow: hidden;

}



.swiper-slide img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.swiper-slide-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, rgba(16, 46, 80, 0.8), rgba(10, 22, 37, 0.7));

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 0 50px;

}



.swiper-slide-title {

    font-weight: 700;

    font-size: 2.5rem;

    margin-bottom: 20px;

    color: #ffffff;

    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

}



.swiper-slide-subtitle {

    font-size: 1.2rem;

    margin-bottom: 30px;

    color: #e0e0e0;

    font-weight: 400;

}



.swiper-pagination-bullet {

    width: 12px;

    height: 12px;

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

    opacity: 1;

}



.swiper-pagination-bullet-active {

    background: #ffffff;

    position: relative;

}



.swiper-pagination-bullet-active::after {

    content: '';

    position: absolute;

    top: -4px;

    left: -4px;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    border: 2px solid rgba(255, 255, 255, 0.5);

    animation: bullet-pulse 2s infinite;

}



@keyframes bullet-pulse {

    0% {

        transform: scale(1);

        opacity: 1;

    }

    100% {

        transform: scale(1.5);

        opacity: 0;

    }

}



.swiper-button-next,

.swiper-button-prev {

    color: #ffffff;

    background-color: rgba(16, 46, 80, 0.7);

    width: 40px;

    height: 40px;

    border-radius: 50%;

    --swiper-navigation-size: 20px;

}



.swiper-button-next:hover,

.swiper-button-prev:hover {

    background-color: var(--primary);

}





/* Form Elements */

.form-control {

    background-color: var(--bg-primary-light);

    border: 1px solid var(--border-thin);

    border-radius: 8px;

    color: var(--text-primary);

    padding: 12px 20px;

    transition: all 0.3s ease;

}



.form-control:focus {

    background-color: var(--bg-primary-medium);

    border-color: var(--accent);

    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25);

    color: var(--text-primary);

}



.form-label {

    color: var(--text-secondary);

    font-weight: 500;

    margin-bottom: 10px;

}



.form-select {

    background-color: var(--bg-primary-light);

    border: 1px solid var(--border-thin);

    border-radius: 8px;

    color: var(--text-primary);

    padding: 12px 20px;

    margin-bottom: 20px;

    transition: all 0.3s ease;

}

.form-select:focus {

    background-color: var(--bg-primary-medium);

    border-color: var(--accent);

    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25);

    color: var(--text-primary);

}



/* Amount Options */

.amount-options {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 30px;

}



.amount-option {

    background-color: var(--bg-primary-light);

    border: 2px solid var(--border-thin);

    border-radius: 15px;

    padding: 15px;

    text-align: center;

    cursor: pointer;

    transition: all 0.3s ease;

    flex: 1 0 calc(33.333% - 15px);

    min-width: 120px;

}



.amount-option:hover {

    background-color: var(--bg-primary-medium);

    border-color: var(--border-accent-light);

    transform: translateY(-5px);

}

.amount-option.active {

    background-color: var(--bg-accent-medium);

    border-color: var(--accent);

    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.4);

}



.diamond-count {

    font-weight: 700;

    font-size: 1.5rem;

    color: var(--text-primary);

    margin-bottom: 5px;

}



.price {

    font-weight: 700;

    color: var(--secondary);

}



.bonus {

    font-size: 0.75rem;

    color: var(--accent);

    margin-top: 5px;

}



/* Payment Accordion */

.accordion {

    margin-bottom: 30px;

}



.accordion-item {

    background-color: transparent;

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

    margin-bottom: 10px;

    border-radius: 10px;

    overflow: hidden;

}



.accordion-header .accordion-button {

    background-color: rgba(16, 46, 80, 0.6);

    color: #ffffff;

    font-weight: 600;

    padding: 15px 20px;

    border: none;

    box-shadow: none;

}



.accordion-button:not(.collapsed) {

    background-color: rgba(var(--dark-rgb), 0.3);

    color: #ffffff;

    box-shadow: none;

}



.accordion-button:focus {

    box-shadow: none;

    border-color: rgba(29, 205, 159, 0.5);

}



.accordion-button::after {

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

}



.accordion-body {

    background-color: rgba(var(--secondary-rgb), 0.05);

    padding: 20px;

}



/* Payment Methods */

/* Payment Methods */

.payment-methods {

    flex-wrap: wrap;

    gap: 15px;

}



.payment-method {

    background-color: rgba(16, 46, 80, 0.4);

    border: 2px solid rgba(255, 255, 255, 0.1);

    border-radius: 0.5rem;

    padding: 0.75rem;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 10px;

    position: relative;

}



.payment-method:hover {

    background-color: rgba(var(--primary-rgb), 0.5);

    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.3);

}



.payment-method.active {

    background-color: rgba(var(--primary-rgb), 0.5);

    border-color: var(--accent);

    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.3);

}



.payment-logo {

    width: 50px;

    height: 100%;

    object-fit: contain;

}



.payment-name {

    flex-grow: 1;

    font-size: 0.8rem;

    color: rgba(255, 255, 255, 0.7);

}



.payment-amount {

    font-size: 0.7rem;

    font-weight: bold;

    color: rgba(255, 255, 255, 0.6);

    margin-top: 0.25rem;

}



.payment-radio {

    position: absolute;

    right: 0.75rem;

    top: 50%;

    transform: translateY(-50%);

}



.payment-radio-input {

    appearance: none;



}



.payment-radio-input:checked {

    background-color: rgba(var(--primary-rgb), 0.5);

    border-color: var(--accent);

    box-shadow: 0 0 5px rgba(var(--accent-rgb), 0.3);

}

/* Footer */

.footer {

    background-image: var(--dark-gradient);

    padding: 80px 0 30px;

    position: relative;

    overflow: hidden;

}



.footer::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+');

    z-index: 0;

}



.footer-content {

    position: relative;

    z-index: 1;

}



.footer-title {

    font-weight: 700;

    font-size: 1.5rem;

    margin-bottom: 25px;

    color: var(--text-primary);

    text-transform: uppercase;

    letter-spacing: 1px;

}



.footer-links {

    list-style: none;

    padding: 0;

    margin: 0;

}



.footer-links li {

    margin-bottom: 15px;

}



.footer-links a {

    color: var(--text-muted);

    text-decoration: none;

    transition: all 0.3s ease;

    display: block;

    position: relative;

    padding-left: 15px;

}



.footer-links a::before {

    content: '›';

    position: absolute;

    left: 0;

    color: var(--accent);

    opacity: 0;

    transform: translateX(-10px);

    transition: all 0.3s ease;

}



.footer-links a:hover {

    color: var(--text-primary);

    padding-left: 20px;

}





.footer-links a:hover::before {

    opacity: 1;

    transform: translateX(0);

}



.social-links {

    display: flex;

    gap: 15px;

    margin-top: 20px;

}



.social-link {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: rgba(255, 255, 255, 0.1);

    border-radius: 50%;

    color: var(--text-primary);

    transition: all 0.3s ease;

}



.social-link:hover {

    background-image: var(--primary-gradient);

    transform: translateY(-5px);

    color: var(--text-primary);

}



.footer-bottom {

    border-top: 1px solid var(--border-thin);

    padding-top: 30px;

    margin-top: 50px;

    text-align: center;

}



.copyright {

    color: var(--text-muted);

    font-size: 0.9rem;

}



/* Bootstrap Overrides */

.bg-primary {

    background-color: var(--primary) !important;

}



.bg-secondary {

    background-color: var(--secondary) !important;

}



.bg-accent {

    background-color: var(--accent) !important;

}



.bg-dark {

    background-color: var(--dark) !important;

}



.text-primary {

    color: var(--primary) !important;

}



.text-secondary {

    color: var(--secondary) !important;

}



.text-accent {

    color: var(--accent) !important;

}

/* Invoice Styles */

.invoice-container {

    background-image: var(--card-gradient);

    border-radius: 20px;

    padding: 40px;

    margin-bottom: 80px;

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

    position: relative;

    overflow: hidden;

}



.invoice-container::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+');

    z-index: 0;

}



.invoice-header {

    margin-bottom: 30px;

    position: relative;

    z-index: 1;

}



.invoice-title {

    font-weight: 800;

    font-size: 2.4rem;

    margin-bottom: 10px;

    background: linear-gradient(to right, var(--secondary), var(--accent));

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-transform: uppercase;

    letter-spacing: 2px;

}



.invoice-subtitle {

    font-size: 1rem;

    color: rgba(255, 255, 255, 0.7);

    margin-bottom: 5px;

}



.countdown-timer {

    font-size: 1.8rem;

    font-weight: 700;

    color: var(--secondary);

    background-color: rgba(0, 0, 0, 0.3);

    padding: 5px 15px;

    border-radius: 10px;

    display: inline-block;

}



.invoice-logo {

    text-align: center;

}



.invoice-logo img {

    width: 200px;

    height: 200px;

    object-fit: contain;

    border-radius: 15px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

    background-color: rgba(var(--dark-rgb), 0.7);

    padding: 15px;

}



.invoice-status {

    background-color: rgba(255, 255, 255, 0.1);

    border-radius: 10px;

    padding: 15px 20px;

    margin-bottom: 30px;

    font-weight: 700;

    letter-spacing: 1px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-size: 1.1rem;

    text-transform: uppercase;

    position: relative;

    z-index: 1;

}



.invoice-status.waiting {

    color: var(--secondary);

    border: 1px solid rgba(245, 196, 94, 0.3);

}



.invoice-status.processing {

    color: #5bc0de;

    border: 1px solid rgba(91, 192, 222, 0.3);

}



.invoice-status.paid {

    background-color: rgba(var(--accent-rgb), 0.3);

    color: var(--light);

    border: 1px solid rgba(29, 205, 159, 0.3);

}



.invoice-status.canceled {

    color: #d9534f;

    border: 1px solid rgba(217, 83, 79, 0.3);

}



.invoice-section {

    background-color: rgba(var(--dark-rgb), 0.7);

    border-radius: 15px;

    padding: 30px;

    margin-bottom: 30px;

    position: relative;

    z-index: 1;

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

}



.section-heading {

    font-weight: 700;

    font-size: 1.3rem;

    margin-bottom: 20px;

    color: #ffffff;

    padding-bottom: 15px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    position: relative;

}



.section-heading::after {

    content: '';

    position: absolute;

    bottom: -1px;

    left: 0;

    width: 100px;

    height: 3px;

    background-image: linear-gradient(to right, var(--secondary), var(--accent));

    border-radius: 2px;

}



.order-info {

    margin-bottom: 10px;

}



.order-info-item {

    margin-bottom: 15px;

}



.order-info-item .label {

    color: rgba(255, 255, 255, 0.6);

    font-size: 0.9rem;

    margin-bottom: 5px;

}



.order-info-item .value {

    color: #ffffff;

    font-weight: 600;

    font-size: 1.1rem;

}



/* Product Table Styles */

.product-table {

    border-radius: 10px;

    overflow: hidden;

    margin-bottom: 20px;

}



.table-header {

    background-color: rgba(var(--primary-rgb), 0.7);

    padding: 15px;

    font-weight: 600;

    color: rgba(255, 255, 255, 0.8);

    border-radius: 10px 10px 0 0;

}



.table-body {

    background-color: rgba(var(--primary-rgb), 0.3);

}



.table-row {

    padding: 20px 15px;

    border-bottom: 1px solid rgba(var(--accent-rgb), 0.05);

}



.product-info {

    display: flex;

    align-items: center;

    gap: 15px;

}



.product-image {

    width: 60px;

    height: 60px;

    border-radius: 10px;

    overflow: hidden;

}



.product-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.product-name {

    font-weight: 700;

    font-size: 1.1rem;

    color: #ffffff;

    margin-bottom: 5px;

}



.product-description {

    color: rgba(255, 255, 255, 0.6);

    font-size: 0.9rem;

}



.product-quantity {

    font-weight: 600;

    color: #ffffff;

}



.product-bonus {

    color: var(--accent);

    font-size: 0.9rem;

    margin-top: 5px;

}



.product-price {

    font-weight: 700;

    color: var(--secondary);

    font-size: 1.1rem;

}



.table-footer {

    background-color: rgba(var(--primary-rgb), 0.5);

    padding: 15px;

    border-radius: 0 0 10px 10px;

    color: rgba(255, 255, 255, 0.8);

}



.table-footer .row {

    padding: 8px 0;

}



.total-row {

    padding-top: 15px !important;

    margin-top: 10px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    font-weight: 700;

    font-size: 1.1rem;

    color: #ffffff;

}



.total-row .col-md-3 {

    color: var(--secondary);

}



/* Payment Tabs */

.payment-tabs {

    margin-bottom: 30px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.payment-tabs .tab-content {

    width: 100%;

}





.payment-tabs .nav-item {

    margin-right: 5px;

}



.payment-tabs .nav-link {

    color: rgba(255, 255, 255, 0.7);

    background-color: rgba(var(--accent-rgb), 0.3);

    border: 1px solid rgba(var(--accent-rgb), 0.05);

    border-radius: 10px 10px 0 0;

    padding: 12px 20px;

    font-weight: 600;

    transition: all 0.3s ease;

}



.payment-tabs .nav-link:hover {

    color: #ffffff;

    background-color: rgba(16, 46, 80, 0.5);

}



.payment-tabs .nav-link.active {

    color: #ffffff;

    background-color: rgba(var(--accent-rgb), 0.2);

    border-color: rgba(var(--accent-rgb), 0.05);

    border-bottom-color: transparent;

}



.payment-content {

    margin-bottom: 30px;

}





/* QRIS Payment Styles */

.payment-method-info {

    display: flex;

    flex-direction: column;

    width: 100%;

}



.qrcode-container {

    flex: 0 0 250px;

    text-align: center;

}



.qrcode-frame {

    background-color: #ffffff;

    padding: 20px;

    border-radius: 15px;

    margin-bottom: 15px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

}



.qrcode-frame img {

    width: 100%;

    height: auto;

}



.qrcode-caption {

    color: rgba(255, 255, 255, 0.8);

    margin-bottom: 15px;

}



.payment-steps {

    flex: 1;

    min-width: 300px;

}



.steps-title {

    font-weight: 700;

    font-size: 1.2rem;

    margin-bottom: 20px;

    color: #ffffff;

}



.step-item {

    display: flex;

    margin-bottom: 20px;

}



.step-number {

    width: 30px;

    height: 30px;

    background-image: linear-gradient(135deg, var(--secondary), var(--accent));

    color: var(--primary);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    margin-right: 15px;

    flex-shrink: 0;

}



.step-content {

    flex: 1;

}



.step-heading {

    font-weight: 600;

    color: #ffffff;

    margin-bottom: 5px;

}



.step-description {

    color: rgba(255, 255, 255, 0.7);

    font-size: 0.9rem;

}



/* Virtual Account Styles */

.va-options {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 30px;

}



.va-option {

    background-color: rgba(var(--dark-rgb), 0.4);

    border: 2px solid rgba(var(--accent-rgb), 0.1);

    border-radius: 0.5rem;

    padding: 15px;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    gap: 10px;

    flex: 1 0 calc(25% - 15px);

    min-width: 150px;

}



.va-option:hover {

    background-color: rgba(16, 46, 80, 0.6);

    border-color: rgba(var(--accent-rgb), 0.5);

}



.va-option.active {

    background-color: rgba(var(--accent-rgb), 0.2);

    border-color: var(--accent);

    box-shadow: 0 0 15px rgba(var(--dark-rgb), 0.5);

}



.va-option img {

    height: 30px;

    width: auto;

    object-fit: contain;

}



.va-option span {

    font-weight: 600;

    color: rgba(var(--accent-rgb), 0.8);

    font-size: 0.9rem;

}



.va-details {

    width: 100%;

    margin-top: 20px;

}



.va-number-container {

    background-color: rgba(var(--primary-rgb), 0.5);

    padding: 20px;

    border-radius: 10px;

    margin-bottom: 20px;

    text-align: center;

    border: 1px solid rgba(var(--accent-rgb), 0.1);

}



.va-number-label {

    color: rgba(255, 255, 255, 0.7);

    margin-bottom: 10px;

    font-size: 0.9rem;

}



.va-number {

    font-size: 2rem;

    font-weight: 700;

    color: #ffffff;

    margin-bottom: 15px;

    letter-spacing: 2px;

}



.va-info {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    margin-bottom: 30px;

}



.va-info-item {

    flex: 1 0 calc(50% - 20px);

    background-color: rgba(16, 46, 80, 0.3);

    padding: 15px;

    border-radius: 10px;

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

}



.va-info-label {

    color: rgba(255, 255, 255, 0.6);

    font-size: 0.9rem;

    margin-bottom: 5px;

}



.va-info-value {

    color: #ffffff;

    font-weight: 600;

    font-size: 1.1rem;

}



/* Make VA container full width on mobile */

@media (max-width: 767px) {

    .va-number-container {

        width: 100%;

    }

    

    .va-details .row {

        margin-left: 0;

        margin-right: 0;

    }

    

    .payment-steps {

        width: 100%;

        margin-top: 20px;

    }

}



/* Ensure proper spacing between steps */

.step-item {

    margin-bottom: 15px;

}



/* Make sure tab panes take full width */

.tab-pane {

    width: 100%;

}



/* Fix for the row inside the va-details */

.va-details .row {

    width: 100%;

    margin: 0;

}



/* Payment Instruction Tabs */

.payment-instruction-tabs {

    width: 100%;

    background-color: rgba(16, 46, 80, 0.3);

    border-radius: 10px;

    padding: 20px;

    margin-top: 30px;

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

}



.payment-instruction-tabs .nav-pills {

    margin-bottom: 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    padding-bottom: 15px;

}



.payment-instruction-tabs .nav-item {

    margin-right: 10px;

}



.payment-instruction-tabs .nav-link {

    background-color: rgba(16, 46, 80, 0.4);

    color: rgba(255, 255, 255, 0.7);

    border-radius: 30px;

    padding: 8px 15px;

    font-weight: 600;

    font-size: 0.9rem;

    transition: all 0.3s ease;

}



.payment-instruction-tabs .nav-link:hover {

    background-color: rgba(16, 46, 80, 0.6);

    color: #ffffff;

}



.payment-instruction-tabs .nav-link.active {

    background-color: var(--accent);

    color: var(--primary);

}



/* E-Wallet Styles */

.ewallet-options {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 30px;

}



.ewallet-option {

    background-color: rgba(16, 46, 80, 0.4);

    border: 2px solid rgba(255, 255, 255, 0.1);

    border-radius: 0.5rem;

    padding: 15px;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    gap: 10px;

    flex: 1 0 calc(25% - 15px);

    min-width: 150px;

}



.ewallet-option:hover {

    background-color: rgba(16, 46, 80, 0.6);

    border-color: rgba(29, 205, 159, 0.5);

}



.ewallet-option.active {

    background-color: rgba(29, 205, 159, 0.2);

    border-color: var(--accent);

    box-shadow: 0 0 15px rgba(29, 205, 159, 0.4);

}



.ewallet-option img {

    height: 30px;

    width: auto;

    object-fit: contain;

}



.ewallet-option span {

    font-weight: 600;

    color: rgba(255, 255, 255, 0.9);

    font-size: 0.9rem;

}



.ewallet-details {

    margin-top: 20px;

    width: 100%;

}



.ewallet-header {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 20px;

}



.ewallet-header img {

    height: 40px;

    width: auto;

    object-fit: contain;

}



.ewallet-header h4 {

    color: #ffffff;

    font-weight: 700;

    margin-bottom: 0;

}



.ewallet-qr-container {

    text-align: center;

    margin-bottom: 30px;

}



.alternative-pay-method {

    background-color: rgba(16, 46, 80, 0.3);

    border-radius: 10px;

    padding: 20px;

    margin-top: 30px;

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

}



.alternative-pay-method h5 {

    font-weight: 700;

    color: #ffffff;

    margin-bottom: 10px;

}



.alternative-pay-method p {

    color: rgba(255, 255, 255, 0.7);

    margin-bottom: 15px;

}



/* Invoice Footer */

.invoice-footer {

    position: relative;

    z-index: 1;

    margin-top: 40px;

}



.payment-note {

    background-color: rgba(29, 205, 159, 0.1);

    border-left: 5px solid var(--accent);

    padding: 15px;

    border-radius: 8px;

    margin-bottom: 30px;

    display: flex;

    align-items: center;

    gap: 15px;

}



.payment-note i {

    color: var(--accent);

    font-size: 1.5rem;

}



.payment-note span {

    color: rgba(255, 255, 255, 0.8);

}



.help-section {

    background-color: rgba(16, 46, 80, 0.3);

    border-radius: 10px;

    padding: 20px;

    margin-bottom: 30px;

    text-align: center;

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

}



.help-section p {

    color: rgba(255, 255, 255, 0.7);

    margin-bottom: 15px;

}



.help-options {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;

}



.back-to-home {

    text-align: center;

}

/* Track Order Page Styles */

.track-order-hero {

    background-image: linear-gradient(135deg, rgba(10, 22, 37, 0.95), rgba(16, 46, 80, 0.92)),

        url('https://picsum.photos/1920/1080');

    background-size: cover;

    background-position: center;

    padding: 100px 0;

    position: relative;

    overflow: hidden;

}



.track-order-hero::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+');

    z-index: 0;

}



.track-order-content {

    position: relative;

    z-index: 1;

    text-align: center;

    max-width: 800px;

    margin: 0 auto;

}



.track-order-title {

    font-weight: 800;

    font-size: 3rem;

    margin-bottom: 20px;

    background: linear-gradient(to right, var(--secondary), var(--accent));

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-transform: uppercase;

    letter-spacing: 2px;

}



.track-order-subtitle {

    font-size: 1.2rem;

    color: rgba(255, 255, 255, 0.8);

    margin-bottom: 40px;

}



.search-container {

    background-color: rgba(var(--accent-rgb), 0.1);

    border-radius: 15px;

    padding: 30px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

    border: 1px solid rgba(var(--secondary-rgb), 0.1);

}



.order-search-form .input-group {

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

    border-radius: 10px;

    overflow: hidden;

}



.order-search-form .form-control {

    background-color: rgba(var(--accent-rgb), 0.1);

    border: none;

    padding: 15px 20px;

    font-size: 1.1rem;

    color: #ffffff;

}



.order-search-form .form-control::placeholder {

    color: rgba(255, 255, 255, 0.5);

}



.order-search-form .btn {

    padding: 15px 30px;

    font-size: 1.1rem;

    border-radius: 0;

}



.order-search-form .form-text {

    margin-top: 15px;

    text-align: left;

}



/* Order Results Section */

.order-results-section,

.order-not-found-section,

.faq-section {

    padding: 80px 0;

    position: relative;

}



.order-results-container {

    max-width: 900px;

    margin: 0 auto;

}



/* Order Timeline */

.order-timeline {

    display: flex;

    justify-content: space-between;

    margin-bottom: 40px;

    position: relative;

    z-index: 1;

}



.timeline-status {

    display: flex;

    flex-direction: column;

    align-items: center;

    position: relative;

    flex: 1;

    text-align: center;

}



.status-icon {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background-color: rgba(16, 46, 80, 0.6);

    border: 2px solid rgba(255, 255, 255, 0.1);

    display: flex;

    align-items: center;

    justify-content: center;

    color: rgba(255, 255, 255, 0.7);

    font-size: 1.2rem;

    position: relative;

    z-index: 2;

    transition: all 0.3s ease;

}



.status-icon.completed {

    background-color: rgba(29, 205, 159, 0.2);

    border-color: var(--accent);

    color: var(--accent);

}



.status-icon.active {

    background-color: rgba(245, 196, 94, 0.2);

    border-color: var(--secondary);

    color: var(--secondary);

    animation: pulse 2s infinite;

}



.status-line {

    position: absolute;

    height: 3px;

    background-color: rgba(255, 255, 255, 0.1);

    top: 25px;

    left: calc(50% + 25px);

    right: calc(-50% + 25px);

    z-index: 1;

}



.status-line.completed {

    background-color: var(--accent);

}



.timeline-status:last-child .status-line {

    display: none;

}



.status-label {

    font-weight: 600;

    color: #ffffff;

    margin-top: 15px;

    margin-bottom: 5px;

}



.status-time {

    font-size: 0.8rem;

    color: rgba(255, 255, 255, 0.6);

}



/* Order Details Card */

.order-details-card {

    background-image: linear-gradient(135deg, rgba(16, 46, 80, 0.95), rgba(10, 22, 37, 0.9));

    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

    margin-bottom: 40px;

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

}



.card-header {

    background-color: rgba(16, 46, 80, 0.7);

    padding: 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.card-header h3 {

    font-weight: 700;

    color: #ffffff;

    margin-bottom: 0;

}



.card:hover {

    transform: var(--hover-lift);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

    border-color: var(--border-accent-light);

}



.card-title {

    color: var(--accent);

    font-weight: 700;

}



.card-body {

    padding: 1.5rem;

}





.order-status {

    font-size: 0.9rem;

    font-weight: 600;

    padding: 5px 15px;

    border-radius: 20px;

    text-transform: uppercase;

}



.order-status.processing {

    background-color: rgba(245, 196, 94, 0.2);

    color: var(--secondary);

    border: 1px solid rgba(245, 196, 94, 0.3);

}



.order-status.completed {

    background-color: rgba(29, 205, 159, 0.2);

    color: var(--accent);

    border: 1px solid rgba(29, 205, 159, 0.3);

}



.order-status.failed {

    background-color: rgba(220, 53, 69, 0.2);

    color: #dc3545;

    border: 1px solid rgba(220, 53, 69, 0.3);

}



.card-body {

    padding: 30px;

}



.order-info-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

    margin-bottom: 30px;

}



.order-info-item .info-label {

    font-size: 0.9rem;

    color: rgba(255, 255, 255, 0.6);

    margin-bottom: 5px;

}



.order-info-item .info-value {

    font-weight: 600;

    color: #ffffff;

    font-size: 1.1rem;

}



.payment-paid {

    color: var(--accent) !important;

}



.payment-pending {

    color: var(--secondary) !important;

}



.payment-failed {

    color: #dc3545 !important;

}



.product-details {

    background-color: rgba(var(--accent-rgb), 0.4);

    border-radius: 10px;

    padding: 20px;

    margin-bottom: 20px;

}



.product-item {

    display: flex;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap;

}



.product-image {

    width: 60px;

    height: 60px;

    border-radius: 10px;

    overflow: hidden;

    flex-shrink: 0;

}



.product-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.product-info {

    flex: 1;

    min-width: 200px;

}



.product-name {

    font-weight: 700;

    color: #ffffff;

    margin-bottom: 5px;

}



.product-description,

.product-recipient {

    font-size: 0.9rem;

    color: rgba(255, 255, 255, 0.7);

}



.product-quantity {

    text-align: center;

    min-width: 120px;

}



.quantity-value {

    font-weight: 600;

    color: #ffffff;

}



.quantity-bonus {

    font-size: 0.8rem;

    color: var(--accent);

}



.product-price {

    font-weight: 700;

    color: var(--secondary);

    font-size: 1.1rem;

    min-width: 100px;

    text-align: right;

}



.order-total {

    display: flex;

    justify-content: space-between;

    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.total-label {

    font-weight: 700;

    color: #ffffff;

    font-size: 1.2rem;

}



.total-value {

    font-weight: 700;

    color: var(--secondary);

    font-size: 1.3rem;

}



.card-footer {

    background-color: rgba(16, 46, 80, 0.5);

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    padding: 20px;

    display: flex;

    justify-content: flex-end;

    gap: 15px;

}



/* Help Section */

.track-help-section {

    background-color: rgba(16, 46, 80, 0.5);

    border-radius: 15px;

    padding: 30px;

    text-align: center;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

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

}



.track-help-section h3 {

    font-weight: 700;

    color: #ffffff;

    margin-bottom: 15px;

}



.track-help-section p {

    color: rgba(255, 255, 255, 0.7);

    margin-bottom: 20px;

}



.help-options {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;

}



/* Order Not Found */

.not-found-container {

    background-image: linear-gradient(135deg, rgba(16, 46, 80, 0.95), rgba(10, 22, 37, 0.9));

    border-radius: 15px;

    padding: 50px 30px;

    text-align: center;

    max-width: 600px;

    margin: 0 auto;

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

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

}



.not-found-icon {

    width: 80px;

    height: 80px;

    background-color: rgba(220, 53, 69, 0.1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 30px;

    font-size: 2rem;

    color: #dc3545;

    border: 2px solid rgba(220, 53, 69, 0.3);

}



.not-found-container h2 {

    font-weight: 700;

    color: #ffffff;

    margin-bottom: 15px;

}



.not-found-container p {

    color: rgba(255, 255, 255, 0.7);

    margin-bottom: 20px;

    max-width: 400px;

    margin-left: auto;

    margin-right: auto;

}



/* FAQ Section */

.faq-section {

    background-color: var(--dark);

}



.faq-accordion {

    max-width: 800px;

    margin: 0 auto;

}



.faq-accordion .accordion-item {

    margin-bottom: 15px;

    border-radius: 10px;

    overflow: hidden;

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

    background-color: transparent;

}



.faq-accordion .accordion-button {

    font-weight: 600;

    padding: 20px;

    color: #ffffff;

    background-color: rgba(16, 46, 80, 0.6);

}



.faq-accordion .accordion-button:not(.collapsed) {

    background-color: rgba(29, 205, 159, 0.2);

    color: #ffffff;

}



.faq-accordion .accordion-body {

    background-color: rgba(16, 46, 80, 0.3);

    color: rgba(255, 255, 255, 0.8);

    padding: 20px;

}



/* Responsive Styles */

@media (max-width: 992px) {

    .order-timeline {

        flex-wrap: wrap;

    }

    

    .timeline-status {

        flex: 0 0 50%;

        margin-bottom: 40px;

    }

    

    .timeline-status:nth-child(even) .status-line {

        display: none;

    }

    

    .order-info-grid {

        grid-template-columns: 1fr;

    }

    

    .product-price {

        margin-left: auto;

    }

}



@media (max-width: 768px) {

    .track-order-title {

        font-size: 2.2rem;

    }

    

    .track-order-hero {

        padding: 60px 0;

    }

    

    .product-item {

        flex-direction: column;

        align-items: flex-start;

    }

    

    .product-quantity,

    .product-price {

        text-align: left;

        margin-left: 80px;

    }

    

    .card-footer {

        flex-direction: column;

    }

    

    .card-footer .btn {

        width: 100%;

    }

}



@media (max-width: 576px) {

    .timeline-status {

        flex: 0 0 100%;

    }

    

    .timeline-status .status-line {

        display: none;

    }

    

    .not-found-container {

        padding: 30px 20px;

    }

    

    .help-options {

        flex-direction: column;

    }

    

    .help-options .btn {

        width: 100%;

    }

}

/* Responsive Adjustments */

@media (max-width: 992px) {

    .invoice-title {

        font-size: 2rem;

    }

    

    .invoice-container {

        padding: 30px;

    }

    

    .invoice-section {

        padding: 20px;

    }

    

    .va-option, .ewallet-option {

        flex: 1 0 calc(50% - 15px);

    }

    

    .qrcode-container {

        flex: 0 0 200px;

    }

}



@media (max-width: 768px) {

    .invoice-logo {

        margin-top: 20px;

        text-align: left;

    }

    

    .payment-method-info {

        flex-direction: column;

    }

    

    .qrcode-container {

        flex: 0 0 100%;

        margin-bottom: 30px;

    }

    

    .va-info-item {

        flex: 1 0 100%;

    }

}



@media (max-width: 576px) {

    .invoice-title {

        font-size: 1.8rem;

    }

    

    .countdown-timer {

        font-size: 1.5rem;

    }

    

    .invoice-container {

        padding: 20px;

    }

    

    .va-option, .ewallet-option {

        flex: 1 0 100%;

    }

    

    .help-options {

        flex-direction: column;

    }

}

/* Animations */

@keyframes pulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.05);

    }

    100% {

        transform: scale(1);

    }

}



.pulse-animation {

    animation: pulse 2s infinite;

}



@keyframes glowing {

    0% {

        box-shadow: 0 0 5px rgba(var(--accent-rgb), 0.5);

    }

    50% {

        box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.8);

    }

    100% {

        box-shadow: 0 0 5px rgba(var(--accent-rgb), 0.5);

    }

}

.glow-animation {

    animation: glowing 2s infinite;

}



/* Responsive Adjustments */

@media (max-width: 992px) {

    .hero-title {

        font-size: 2.5rem;

    }

    

    .section-title {

        font-size: 1.8rem;

    }

    

    .top-up-section {

        padding: 20px;

    }

    

    .amount-option {

        flex: 1 0 calc(50% - 15px);

    }

    

    .payment-method {

        flex: 1 0 calc(33.333% - 15px);

    }

    

    .swiper-slide-title {

        font-size: 2rem;

    }

    

    .flash-product-card,

    .bestseller-card {

        height: auto;

    }

}



@media (max-width: 768px) {

    .hero-section {

        padding: 80px 0;

    }

    

    .hero-title {

        font-size: 2rem;

    }

    

    

    .swiper-slide-overlay {

        padding: 0 30px;

    }

    

    .swiper-slide-title {

        font-size: 1.8rem;

    }

    

    .amount-option {

        flex: 1 0 calc(50% - 15px);

    }

    

    .payment-method {

        flex: 1 0 calc(50% - 15px);

    }

    

    .flash-timer {

        font-size: 1rem;

    }

}



@media (max-width: 576px) {

    .hero-title {

        font-size: 1.8rem;

    }

    

    .section-title {

        font-size: 1.5rem;

    }

    

    .swiper-slide-overlay {

        padding: 0 20px;

    }

    

    .swiper-slide-title {

        font-size: 1.5rem;

    }

    

    .flash-timer {

        font-size: 1rem;

        padding: 8px 15px;

    }

    

    .payment-method {

        flex: 1 0 calc(50% - 15px);

    }

    

    .top-up-section {

        padding: 20px;

    }

    

    .amount-option {

        flex: 1 0 calc(100% - 15px);

    }

    

    .bestseller-details {

        flex-direction: column;

        align-items: flex-start;

    }

    

    .bestseller-sold {

        margin-top: 10px;

    }

}

/* Order Confirmation Modal */

.modal-content {

    background-image: var(--card-gradient);

    border-radius: 15px;

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

    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);

}



.modal-header {

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    padding: 20px;

}



.modal-title {

    color: #ffffff;

    font-weight: 700;

}



.modal-body {

    padding: 30px;

}



.modal-footer {

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    padding: 20px;

}



.order-detail {

    background-color: rgba(16, 46, 80, 0.3);

    border-radius: 10px;

    padding: 20px;

    margin-bottom: 20px;

}



.order-detail-item {

    display: flex;

    justify-content: space-between;

    margin-bottom: 15px;

    color: rgba(255, 255, 255, 0.8);

}



.order-detail-item:last-child {

    margin-bottom: 0;

}



.order-detail-label {

    font-weight: 500;

}



.order-detail-value {

    font-weight: 700;

    text-align: right;

}



.order-total {

    display: flex;

    justify-content: space-between;

    padding-top: 15px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    margin-top: 15px;

}



.order-total-label {

    font-weight: 700;

    color: #ffffff;

    font-size: 1.1rem;

}



.order-total-value {

    font-weight: 700;

    color: var(--secondary);

    font-size: 1.2rem;

}



.payment-instruction {

    background-color: rgba(29, 205, 159, 0.1);

    border-left: 5px solid var(--accent);

    padding: 15px;

    border-radius: 8px;

    margin-top: 20px;

}



.payment-instruction-title {

    font-weight: 700;

    color: var(--accent);

    margin-bottom: 10px;

}



.payment-instruction-text {

    color: rgba(255, 255, 255, 0.8);

    font-size: 0.9rem;

}



.modal-close {

    position: absolute;

    top: 15px;

    right: 15px;

    width: 30px;

    height: 30px;

    background-color: rgba(255, 255, 255, 0.1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    border: none;

    transition: all 0.3s ease;

}



.modal-close:hover {

    background-color: rgba(255, 255, 255, 0.2);

}

.product-card {

    position: relative;

    z-index: 0;

    margin-bottom: 10px;

}

        

.container-best-seller {

    border-radius: 15px;

}



.product-link {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    border-radius: var(--card-radius);

    color: var(--text-primary);

    transition: all 0.3s ease-in-out;

    text-decoration: none;

    overflow: hidden;

    position: relative;

}



.product-link::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");

    pointer-events: none;

}



.product-link::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 40%);

    pointer-events: none;

}



.product-link:hover {

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);

    transform: translateY(-5px);

    border: 2px solid rgba(255, 255, 255, 0.5);

    outline: none;

}



.product-link:hover::before {

    opacity: 0.8;

}



.product-image {

    aspect-ratio: 1/1;

    width: 3.5rem;

    height: 3.5rem;

    border-radius: calc(var(--card-radius) - var(--card-padding));

    object-fit: cover;

    object-position: center;

    transition: all 0.3s;

    position: relative;

    z-index: 1;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

}



@media (min-width: 768px) {

    .product-image {

        width: 5rem;

        height: 5rem;

    }

    

    .product-link {

        gap: 0.75rem;

    }

    

    .product-title {

        font-size: 1rem;

        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);

    }

    

    .product-subtitle {

        font-size: 0.875rem;

        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);

    }

    

    .badge-image {

        width: 4rem;

    }

}



.product-link:hover .product-image {

    transform: scale(1.1) rotate(-5deg);

    border-radius: 0.75rem;

    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.5));

}



.product-title {

    width: 80px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    font-size: 0.75rem;

    font-weight: 600;

    color: var(--text-primary);

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);

    position: relative;

    z-index: 1;

}



.product-subtitle {

    font-size: 0.75rem;

    color: rgba(255, 255, 255, 0.9);

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);

    position: relative;

    z-index: 1;

}



.badge-image {

    pointer-events: none;

    position: absolute;

    bottom: 0.8rem;

    right: 1rem;

    width: 3rem;

    transition: all 0.3s ease-in-out;

    filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.4));

    z-index: 2;

}



.product-card:hover .badge-image {

    transform: scale(1.2) rotate(10deg);

}



/* Enhanced Background Gradients for each card */

.bg-canva {

    background: linear-gradient(135deg, #3282fa 0%, #1a4a9f 100%);

    box-shadow: 0 10px 20px rgba(50, 126, 220, 0.3);

}



.bg-ml {

    background: linear-gradient(135deg, #8a3a96 0%, #3a1a50 100%);

    box-shadow: 0 10px 20px rgba(70, 45, 75, 0.3);

}



.bg-ff {

    background: linear-gradient(135deg, #4f94e8 0%, #2e5276 100%);

    box-shadow: 0 10px 20px rgba(82, 130, 177, 0.3);

}



.bg-pubg {

    background: linear-gradient(135deg, #e5e49c 0%, #736f48 100%);

    box-shadow: 0 10px 20px rgba(198, 195, 158, 0.3);

}



.bg-hok {

    background: linear-gradient(135deg, #c6c7e2 0%, #626588 100%);

    box-shadow: 0 10px 20px rgba(184, 187, 202, 0.3);

}



.bg-valorant {

    background: linear-gradient(135deg, #ff4655 0%, #1e2533 100%);

    box-shadow: 0 10px 20px rgba(45, 56, 71, 0.3);

}



.bg-genshin {

    background: linear-gradient(135deg, #74ccf4 0%, #5d5f87 100%);

    box-shadow: 0 10px 20px rgba(193, 194, 195, 0.3);

}



/* Card glow effects on hover */

.bg-canva:hover {

    box-shadow: 0 0 25px rgba(50, 126, 220, 0.7);

}



.bg-ml:hover {

    box-shadow: 0 0 25px rgba(138, 58, 150, 0.7);

}



.bg-ff:hover {

    box-shadow: 0 0 25px rgba(79, 148, 232, 0.7);

}



.bg-pubg:hover {

    box-shadow: 0 0 25px rgba(229, 228, 156, 0.7);

}



.bg-hok:hover {

    box-shadow: 0 0 25px rgba(198, 199, 226, 0.7);

}



.bg-valorant:hover {

    box-shadow: 0 0 25px rgba(255, 70, 85, 0.7);

}



.bg-genshin:hover {

    box-shadow: 0 0 25px rgba(116, 204, 244, 0.7);

}



/* Shine effect */

.product-link::before {

    content: '';

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: linear-gradient(

        to right,

        rgba(255, 255, 255, 0) 0%,

        rgba(255, 255, 255, 0.3) 50%,

        rgba(255, 255, 255, 0) 100%

    );

    transform: rotate(30deg);

    opacity: 0;

    transition: opacity 0.6s;

    z-index: 1;

}



.product-link:hover::before {

    animation: shine 1.5s ease forwards;

    opacity: 1;

}



@keyframes shine {

    0% {

        transform: translateX(-100%) rotate(30deg);

    }

    100% {

        transform: translateX(100%) rotate(30deg);

    }

}



/* Responsive adjustments */

@media (min-width: 576px) {

    .product-title {

        width: 125px;

    }

}



@media (min-width: 768px) {

    .product-title {

        width: 150px;

    }

}



@media (min-width: 992px) {

    .product-title {

        width: 175px;

    }

}



/* Custom animations */

@keyframes pulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.05);

    }

    100% {

        transform: scale(1);

    }

}



.product-card:hover {

    animation: pulse 2s infinite;

}

/* Additional styles specific for policy pages */

.policy-hero {

    background-image: linear-gradient(135deg, rgba(10, 22, 37, 0.95), rgba(16, 46, 80, 0.92)),

        url('https://picsum.photos/1920/1080');

    background-size: cover;

    background-position: center;

    padding: 80px 0;

    position: relative;

    overflow: hidden;

}



.policy-hero::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+');

    z-index: 0;

}



.policy-content {

    position: relative;

    z-index: 1;

    text-align: center;

}



.policy-title {

    font-weight: 800;

    font-size: 3rem;

    margin-bottom: 20px;

    background: linear-gradient(to right, var(--secondary), var(--accent));

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-transform: uppercase;

    letter-spacing: 2px;

}



.policy-subtitle {

    font-size: 1.2rem;

    color: rgba(255, 255, 255, 0.8);

    margin-bottom: 20px;

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

}



.policy-container {

    background-image: var(--card-gradient);

    border-radius: 20px;

    padding: 40px;

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

    position: relative;

    overflow: hidden;

    margin-bottom: 40px;

}



.policy-container::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+');

    z-index: 0;

}



.policy-section {

    position: relative;

    z-index: 1;

    margin-bottom: 30px;

}



.policy-section:last-child {

    margin-bottom: 0;

}



.policy-section h2 {

    color: var(--secondary);

    font-weight: 700;

    margin-bottom: 20px;

    padding-bottom: 10px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.policy-section h3 {

    color: var(--accent);

    font-weight: 600;

    margin: 25px 0 15px;

}



.policy-section p, .policy-section li {

    color: rgba(255, 255, 255, 0.8);

    line-height: 1.7;

    margin-bottom: 15px;

}



.policy-section ul, .policy-section ol {

    padding-left: 20px;

    margin-bottom: 20px;

}



.policy-section li {

    margin-bottom: 10px;

}



.policy-date {

    text-align: right;

    color: rgba(255, 255, 255, 0.6);

    font-style: italic;

    margin-top: 20px;

}



.policy-nav {

    background-color: rgba(16, 46, 80, 0.7);

    border-radius: 15px;

    padding: 20px;

    margin-bottom: 30px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

    position: sticky;

    top: 20px;

}



.policy-nav-title {

    color: var(--secondary);

    font-weight: 700;

    margin-bottom: 15px;

    padding-bottom: 10px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.policy-nav-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.policy-nav-item {

    margin-bottom: 10px;

}



.policy-nav-link {

    color: rgba(255, 255, 255, 0.8);

    text-decoration: none;

    display: block;

    padding: 5px 10px;

    border-radius: 5px;

    transition: all 0.3s ease;

}



.policy-nav-link:hover {

    background-color: rgba(29, 205, 159, 0.2);

    color: var(--accent);

    transform: translateX(5px);

}



@media (max-width: 768px) {

    .policy-title {

        font-size: 2.2rem;

    }

    

    .policy-container {

        padding: 30px 20px;

    }

    

    .policy-nav {

        position: relative;

        top: 0;

        margin-top: 20px;

    }

}

.promo-hero {

    background-image: linear-gradient(135deg, rgba(10, 22, 37, 0.95), rgba(16, 46, 80, 0.92)),

        url('https://picsum.photos/1920/1080?random=5');

    background-size: cover;

    background-position: center;

    padding: 100px 0;

    position: relative;

    overflow: hidden;

}



.promo-hero::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+');

    z-index: 0;

}



.promo-content {

    position: relative;

    z-index: 1;

    text-align: center;

}



.promo-title {

    font-weight: 800;

    font-size: 3rem;

    margin-bottom: 20px;

    background: linear-gradient(to right, var(--secondary), var(--accent));

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-transform: uppercase;

    letter-spacing: 2px;

}



.promo-subtitle {

    font-size: 1.2rem;

    color: rgba(255, 255, 255, 0.8);

    margin-bottom: 20px;

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

}



.filter-bar {

    background-color: rgba(16, 46, 80, 0.7);

    border-radius: 15px;

    padding: 20px;

    margin-bottom: 40px;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 15px;

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}



.filter-label {

    color: var(--secondary);

    font-weight: 600;

    margin-right: 10px;

}



.filter-options {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    flex: 1;

}



.filter-btn {

    background-color: rgba(255, 255, 255, 0.1);

    color: rgba(255, 255, 255, 0.8);

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

    border-radius: 30px;

    padding: 8px 15px;

    font-size: 0.9rem;

    cursor: pointer;

    transition: all 0.3s ease;

}



.filter-btn:hover,

.filter-btn.active {

    background-color: rgba(29, 205, 159, 0.2);

    color: var(--accent);

    border-color: var(--accent);

    transform: translateY(-2px);

}



.search-container {

    margin-left: auto;

    flex: 1;

    min-width: 200px;

}



.search-form {

    position: relative;

}



.search-form input {

    background-color: rgba(255, 255, 255, 0.1);

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

    border-radius: 30px;

    padding: 8px 15px 8px 40px;

    width: 100%;

    color: #ffffff;

    font-size: 0.9rem;

}



.search-form input:focus {

    outline: none;

    border-color: var(--accent);

    background-color: rgba(255, 255, 255, 0.15);

}



.search-form i {

    position: absolute;

    left: 15px;

    top: 50%;

    transform: translateY(-50%);

    color: rgba(255, 255, 255, 0.6);

}



.promo-grid {

    margin-bottom: 50px;

}



.promo-card {

    background-image: linear-gradient(135deg, rgba(16, 46, 80, 0.95), rgba(10, 22, 37, 0.9));

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

    margin-bottom: 30px;

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

    position: relative;

    transition: all 0.3s ease;

    height: 100%;

}



.promo-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);

    border-color: var(--accent);

}



.promo-img {

    width: 100%;

    height: 200px;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.promo-card:hover .promo-img {

    transform: scale(1.05);

}



.promo-badge {

    position: absolute;

    top: 15px;

    right: 15px;

    padding: 5px 15px;

    border-radius: 20px;

    font-weight: 600;

    font-size: 0.8rem;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

    z-index: 1;

}



.promo-badge.flash-sale {

    background-color: #FF4D4D;

    color: #ffffff;

}



.promo-badge.special {

    background-color: var(--secondary);

    color: var(--dark);

}



.promo-badge.event {

    background-color: #9747FF;

    color: #ffffff;

}



.promo-badge.bonus {

    background-color: var(--accent);

    color: var(--dark);

}



.promo-body {

    padding: 20px;

}



.promo-title-card {

    color: #ffffff;

    font-weight: 700;

    font-size: 1.3rem;

    margin-bottom: 10px;

    min-height: 60px;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.promo-game {

    color: rgba(255, 255, 255, 0.7);

    font-size: 0.9rem;

    margin-bottom: 15px;

    display: flex;

    align-items: center;

}



.promo-game img {

    width: 25px;

    height: 25px;

    border-radius: 5px;

    margin-right: 10px;

    object-fit: cover;

}



.promo-description {

    color: rgba(255, 255, 255, 0.8);

    font-size: 0.95rem;

    margin-bottom: 20px;

    min-height: 70px;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.promo-meta {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    padding-top: 15px;

}



.promo-date {

    color: rgba(255, 255, 255, 0.6);

    font-size: 0.85rem;

    display: flex;

    align-items: center;

}



.promo-date i {

    margin-right: 5px;

}



.promo-countdown {

    background-color: rgba(0, 0, 0, 0.3);

    color: var(--secondary);

    font-weight: 700;

    font-size: 0.9rem;

    padding: 5px 10px;

    border-radius: 5px;

    display: flex;

    align-items: center;

}



.promo-countdown i {

    margin-right: 5px;

}



.active-promo-swiper {

    width: 100%;

    height: 100%;

    margin-bottom: 50px;

    border-radius: 20px;

    overflow: hidden;

}



.active-promo-slide {

    position: relative;

    height: 400px;

    border-radius: 20px;

    overflow: hidden;

}



.active-promo-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: brightness(0.7);

    transition: all 0.5s ease;

}



.active-promo-content {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    padding: 40px;

    background: linear-gradient(to top, rgba(10, 22, 37, 0.95), rgba(10, 22, 37, 0));

}



.active-promo-badge {

    display: inline-block;

    padding: 5px 15px;

    border-radius: 20px;

    font-weight: 600;

    font-size: 0.9rem;

    margin-bottom: 15px;

}



.active-promo-title {

    color: #ffffff;

    font-weight: 800;

    font-size: 2rem;

    margin-bottom: 15px;

    font-family: 'Plus Jakarta Sans', sans-serif;

}



.active-promo-description {

    color: rgba(255, 255, 255, 0.9);

    font-size: 1.1rem;

    margin-bottom: 20px;

    max-width: 70%;

}



.active-promo-meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 20px;

}



.active-promo-date {

    color: rgba(255, 255, 255, 0.7);

    font-size: 0.9rem;

    display: flex;

    align-items: center;

}



.active-promo-date i {

    margin-right: 8px;

}



.active-promo-countdown {

    background-color: rgba(0, 0, 0, 0.5);

    padding: 8px 15px;

    border-radius: 30px;

    color: var(--secondary);

    font-weight: 700;

    display: flex;

    align-items: center;

}



.active-promo-countdown i {

    margin-right: 8px;

}



.section-heading {

    color: var(--secondary);

    font-weight: 800;

    font-size: 1.8rem;

    margin-bottom: 30px;

    padding-bottom: 15px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    position: relative;

}



.section-heading::after {

    content: '';

    position: absolute;

    bottom: -1px;

    left: 0;

    width: 100px;

    height: 3px;

    background-image: linear-gradient(to right, var(--secondary), var(--accent));

    border-radius: 2px;

}



.newsletter-box {

    background-image: linear-gradient(135deg, rgba(16, 46, 80, 0.9), rgba(10, 22, 37, 0.8)), url('https://picsum.photos/1920/1080?random=6');

    background-size: cover;

    background-position: center;

    border-radius: 20px;

    padding: 40px;

    margin-bottom: 50px;

    position: relative;

    overflow: hidden;

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

}



.newsletter-box::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+');

    z-index: 0;

}



.newsletter-content {

    position: relative;

    z-index: 1;

    text-align: center;

}



.newsletter-title {

    color: #ffffff;

    font-weight: 800;

    font-size: 2rem;

    margin-bottom: 15px;

}



.newsletter-subtitle {

    color: rgba(255, 255, 255, 0.8);

    font-size: 1.1rem;

    margin-bottom: 30px;

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

}



.newsletter-form {

    max-width: 600px;

    margin: 0 auto;

}



.newsletter-form .form-control {

    height: 60px;

    background-color: rgba(255, 255, 255, 0.1);

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

    color: #ffffff;

    padding: 0 20px;

    font-size: 1rem;

    border-radius: 10px 0 0 10px;

}



.newsletter-form .form-control:focus {

    outline: none;

    border-color: var(--accent);

    background-color: rgba(255, 255, 255, 0.15);

    box-shadow: none;

}



.newsletter-form .btn {

    height: 60px;

    border-radius: 0 10px 10px 0;

    padding: 0 30px;

    font-size: 1rem;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.event-calendar {

    background-color: rgba(16, 46, 80, 0.7);

    border-radius: 20px;

    padding: 30px;

    margin-bottom: 50px;

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

}



.calendar-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}



.calendar-title {

    color: #ffffff;

    font-weight: 700;

    font-size: 1.3rem;

}



.calendar-nav {

    display: flex;

    gap: 10px;

}



.calendar-nav-btn {

    width: 36px;

    height: 36px;

    background-color: rgba(255, 255, 255, 0.1);

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

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    cursor: pointer;

    transition: all 0.3s ease;

}



.calendar-nav-btn:hover {

    background-color: rgba(29, 205, 159, 0.2);

    border-color: var(--accent);

    color: var(--accent);

}



.calendar-grid {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 10px;

}



.calendar-day-header {

    text-align: center;

    color: var(--secondary);

    font-weight: 600;

    padding: 10px;

    font-size: 0.9rem;

}



.calendar-day {

    background-color: rgba(255, 255, 255, 0.05);

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

    border-radius: 10px;

    padding: 10px;

    min-height: 80px;

    position: relative;

}



.calendar-day.has-event {

    background-color: rgba(29, 205, 159, 0.1);

    border-color: rgba(29, 205, 159, 0.3);

}



.calendar-day.active {

    background-color: rgba(245, 196, 94, 0.1);

    border-color: rgba(245, 196, 94, 0.3);

}



.day-number {

    font-size: 0.9rem;

    color: rgba(255, 255, 255, 0.8);

    margin-bottom: 5px;

}



.day-number.active {

    color: var(--secondary);

    font-weight: 700;

}



.event-indicator {

    position: absolute;

    top: 10px;

    right: 10px;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background-color: var(--accent);

}



.event-content {

    font-size: 0.8rem;

    color: rgba(255, 255, 255, 0.7);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.event-list {

    margin-top: 30px;

}



.event-list-title {

    color: var(--secondary);

    font-weight: 700;

    margin-bottom: 15px;

}



.event-item {

    display: flex;

    gap: 15px;

    background-color: rgba(255, 255, 255, 0.05);

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

    border-radius: 10px;

    padding: 15px;

    margin-bottom: 10px;

    transition: all 0.3s ease;

}



.event-item:hover {

    background-color: rgba(255, 255, 255, 0.1);

    transform: translateX(5px);

}



.event-date-box {

    width: 60px;

    height: 60px;

    background-color: rgba(29, 205, 159, 0.2);

    border-radius: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(29, 205, 159, 0.3);

    flex-shrink: 0;

}



.event-month {

    color: var(--accent);

    font-weight: 700;

    font-size: 0.8rem;

    text-transform: uppercase;

}



.event-day {

    color: #ffffff;

    font-weight: 700;

    font-size: 1.3rem;

}



.event-details {

    flex: 1;

}



.event-name {

    color: #ffffff;

    font-weight: 600;

    font-size: 1rem;

    margin-bottom: 5px;

}



.event-description {

    color: rgba(255, 255, 255, 0.7);

    font-size: 0.9rem;

    margin-bottom: 5px;

}



.event-time {

    color: rgba(255, 255, 255, 0.6);

    font-size: 0.8rem;

    display: flex;

    align-items: center;

}



.event-time i {

    margin-right: 5px;

}



.promo-pagination {

    display: flex;

    justify-content: center;

    margin-top: 40px;

    margin-bottom: 50px;

}



.page-item {

    margin: 0 5px;

}



.page-link {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: rgba(16, 46, 80, 0.5);

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

    color: rgba(255, 255, 255, 0.8);

    border-radius: 8px;

    font-weight: 600;

    transition: all 0.3s ease;

}



.page-link:hover {

    background-color: rgba(29, 205, 159, 0.2);

    border-color: var(--accent);

    color: var(--accent);

}



.page-item.active .page-link {

    background-color: var(--accent);

    color: var(--dark);

    border-color: var(--accent);

}



.page-item.disabled .page-link {

    background-color: rgba(16, 46, 80, 0.3);

    color: rgba(255, 255, 255, 0.4);

    border-color: rgba(255, 255, 255, 0.05);

    cursor: not-allowed;

}



@media (max-width: 991px) {

    .active-promo-content {

        padding: 30px;

    }



    .active-promo-title {

        font-size: 1.7rem;

    }



    .active-promo-description {

        max-width: 100%;

        font-size: 1rem;

    }

}



@media (max-width: 768px) {

    .promo-title {

        font-size: 2.2rem;

    }



    .filter-bar {

        flex-direction: column;

        align-items: flex-start;

    }



    .search-container {

        width: 100%;

    }



    .active-promo-slide {

        height: 350px;

    }



    .active-promo-content {

        padding: 20px;

    }



    .active-promo-title {

        font-size: 1.5rem;

    }



    .active-promo-description {

        font-size: 0.9rem;

    }



    .calendar-grid {

        gap: 5px;

    }



    .calendar-day {

        min-height: 60px;

        padding: 5px;

    }

}



@media (max-width: 576px) {

    .active-promo-slide {

        height: 300px;

    }

}

.support-hero {

    background-image: linear-gradient(135deg, rgba(10, 22, 37, 0.95), rgba(16, 46, 80, 0.92)),

        url('https://picsum.photos/1920/1080?random=4');

    background-size: cover;

    background-position: center;

    padding: 80px 0;

    position: relative;

    overflow: hidden;

}



.support-hero::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+');

    z-index: 0;

}



.support-content {

    position: relative;

    z-index: 1;

    text-align: center;

}



.support-title {

    font-weight: 800;

    font-size: 3rem;

    margin-bottom: 20px;

    background: linear-gradient(to right, var(--secondary), var(--accent));

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-transform: uppercase;

    letter-spacing: 2px;

}



.support-subtitle {

    font-size: 1.2rem;

    color: rgba(255, 255, 255, 0.8);

    margin-bottom: 20px;

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

}



.quick-links {

    margin-top: 40px;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 20px;

}



.quick-link {

    background-color: rgba(var(--dark-rgb), 0.95);

    border-radius: 15px;

    padding: 20px;

    text-align: center;

    min-width: 200px;

    flex: 1;

    max-width: 300px;

    transition: all 0.3s ease;

    border: 1px solid rgba(var(--secondary-rgb), 0.1);

    cursor: pointer;

    text-decoration: none;

}



.quick-link:hover {

    transform: translateY(-10px);

    background-color: rgba(var(--accent-rgb), 0.2);

    border-color: var(--accent);

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);

}



.quick-link i {

    font-size: 2.5rem;

    margin-bottom: 15px;

    color: var(--light);

    background-color: rgba(var(--secondary-rgb), 0.3);

    width: 70px;

    height: 70px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-left: auto;

    margin-right: auto;

    border: 1px solid rgba(var(--accent-rgb), 0.2);

}



.quick-link h3 {

    color: #ffffff;

    font-size: 1.3rem;

    font-weight: 700;

    margin-bottom: 10px;

}



.quick-link p {

    color: rgba(255, 255, 255, 0.7);

    font-size: 0.9rem;

}



.support-container {

    background-image: var(--card-gradient);

    border-radius: 20px;

    padding: 40px;

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

    position: relative;

    overflow: hidden;

    margin-bottom: 40px;

}



.support-container::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+');

    z-index: 0;

}



.support-section {

    position: relative;

    z-index: 1;

    margin-bottom: 50px;

}



.support-section:last-child {

    margin-bottom: 0;

}





.section-title i {

    margin-right: 15px;

    font-size: 1.5rem;

}



.contact-block {

    display: flex;

    background-color: rgba(var(--primary-rgb), 0.5);

    border-radius: 15px;

    border: 1px solid rgba(var(--secondary-rgb), 0.1);

    overflow: hidden;

    margin-bottom: 30px;

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

    transition: all 0.3s ease;

}



.contact-block:hover {

    transform: translateY(-5px);

    border-color: var(--secondary);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

}



.contact-icon {

    background-color: rgba(var(--accent-rgb), 0.2);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    font-size: 2rem;

    color: var(--light);

    min-width: 100px;

}



.contact-info {

    padding: 25px;

    flex: 1;

}



.contact-title {

    color: #ffffff;

    font-weight: 700;

    font-size: 1.3rem;

    margin-bottom: 10px;

}



.contact-details {

    color: rgba(255, 255, 255, 0.8);

    margin-bottom: 15px;

    line-height: 1.6;

}



.contact-action .btn {

    padding: 8px 15px;

    font-size: 0.9rem;

}



.tracking-form {

    background-color: rgba(16, 46, 80, 0.5);

    border-radius: 15px;

    padding: 30px;

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

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}



.tracking-form-title {

    color: #ffffff;

    font-weight: 700;

    font-size: 1.5rem;

    margin-bottom: 20px;

    text-align: center;

}



.form-group {

    margin-bottom: 20px;

}



.tracking-form .form-control {

    background-color: rgba(255, 255, 255, 0.1);

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

    color: #ffffff;

    padding: 12px 15px;

    border-radius: 10px;

}



.tracking-form .form-control:focus {

    background-color: rgba(255, 255, 255, 0.15);

    border-color: var(--accent);

    box-shadow: 0 0 0 0.25rem rgba(29, 205, 159, 0.25);

}



.tracking-form .btn {

    padding: 12px 20px;

    width: 100%;

}



.faq-preview {

    margin-top: 30px;

}



.faq-preview-title {

    color: #ffffff;

    font-weight: 700;

    margin-bottom: 20px;

    text-align: center;

}



.faq-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.faq-item {

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

    border-radius: 10px;

    margin-bottom: 15px;

    overflow: hidden;

    background-color: rgba(16, 46, 80, 0.3);

    transition: all 0.3s ease;

}



.faq-item:hover {

    background-color: rgba(16, 46, 80, 0.5);

    border-color: rgba(29, 205, 159, 0.3);

    transform: translateX(5px);

}



.faq-item a {

    display: block;

    color: rgba(255, 255, 255, 0.8);

    padding: 15px 20px;

    text-decoration: none;

    position: relative;

}



.faq-item a::after {

    content: '\f054';

    font-family: 'Font Awesome 5 Free';

    font-weight: 900;

    position: absolute;

    right: 20px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 0.8rem;

    color: var(--accent);

    transition: transform 0.3s ease;

}



.faq-item:hover a::after {

    transform: translate(5px, -50%);

}





.topic-card {

    background-color: rgba(var(--primary-rgb), 0.5);

    border-radius: 15px;

    border: 1px solid rgba(var(--secondary-rgb), 0.1);

    padding: 25px;

    height: 100%;

    transition: all 0.3s ease;

    text-align: center;

}



.topic-card:hover {

    transform: translateY(-10px);

    background-color: rgba(var(--dark-rgb), 0.1);

    border-color: var(--secondary);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

}



.topic-icon {

    width: 80px;

    height: 80px;

    background-color: rgba(var(--accent-rgb), 0.05);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

    font-size: 2rem;

    color: var(--light);

    border: 1px solid rgba(var(--secondary-rgb), 0.9);

}



.topic-title {

    color: #ffffff;

    font-weight: 700;

    font-size: 1.3rem;

    margin-bottom: 15px;

}



.topic-description {

    color: rgba(255, 255, 255, 0.7);

    font-size: 0.95rem;

    margin-bottom: 20px;

}



@media (max-width: 768px) {

    .support-title {

        font-size: 2.2rem;

    }



    .support-container {

        padding: 30px 20px;

    }



    .contact-block {

        flex-direction: column;

    }



    .contact-icon {

        padding: 20px;

        width: 100%;

        min-width: auto;

    }



}

.faq-hero {

    background-image: linear-gradient(135deg, rgba(10, 22, 37, 0.95), rgba(16, 46, 80, 0.92)),

        url('https://picsum.photos/1920/1080?random=3');

    background-size: cover;

    background-position: center;

    padding: 80px 0;

    position: relative;

    overflow: hidden;

}



.faq-hero::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+');

    z-index: 0;

}



.faq-content {

    position: relative;

    z-index: 1;

    text-align: center;

}



.faq-title {

    font-weight: 800;

    font-size: 3rem;

    margin-bottom: 20px;

    background: linear-gradient(to right, var(--secondary), var(--accent));

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-transform: uppercase;

    letter-spacing: 2px;

}



.faq-subtitle {

    font-size: 1.2rem;

    color: rgba(255, 255, 255, 0.8);

    margin-bottom: 20px;

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

}



.faq-search-container {

    max-width: 600px;

    margin: 30px auto 0;

}



.faq-search-form .form-control {

    background-color: rgba(255, 255, 255, 0.1);

    border: none;

    padding: 15px 20px;

    font-size: 1.1rem;

    color: #ffffff;

    height: 60px;

    border-radius: 10px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

}



.faq-search-form .form-control::placeholder {

    color: rgba(255, 255, 255, 0.5);

}



.faq-search-form .btn {

    padding: 15px 30px;

    font-size: 1.1rem;

    height: 60px;

    border-radius: 10px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

}



.faq-container {

    background-image: var(--card-gradient);

    border-radius: 20px;

    padding: 40px;

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

    position: relative;

    overflow: hidden;

    margin-bottom: 40px;

}



.faq-container::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+');

    z-index: 0;

}



.faq-category {

    position: relative;

    z-index: 1;

    margin-bottom: 40px;

}



.category-title {

    color: var(--secondary);

    font-weight: 700;

    margin-bottom: 25px;

    padding-bottom: 10px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    display: flex;

    align-items: center;

}



.category-title i {

    margin-right: 15px;

    width: 40px;

    height: 40px;

    background-color: rgba(245, 196, 94, 0.2);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;

}



.faq-accordion {

    margin-bottom: 30px;

}



.faq-accordion .accordion-item {

    background-color: transparent;

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

    margin-bottom: 15px;

    border-radius: 15px;

    overflow: hidden;

}



.faq-accordion .accordion-button {

    background-color: rgba(var(--dark-rgb), 0.7);

    color: #ffffff;

    font-weight: 600;

    padding: 20px;

    border: none;

    box-shadow: none;

    border-radius: 15px;

}



.faq-accordion .accordion-button:not(.collapsed) {

    background-color: rgba(var(--dark-rgb), 0.3);

    color: #ffffff;

    box-shadow: none;

    border-radius: 15px 15px 0 0;

}



.faq-accordion .accordion-button:focus {

    box-shadow: none;

    border-color: rgba(29, 205, 159, 0.5);

}



.faq-accordion .accordion-button::after {

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

}



.faq-accordion .accordion-body {

    background-color: rgba(var(--primary-rgb), 0.3);

    padding: 20px;

    color: rgba(255, 255, 255, 0.8);

    line-height: 1.7;

}



.faq-nav {

    background-color: rgba(var(--primary-rgb), 0.7);

    border-radius: 15px;

    padding: 20px;

    margin-bottom: 30px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

    position: sticky;

    top: 20px;

}



.faq-nav-title {

    color: var(--secondary);

    font-weight: 700;

    margin-bottom: 15px;

    padding-bottom: 10px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.faq-nav-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.faq-nav-item {

    margin-bottom: 10px;

}



.faq-nav-link {

    color: rgba(255, 255, 255, 0.8);

    text-decoration: none;

    display: block;

    padding: 10px 15px;

    border-radius: 10px;

    transition: all 0.3s ease;

    border-left: 3px solid transparent;

}



.faq-nav-link:hover,

.faq-nav-link.active {

    background-color: rgba(var(--accent-rgb), 0.05);

    color: var(--accent);

    border-left-color: var(--accent);

}



.faq-nav-link i {

    margin-right: 10px;

    width: 25px;

    text-align: center;

}



.still-questions {

    position: relative;

    z-index: 1;

    background-color: rgba(var(--dark-rgb), 0.3);

    border-radius: 15px;

    padding: 30px;

    text-align: center;

    margin-top: 40px;

    border: 1px solid rgba(var(--secondary-rgb), 0.1);

}



.still-questions h3 {

    color: var(--accent);

    font-weight: 700;

    margin-bottom: 15px;

}



.still-questions p {

    color: rgba(255, 255, 255, 0.8);

    margin-bottom: 20px;

}



.contact-options {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;

}



@media (max-width: 768px) {

    .faq-title {

        font-size: 2.2rem;

    }



    .faq-container {

        padding: 30px 20px;

    }



    .faq-nav {

        position: relative;

        top: 0;

        margin-top: 20px;

    }



    .contact-options {

        flex-direction: column;

    }



    .contact-options .btn {

        width: 100%;

    }

}

.policy-hero {

    background-image: linear-gradient(135deg, rgba(10, 22, 37, 0.95), rgba(16, 46, 80, 0.92)),

        url('https://picsum.photos/1920/1080');

    background-size: cover;

    background-position: center;

    padding: 80px 0;

    position: relative;

    overflow: hidden;

}



.policy-hero::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+');

    z-index: 0;

}



.policy-content {

    position: relative;

    z-index: 1;

    text-align: center;

}



.policy-title {

    font-weight: 800;

    font-size: 3rem;

    margin-bottom: 20px;

    background: linear-gradient(to right, var(--secondary), var(--accent));

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-transform: uppercase;

    letter-spacing: 2px;

}



.policy-subtitle {

    font-size: 1.2rem;

    color: rgba(255, 255, 255, 0.8);

    margin-bottom: 20px;

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

}



.policy-container {

    background-image: linear-gradient(135deg, rgba(10, 22, 37, 0.95), rgba(16, 46, 80, 0.9));

    border-radius: 20px;

    padding: 40px;

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

    position: relative;

    overflow: hidden;

    margin-bottom: 40px;

}



.policy-container::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+');

    z-index: 0;

}



.policy-section {

    position: relative;

    z-index: 1;

    margin-bottom: 30px;

}



.policy-section:last-child {

    margin-bottom: 0;

}



.policy-section h2 {

    color: var(--secondary);

    font-weight: 700;

    margin-bottom: 20px;

    padding-bottom: 10px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.policy-section h3 {

    color: var(--accent);

    font-weight: 600;

    margin: 25px 0 15px;

}



.policy-section p,

.policy-section li {

    color: rgba(255, 255, 255, 0.8);

    line-height: 1.7;

    margin-bottom: 15px;

}



.policy-section ul,

.policy-section ol {

    padding-left: 20px;

    margin-bottom: 20px;

}



.policy-section li {

    margin-bottom: 10px;

}



.policy-date {

    text-align: right;

    color: rgba(255, 255, 255, 0.6);

    font-style: italic;

    margin-top: 20px;

}



.policy-nav {

    background-color: rgba(16, 46, 80, 0.7);

    border-radius: 15px;

    padding: 20px;

    margin-bottom: 30px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

    position: sticky;

    top: 20px;

}



.policy-nav-title {

    color: var(--secondary);

    font-weight: 700;

    margin-bottom: 15px;

    padding-bottom: 10px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.policy-nav-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.policy-nav-item {

    margin-bottom: 10px;

}



.policy-nav-link {

    color: rgba(255, 255, 255, 0.8);

    text-decoration: none;

    display: block;

    padding: 5px 10px;

    border-radius: 5px;

    transition: all 0.3s ease;

}



.policy-nav-link:hover {

    background-color: rgba(29, 205, 159, 0.2);

    color: var(--accent);

    transform: translateX(5px);

}



@media (max-width: 768px) {

    .policy-title {

        font-size: 2.2rem;

    }



    .policy-container {

        padding: 30px 20px;

    }



    .policy-nav {

        position: relative;

        top: 0;

        margin-top: 20px;

    }

}



.order-search-form .form-control {

    background-color: rgba(255, 255, 255, 0.1);

    border: none;

    padding: 15px 20px;

    font-size: 1.1rem;

    color: #ffffff;

    height: 60px;

    border-radius: 10px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

}



.order-search-form .form-control::placeholder {

    color: rgba(255, 255, 255, 0.5);

}



.order-search-form .btn {

    padding: 15px 30px;

    font-size: 1.1rem;

    border-radius: 10px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

}



.order-search-form .form-text {

    margin-top: 15px;

    text-align: left;

}



/* Responsive adjustments */

@media (min-width: 768px) {

    .order-search-form .form-group {

        display: flex;

        gap: 10px;

    }



    .order-search-form .form-control {

        flex: 1;

        margin-bottom: 0 !important;

    }



    .order-search-form .btn {

        width: auto !important;

        min-width: 180px;

    }

}



@media (max-width: 767px) {

    .track-order-title {

        font-size: 2rem;

    }



    .track-order-subtitle {

        font-size: 1rem;

    }



    .search-container {

        padding: 20px;

    }

}



.gems-section-title {

    font-weight: 800;

    font-size: 2.2rem;

    margin-bottom: 30px;

    text-align: center;

    position: relative;

    padding-bottom: 15px;

    text-transform: uppercase;

    letter-spacing: 2px;

    background: linear-gradient(to right, var(--secondary), var(--accent));

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}



.gems-section-title::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 100px;

    height: 4px;

    background-image: linear-gradient(to right, var(--secondary), var(--accent));

    border-radius: 2px;

}



/* Product Grid Styles */

.gems-product-grid {

    margin-bottom: 10px;

}



/* Font Size Utilities */

.gems-text-xs {

    font-size: 0.7rem;

    font-weight: 600;

}



.gems-fs-smaller {

    font-size: 0.625rem;

}



.gems-text-xxs {

    font-size: 0.65rem;

}



/* Image Container */

.gems-img-container {

    aspect-ratio: 1/1;

    width: 1.5rem;

    height: 1.5rem;

}



@media (min-width: 768px) {

    .gems-img-container {

        width: 2rem;

        height: 2rem;

    }

}



/* Spacing Utilities */

.gems-gap-1 {

    gap: 0.25rem;

}



.gems-gap-2 {

    gap: 0.5rem;

}



.gems-gap-3 {

    gap: 0.75rem;

}



/* Product Card Styles */

.gems-product-card {

    background-image: var(--card-gradient);

    border-radius: 15px;

    overflow: hidden;

    transition: all 0.3s ease;

    border: 1px solid var(--border-thin);

    box-shadow: var(--card-shadow);

    position: relative;

    cursor: pointer;

}



.gems-product-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);

    border: 1px solid var(--border-medium);

}



/* CSS untuk menambahkan indikator visual pada produk yang dipilih */

.gems-product-card.active {

    border: 2px solid #00FF00 !important;

    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5) !important;

    transform: translateY(-5px);

    position: relative;

}



.gems-product-card.active::after {

    content: "✓";

    position: absolute;

    top: 10px;

    right: 10px;

    width: 24px;

    height: 24px;

    background-color: #00FF00;

    color: #190028;

    font-weight: bold;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

}



/* Animasi pulse untuk card yang active */

@keyframes pulse-border {

    0% {

        box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7);

    }

    70% {

        box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);

    }

    100% {

        box-shadow: 0 0 0 0 rgba(0, 255, 0, 0);

    }

}



.gems-product-card.active {

    animation: pulse-border 2s infinite;

}



.gems-product-body {

    padding: 1rem;

}



.gems-product-footer {

    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));

    border-bottom-left-radius: 15px;

    border-bottom-right-radius: 15px;

}



.gems-discount-badge {

    background-image: linear-gradient(to bottom, var(--tertiary), rgba(var(--tertiary-rgb), 0.6));

    padding: 0.25rem 0.5rem;

    border-radius: 0.25rem;

    font-size: 0.65rem;

}



.gems-image {

    transition: all 0.3s ease;

    max-width: 100%;

    height: auto;

}



.gems-product-card:hover .gems-image {

    transform: rotate(12deg);

}



/* Responsive adjustments */

.gems-rounded-bottom {

    border-bottom-left-radius: 0.75rem !important;

    border-bottom-right-radius: 0.75rem !important;

}



.gems-price {

    font-size: 0.875rem;

    color: var(--secondary);

}



.gems-old-price {

    font-size: 0.625rem;

    text-decoration: line-through;

    color: var(--danger);

}



@media (min-width: 768px) {

    .gems-product-body {

        padding: 1.25rem;

    }

    

    .gems-price {

        font-size: 1rem;

    }

}