:root {
  --color-primary : #7c2d12;--color-primary-dark : #5a1f0f;--color-accent : #f5d5b5;--color-accent-light : #fde68a;--color-bg : #ffffff;--color-surface : #fef3f2;--color-text : #1f2937;--color-text-muted : #6b7280;
}
.dark {
  --color-primary : #9f123c;--color-primary-dark : #7c2d12;--color-accent : #fcd34d;--color-accent-light : #fde047;--color-bg : #0c0a09;--color-surface : #1c1917;--color-text : #f5f5f4;--color-text-muted : #a8a29e;
}
html {
  transition : background-color 0.3s ease, color 0.3s ease;
}
html.dark {
  color-scheme : dark;
}
#mobile-search-input-main {
  background-color : #FFFFFF !important;
  outline : none !important;
  box-shadow : none !important;
  border : none !important;-webkit-appearance : none !important;-moz-appearance : none !important;
  appearance : none !important;
  color : #1f2937 !important;
}
  #mobile-search-input-main : focus, #mobile-search-input-main : active, #mobile-search-input-main : focus-visible {
  background-color : #FFFFFF !important;
  outline : none !important;
  box-shadow : none !important;
  border : none !important;
}
  #mobile-search-input-main : :placeholder {
  color : #6b7280 !important;
  opacity : 1;
}
.profile-section-container {
  background : transparent;
}
html.dark .profile-section-container {
  background : linear-gradient(145deg, rgba(var(--color-primary-dark-rgb, 46, 16, 15), 0.95) 0%, rgba(var(--color-primary-dark-rgb, 46, 16, 15), 0.98) 100%);
}
html.dark {
  --dm-bg-primary : #4c3232;--dm-bg-secondary : #1A1A1A;--dm-bg-card : #1F1F1F;--dm-text-primary : #F5F5F5;--dm-text-secondary : #B3B3B3;--dm-border : #2D2D2D;
}
html.dark body {
  background-color : var(--dm-bg-primary) !important;
  color : var(--dm-text-primary) !important;
}
html.dark #mobile-fixed-header, html.dark .top-header {
  background-color : var(--dm-bg-primary) !important;
  border-bottom : 1px solid var(--dm-border);
}
html.dark .menu-float {
  background-color : var(--dm-bg-secondary) !important;
}
html.dark #off-canvas-menu {
  background-color : var(--dm-bg-secondary) !important;
}
  html.dark .menu-item : hover {
  background-color : var(--dm-bg-card) !important;
}
html.dark .text-white {
  color : var(--dm-text-primary) !important;
}
html.dark .text-gray-300, html.dark .text-gray-200 {
  color : var(--dm-text-secondary) !important;
}
html.dark .bg-black\/50,
      html.dark .bg-black\/70, html.dark .bg-black\/80 {
  background-color : var(--dm-bg-card) !important;
}
html.dark .hero-section {
  background : linear-gradient(135deg, var(--dm-bg-primary) 0%, var(--dm-bg-secondary) 50%, var(--dm-bg-primary) 100%) !important;
}
html.dark section {
  background-color : var(--dm-bg-primary);
}
  html.dark section[style*="background-color : var(--color-primary-dark)"] {
  background-color : var(--dm-bg-primary) !important;
}
html.dark footer {
  background-color : var(--dm-bg-primary) !important;
  border-top : 1px solid var(--dm-border);
}
html.dark .bg-\[\#3f0000\],
      html.dark .bg-\[\#4a0909\], html.dark .bg-\[\#2a0404\] {
  background-color : var(--dm-bg-card) !important;
}
html.dark .profile-card, html.dark .escort-card {
  background-color : var(--dm-bg-card) !important;
  border : 1px solid var(--dm-border);
}
html.dark .faq-item {
  background-color : var(--dm-bg-card) !important;
  border-color : var(--dm-border) !important;
}
html.dark #popup-content, html.dark #confirmation-content-box {
  background-color : var(--dm-bg-secondary) !important;
  border-color : var(--dm-border) !important;
}
html.dark #bottom-search-bar,
      html.dark .search-suggestions,
      html.dark #search-suggestions, html.dark #search-suggestions-main {
  background-color : var(--dm-bg-secondary) !important;
  border-color : var(--dm-border) !important;
}
html.dark input,
      html.dark textarea, html.dark select {
  background-color : var(--dm-bg-card) !important;
  border-color : var(--dm-border) !important;
  color : var(--dm-text-primary) !important;
}
  html.dark input : :placeholder, html.dark textarea : :placeholder {
  color : var(--dm-text-secondary) !important;
}
html.dark .border-ankita-red, html.dark .border-ankita-red\/50 {
  border-color : var(--dm-border) !important;
}
html.dark a.text-ankita-red, html.dark .text-ankita-red {
  color : var(--color-accent) !important;
}
html.dark .text-ankita-yellow, html.dark .text-ankita-yellow-light {
  color : var(--color-accent-light) !important;
}
  html.dark : : -webkit-scrollbar-track {
  background : var(--dm-bg-primary) !important;
}
  html.dark : : -webkit-scrollbar-thumb {
  background : var(--dm-bg-card) !important;
}
  html.dark : : -webkit-scrollbar-thumb : hover {
  background : var(--color-accent) !important;
}
html.dark * {
  transition : background-color 0.3s ease, border-color 0.3s ease, color 0.15s ease;
}
body {
  background-color : var(--color-primary-dark) !important;
}
.bg-ankita-red {
  background-color : var(--color-primary) !important;
}
.bg-ankita-red-dark {
  background-color : var(--color-primary-dark) !important;
}
.bg-ankita-yellow {
  background-color : var(--color-accent) !important;
}
.bg-ankita-yellow-light {
  background-color : var(--color-accent-light) !important;
}
.text-ankita-yellow {
  color : var(--color-accent) !important;
}
.text-ankita-yellow-light {
  color : var(--color-accent-light) !important;
}
.text-ankita-red {
  color : var(--color-primary) !important;
}
.border-ankita-red {
  border-color : var(--color-primary) !important;
}
.border-ankita-red-dark {
  border-color : var(--color-primary-dark) !important;
}
.border-ankita-yellow {
  border-color : var(--color-accent) !important;
}
.menu-float,
      #off-canvas-menu, .sticky-nav {
  background-color : var(--color-primary) !important;
}
  .hover\ : bg-ankita-red : hover, .active\ : bg-ankita-red : active {
  background-color : var(--color-primary) !important;
}
  .menu-item : hover, .nav-link : hover, a[class*="hover : bg-[#8d1111]"] : hover {
  background-color : color-mix(in srgb, var(--color-primary) 80%, white 20%) !important;
}
.section-bg, .card-bg {
  background-color : var(--color-primary-dark) !important;
}
footer, .footer-bg {
  background-color : var(--color-primary-dark) !important;
}
#popup-content,
      #confirmation-content-box, .modal-bg {
  background-color : var(--color-primary) !important;
}
#bottom-search-bar, .search-suggestions {
  background-color : var(--color-primary-dark) !important;
}
.profile-card-overlay {
  background : linear-gradient(to top, var(--color-primary-dark), transparent) !important;
}
  : : -webkit-scrollbar-track {
  background : var(--color-primary-dark) !important;
}
  : : -webkit-scrollbar-thumb {
  background : var(--color-accent) !important;
}
  : : -webkit-scrollbar-thumb : hover {
  background : var(--color-accent-light) !important;
}
  [style*="background-color : #630a0a"], [style*="background : #630a0a"], .bg-\[\#630a0a\] {
  background-color : var(--color-primary) !important;
}
  [style*="background-color : #7a0d0d"], [style*="background : #7a0d0d"], .bg-\[\#7a0d0d\] {
  background-color : var(--color-primary) !important;
}
  [style*="background-color : #8d1111"], .bg-\[\#8d1111\] {
  background-color : color-mix(in srgb, var(--color-primary) 80%, white 20%) !important;
}
.bg-\[\#2a0404\], .bg-\[\#1e0303\] {
  background-color : var(--color-primary-dark) !important;
}
.bg-\[\#3f0000\] {
  background-color : var(--color-primary) !important;
}
.bg-\[\#4a0909\] {
  background-color : var(--color-primary-dark) !important;
}
.current,
      .menu-item.current,
      a.current,
      nav a.current, .menu a.current {
  text-decoration : none !important;
  border : none !important;
  border-bottom : none !important;
  box-shadow : none !important;
  outline : none !important;
  background-image : none !important;
}
  .current : :before, .current : :after, .menu-item.current : :before, .menu-item.current : :after, a.current : :before, a.current : :after {
  display : none !important;
  content : none !important;
  border : none !important;
  background : none !important;
  width : 0 !important;
  height : 0 !important;
}
.menu-float,
      .menu-float nav,
      .menu-float .menu, nav.menu {
  border-bottom : none !important;
}
.menu-item {
  border-bottom : none !important;
}
.menu-float {
  transition : background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
  background-color : rgba(122, 13, 13, 0.85);
  backdrop-filter : blur(10px);-webkit-backdrop-filter : blur(10px);
}
.menu-float.nav-scrolled {
  background-color : rgba(122, 13, 13, 0.98);
  box-shadow : 0 4px 20px rgba(0, 0, 0, 0.4);
}
.menu-float.nav-top {
  background-color : rgba(122, 13, 13, 0.7);
  box-shadow : none;
}
#mobile-fixed-header {
  transition : background-color 0.3s ease, box-shadow 0.3s ease;
}
#mobile-fixed-header.nav-scrolled {
  box-shadow : 0 4px 20px rgba(0, 0, 0, 0.5);
}
.header-logo-circle {
  background : linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
  border : 3px solid var(--color-accent) !important;
  box-shadow : 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}
[style*="background-image"] {
  background-image : none !important;
  background-color : var(--color-primary-dark) !important;
}
section {
  background-color : transparent;
}
.card, .profile-card {
  background-color : var(--color-primary) !important;
}
.gradient-overlay {
  background : linear-gradient(to top, var(--color-primary-dark), transparent) !important;
}
#reviews-grid .bg-ankita-red-dark, .review-card {
  background : linear-gradient(145deg, var(--color-primary-dark) 0%, rgba(0, 0,0, 0.8) 100%) !important;
  border : 1px solid var(--color-primary) !important;
  border-radius : 12px !important;
  transition : all 0.3s ease !important;
  overflow : hidden !important;
}
  #reviews-grid .bg-ankita-red-dark : hover, .review-card : hover {
  border-color : var(--color-accent) !important;
  box-shadow : 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--color-primary-rgb, 121, 0, 3), 0.2) !important;
  transform : translateY(-3px) !important;
}
#reviews-grid .bg-ankita-red, .review-card .image-section {
  background : linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
}
#reviews-grid .bg-isa-red, .review-card .tag-badge {
  background : var(--color-accent) !important;
  color : var(--color-primary-dark) !important;
  font-weight : 600 !important;
  padding : 4px 10px !important;
  border-radius : 6px !important;
  font-size : 11px !important;
  text-transform : uppercase !important;
  letter-spacing : 0.5px !important;
}
#reviews-grid .text-ankita-yellow, .review-card .rating-stars {
  color : var(--color-accent) !important;
  text-shadow : 0 0 10px rgba(var(--color-accent-rgb, 251, 198, 109), 0.3) !important;
}
#reviews-grid a.text-ankita-yellow, .review-card .profile-name {
  color : var(--color-accent) !important;
  transition : all 0.2s ease !important;
}
  #reviews-grid a.text-ankita-yellow : hover, .review-card .profile-name : hover {
  color : var(--color-accent-light) !important;
  text-shadow : 0 0 8px rgba(var(--color-accent-rgb, 251, 198, 109), 0.4) !important;
}
#reviews-grid .read-more-fade, .review-card .read-more-fade {
  background : linear-gradient(to top, var(--color-primary-dark) 0%, transparent 100%) !important;
}
.text-isa-secondary {
  color : var(--color-accent) !important;
}
#reviews-grid ~ a, section a.border-ankita-red\/50 {
  border-color : var(--color-primary) !important;
  color : var(--color-accent) !important;
  transition : all 0.3s ease !important;
}
  section a.border-ankita-red\/50 : hover {
  background : var(--color-primary) !important;
  color : white !important;
  border-color : var(--color-primary) !important;
}
html.dark #reviews-grid .bg-ankita-red-dark, html.dark .review-card {
  background : linear-gradient(145deg, var(--dm-bg-card) 0%, var(--dm-bg-primary) 100%) !important;
  border-color : var(--dm-border) !important;
}
  html.dark #reviews-grid .bg-ankita-red-dark : hover, html.dark .review-card : hover {
  border-color : var(--color-accent) !important;
}
html.dark #reviews-grid .read-more-fade {
  background : linear-gradient(to top, var(--dm-bg-card) 0%, transparent 100%) !important;
}
.faq-item {
  background : linear-gradient(145deg, rgba(0, 0,0, 0.9) 0%, var(--color-primary-dark) 100%) !important;
  border : 2px solid var(--color-primary) !important;
  border-radius : 16px !important;
  overflow : hidden !important;
  transition : all 0.3s ease !important;
}
  .faq-item : hover {
  border-color : var(--color-accent) !important;
  box-shadow : 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(var(--color-primary-rgb, 121, 0, 3), 0.15) !important;
  transform : translateY(-2px) !important;
}
.faq-toggle {
  background : transparent !important;
  color : var(--color-accent-light) !important;
  font-size : 1.1rem !important;
  padding : 1.25rem 1.5rem !important;
  transition : all 0.3s ease !important;
}
  .faq-toggle : hover {
  background : rgba(var(--color-primary-rgb, 121, 0, 3), 0.3) !important;
}
.faq-toggle span {
  color : var(--color-accent-light) !important;
}
.faq-arrow {
  color : var(--color-accent) !important;
  transition : transform 0.3s ease, color 0.3s ease !important;
}
.faq-item.active .faq-arrow {
  transform : rotate(180deg) !important;
  color : var(--color-accent-light) !important;
}
.faq-content {
  background : rgba(0, 0, 0, 0.5) !important;
  color : #e5e5e5 !important;
  padding-left : 1.5rem !important;
  padding-right : 1.5rem !important;
}
.faq-content p {
  border-top : 1px solid var(--color-primary) !important;
  color : #d1d5db !important;
  line-height : 1.7 !important;
}
.faq-content ul {
  color : #d1d5db !important;
}
.faq-content li {
  margin-bottom : 0.5rem !important;
}
.faq-item + .faq-item {
  margin-top : 1rem !important;
}
section h2.text-ankita-yellow-light {
  color : var(--color-accent-light) !important;
  text-shadow : 0 2px 10px rgba(var(--color-accent-rgb, 251, 198, 109), 0.2) !important;
}
html.dark .faq-item {
  background : linear-gradient(145deg, var(--dm-bg-card) 0%, var(--dm-bg-secondary) 100%) !important;
  border-color : var(--dm-border) !important;
}
  html.dark .faq-item : hover {
  border-color : var(--color-accent) !important;
}
html.dark .faq-content {
  background : var(--dm-bg-primary) !important;
}
html.dark .faq-content p {
  border-color : var(--dm-border) !important;
}
input[type="text"],
      input[type="email"],
      input[type="tel"],
      input[type="password"],
      input[type="number"],
      input[type="search"],
      input[type="url"],
      textarea, select {
  background : rgba(0, 0, 0, 0.6) !important;
  border : 2px solid var(--color-primary) !important;
  border-radius : 10px !important;
  color : #f5f5f5 !important;
  padding : 12px 16px !important;
  font-size : 1rem !important;
  transition : all 0.3s ease !important;
  outline : none !important;
}
  input[type="text"] : focus, input[type="email"] : focus, input[type="tel"] : focus, input[type="password"] : focus, input[type="number"] : focus, input[type="search"] : focus, input[type="url"] : focus, textarea : focus, select : focus {
  border-color : var(--color-accent) !important;
  box-shadow : 0 0 0 3px rgba(var(--color-accent-rgb, 251, 198, 109), 0.2), 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  background : rgba(0, 0, 0, 0.8) !important;
}
  input : :placeholder, textarea : :placeholder {
  color : #9ca3af !important;
  opacity : 1 !important;
}
select {
  appearance : none !important;
  background-image : url("data : image/svg+xml, %3Csvg xmlns='http : //www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fbc66d'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat : no-repeat !important;
  background-position : right 12px center !important;
  background-size : 20px !important;
  padding-right : 45px !important;
}
select option {
  background : var(--color-primary-dark) !important;
  color : #f5f5f5 !important;
  padding : 10px !important;
}
input[type="checkbox"], input[type="radio"] {
  width : 20px !important;
  height : 20px !important;
  accent-color : var(--color-accent) !important;
  cursor : pointer !important;
}
label {
  color : var(--color-accent-light) !important;
  font-weight : 500 !important;
  margin-bottom : 6px !important;
  display : block !important;
}
button[type="submit"],
      input[type="submit"], .btn-primary {
  background : linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%) !important;
  color : var(--color-primary-dark) !important;
  border : none !important;
  border-radius : 10px !important;
  padding : 12px 28px !important;
  font-weight : 600 !important;
  font-size : 1rem !important;
  cursor : pointer !important;
  transition : all 0.3s ease !important;
  text-transform : uppercase !important;
  letter-spacing : 0.5px !important;
}
  button[type="submit"] : hover, input[type="submit"] : hover, .btn-primary : hover {
  transform : translateY(-2px) !important;
  box-shadow : 0 8px 25px rgba(var(--color-accent-rgb, 251, 198, 109), 0.4) !important;
}
.btn-secondary {
  background : transparent !important;
  border : 2px solid var(--color-accent) !important;
  color : var(--color-accent) !important;
  border-radius : 10px !important;
  padding : 10px 24px !important;
  font-weight : 600 !important;
  transition : all 0.3s ease !important;
}
  .btn-secondary : hover {
  background : var(--color-accent) !important;
  color : var(--color-primary-dark) !important;
}
input.error,
      textarea.error, select.error {
  border-color : #ef4444 !important;
  box-shadow : 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}
.error-message {
  color : #ef4444 !important;
  font-size : 0.875rem !important;
  margin-top : 4px !important;
}
input.success, textarea.success {
  border-color : #22c55e !important;
}
#bottom-search-bar input, .search-input {
  background : rgba(0, 0, 0, 0.7) !important;
  border : 2px solid var(--color-primary) !important;
  border-radius : 50px !important;
  padding : 14px 24px !important;
  padding-right : 50px !important;
}
  #bottom-search-bar input : focus, .search-input : focus {
  border-color : var(--color-accent) !important;
  box-shadow : 0 0 0 4px rgba(var(--color-accent-rgb, 251, 198, 109), 0.15) !important;
}
html.dark input[type="text"],
      html.dark input[type="email"],
      html.dark input[type="tel"],
      html.dark input[type="password"],
      html.dark input[type="number"],
      html.dark input[type="search"],
      html.dark textarea, html.dark select {
  background : var(--dm-bg-card) !important;
  border-color : var(--dm-border) !important;
}
  html.dark input : focus, html.dark textarea : focus, html.dark select : focus {
  border-color : var(--color-accent) !important;
  background : var(--dm-bg-secondary) !important;
}
html.dark select option {
  background : var(--dm-bg-secondary) !important;
}
.modal-overlay,
      #popup-overlay,
      .popup-backdrop, [class*="fixed"][class*="inset-0"][class*="bg-black"] {
  background : rgba(0, 0, 0, 0.85) !important;
  backdrop-filter : blur(8px) !important;
}
#popup-content,
      #confirmation-content-box,
      .modal-container, .popup-content {
  background : linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
  border : 2px solid var(--color-accent) !important;
  border-radius : 20px !important;
  box-shadow : 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(var(--color-primary-rgb, 121, 0, 3), 0.3) !important;
  padding : 2rem !important;
  max-width : 500px !important;
  width : 90% !important;
  animation : modalSlideIn 0.3s ease-out !important;
}
@keyframes modalSlideIn {
  from{opacity : 0;
  transform : translateY(-30px) scale(0.95);
}
to {
  opacity : 1;
  transform : translateY(0) scale(1);
}
}.modal-header, .popup-header {
  border-bottom : 1px solid var(--color-primary) !important;
  padding-bottom : 1rem !important;
  margin-bottom : 1.5rem !important;
}
.modal-title, .popup-title {
  color : var(--color-accent) !important;
  font-size : 1.5rem !important;
  font-weight : 700 !important;
}
.modal-close,
      .popup-close, [class*="close-btn"] {
  background : rgba(0, 0, 0, 0.3) !important;
  border : 2px solid var(--color-accent) !important;
  border-radius : 50% !important;
  width : 40px !important;
  height : 40px !important;
  display : flex !important;
  align-items : center !important;
  justify-content : center !important;
  color : var(--color-accent) !important;
  cursor : pointer !important;
  transition : all 0.3s ease !important;
}
  .modal-close : hover, .popup-close : hover, [class*="close-btn"] : hover {
  background : var(--color-accent) !important;
  color : var(--color-primary-dark) !important;
  transform : rotate(90deg) !important;
}
.modal-body, .popup-body {
  color : #e5e5e5 !important;
  line-height : 1.7 !important;
}
.modal-footer, .popup-footer {
  border-top : 1px solid var(--color-primary) !important;
  padding-top : 1.5rem !important;
  margin-top : 1.5rem !important;
  display : flex !important;
  gap : 1rem !important;
  justify-content : flex-end !important;
}
#confirmation-content-box {
  text-align : center !important;
}
#confirmation-content-box h2, #confirmation-content-box h3 {
  color : var(--color-accent) !important;
}
#confirmation-content-box p {
  color : #d1d5db !important;
}
.age-verify-popup {
  background : linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
  border : 3px solid var(--color-accent) !important;
}
.age-verify-popup .btn-yes {
  background : linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  color : white !important;
}
.age-verify-popup .btn-no {
  background : linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color : white !important;
}
.toast-popup, .alert-popup {
  background : var(--color-primary-dark) !important;
  border-left : 4px solid var(--color-accent) !important;
  border-radius : 8px !important;
  padding : 1rem 1.5rem !important;
  box-shadow : 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}
.toast-success {
  border-left-color : #22c55e !important;
}
.toast-error {
  border-left-color : #ef4444 !important;
}
.toast-warning {
  border-left-color : #f59e0b !important;
}
html.dark #popup-content,
      html.dark #confirmation-content-box,
      html.dark .modal-container, html.dark .popup-content {
  background : linear-gradient(145deg, var(--dm-bg-secondary) 0%, var(--dm-bg-primary) 100%) !important;
  border-color : var(--color-accent) !important;
}
html.dark .modal-header, html.dark .popup-header {
  border-color : var(--dm-border) !important;
}
html.dark .modal-footer, html.dark .popup-footer {
  border-color : var(--dm-border) !important;
}
#search-suggestions,
      #search-suggestions-main, .search-suggestions {
  background : var(--color-primary-dark) !important;
  border : 2px solid var(--color-primary) !important;
  border-radius : 12px !important;
  box-shadow : 0 10px 40px rgba(0, 0, 0, 0.4) !important;
  overflow : hidden !important;
}
#search-suggestions a,
      #search-suggestions-main a, .search-suggestions a {
  color : #e5e5e5 !important;
  padding : 12px 16px !important;
  border-bottom : 1px solid var(--color-primary) !important;
  transition : all 0.2s ease !important;
}
  #search-suggestions a : hover, #search-suggestions-main a : hover, .search-suggestions a : hover {
  background : var(--color-primary) !important;
  color : var(--color-accent) !important;
}
  #search-suggestions a : last-child, #search-suggestions-main a : last-child, .search-suggestions a : last-child {
  border-bottom : none !important;
}
html.dark #search-suggestions,
      html.dark #search-suggestions-main, html.dark .search-suggestions {
  background : var(--dm-bg-secondary) !important;
  border-color : var(--dm-border) !important;
}
html.dark #search-suggestions a, html.dark #search-suggestions-main a {
  border-color : var(--dm-border) !important;
}
  html.dark #search-suggestions a : hover, html.dark #search-suggestions-main a : hover {
  background : var(--dm-bg-card) !important;
}
.btn {
  display : inline-flex;
  align-items : center;
  justify-content : center;
  gap : 0.5rem;
  font-weight : 600;
  text-decoration : none;
  cursor : pointer;
  transition : all 0.3s ease;
  border : none;
  outline : none;
  white-space : nowrap;
}
.btn-xs {
  padding : 0.25rem 0.75rem;
  font-size : 0.75rem;
  border-radius : 0.375rem;
}
.btn-sm {
  padding : 0.5rem 1rem;
  font-size : 0.875rem;
  border-radius : 0.5rem;
}
.btn-md {
  padding : 0.75rem 1.5rem;
  font-size : 1rem;
  border-radius : 0.625rem;
}
.btn-lg {
  padding : 1rem 2rem;
  font-size : 1.125rem;
  border-radius : 0.75rem;
}
.btn-xl {
  padding : 1.25rem 2.5rem;
  font-size : 1.25rem;
  border-radius : 1rem;
}
.btn-primary {
  background : linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  color : var(--color-primary-dark);
  box-shadow : 0 4px 15px rgba(var(--color-accent-rgb, 251, 198, 109), 0.3);
}
  .btn-primary : hover {
  transform : translateY(-2px);
  box-shadow : 0 8px 25px rgba(var(--color-accent-rgb, 251, 198, 109), 0.4);
}
  .btn-primary : active {
  transform : translateY(0);
}
.btn-secondary {
  background : linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color : #ffffff;
  box-shadow : 0 4px 15px rgba(var(--color-primary-rgb, 121, 0, 3), 0.3);
}
  .btn-secondary : hover {
  transform : translateY(-2px);
  box-shadow : 0 8px 25px rgba(var(--color-primary-rgb, 121, 0, 3), 0.4);
}
.btn-outline-accent {
  background : rgba(var(--color-accent-rgb, 251, 198, 109), 0.1);
  border : 2px solid var(--color-accent);
  color : var(--color-accent);
}
  .btn-outline-accent : hover {
  background : var(--color-accent);
  color : var(--color-primary-dark);
}
.btn-outline-primary {
  background : rgba(var(--color-primary-rgb, 121, 0, 3), 0.1);
  border : 2px solid var(--color-primary);
  color : var(--color-primary);
}
  .btn-outline-primary : hover {
  background : var(--color-primary);
  color : #ffffff;
}
.btn-outline-white {
  background : rgba(255, 255, 255, 0.1);
  border : 2px solid rgba(255, 255, 255, 0.5);
  color : #ffffff;
}
  .btn-outline-white : hover {
  background : rgba(255, 255, 255, 0.2);
  border-color : #ffffff;
}
.btn-ghost {
  background : transparent;
  color : var(--color-accent);
  border : none;
}
  .btn-ghost : hover {
  background : rgba(var(--color-accent-rgb, 251, 198, 109), 0.15);
}
.btn-ghost-primary {
  background : transparent;
  color : var(--color-primary);
}
  .btn-ghost-primary : hover {
  background : rgba(var(--color-primary-rgb, 121, 0, 3), 0.15);
}
.btn-glass {
  background : rgba(255, 255, 255, 0.1);
  backdrop-filter : blur(10px);
  border : 1px solid rgba(255, 255, 255, 0.2);
  color : #ffffff;
}
  .btn-glass : hover {
  background : rgba(255, 255, 255, 0.2);
  border-color : rgba(255, 255, 255, 0.4);
}
.btn-pill {
  border-radius : 9999px;
}
.btn-icon {
  padding : 0.75rem;
  border-radius : 50%;
}
.btn-icon.btn-sm {
  padding : 0.5rem;
}
.btn-icon.btn-lg {
  padding : 1rem;
}
.btn svg, .btn i {
  transition : transform 0.3s ease;
}
  .btn : hover svg, .btn : hover i {
  transform : translateX(3px);
}
.btn-loading {
  position : relative;
  color : transparent !important;
  pointer-events : none;
}
  .btn-loading : :after {
  content : "";
  position : absolute;
  width : 1.25rem;
  height : 1.25rem;
  border : 2px solid transparent;
  border-top-color : currentColor;
  border-radius : 50%;
  animation : btn-spin 0.8s linear infinite;
}
  .btn-primary.btn-loading : :after {
  border-top-color : var(--color-primary-dark);
}
  .btn-secondary.btn-loading : :after {
  border-top-color : #ffffff;
}
@keyframes btn-spin {
  to{transform : rotate(360deg);
}
  }.btn : disabled, .btn.disabled {
  opacity : 0.5;
  cursor : not-allowed;
  pointer-events : none;
}
.btn-group {
  display : inline-flex;
  gap : 0;
}
.btn-group .btn {
  border-radius : 0;
}
  .btn-group .btn : first-child {
  border-radius : 0.5rem 0 0 0.5rem;
}
  .btn-group .btn : last-child {
  border-radius : 0 0.5rem 0.5rem 0;
}
.card {
  background : linear-gradient(145deg, var(--color-primary-dark) 0%, rgba(0, 0, 0, 0.9) 100%);
  border : 1px solid var(--color-primary);
  border-radius : 1rem;
  overflow : hidden;
  transition : all 0.3s ease;
}
  .card : hover {
  border-color : var(--color-accent);
  box-shadow : 0 10px 40px rgba(0, 0, 0, 0.3);
  transform : translateY(-4px);
}
.card-elevated {
  box-shadow : 0 8px 30px rgba(0, 0, 0, 0.3);
}
  .card-elevated : hover {
  box-shadow : 0 15px 50px rgba(0, 0, 0, 0.4);
}
.card-flat {
  box-shadow : none;
}
  .card-flat : hover {
  box-shadow : none;
  transform : none;
}
.card-glass {
  background : rgba(255, 255, 255, 0.05);
  backdrop-filter : blur(10px);
  border : 1px solid rgba(255, 255, 255, 0.1);
}
  .card-glass : hover {
  background : rgba(255, 255, 255, 0.08);
  border-color : rgba(255, 255, 255, 0.2);
}
.card-gradient-border {
  position : relative;
  background : var(--color-primary-dark);
  border : none;
}
  .card-gradient-border : :before {
  content : "";
  position : absolute;
  inset : 0;
  padding : 2px;
  border-radius : 1rem;
  background : linear-gradient(135deg, var(--color-primary), var(--color-accent));-webkit-mask : linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask : linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite : xor;
  mask-composite : exclude;
}
.card-glow {
  box-shadow : 0 0 30px rgba(var(--color-accent-rgb, 251, 198, 109), 0.15);
}
  .card-glow : hover {
  box-shadow : 0 0 50px rgba(var(--color-accent-rgb, 251, 198, 109), 0.25);
}
.card-header {
  padding : 1.25rem 1.5rem;
  border-bottom : 1px solid var(--color-primary);
}
.card-body {
  padding : 1.5rem;
}
.card-footer {
  padding : 1rem 1.5rem;
  border-top : 1px solid var(--color-primary);
  background : rgba(0, 0, 0, 0.2);
}
.card-img {
  width : 100%;
  aspect-ratio : 16/9;
  object-fit : cover;
}
.card-img-top {
  border-radius : 1rem 1rem 0 0;
}
.card-title {
  font-size : 1.25rem;
  font-weight : 700;
  color : var(--color-accent);
  margin-bottom : 0.5rem;
}
.card-text {
  color : #d1d5db;
  line-height : 1.6;
}
.card-profile {
  text-align : center;
  padding : 2rem;
}
.card-profile .card-avatar {
  width : 100px;
  height : 100px;
  border-radius : 50%;
  border : 3px solid var(--color-accent);
  margin : 0 auto 1rem;
  object-fit : cover;
}
.card-horizontal {
  display : flex;
  flex-direction : row;
}
.card-horizontal .card-img {
  width : 40%;
  aspect-ratio : auto;
  border-radius : 1rem 0 0 1rem;
}
.card-horizontal .card-body {
  flex : 1;
  display : flex;
  flex-direction : column;
  justify-content : center;
}
html.dark .card {
  background : linear-gradient(145deg, var(--dm-bg-card) 0%, var(--dm-bg-primary) 100%);
  border-color : var(--dm-border);
}
  html.dark .card : hover {
  border-color : var(--color-accent);
}
html.dark .card-header, html.dark .card-footer {
  border-color : var(--dm-border);
}
.badge {
  display : inline-flex;
  align-items : center;
  gap : 0.375rem;
  padding : 0.25rem 0.75rem;
  font-size : 0.75rem;
  font-weight : 600;
  border-radius : 9999px;
  white-space : nowrap;
  transition : all 0.2s ease;
}
.badge-sm {
  padding : 0.125rem 0.5rem;
  font-size : 0.625rem;
}
.badge-lg {
  padding : 0.375rem 1rem;
  font-size : 0.875rem;
}
.badge-primary {
  background : var(--color-primary);
  color : #ffffff;
}
.badge-accent {
  background : var(--color-accent);
  color : var(--color-primary-dark);
}
.badge-outline-accent {
  background : rgba(var(--color-accent-rgb, 251, 198, 109), 0.15);
  border : 1px solid var(--color-accent);
  color : var(--color-accent);
}
.badge-outline-primary {
  background : rgba(var(--color-primary-rgb, 121, 0, 3), 0.15);
  border : 1px solid var(--color-primary);
  color : var(--color-primary);
}
.badge-success {
  background : rgba(34, 197, 94, 0.2);
  border : 1px solid #22c55e;
  color : #22c55e;
}
.badge-warning {
  background : rgba(245, 158, 11, 0.2);
  border : 1px solid #f59e0b;
  color : #f59e0b;
}
.badge-error, .badge-danger {
  background : rgba(239, 68, 68, 0.2);
  border : 1px solid #ef4444;
  color : #ef4444;
}
.badge-info {
  background : rgba(59, 130, 246, 0.2);
  border : 1px solid #3b82f6;
  color : #3b82f6;
}
.badge-glass {
  background : rgba(255, 255, 255, 0.1);
  backdrop-filter : blur(8px);
  border : 1px solid rgba(255, 255, 255, 0.2);
  color : #ffffff;
}
  .badge-dot : :before {
  content : "";
  width : 0.5rem;
  height : 0.5rem;
  border-radius : 50%;
  background : currentColor;
}
  .badge-pulse : :before {
  animation : badge-pulse 2s infinite;
}
@keyframes badge-pulse {
  0%, 100%{opacity : 1; transform : scale(1);
}
50% {
  opacity : 0.5; transform : scale(1.2);
}
}.tag {
  display : inline-flex;
  align-items : center;
  gap : 0.5rem;
  padding : 0.375rem 0.875rem;
  font-size : 0.8125rem;
  font-weight : 500;
  background : rgba(var(--color-primary-rgb, 121, 0, 3), 0.3);
  border : 1px solid var(--color-primary);
  border-radius : 0.5rem;
  color : #e5e5e5;
  transition : all 0.2s ease;
}
  .tag : hover {
  background : rgba(var(--color-primary-rgb, 121, 0, 3), 0.5);
  border-color : var(--color-accent);
}
.tag-removable {
  padding-right : 0.5rem;
}
.tag-close {
  display : flex;
  align-items : center;
  justify-content : center;
  width : 1.25rem;
  height : 1.25rem;
  border-radius : 50%;
  background : rgba(255, 255, 255, 0.1);
  cursor : pointer;
  transition : all 0.2s ease;
}
  .tag-close : hover {
  background : var(--color-accent);
  color : var(--color-primary-dark);
}
.tag-group {
  display : flex;
  flex-wrap : wrap;
  gap : 0.5rem;
}
.status {
  display : inline-flex;
  align-items : center;
  gap : 0.5rem;
  font-size : 0.875rem;
  color : #d1d5db;
}
.status-dot {
  width : 0.625rem;
  height : 0.625rem;
  border-radius : 50%;
}
.status-online .status-dot {
  background : #22c55e;
  box-shadow : 0 0 8px #22c55e;
}
.status-offline .status-dot {
  background : #6b7280;
}
.status-busy .status-dot {
  background : #ef4444;
  box-shadow : 0 0 8px #ef4444;
}
.status-away .status-dot {
  background : #f59e0b;
  box-shadow : 0 0 8px #f59e0b;
}
.form-group {
  margin-bottom : 1.5rem;
}
.form-label {
  display : block;
  margin-bottom : 0.5rem;
  font-size : 0.875rem;
  font-weight : 600;
  color : var(--color-accent-light);
}
  .form-label-required : :after {
  content : " *";
  color : #ef4444;
}
.form-input,
      .form-select, .form-textarea {
  width : 100%;
  padding : 0.75rem 1rem;
  font-size : 1rem;
  color : #f5f5f5;
  background : rgba(0, 0, 0, 0.5);
  border : 2px solid var(--color-primary);
  border-radius : 0.625rem;
  outline : none;
  transition : all 0.3s ease;
}
  .form-input : focus, .form-select : focus, .form-textarea : focus {
  border-color : var(--color-accent);
  box-shadow : 0 0 0 3px rgba(var(--color-accent-rgb, 251, 198, 109), 0.2);
  background : rgba(0, 0, 0, 0.7);
}
  .form-input : :placeholder, .form-textarea : :placeholder {
  color : #6b7280;
}
.form-input-sm {
  padding : 0.5rem 0.875rem;
  font-size : 0.875rem;
}
.form-input-lg {
  padding : 1rem 1.25rem;
  font-size : 1.125rem;
}
.form-input-icon {
  position : relative;
}
.form-input-icon .form-input {
  padding-left : 2.75rem;
}
.form-input-icon .icon {
  position : absolute;
  left : 1rem;
  top : 50%;
  transform : translateY(-50%);
  color : #6b7280;
  pointer-events : none;
}
  .form-input-icon .form-input : focus + .icon, .form-input-icon .form-input : focus ~ .icon {
  color : var(--color-accent);
}
.form-input-search {
  border-radius : 9999px;
  padding-left : 3rem;
  padding-right : 3rem;
}
.form-select {
  appearance : none;
  background-image : url("data : image/svg+xml, %3Csvg xmlns='http : //www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fbc66d'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat : no-repeat;
  background-position : right 1rem center;
  background-size : 1.25rem;
  padding-right : 3rem;
  cursor : pointer;
}
.form-textarea {
  min-height : 120px;
  resize : vertical;
}
.form-check {
  display : flex;
  align-items : center;
  gap : 0.75rem;
  cursor : pointer;
}
.form-check-input {
  width : 1.25rem;
  height : 1.25rem;
  accent-color : var(--color-accent);
  cursor : pointer;
}
.form-check-label {
  font-size : 0.9375rem;
  color : #d1d5db;
  cursor : pointer;
}
.form-checkbox {
  position : relative;
  display : inline-flex;
  align-items : center;
  gap : 0.75rem;
  cursor : pointer;
}
.form-checkbox input {
  position : absolute;
  opacity : 0;
  cursor : pointer;
}
.form-checkbox-mark {
  width : 1.25rem;
  height : 1.25rem;
  background : rgba(0, 0, 0, 0.5);
  border : 2px solid var(--color-primary);
  border-radius : 0.25rem;
  transition : all 0.2s ease;
  display : flex;
  align-items : center;
  justify-content : center;
}
  .form-checkbox input : checked ~ .form-checkbox-mark {
  background : var(--color-accent);
  border-color : var(--color-accent);
}
.form-checkbox-mark svg {
  width : 0.75rem;
  height : 0.75rem;
  color : var(--color-primary-dark);
  opacity : 0;
  transition : opacity 0.2s ease;
}
  .form-checkbox input : checked ~ .form-checkbox-mark svg {
  opacity : 1;
}
.form-toggle {
  position : relative;
  display : inline-flex;
  align-items : center;
  gap : 0.75rem;
  cursor : pointer;
}
.form-toggle input {
  position : absolute;
  opacity : 0;
}
.form-toggle-switch {
  width : 3rem;
  height : 1.625rem;
  background : rgba(0, 0, 0, 0.5);
  border : 2px solid var(--color-primary);
  border-radius : 9999px;
  transition : all 0.3s ease;
  position : relative;
}
  .form-toggle-switch : :after {
  content : "";
  position : absolute;
  top : 2px;
  left : 2px;
  width : 1.125rem;
  height : 1.125rem;
  background : #d1d5db;
  border-radius : 50%;
  transition : all 0.3s ease;
}
  .form-toggle input : checked ~ .form-toggle-switch {
  background : var(--color-accent);
  border-color : var(--color-accent);
}
  .form-toggle input : checked ~ .form-toggle-switch : :after {
  left : calc(100% - 1.375rem);
  background : var(--color-primary-dark);
}
.form-input-error,
      .form-select-error, .form-textarea-error {
  border-color : #ef4444;
}
  .form-input-error : focus, .form-select-error : focus, .form-textarea-error : focus {
  border-color : #ef4444;
  box-shadow : 0 0 0 3px rgba(239, 68, 68, 0.2);
}
.form-error-text {
  margin-top : 0.375rem;
  font-size : 0.8125rem;
  color : #ef4444;
}
.form-input-success {
  border-color : #22c55e;
}
.form-helper-text {
  margin-top : 0.375rem;
  font-size : 0.8125rem;
  color : #6b7280;
}
.form-row {
  display : flex;
  gap : 1rem;
}
.form-row > * {
  flex : 1;
}
html.dark .form-input,
      html.dark .form-select, html.dark .form-textarea {
  background : var(--dm-bg-card);
  border-color : var(--dm-border);
}
  html.dark .form-input : focus, html.dark .form-select : focus, html.dark .form-textarea : focus {
  background : var(--dm-bg-secondary);
  border-color : var(--color-accent);
}
.spinner {
  width : 2rem;
  height : 2rem;
  border : 3px solid rgba(var(--color-accent-rgb, 251, 198, 109), 0.2);
  border-top-color : var(--color-accent);
  border-radius : 50%;
  animation : spinner-rotate 0.8s linear infinite;
}
.spinner-sm {
  width : 1rem;
  height : 1rem;
  border-width : 2px;
}
.spinner-lg {
  width : 3rem;
  height : 3rem;
  border-width : 4px;
}
.spinner-xl {
  width : 4rem;
  height : 4rem;
  border-width : 5px;
}
.spinner-primary {
  border-color : rgba(var(--color-primary-rgb, 121, 0, 3), 0.2);
  border-top-color : var(--color-primary);
}
.spinner-white {
  border-color : rgba(255, 255, 255, 0.2);
  border-top-color : #ffffff;
}
@keyframes spinner-rotate {
  to{transform : rotate(360deg);
}
}.loading-dots {
  display : inline-flex;
  gap : 0.375rem;
}
.loading-dots span {
  width : 0.625rem;
  height : 0.625rem;
  background : var(--color-accent);
  border-radius : 50%;
  animation : dots-bounce 1.4s ease-in-out infinite both;
}
  .loading-dots span : nth-child(1) {
  animation-delay : -0.32s;
}
  .loading-dots span : nth-child(2) {
  animation-delay : -0.16s;
}
  .loading-dots span : nth-child(3) {
  animation-delay : 0s;
}
@keyframes dots-bounce {
  0%, 80%, 100%{transform : scale(0); opacity : 0.5;
}
40% {
  transform : scale(1); opacity : 1;
}
}.loading-pulse {
  width : 2rem;
  height : 2rem;
  background : var(--color-accent);
  border-radius : 50%;
  animation : pulse-scale 1.5s ease-in-out infinite;
}
@keyframes pulse-scale {
  0%, 100%{transform : scale(0.8); opacity : 0.5;
}
50% {
  transform : scale(1); opacity : 1;
}
}.skeleton {
  background : linear-gradient(90deg,
      rgba(var(--color-primary-rgb, 121, 0, 3), 0.3) 25%,
      rgba(var(--color-primary-rgb, 121, 0, 3), 0.5) 50%,
      rgba(var(--color-primary-rgb, 121, 0, 3), 0.3) 75%);
  background-size : 200% 100%;
  animation : skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius : 0.5rem;
}
.skeleton-text {
  height : 1rem;
  margin-bottom : 0.5rem;
}
  .skeleton-text : last-child {
  width : 70%;
}
.skeleton-title {
  height : 1.5rem;
  width : 60%;
  margin-bottom : 1rem;
}
.skeleton-avatar {
  width : 3rem;
  height : 3rem;
  border-radius : 50%;
}
.skeleton-image {
  width : 100%;
  aspect-ratio : 16/9;
}
.skeleton-card {
  padding : 1rem;
  background : rgba(0, 0, 0, 0.3);
  border-radius : 1rem;
}
@keyframes skeleton-shimmer {
  0%{background-position : -200% 0;
}
100% {
  background-position : 200% 0;
}
}.progress-bar {
  width : 100%;
  height : 0.5rem;
  background : rgba(var(--color-primary-rgb, 121, 0, 3), 0.3);
  border-radius : 9999px;
  overflow : hidden;
}
.progress-bar-fill {
  height : 100%;
  background : linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
  border-radius : 9999px;
  transition : width 0.3s ease;
}
.progress-bar-indeterminate .progress-bar-fill {
  width : 30%;
  animation : progress-indeterminate 1.5s ease-in-out infinite;
}
@keyframes progress-indeterminate {
  0%{transform : translateX(-100%);
}
100% {
  transform : translateX(400%);
}
}.loading-overlay {
  position : absolute;
  inset : 0;
  background : rgba(0, 0, 0, 0.7);
  backdrop-filter : blur(4px);
  display : flex;
  align-items : center;
  justify-content : center;
  z-index : 50;
  border-radius : inherit;
}
.loading-text {
  display : inline-flex;
  gap : 0.125rem;
}
.loading-text span {
  animation : loading-text-wave 1.5s ease-in-out infinite;
}
  .loading-text span : nth-child(1) {
  animation-delay : 0s;
}
  .loading-text span : nth-child(2) {
  animation-delay : 0.1s;
}
  .loading-text span : nth-child(3) {
  animation-delay : 0.2s;
}
  .loading-text span : nth-child(4) {
  animation-delay : 0.3s;
}
  .loading-text span : nth-child(5) {
  animation-delay : 0.4s;
}
  .loading-text span : nth-child(6) {
  animation-delay : 0.5s;
}
  .loading-text span : nth-child(7) {
  animation-delay : 0.6s;
}
@keyframes loading-text-wave {
  0%, 100%{transform : translateY(0);
}
50% {
  transform : translateY(-5px); color : var(--color-accent);
}
}.fade-in {
  animation : fade-in 0.3s ease-out;
}
@keyframes fade-in {
  from{opacity : 0;
}
to {
  opacity : 1;
}
}.slide-up {
  animation : slide-up 0.4s ease-out;
}
@keyframes slide-up {
  from{opacity : 0; transform : translateY(20px);
}
to {
  opacity : 1; transform : translateY(0);
}
}.scale-in {
  animation : scale-in 0.3s ease-out;
}
@keyframes scale-in {
  from{opacity : 0; transform : scale(0.9);
}
to {
  opacity : 1; transform : scale(1);
}
}.custom-slider {
  position : relative;
  overflow : hidden;
  padding : 0 50px;
}
  .custom-slider : :before, .custom-slider : :after {
  content : '';
  position : absolute;
  top : 0;
  bottom : 0;
  width : 60px;
  z-index : 5;
  pointer-events : none;
}
  .custom-slider : :before {
  left : 0;
  background : linear-gradient(to right, var(--color-primary-dark) 0%, transparent 100%);
}
  .custom-slider : :after {
  right : 0;
  background : linear-gradient(to left, var(--color-primary-dark) 0%, transparent 100%);
}
.custom-slider-track {
  display : flex;
  transition : transform 0.5s ease;
  gap : 10px;
}
.custom-slider-slide {
  flex-shrink : 0;
  width : calc(50% - 5px);
}
  @media (min-width : 768px) {
  .custom-slider-slide{width : calc(33.333% - 7px);
}
  }@media (min-width : 1024px) {
  .custom-slider-slide{width : calc(25% - 7.5px);
}
}.slider-btn {
  position : absolute;
  top : 50%;
  transform : translateY(-50%);
  width : 44px;
  height : 44px;
  background : linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius : 50%;
  border : 2px solid var(--color-accent);
  cursor : pointer;
  z-index : 10;
  display : flex;
  align-items : center;
  justify-content : center;
  transition : all 0.3s ease;
  opacity : 0.9;
}
  .slider-btn : hover {
  background : linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  transform : translateY(-50%) scale(1.1);
  opacity : 1;
}
  .slider-btn : disabled {
  opacity : 0.3;
  cursor : not-allowed;
}
  .slider-btn : disabled : hover {
  transform : translateY(-50%);
  background : linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
.slider-btn-prev {
  left : 0;
}
.slider-btn-next {
  right : 0;
}
.slider-btn svg {
  width : 20px;
  height : 20px;
  stroke : var(--color-accent);
  stroke-width : 2.5;
  fill : none;
  transition : stroke 0.3s ease;
}
  .slider-btn : hover svg {
  stroke : var(--color-primary-dark);
}
  @media (max-width : 640px) {
  .custom-slider{padding : 0;
}
  .custom-slider : :before, .custom-slider : :after {
  display : none;
}
.slider-btn {
  width : 30px;
  height : 30px;
  opacity : 0.85;
  background : rgba(0, 0, 0, 0.5);
  border : 1px solid var(--color-accent);
}
.slider-btn svg {
  width : 12px;
  height : 12px;
}
.slider-btn-prev {
  left : 5px;
}
.slider-btn-next {
  right : 5px;
}
}.collapsible-section {
  position : relative;
  overflow : hidden;
  transition : max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.collapsible-section.collapsed {
  max-height : 300px;
}
  @media (min-width : 640px) {
  .collapsible-section.collapsed{max-height : 400px;
}
}.collapsible-section.expanded {
  max-height : none;
}
  .collapsible-section.collapsed : :after {
  content : '';
  position : absolute;
  bottom : 0;
  left : 0;
  right : 0;
  height : 100px;
  background : linear-gradient(to top, var(--color-primary-dark) 0%, transparent 100%);
  pointer-events : none;
}
  @media (min-width : 640px) {
  .collapsible-section.collapsed : :after{height : 120px;
}
}.collapsible-toggle {
  display : flex;
  align-items : center;
  justify-content : center;
  gap : 6px;
  padding : 10px 20px;
  margin : 16px auto 0;
  background : linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border : 2px solid var(--color-accent);
  border-radius : 9999px;
  color : var(--color-accent);
  font-weight : 600;
  font-size : 0.875rem;
  cursor : pointer;
  transition : all 0.3s ease;
}
  @media (min-width : 640px) {
  .collapsible-toggle{gap : 8px;
  padding : 12px 24px;
  margin : 20px auto 0;
  font-size : 1rem;
}
  }.collapsible-toggle : hover {
  background : linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  color : var(--color-primary-dark);
  transform : translateY(-2px);
  box-shadow : 0 8px 20px rgba(var(--color-accent-rgb, 251, 198, 109), 0.3);
}
.collapsible-toggle svg {
  transition : transform 0.3s ease;
  width : 18px;
  height : 18px;
}
  @media (min-width : 640px) {
  .collapsible-toggle svg{width : 20px;
  height : 20px;
}
}.collapsible-toggle.expanded svg {
  transform : rotate(180deg);
}
.content-section-card {
  background : linear-gradient(145deg, rgba(0, 0,0, 0.6) 0%, rgba(var(--color-primary-rgb, 121, 0, 3), 0.2) 100%);
  border : 1px solid var(--color-primary);
  border-radius : 12px;
  padding : 16px;
  margin-bottom : 16px;
  transition : all 0.3s ease;
}
  @media (min-width : 640px) {
  .content-section-card{border-radius : 16px;
  padding : 24px;
  margin-bottom : 24px;
}
  }.content-section-card : hover {
  border-color : var(--color-accent);
  box-shadow : 0 8px 30px rgba(0, 0, 0, 0.3);
}
img[loading="lazy"] {
  background : linear-gradient(90deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%);
  background-size : 200% 100%;
  animation : lazyLoadShimmer 2s infinite linear;
}
img[loading="lazy"].loaded {
  animation : none;
  background : none;
}
@keyframes lazyLoadShimmer {
  0%{background-position : 200% 0;
}
100% {
  background-position : -200% 0;
}
}.lazy-fade-in {
  opacity : 0;
  transform : translateY(20px);
  transition : opacity 0.6s ease, transform 0.6s ease;
}
.lazy-fade-in.visible {
  opacity : 1;
  transform : translateY(0);
}
.quick-nav {
  display : flex;
  flex-wrap : wrap;
  gap : 8px;
  padding : 12px;
  background : rgba(0, 0, 0, 0.4);
  border-radius : 12px;
  border : 1px solid var(--color-primary);
  margin-bottom : 16px;
}
  @media (min-width : 640px) {
  .quick-nav{gap : 12px;
  padding : 16px;
  margin-bottom : 24px;
}
}.quick-nav > span {
  width : 100%;
  margin-bottom : 4px;
}
  @media (min-width : 640px) {
  .quick-nav > span{width : auto;
  margin-bottom : 0;
}
}.quick-nav-link {
  display : inline-flex;
  align-items : center;
  gap : 4px;
  padding : 6px 10px;
  background : linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border : 1px solid transparent;
  border-radius : 6px;
  color : var(--color-accent-light);
  font-size : 0.75rem;
  font-weight : 500;
  text-decoration : none;
  transition : all 0.3s ease;
}
  @media (min-width : 640px) {
  .quick-nav-link{gap : 6px;
  padding : 8px 16px;
  border-radius : 8px;
  font-size : 0.875rem;
}
  }.quick-nav-link : hover {
  border-color : var(--color-accent);
  background : linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  color : var(--color-primary-dark);
  transform : translateY(-2px);
}
.quick-nav-link svg {
  width : 14px;
  height : 14px;
}
  @media (min-width : 640px) {
  .quick-nav-link svg{width : 16px;
  height : 16px;
}
}.section-breadcrumb {
  display : flex;
  align-items : center;
  gap : 8px;
  font-size : 0.875rem;
  color : var(--color-accent);
  margin-bottom : 16px;
}
.section-breadcrumb a {
  color : var(--color-accent-light);
  text-decoration : none;
  transition : color 0.3s ease;
}
  .section-breadcrumb a : hover {
  color : var(--color-accent);
  text-decoration : underline;
}
.section-breadcrumb span {
  color : rgba(255, 255, 255, 0.5);
}
  .mobile-menu-scrollable : :-webkit-scrollbar {
  width : 8px;
}
  .mobile-menu-scrollable : :-webkit-scrollbar-track {
  background : #4a0909;
  border-radius : 10px;
}
  .mobile-menu-scrollable : :-webkit-scrollbar-thumb {
  background : #c29c3d;
  border-radius : 10px;
}
  .mobile-menu-scrollable : :-webkit-scrollbar-thumb : hover {
  background : #e0b04b;
}
.scrollbar-hide {
  -ms-overflow-style : none;
  scrollbar-width : none;
}
  .scrollbar-hide : :-webkit-scrollbar {
  display : none;
}
.near-me-chip {
  cursor : pointer;
}
  .near-me-chip : hover {
  background : rgba(121, 0, 3, 0.15) !important;
  border-color : rgba(121, 0, 3, 0.4) !important;
  transform : scale(1.02);
}
  .near-me-chip : focus {
  outline : none;
  box-shadow : 0 0 0 2px rgba(121, 0, 3, 0.3);
}
  .near-me-chip : active {
  transform : scale(0.98);
}
.near-me-chip.loading {
  opacity : 0.7;
  cursor : wait;
}
.near-me-chip.success {
  background : rgba(34, 197, 94, 0.15) !important;
  border-color : rgba(34, 197, 94, 0.4) !important;
  color : #16a34a !important;
}
  @media (max-width : 359px) {
  .near-me-chip #location-btn-text{display : none;
}
.near-me-chip {
  padding-left : 0.5rem;
  padding-right : 0.5rem;
}
}@keyframes marquee-scroll {
  0%{transform : translateX(0);
}
100% {
  transform : translateX(-50%);
}
}.trust-marquee-container {
  overflow : hidden;
  position : relative;
  width : 100%;
  mask-image : linear-gradient(to right, transparent, black 5%, black 95%, transparent);-webkit-mask-image : linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.trust-marquee-track {
  display : flex;
  gap : 3rem;
  animation : marquee-scroll 25s linear infinite;
  width : max-content;
}
  .trust-marquee-track : hover {
  animation-play-state : paused;
}
.trust-badge-item {
  display : flex;
  align-items : center;
  gap : 0.5rem;
  white-space : nowrap;
  flex-shrink : 0;
}
@keyframes flameGlow {
  0%, 100%{transform : scale(1);
}
50% {
  transform : scale(1.15);
}
}@keyframes trendingRingGlow {
  0%, 100%{box-shadow : 0 0 15px 3px rgba(255, 107, 53, 0.4);
}
50% {
  box-shadow : 0 0 25px 6px rgba(255, 107, 53, 0.6);
}
  }.story-item-premium : hover .story-ring {
  transform : scale(1.08);
}
  .story-item-premium : hover .story-name {
  color : var(--color-accent-light);
}
.nowcalling {
  position : fixed;
  bottom : 0;
  left : 0;
  right : 0;
  z-index : 10000;
}
.lcol, .rcol {
  flex : 1;
  display : flex;
  align-items : center;
  justify-content : center;
}
.lcol {
  background-color : #4a1f0f;
}
.rcol {
  background-color : #174829;
}
.lcol a, .rcol a {
  display : flex;
  align-items : center;
  justify-content : center;
  gap : 8px;
  width : 100%;
  padding : 14px 0;
  text-align : center;
  text-decoration : none;
  color : #fff;
  font-weight : 600;
  font-size : 1.05rem;
  transition : all 0.3s ease;
}
  .lcol a : hover, .rcol a : hover {
  background : rgba(0, 0,0, 0.2);
}
@keyframes saveAppPulse {
  0%, 100%{box-shadow : 0 4px 15px rgba(251, 198, 109, 0.6);
}
50% {
  box-shadow : 0 4px 30px rgba(251, 198, 109, 0.9);
}
}@keyframes saveAppShake {
  0%, 100%{transform : translateX(0);
}
10%, 30%, 50%, 70%, 90% {
  transform : translateX(-3px);
}
20%, 40%, 60%, 80% {
  transform : translateX(3px);
}
}@keyframes popoverSlideIn {
  0%{opacity : 0; transform : translateY(10px) scale(0.95);
}
100% {
  opacity : 1; transform : translateY(0) scale(1);
}
}@keyframes popoverSlideOut {
  0%{opacity : 1; transform : translateY(0) scale(1);
}
100% {
  opacity : 0; transform : translateY(10px) scale(0.95);
}
}#saveOnAppBtn {
  animation : saveAppPulse 2s ease-in-out infinite;
}
#saveOnAppBtn.shake {
  animation : saveAppShake 0.6s ease-in-out, saveAppPulse 2s ease-in-out infinite;
}
#saveOnAppBtn.popover-open {
  animation : none;
  background : #dc2626 !important;
}
  #saveOnAppBtn.popover-open : hover {
  background : #b91c1c !important;
}
#saveOnAppBtn.popover-open #discountBadge {
  display : none;
}
#saveOnAppPopover {
  pointer-events : none;
}
#saveOnAppPopover.active {
  pointer-events : auto;
}
#saveOnAppPopover .save-app-popover-wrapper {
  opacity : 0;
  transform : translateY(10px) scale(0.95);
  transition : opacity 0.2s ease, transform 0.2s ease;
}
#saveOnAppPopover.active .save-app-popover-wrapper {
  opacity : 1;
  transform : translateY(0) scale(1);
}
.save-app-popover-box {
  box-shadow : 0 10px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
  position : relative;
}
.save-app-popover-arrow {
  position : absolute;
  bottom : -8px;
  left : 24px;
  width : 16px;
  height : 16px;
  background : white;
  transform : rotate(45deg);
  box-shadow : 4px 4px 8px rgba(0, 0, 0, 0.08);
  z-index : -1;
}
#saveOnAppPopover.arrow-right .save-app-popover-arrow {
  left : auto;
  right : 24px;
}
#saveOnAppPopover.arrow-up .save-app-popover-arrow {
  bottom : auto;
  top : -8px;
  box-shadow : -2px -2px 8px rgba(0, 0, 0, 0.08);
}
.banner {
  height : 80vh;
  min-height : 500px;
  background-image : url('../images/bnr1.jpg');
  background-size : cover;
  background-position : center;
  position : relative;
  display : flex;
  align-items : center;
  justify-content : center;
  color : white;
  text-align : center;
}
  .banner : :before {
  content : "";
  position : absolute;
  inset : 0;
  background : rgba(0, 0, 0, 0.20);
}
.banner-content {
  position : relative;
  z-index : 1;
  padding : 20px;
  max-width : 900px;
}
.banner h1 {
  font-size : 4.5rem;
  margin-bottom : 1rem;
  line-height : 1.1;
  text-shadow : 0 2px 8px rgba(0, 0,0, 0.5);
}
.banner p {
  font-size : 1.5rem;
  margin-bottom : 2rem;
  text-shadow : 0 1px 6px rgba(0, 0,0, 0.5);
}
.btn {
  background : #e63946;
  color : white;
  padding : 14px 36px;
  font-size : 1.2rem;
  text-decoration : none;
  border-radius : 50px;
  display : inline-block;
}
  .btn : hover {
  background : #d00000;
}
  @media (max-width : 768px) {
  .banner{height : 70vh;
  min-height : 450px;
}
.banner h1 {
  font-size : 3.2rem;
}
.banner p {
  font-size : 1.3rem;
}
  }@media (max-width : 480px) {
  .banner h1{font-size : 2.4rem;
}
.btn {
  padding : 12px 28px;
  font-size : 1.1rem;
}
}