/* Root Variables */
:root { --primary-color: #131331; --secondary-color: #0046b4; --accent-color: #f00028; --light-color: #f9f9f9; --dark-color: #333; --font-family: 'Poppins', sans-serif; }
html{scroll-behavior: smooth;}
/* Global Styles */
body { font-family: var(--font-family); background-color: var(--light-color); color: var(--dark-color); scroll-behavior: smooth; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
.container { max-width: 1200px; }

/* Header */
.header { background-color: #fff; border-bottom: 1px solid #eaeaea; position: sticky; top: 0; z-index: 1000; height: 80px; }
.header .logo img { height: 60px; }
.header .d-flex { height: 100%; }
.header .d-flex.align-items-center { align-items: center !important; }
.header img.pp { width: 49px; }
.nav ul { list-style: none; display: flex; margin: 0; padding: 0; }
.nav ul li { margin-left: 30px; }
.nav ul li a { color: var(--dark-color); font-size: 1.1em; padding-bottom: 5px; transition: color 0.3s; }
.nav ul li a:hover { color: var(--primary-color); }
.language-switcher select { padding: 5px; border-radius: 5px; border: 1px solid #ccc; }
.profile-icon i { color: var(--primary-color); }

/* Hero Section */
.hero { background: linear-gradient(180deg, #f00028, #0046b4); color: #fff; padding: 70px 0 30px; text-align: center; }
.hero h1 { font-size: 2.1em; margin-bottom: 10px; }
.hero p { font-size: 1em; margin-bottom: 20px; }
.btn-primary { background-color: var(--accent-color)!important; color: var(--light-color); border: none; }
.hero .btn-primary{border-radius: 20px;width:150px}
.btn-primary:hover { background-color: #e6b800; }
.hero-banner img { width: 100%; max-width: 800px; border-radius: 10px;margin-top:10px; }

/* Search and Filter */
.search-filter { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.search-filter .input-group { max-width: 100%; }
.search-filter .input-group .form-control { border-radius: 30px 0 0 30px; }
.search-filter .input-group .input-group-append .input-group-text { border-radius: 0 30px 30px 0; background-color: #fff; }
.search-filter .input-group + .input-group { margin-top: 10px; }
@media (min-width: 768px) { .search-filter .input-group + .input-group { margin-top: 0; margin-left: 15px; } }

/* Vouchers Section */
.vouchers { }
.voucher-grid { margin-left: 0; margin-right: 0; }
.voucher-card { background-color: #fff; border-radius: 15px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; border: 1px solid #eaeaea; position: relative; margin: 15px; cursor: pointer; }
.voucher-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.voucher-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  border-radius: 15px; pointer-events: none; }
.voucher-image { position: relative;padding:2px }
.voucher-image img { width: 100%; height: auto; object-fit: cover;max-height:170px;border-radius: 12px 12px 0 0 }
.price-tag { position: absolute; top: 10px; left: 10px; background-color: var(--accent-color); color: var(--light-color); padding: 5px 10px; border-radius: 20px; font-weight: bold; font-size: 0.9em; }
.voucher-info { padding: 15px; text-align: center; background-color: var(--light-color); }
.voucher-info h3 { margin-bottom: 10px; font-size: 1em; color: var(--dark-color); }
.voucher-info p { margin-bottom: 10px; color: var(--primary-color); font-weight: bold; font-size: 0.9em; }
.voucher-info .btn { padding: 8px 15px; border-radius: 30px; background-color: var(--accent-color); color: #fff; border: none; font-size: 0.9em; transition: background-color 0.3s, transform 0.3s; }
.voucher-info .btn:hover { background-color: var(--primary-color); transform: translateY(-3px); }

/* Modern Button Animation */
.modern-button { position: relative; overflow: hidden; }
.modern-button::after { content: ''; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.2); transition: all 0.3s; }
.modern-button:hover::after { left: 0; }

/* How It Works Section */
.how-it-works .step-icon { width: 60px; height: 60px; margin: 0 auto 15px; background-color: var(--primary-color); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s; }
.how-it-works .step-icon:hover { background-color: var(--secondary-color); }
.how-it-works h3 { font-size: 1em; }
footer.bg-primary { background: #f00028 !important; }

/* Modal Styles */
.modal-content { border-radius: 15px; overflow: hidden; animation: zoomIn 0.5s; max-height: 90vh; }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
.modal-header { border-bottom: none; display: flex; align-items: center; }
.modal-header .voucher-preview img { width: 60px; }
.modal-header .voucher-preview h5 { font-size: 1.2em; }
.modal-body { overflow-y: auto; }

/* Back to Top Button */
.back-to-top { position: fixed; bottom: 30px; right: 30px; background-color: var(--primary-color); color: #fff; width: 50px; height: 50px; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 1.5em; z-index: 1000; cursor: pointer; transition: background-color 0.3s;text-align: center;padding:8px;box-shadow: 2px 2px 10px #00000054 }
.back-to-top:hover { background-color: var(--light-color); }
.pp6 { background: #c20909 !important; color: #fff !important; }
span.mini { color: red; text-align: center; margin: 4px auto; display: block; font-size: 14px; }
.page-content{display:none}
/* Profile Page Styles */
.profile .user-profile-card { border: none; box-shadow: 0 15px 30px rgba(0,0,0,0.1); border-radius: 10px; overflow: hidden; padding:20px; }
.profile .profile-img { width: 100%; height: auto; object-fit: cover;max-width: 220px;margin: auto; }
.profile .user-profile-card .card-body { padding: 20px; }
.profile .purchased-vouchers { background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.profile .voucher-item { display: flex; align-items: center; margin-bottom: 20px; }
.profile .voucher-item:last-child { margin-bottom: 0; }
.profile .voucher-item img { width: 100px; height: auto; border-radius: 10px; object-fit: cover; margin-right: 15px; }
.profile .voucher-item .voucher-details { flex: 1; }
.profile .voucher-item .voucher-details h5 { margin: 0 0 4px; font-size: 18px; } 
.profile .voucher-item .voucher-details p { margin:0;color: #777; } 
.profile .voucher-item .voucher-action { margin-left: 20px;text-align: center }
a.howtoredeem { font-size: 14px; color: #03429b; }
.voucher-list .card-body a { display: contents; color: #03429b; }
.reds_ps,.reds_dr { direction: rtl; text-align: right; }
.profile .voucher-item .voucher-action button { background-color: var(--accent-color); color: #fff; border: none; padding: 6px 25px; border-radius: 5px; cursor: pointer; }
.profile .voucher-item .voucher-action button:hover { background-color: var(--secondary-color); }
.profile button.pp6.btn.btn-primary { width: 100%; border-radius: 8px;padding:8px; }
.mydrop .pp1 { color: #333; font-weight: 800; font-size: 25px; }
a.dropdown-item { padding: 6px 20px; }
.profile .btn-primary { background-color: #007bff; border-color: #007bff; } 
.profile .btn-primary:hover { background-color: #0056b3; border-color: #0056b3; }
#voucher-modal .modal-dialog.modal-dialog-centered {max-width: max-content;margin:auto}
#voucher-modal .voucher-modal-content img { max-width: 300px; border-radius: 10px; margin: 0 auto; } 
.voucher-modal-content h4 { margin-top: 10px; font-weight: bold;max-width: 290px } 
.voucher-code-pin { margin-top: 20px; } .voucher-code-pin h5 { font-weight: bold; }
.code-box { font-size: 20px; letter-spacing: 2px; padding: 12px; background-color: #333; color: #fff; border-radius: 0; cursor: pointer; transition: background-color 0.3s ease; position: relative; }
.code-box:hover { background-color: #444; }
#voucher-modal .voucher-card.voucher-modal-content.text-center { margin: 0; border: none; transform: none !important;cursor:initial;display:block!important; }
#voucher-code-mask { font-size: 18px; color: #aaa; } 
#voucher-code { font-size: 22px; font-weight: bold; } 
.processing-animation { font-size: 18px; color: #ddd; animation: pulse 1.5s infinite;background:#da5800; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
#voucher-pin { background: #6cca23; font-weight: 800; }
#voucher-modal-price { position: initial; width: max-content; margin: auto; color: var(--light-color); padding: 8px 20px; }
footer p.mb-0 { font-size: 14px; margin-top: 10px; }
.voucher-list .card-body { margin: -20px 0 20px; }
.processing-animation.tt { font-size: 16px; padding: 18px; margin: auto; max-width: 300px; animation: none; background: #1f858c; }
.card video { width: 200px; }
/* Responsive Styles */
@media (min-width: 1200px) { .voucher-grid { max-width: 1140px; margin: 0 auto; } }
@media (max-width: 991.98px) { .voucher-card { margin: 15px 10px; } }
@media (max-width: 767.98px) { .voucher-card {flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); margin: 5px;} }
@media (max-width: 575.98px) { .hero{padding-top:50px}.nav { display: none; }.voucher-card {flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); margin: 5px;} .language-switcher { display: none; } .header { height: 70px; } .header .logo img { height: 50px; }.profile .voucher-item { flex-direction: column; }.profile .voucher-item img { width: 100%; margin: 0 0 10px; }.profile .voucher-details, .profile .voucher-action { width: 100%; }.profile .voucher-action button { display: block;width:100%;margin-top:8px; }.profile .voucher-item .voucher-action{margin:0} #voucher-modal .voucher-card { max-width: 100%; }}