/* ============================================ DARK QUIZ PAGE CSS - INFIX LMS ============================================ */ :root { --dark-bg: #0A0C15; --dark-surface: #111827; --dark-surface-light: #1A1F2E; --accent-cyan: #06B6D4; --accent-purple: #8B5CF6; --accent-pink: #EC4899; --accent-orange: #F59E0B; --gradient-1: linear-gradient(135deg, #06B6D4 0%, #8B5CF6 100%); --text-white: #FFFFFF; --text-gray: #9CA3AF; } /* Same gray-header gap as dark-class-details.css/dark-contact.css/ dark-instructor-details.css — this file never set a dark body background, so the fixed translucent site header (backdrop-filter: blur over ) sampled the page's unset/light background and read as flat gray. */ body { background: var(--dark-bg); } /* Breadcrumb */ .dark-quiz-breadcrumb { background: linear-gradient(135deg, #0A0C15 0%, #111827 100%); padding: 130px 0 80px 0; position: relative; overflow: hidden; border-bottom: 1px solid rgba(6, 182, 212, 0.2); } .dark-quiz-breadcrumb::before { content: ''; position: absolute; top: -50%; right: -20%; width: 500px; height: 500px; background: rgba(6, 182, 212, 0.1); border-radius: 50%; filter: blur(80px); animation: floatBubble 20s ease-in-out infinite; } .dark-quiz-breadcrumb::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 400px; height: 400px; background: rgba(139, 92, 246, 0.1); border-radius: 50%; filter: blur(80px); animation: floatBubble 15s ease-in-out infinite reverse; } @keyframes floatBubble { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -30px) scale(1.1); } } .breadcrumb-content { text-align: center; position: relative; z-index: 2; } .breadcrumb-title { font-size: 48px; font-weight: 800; font-family: 'Outfit', sans-serif; background: linear-gradient(135deg, #06B6D4, #8B5CF6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 15px; } .breadcrumb-links { font-size: 16px; color: #9CA3AF; margin-bottom: 15px; } .breadcrumb-links a { color: #9CA3AF; text-decoration: none; } .breadcrumb-links a:hover { color: #06B6D4; } .breadcrumb-links .separator { margin: 0 8px; } .breadcrumb-links .current { color: #06B6D4; } .breadcrumb-description { color: #9CA3AF; font-size: 16px; max-width: 600px; margin: 0 auto; } /* Quiz Section */ .dark-quiz-section { background: #0A0C15; padding: 60px 0; min-height: 60vh; } /* Filter Sidebar */ .dark-filter-sidebar { background: #111827; border-radius: 24px; padding: 25px; border: 1px solid rgba(6, 182, 212, 0.2); position: sticky; top: 100px; } .filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .filter-header h4 { color: #FFFFFF; font-size: 20px; font-weight: 600; margin: 0; } .filter-header h4 i { color: #06B6D4; margin-right: 10px; } .reset-filters-btn { background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 30px; padding: 6px 15px; color: #06B6D4; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .reset-filters-btn:hover { background: rgba(6, 182, 212, 0.2); border-color: #06B6D4; } .filter-group { margin-bottom: 25px; } .filter-title { color: #FFFFFF !important; font-size: 16px; font-weight: 600; margin-bottom: 15px; display: block; } .filter-scroll { max-height: 200px; overflow-y: auto; padding-right: 5px; } .filter-scroll::-webkit-scrollbar { width: 4px; } .filter-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 10px; } .filter-scroll::-webkit-scrollbar-thumb { background: #06B6D4; border-radius: 10px; } /* Search Input */ .search-input-wrapper { position: relative; } .search-input-wrapper i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #06B6D4; font-size: 14px; } .search-input { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 12px; padding: 10px 15px 10px 40px; color: #FFFFFF; font-size: 14px; } .search-input:focus { outline: none; border-color: #06B6D4; } #search-quiz::placeholder, #mobile-search::placeholder, .search-input::placeholder { color: var(--text-gray); opacity: 1; } #search-quiz::-webkit-input-placeholder, #mobile-search::-webkit-input-placeholder, .search-input::-webkit-input-placeholder { color: var(--text-gray); opacity: 1; } #search-quiz:-ms-input-placeholder, #mobile-search:-ms-input-placeholder, .search-input:-ms-input-placeholder { color: var(--text-gray); opacity: 1; } /* Checkboxes & Radios */ .filter-checkbox, .filter-radio { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; cursor: pointer; transition: all 0.3s ease; } .filter-checkbox:hover, .filter-radio:hover { transform: translateX(3px); } .filter-checkbox input, .filter-radio input { width: 18px; height: 18px; cursor: pointer; accent-color: #06B6D4; } .filter-text { color: #FFFFFF !important; font-size: 14px; font-weight: 400; flex: 1; } .filter-count { color: #9CA3AF; font-size: 12px; background: rgba(255, 255, 255, 0.05); padding: 2px 8px; border-radius: 20px; } .rating-filter { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; cursor: pointer; } .rating-filter input { width: 18px; height: 18px; accent-color: #06B6D4; } .rating-filter .stars { color: #F59E0B; font-size: 13px; } .rating-filter span { color: #FFFFFF; font-size: 13px; } /* Quiz Top Bar */ .quiz-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding: 20px; background: #111827; border-radius: 24px; border: 1px solid rgba(6, 182, 212, 0.2); flex-wrap: wrap; gap: 15px; } .quiz-result-count { color: #9CA3AF; font-size: 14px; } .quiz-result-count span { color: #06B6D4; font-weight: 600; } .quiz-sort { display: flex; align-items: center; } .sort-select-wrapper { position: relative; display: inline-block; } .sort-select-wrapper label { color: #FFFFFF; font-size: 14px; margin-right: 10px; } .sort-select-wrapper select { appearance: none; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 40px; padding: 8px 35px 8px 18px; color: #FFFFFF; font-size: 14px; cursor: pointer; } .sort-select-wrapper select:hover { border-color: #06B6D4; } .sort-select-wrapper select option { background: #111827; color: #FFFFFF; } .sort-select-wrapper i { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #06B6D4; pointer-events: none; } /* Quiz Grid */ .quiz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } /* Quiz Card */ .quiz-card { background: #111827; border: 1px solid rgba(6, 182, 212, 0.2); border-radius: 24px; overflow: hidden; transition: all 0.3s ease; position: relative; } .quiz-card:hover { transform: translateY(-5px); border-color: #06B6D4; box-shadow: 0 20px 40px rgba(6, 182, 212, 0.2); } .quiz-badge { position: absolute; top: 15px; left: 15px; z-index: 2; } .quiz-type-badge { background: linear-gradient(135deg, #EC4899, #8B5CF6); color: white; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .quiz-image { position: relative; height: 180px; overflow: hidden; } .quiz-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .quiz-card:hover .quiz-image img { transform: scale(1.05); } .quiz-price-tag { position: absolute; bottom: 15px; right: 15px; background: linear-gradient(135deg, #06B6D4, #8B5CF6); color: white; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; } .quiz-price-tag.free { background: linear-gradient(135deg, #10B981, #34D399); } .quiz-content { padding: 20px; } .quiz-title { font-size: 18px; font-weight: 600; color: #FFFFFF; margin-bottom: 10px; line-height: 1.4; } .quiz-description { color: #9CA3AF; font-size: 14px; line-height: 1.5; margin-bottom: 15px; } .quiz-stats { display: flex; gap: 15px; margin-bottom: 15px; flex-wrap: wrap; } .quiz-stat-item { display: flex; align-items: center; gap: 6px; color: #9CA3AF; font-size: 12px; background: rgba(255, 255, 255, 0.05); padding: 4px 10px; border-radius: 20px; } .quiz-stat-item i { color: #06B6D4; } .quiz-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .quiz-rating .stars { color: #F59E0B; font-size: 12px; } .quiz-rating span { color: #9CA3AF; font-size: 12px; } .quiz-footer { display: flex; justify-content: space-between; align-items: center; } .quiz-price { font-size: 20px; font-weight: 700; color: #06B6D4; } .quiz-price .old-price { font-size: 14px; color: #9CA3AF; text-decoration: line-through; margin-left: 8px; } .btn-take-quiz { background: linear-gradient(135deg, #06B6D4, #8B5CF6); color: white; padding: 8px 20px; border-radius: 30px; text-decoration: none; font-weight: 600; font-size: 13px; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; } .btn-take-quiz:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(6, 182, 212, 0.4); color: white; } /* Empty State */ .empty-state { text-align: center; padding: 60px; background: #111827; border-radius: 24px; border: 1px solid rgba(6, 182, 212, 0.2); } .empty-state i { font-size: 64px; color: #06B6D4; margin-bottom: 20px; opacity: 0.5; } .empty-state h3 { color: #FFFFFF; margin-bottom: 10px; } .empty-state p { color: #9CA3AF; margin-bottom: 25px; } /* Pagination */ .pagination-wrapper { margin-top: 40px; display: flex; justify-content: center; } .pagination { display: flex; gap: 10px; list-style: none; flex-wrap: wrap; } .pagination li a, .pagination li span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 12px; background: #111827; border: 1px solid rgba(6, 182, 212, 0.2); color: #9CA3AF; text-decoration: none; transition: all 0.3s ease; } .pagination li a:hover { border-color: #06B6D4; color: #06B6D4; transform: translateY(-2px); } .pagination li.active span { background: linear-gradient(135deg, #06B6D4, #8B5CF6); border-color: transparent; color: white; } /* Mobile Filter */ .mobile-filter-toggle { position: fixed; bottom: 20px; right: 20px; background: linear-gradient(135deg, #06B6D4, #8B5CF6); color: white; padding: 12px 20px; border-radius: 50px; font-weight: 600; cursor: pointer; z-index: 99; display: none; gap: 8px; align-items: center; } .filter-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); z-index: 998; display: none; backdrop-filter: blur(5px); } .mobile-filter-sidebar { position: fixed; top: 0; right: -100%; width: 85%; max-width: 320px; height: 100%; background: #111827; z-index: 999; transition: right 0.3s ease; overflow-y: auto; border-left: 1px solid rgba(6, 182, 212, 0.2); } .mobile-filter-sidebar.active { right: 0; } .mobile-filter-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .mobile-filter-header h4 { color: #FFFFFF; margin: 0; } .close-filter { background: transparent; border: none; color: #FFFFFF; font-size: 20px; cursor: pointer; } .mobile-filter-content { padding: 20px; } .apply-filters-btn { width: 100%; background: linear-gradient(135deg, #06B6D4, #8B5CF6); border: none; padding: 12px; border-radius: 40px; color: white; font-weight: 600; margin-top: 20px; cursor: pointer; } /* Responsive */ @media (max-width: 991px) { .dark-quiz-breadcrumb { padding: 50px 0; } .breadcrumb-title { font-size: 36px; } .dark-filter-sidebar { display: none; } .mobile-filter-toggle { display: inline-flex; } .quiz-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } } @media (max-width: 768px) { .breadcrumb-title { font-size: 28px; } .dark-quiz-section { padding: 40px 0; } .quiz-top-bar { flex-direction: column; align-items: flex-start; } .quiz-grid { grid-template-columns: 1fr; } .empty-state { padding: 40px; } .quiz-stats { flex-wrap: wrap; } } @media (min-width: 992px) and (max-width: 1199px) { .quiz-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================ QUIZ V7 STYLING COMPONENT - DYNAMIC APPEND ============================================ */ .quiz-v7-section { padding: 80px 0; background: transparent; position: relative; } .quiz-v7-section .container { max-width: 1280px; margin: 0 auto; padding: 0 20px; } /* Header */ .quiz-v7-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; flex-wrap: wrap; gap: 20px; } .section_header { text-align: center; } .section_header h2 { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(135deg, #FFFFFF 0%, #E5E7EB 40%, #06B6D4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0; position: relative; display: inline-block; } .section_header h2::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background: linear-gradient(135deg, #06B6D4, #8B5CF6); border-radius: 2px; box-shadow: 0 0 20px rgba(6, 182, 212, 0.5); } .section_header p { font-size: 15px; color: #9CA3AF; margin-top: 20px; line-height: 1.4; } .all-quiz-btn { background: linear-gradient(135deg, #06B6D4, #8B5CF6); color: white !important; padding: 10px 24px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 14px; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; height: fit-content; } .all-quiz-btn:hover { transform: translateY(-3px); gap: 12px; box-shadow: 0 8px 25px rgba(6, 182, 212, 0.4); color: white; } /* Owl Carousel Container */ .quiz-slider-v7 { margin-top: 20px; position: relative; } /* Navigation Arrows - Matching your theme */ .quiz-slider-v7 .owl-nav { position: absolute; top: 50%; left: -65px; right: -65px; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; } .quiz-slider-v7 .owl-prev, .quiz-slider-v7 .owl-next { pointer-events: all; width: 48px; height: 48px; background: rgba(6, 182, 212, 0.12) !important; border: 1.5px solid rgba(6, 182, 212, 0.4) !important; border-radius: 50% !important; display: flex !important; align-items: center; justify-content: center; color: #06B6D4 !important; font-size: 20px !important; transition: all 0.3s ease; backdrop-filter: blur(10px); cursor: pointer; } .quiz-slider-v7 .owl-prev:hover, .quiz-slider-v7 .owl-next:hover { background: linear-gradient(135deg, #06B6D4, #8B5CF6) !important; color: #fff !important; box-shadow: 0 5px 20px rgba(6, 182, 212, 0.5); transform: scale(1.05); } .quiz-slider-v7 .owl-prev.disabled, .quiz-slider-v7 .owl-next.disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; } /* Owl Stage - Prevent side clipping while allowing hover space */ .quiz-slider-v7.owl-carousel .owl-stage-outer { overflow: hidden; /* Restore horizontal clipping */ padding-top: 40px; padding-bottom: 40px; margin-top: -40px; margin-bottom: -40px; } .quiz-slider-v7 .owl-stage { display: flex; align-items: stretch; } .quiz-slider-v7 .owl-item { height: auto; } /* Owl Dots - Matching your theme */ .quiz-slider-v7 .owl-dots { display: flex; justify-content: center; gap: 8px; margin-top: 30px; } .quiz-slider-v7 .owl-dots .owl-dot span { width: 8px; height: 8px; background: #374151; border-radius: 50%; display: inline-block; transition: all 0.3s ease; } .quiz-slider-v7 .owl-dots .owl-dot.active span { background: #06B6D4; width: 28px; border-radius: 10px; box-shadow: 0 0 10px rgba(6, 182, 212, 0.5); } .quiz-card-v7 { background: linear-gradient(145deg, #0F172A, #111827); border-radius: 24px; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid rgba(255, 255, 255, 0.06); height: 100%; display: flex; flex-direction: column; position: relative; } .quiz-card-v7::after { content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 1.5px; background: linear-gradient(135deg, #06B6D4, #8B5CF6, #EC4899); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .quiz-card-v7:hover::after { opacity: 1; } .quiz-card-v7:hover { transform: translateY(-8px); border-color: rgba(6, 182, 212, 0.2); box-shadow: 0 25px 45px rgba(0, 0, 0, 0.5); } .quiz-card-header { height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; position: relative; color: white; } .quiz-header-bg { display: none; } .gradient-pink { background: linear-gradient(135deg, #EC4899, #8B5CF6); } .gradient-red { background: linear-gradient(135deg, #EF4444, #F59E0B); } .gradient-blue { background: linear-gradient(135deg, #06B6D4, #3B82F6); } .quiz-icon-wrapper { width: 70px; height: 70px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 15px; border: 1px solid rgba(255, 255, 255, 0.3); position: relative; z-index: 1; } .quiz-icon-img { display: none; } .question-mark { display: none; } .quiz-card-header h4 { font-size: 16px; font-weight: 700; text-transform: uppercase; margin: 0; letter-spacing: 0.5px; position: relative; z-index: 1; } .quiz-stats-bar { background: rgba(6, 182, 212, 0.12); display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px 5px; color: #06B6D4; font-size: 11px; font-weight: 600; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .quiz-stats-bar .stat { border-right: 1px solid rgba(6, 182, 212, 0.2); display: flex; align-items: center; justify-content: center; gap: 5px; } .quiz-stats-bar .stat:last-child { border-right: none; } .quiz-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; } .quiz-cat { color: #9CA3AF; font-size: 12px; margin-bottom: 8px; } .quiz-badges { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .badge-pro { background: rgba(6, 182, 212, 0.15); color: #06B6D4; padding: 4px 12px; border-radius: 50px; font-size: 11px; font-weight: 600; border: 1px solid rgba(6, 182, 212, 0.3); } .badge-students { background: rgba(255, 255, 255, 0.05); color: #9CA3AF; padding: 4px 12px; border-radius: 50px; font-size: 11px; font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.1); } .quiz-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; color: #FFFFFF; line-height: 1.3; } .quiz-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .btn-get-started { background: linear-gradient(135deg, #06B6D4, #8B5CF6); color: white !important; padding: 8px 20px; border-radius: 50px; text-decoration: none; font-size: 12px; font-weight: 600; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 6px; } .btn-get-started:hover { transform: translateY(-2px); gap: 10px; box-shadow: 0 5px 15px rgba(6, 182, 212, 0.4); color: white; } .quiz-price { display: flex; flex-direction: column; align-items: flex-end; } .quiz-price .old-price { font-size: 11px; color: #6B7280; text-decoration: line-through; margin: 0; } .quiz-price .current-price { font-size: 22px; font-weight: 800; color: #06B6D4; line-height: 1; } @media (max-width: 1200px) { .quiz-slider-v7 .owl-nav { left: -20px; right: -20px; } } @media (max-width: 992px) { .quiz-slider-v7 .owl-nav { left: -10px; right: -10px; } .quiz-slider-v7 .owl-prev, .quiz-slider-v7 .owl-next { width: 40px; height: 40px; font-size: 18px !important; } } @media (max-width: 768px) { .quiz-v7-section { padding: 50px 0; } .quiz-v7-header { flex-direction: column; align-items: flex-start; } .section_header h2 { font-size: 32px; } .section_header h2::after { width: 50px; } .quiz-slider-v7 .owl-nav { display: none; } .quiz-footer { flex-direction: column; align-items: stretch; } .btn-get-started { justify-content: center; } .quiz-price { flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; } } /* RTL Support */ html[dir="rtl"] .quiz-v7-header { flex-direction: row-reverse; } html[dir="rtl"] .quiz-stats-bar .stat { border-right: none; border-left: 1px solid rgba(6, 182, 212, 0.2); } html[dir="rtl"] .quiz-stats-bar .stat:last-child { border-left: none; } html[dir="rtl"] .section_header h2::after { left: auto; right: 0; } @media (max-width: 768px) { html[dir="rtl"] .quiz-v7-header { flex-direction: column; align-items: flex-start; } } .custom-dropdown-wrapper { position: relative; display: flex; align-items: center; gap: 12px; font-family: 'Outfit', sans-serif; } .custom-dropdown-wrapper label { color: #9CA3AF; font-size: 14px; margin: 0; font-weight: 500; } .custom-select-trigger { background: rgba(17, 24, 39, 0.6); border: 1.5px solid rgba(6, 182, 212, 0.35); border-radius: 40px; padding: 10px 24px; color: white; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 12px; min-width: 190px; justify-content: space-between; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 15px rgba(0,0,0,0.2); backdrop-filter: blur(8px); font-weight: 500; } .custom-select-trigger:hover, .custom-dropdown-wrapper.open .custom-select-trigger { border-color: #06B6D4; background: rgba(6, 182, 212, 0.08); box-shadow: 0 0 20px rgba(6, 182, 212, 0.25), inset 0 0 10px rgba(6, 182, 212, 0.1); } .custom-select-trigger i { color: #06B6D4; font-size: 13px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .custom-dropdown-wrapper.open .custom-select-trigger i { transform: rotate(180deg); } .custom-options-list { position: absolute; top: calc(100% + 8px); right: 0; width: 100%; min-width: 180px; background: rgba(17, 24, 39, 0.95); border: 1px solid rgba(6, 182, 212, 0.25); border-radius: 18px; padding: 8px; margin: 0; list-style: none; z-index: 999; box-shadow: 0 15px 35px rgba(0,0,0,0.6), 0 0 25px rgba(6, 182, 212, 0.1); opacity: 0; visibility: hidden; transform: translateY(15px) scale(0.95); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); backdrop-filter: blur(12px); } .custom-dropdown-wrapper.open .custom-options-list { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .custom-option { padding: 12px 16px; border-radius: 12px; color: #E5E7EB; font-size: 14px; cursor: pointer; transition: all 0.25s ease; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .custom-option:last-child { margin-bottom: 0; } .custom-option:hover { background: rgba(6, 182, 212, 0.12); color: #06B6D4; transform: translateX(5px); } .custom-option.selected { background: linear-gradient(135deg, #06B6D4, #8B5CF6); color: white; font-weight: 600; box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3); }