/* CompoSala Cookie Consent Custom Styling */

/* Main consent modal */
#cc-main {
  font-family: var(--font-body) !important;
  --cc-bg: rgba(255, 255, 252, 0.98) !important;
  --cc-text: #111827 !important;
  --cc-btn-primary-bg: #90120D !important;
  --cc-btn-primary-text: #ffffff !important;
  --cc-btn-primary-hover-bg: #b91d1d !important;
  --cc-btn-secondary-bg: transparent !important;
  --cc-btn-secondary-text: #6B7280 !important;
  --cc-btn-secondary-border: #D1D5DB !important;
  --cc-btn-secondary-hover-bg: #F9FAFB !important;
  --cc-overlay-bg: rgba(0, 0, 0, 0.4) !important;
  --cc-separator-border-color: #E5E7EB !important;
}

/* Modal styling */
.cc_div #c-inr-i {
  border-radius: 24px !important;
  box-shadow: 0 20px 40px rgba(144, 18, 13, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Title styling */
.cc_div #c-ttl {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin-bottom: 1rem !important;
}

/* Description text */
.cc_div #c-txt {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: #4B5563 !important;
  margin-bottom: 1.5rem !important;
}

/* Buttons container */
.cc_div #c-bns {
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

/* Primary button (Accept All) */
.cc_div .c-bn {
  border-radius: 16px !important;
  padding: 0.875rem 1.5rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  transition: all 0.3s ease !important;
  border: none !important;
  cursor: pointer !important;
}

/* Primary button hover effect */
.cc_div .c-bn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(144, 18, 13, 0.25) !important;
}

/* Secondary button (Reject/Customize) */
.cc_div .c-bn.c-bn--secondary {
  background: transparent !important;
  color: #6B7280 !important;
  border: 2px solid #D1D5DB !important;
}

.cc_div .c-bn.c-bn--secondary:hover {
  background: #F9FAFB !important;
  border-color: #90120D !important;
  color: #90120D !important;
}

/* Footer link styling */
.cc_div #c-f-hd a {
  color: #90120D !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}

.cc_div #c-f-hd a:hover {
  color: #b91d1d !important;
  text-decoration: underline !important;
}

/* Preferences modal styling */
.cc_div #s-inr {
  border-radius: 24px !important;
  box-shadow: 0 20px 40px rgba(144, 18, 13, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Preferences modal title */
.cc_div #s-ttl {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

/* Section titles in preferences */
.cc_div .p__title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color: #111827 !important;
  font-size: 1.125rem !important;
}

/* Section descriptions */
.cc_div .p__desc {
  color: #4B5563 !important;
  line-height: 1.6 !important;
}

/* Toggle switches */
.cc_div .c__tgl {
  --tgl-width: 50px !important;
  --tgl-height: 24px !important;
}

.cc_div .c__tgl:checked {
  background: #90120D !important;
}

/* Badge styling */
.cc_div .pm__badge {
  background: #10B981 !important;
  color: white !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 8px !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .cc_div #c-inr-i {
    margin: 1rem !important;
    border-radius: 16px !important;
  }

  .cc_div #c-ttl {
    font-size: 1.25rem !important;
  }

  .cc_div #c-txt {
    font-size: 0.9rem !important;
  }

  .cc_div .c-bn {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.9rem !important;
  }

  .cc_div #c-bns {
    flex-direction: column !important;
  }

  .cc_div .c-bn {
    width: 100% !important;
  }
}

/* Position adjustments for mobile */
@media (max-width: 640px) {
  .cc_div.cc--bottom-right {
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
  }
}