/**
 * Cookiebot Custom Styling for DonTCG
 * Override default Cookiebot styles to match DonTCG nautical/gold theme
 *
 * Colors:
 * - Primary Gold: #d4af37
 * - Deep Navy: #0a1628
 * - Surface: #0e1e38
 */

/* ============================================================
   COOKIEBOT BANNER - Main dialog
   ============================================================ */

#CybotCookiebotDialog {
  background: rgba(10, 22, 40, 0.97) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4),
              0 10px 10px -5px rgba(0, 0, 0, 0.3),
              0 0 40px rgba(212, 175, 55, 0.08) !important;
}

/* Banner text color */
#CybotCookiebotDialog * {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================================
   BUTTONS - Primary actions
   ============================================================ */

/* Accept All button - Gold primary */
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
#CybotCookiebotDialogBodyButtonAccept {
  background: linear-gradient(135deg, #d4af37 0%, #a88a20 100%) !important;
  color: #0a1628 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
  padding: 12px 24px !important;
}

#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:hover,
#CybotCookiebotDialogBodyButtonAccept:hover {
  background: linear-gradient(135deg, #e8c84a 0%, #c09a30 100%) !important;
  transform: translateY(-1px) !important;
}

/* Decline/Necessary only button - Ghost style */
#CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll,
#CybotCookiebotDialogBodyButtonDecline {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(212, 175, 55, 0.2) !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  padding: 12px 24px !important;
}

#CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll:hover,
#CybotCookiebotDialogBodyButtonDecline:hover {
  background: rgba(212, 175, 55, 0.08) !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
  color: white !important;
}

/* Details/Settings button - Gold outline */
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
#CybotCookiebotDialogBodyButtonDetails {
  background: transparent !important;
  color: #d4af37 !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  padding: 12px 24px !important;
}

#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:hover,
#CybotCookiebotDialogBodyButtonDetails:hover {
  background: rgba(212, 175, 55, 0.1) !important;
  border-color: #d4af37 !important;
}

/* ============================================================
   CHECKBOXES & TOGGLES
   ============================================================ */

/* Checkbox background */
.CybotCookiebotDialogBodyLevelButtonSlider {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
}

/* Checkbox checked state */
input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
  background: #d4af37 !important;
}

/* Checkbox slider */
.CybotCookiebotDialogBodyLevelButtonSlider:before {
  background: white !important;
  border-radius: 50% !important;
}

/* ============================================================
   TABS & SECTIONS
   ============================================================ */

/* Tab buttons */
.CybotCookiebotDialogDetailBodyContentTab {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(212, 175, 55, 0.15) !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  transition: all 0.2s ease !important;
}

.CybotCookiebotDialogDetailBodyContentTab:hover {
  background: rgba(212, 175, 55, 0.08) !important;
  color: white !important;
}

.CybotCookiebotDialogDetailBodyContentTab[aria-selected="true"] {
  background: rgba(212, 175, 55, 0.15) !important;
  color: #d4af37 !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
}

/* ============================================================
   LINKS
   ============================================================ */

#CybotCookiebotDialog a,
.CybotCookiebotDialogDetailBodyContentTextLink {
  color: #d4af37 !important;
  text-decoration: underline !important;
  transition: color 0.2s ease !important;
}

#CybotCookiebotDialog a:hover,
.CybotCookiebotDialogDetailBodyContentTextLink:hover {
  color: #f0d060 !important;
}

/* ============================================================
   HEADER
   ============================================================ */

#CybotCookiebotDialogPoweredbyLink {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 11px !important;
}

#CybotCookiebotDialogPoweredbyLink:hover {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ============================================================
   CLOSE BUTTON
   ============================================================ */

#CybotCookiebotDialogBodyButtonsClose {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.5) !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

#CybotCookiebotDialogBodyButtonsClose:hover {
  color: #d4af37 !important;
  background: rgba(212, 175, 55, 0.08) !important;
  border-radius: 8px !important;
}

/* ============================================================
   DETAILED VIEW - Cookie categories
   ============================================================ */

.CybotCookiebotDialogDetailBodyContentCookieTypeIntro {
  background: rgba(212, 175, 55, 0.05) !important;
  border-left: 3px solid #d4af37 !important;
  border-radius: 4px !important;
  padding: 12px !important;
}

/* Cookie provider rows */
.CybotCookiebotDialogDetailBodyContentCookieContainerTypes {
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(212, 175, 55, 0.1) !important;
}

/* ============================================================
   HIDE CONSENT ID / TECHNICAL DETAILS from renewal widget
   ============================================================ */

#CybotCookiebotDialogBodyContentTextOverview,
#CybotCookiebotDialogBodyContentText .CybotCookiebotDialogBodyContentTextAbout,
.CybotCookiebotDialogBodyContentTextAbout,
#CybotCookiebotDialogBodyEdgeMoreDetailsLink {
  display: none !important;
}

/* ============================================================
   FORCE DARK BACKGROUND on ALL internal elements
   ============================================================ */

#CybotCookiebotDialog div,
#CybotCookiebotDialog form,
#CybotCookiebotDialog fieldset,
#CybotCookiebotDialog section,
#CybotCookiebotDialog header,
#CybotCookiebotDialog footer,
#CybotCookiebotDialog nav,
#CybotCookiebotDialog details,
#CybotCookiebotDialog summary,
#CybotCookiebotDialogBody,
#CybotCookiebotDialogBodyContent,
#CybotCookiebotDialogBodyContentText,
#CybotCookiebotDialogBodyContentTitle,
#CybotCookiebotDialogBodyButtons,
#CybotCookiebotDialogDetail,
#CybotCookiebotDialogDetailBody,
#CybotCookiebotDialogDetailBodyContent,
#CybotCookiebotDialogDetailFooter,
#CybotCookiebotDialogNav,
.CybotCookiebotDialogBodyLevelButtonWrapper,
.CybotCookiebotDialogDetailBodyContentTab,
.CybotCookiebotDialogDetailBodyContentCookieContainer {
  background-color: transparent !important;
  background: transparent !important;
}

#CybotCookiebotDialogBodyContentText,
#CybotCookiebotDialogBodyLevelWrapper {
  background: rgba(10, 22, 40, 0.97) !important;
}

/* ============================================================
   LIGHT THEME OVERRIDES
   ============================================================ */

html[data-theme="light"] #CybotCookiebotDialog {
  background: rgba(212, 230, 250, 0.97) !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15),
              0 10px 10px -5px rgba(0, 0, 0, 0.1),
              0 0 40px rgba(212, 175, 55, 0.12) !important;
}

html[data-theme="light"] #CybotCookiebotDialog * {
  color: #0a1628 !important;
}

html[data-theme="light"] #CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll,
html[data-theme="light"] #CybotCookiebotDialogBodyButtonDecline {
  background: rgba(10, 22, 40, 0.06) !important;
  color: rgba(10, 22, 40, 0.7) !important;
  border-color: rgba(212, 175, 55, 0.3) !important;
}

html[data-theme="light"] #CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll:hover,
html[data-theme="light"] #CybotCookiebotDialogBodyButtonDecline:hover {
  background: rgba(10, 22, 40, 0.1) !important;
  color: #0a1628 !important;
}

html[data-theme="light"] #CybotCookiebotDialogBodyContentText,
html[data-theme="light"] #CybotCookiebotDialogBodyLevelWrapper {
  background: rgba(212, 230, 250, 0.97) !important;
}

html[data-theme="light"] #CybotCookiebotDialogBodyButtonsClose {
  color: rgba(10, 22, 40, 0.5) !important;
}

html[data-theme="light"] #CybotCookiebotDialogBodyButtonsClose:hover {
  color: #0a1628 !important;
}

html[data-theme="light"] .CybotCookiebotDialogDetailBodyContentTab {
  background: rgba(10, 22, 40, 0.05) !important;
  color: rgba(10, 22, 40, 0.7) !important;
}

html[data-theme="light"] .CybotCookiebotDialogDetailBodyContentTab:hover {
  color: #0a1628 !important;
}

/* ============================================================
   MOBILE RESPONSIVENESS
   ============================================================ */

@media (max-width: 768px) {
  #CybotCookiebotDialog {
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 12px !important;
  }

  #CybotCookiebotDialogBody {
    padding: 8px !important;
  }

  #CybotCookiebotDialogBodyContent {
    padding: 4px 0 !important;
  }

  #CybotCookiebotDialogBodyButtons {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px 0 !important;
  }

  #CybotCookiebotDialogBodyButtons button {
    width: 100% !important;
  }

  #CybotCookiebotDialogBodyContentTitle {
    font-size: 16px !important;
  }

  #CybotCookiebotDialogBodyContentText {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}

/* ============================================================
   SMALL PHONE BREAKPOINT
   ============================================================ */

@media (max-width: 480px) {
  #CybotCookiebotDialog {
    padding: 8px !important;
    border-radius: 12px 12px 0 0 !important;
  }

  #CybotCookiebotDialogBody {
    padding: 4px !important;
  }

  #CybotCookiebotDialogBodyButtons button {
    padding: 10px 16px !important;
    font-size: 13px !important;
  }

  #CybotCookiebotDialogBodyContentTitle {
    font-size: 14px !important;
  }

  #CybotCookiebotDialogBodyContentText {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
}

/* ============================================================
   ACCESSIBILITY - Focus states
   ============================================================ */

#CybotCookiebotDialog button:focus,
#CybotCookiebotDialog a:focus,
#CybotCookiebotDialog input:focus {
  outline: 2px solid #d4af37 !important;
  outline-offset: 2px !important;
}

/* ============================================================
   ANIMATION - Smooth entrance
   ============================================================ */

#CybotCookiebotDialog {
  animation: slideUp 0.3s ease-out !important;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}