/**
 * Custom Cookie Consent Theme for Taronga Mines
 * Matches the site's green color scheme and Roboto typography
 * For orestbida/cookieconsent v3.1.0
 */

/* ==========================================================
   COOKIE CONSENT MODAL STYLING
========================================================== */

/* Main consent modal container */
#cc-main {
  font-family: "Roboto", sans-serif !important;
}

/* Modal containers with navbar-style gradient (inverted) */
.cm,
.pm {
  border-radius: 0 !important;
  /* Subtle shadow like navbar but inverted for top edge */
  box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  border: none !important;
  /* Inverted navbar gradient - from bottom to top */
  background: linear-gradient(
    to top,
    rgba(226, 226, 226, 0.9) 0%,
    rgba(219, 219, 219, 0.9) 25%,
    rgba(209, 209, 209, 0.9) 96%,
    rgba(254, 254, 254, 0.9) 100%
  ) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  font-family: "Roboto", sans-serif !important;
}

/* Modal backdrop */
#cc-main .c-bg {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Consent modal specific */
#cc-main .cm {
  max-width: 500px !important;
}

/* Preferences modal specific */
#cc-main .pm {
  max-width: 600px !important;
}

/* ==========================================================
   POSITIONING IMPROVEMENTS
========================================================== */

/* Full-width bar layout for both consent and preferences modals */
#cc-main .cm,
#cc-main .pm {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  z-index: 9999 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
}

/* Consent modal at bottom */
#cc-main .cm {
  bottom: 0 !important;
  border-bottom: none !important;
}

/* Preferences modal on right side */
#cc-main .pm {
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 100% !important;
  max-width: 400px !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* Desktop adjustments for preferences modal */
@media (min-width: 768px) {
  #cc-main .pm {
    max-width: 450px !important;
  }
}

/* Ensure backdrop covers full screen */
#cc-main .c-bg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 9998 !important;
}

/* Mobile-first responsive design for bar layout */
@media (max-width: 767px) {
  /* Content spacing for mobile */
  #cc-main .cm .cc__modal-content,
  #cc-main .pm .cc__modal-content {
    padding: 1rem !important;
  }

  #cc-main .cm .cc__modal-title,
  #cc-main .pm .cc__modal-title {
    font-size: 1.1rem !important;
    margin-bottom: 0.5rem !important;
  }

  #cc-main .cm .cc__modal-description,
  #cc-main .pm .cc__modal-description {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1rem !important;
  }

  /* Stack buttons horizontally but with proper spacing */
  #cc-main .cm .cc__modal-footer {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: center !important;
  }

  #cc-main .cm .cc__btn {
    flex: 1 !important;
    min-width: 120px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
  }

  /* Preferences modal full screen on mobile */
  #cc-main .pm {
    max-width: 100% !important;
    left: 0 !important;
  }

  /* Ensure modal is above mobile browser UI */
  #cc-main .cm {
    bottom: max(0px, env(safe-area-inset-bottom)) !important;
  }
}

/* Ensure modal is always visible above other content */
#cc-main {
  z-index: 999999 !important;
}

#cc-main .cm,
#cc-main .pm {
  z-index: 1000000 !important;
}

/* Enhanced gradient styling to match navbar */
#cc-main .cm,
#cc-main .pm {
  /* Ensure the gradient background is applied consistently */
  background: linear-gradient(
    to top,
    rgba(226, 226, 226, 0.9) 0%,
    rgba(219, 219, 219, 0.9) 25%,
    rgba(209, 209, 209, 0.9) 96%,
    rgba(254, 254, 254, 0.9) 100%
  ) !important;
}

/* Ensure text contrast on gradient background */
#cc-main .cm *,
#cc-main .pm * {
  text-shadow: none !important;
}

/* ==========================================================
   COMPREHENSIVE COLOR OVERRIDES - NO BLUE COLORS
========================================================== */

/* Override any potential blue colors from the library */
#cc-main .cc__btn,
#cc-main button {
  /* Remove any default blue focus colors */
  outline: none !important;
}

#cc-main .cc__btn:focus,
#cc-main button:focus {
  /* Use green focus instead of blue */
  box-shadow: 0 0 0 0.25rem rgba(29, 126, 0, 0.25) !important;
  outline: none !important;
}

/* Ensure all interactive elements use green theme */
#cc-main .cc__btn[data-role="show-preferencesModal"],
#cc-main .cc__btn--tertiary {
  color: rgba(29, 126, 0, 1) !important;
  border-color: rgba(29, 126, 0, 1) !important;
  background-color: transparent !important;
}

#cc-main .cc__btn[data-role="show-preferencesModal"]:hover,
#cc-main .cc__btn--tertiary:hover {
  background-color: rgba(245, 241, 235, 1) !important;
  color: rgba(21, 94, 0, 1) !important;
  border-color: rgba(21, 94, 0, 1) !important;
}

/* ==========================================================
   AGGRESSIVE OVERRIDES FOR LIBRARY DEFAULTS
========================================================== */

/* Force override any default button colors */
#cc-main button,
#cc-main .cc__btn,
#cc-main [class*="cc__btn"] {
  /* Remove any blue backgrounds */
  background-color: transparent !important;
  border: 1px solid rgba(231, 231, 231, 1) !important;
  color: rgba(51, 51, 51, 1) !important;
}

/* Force primary button styling */
#cc-main button[data-role="all"],
#cc-main .cc__btn[data-role="all"],
#cc-main button[data-role="accept"],
#cc-main .cc__btn[data-role="accept"],
#cc-main .cc__btn--primary,
#cc-main [class*="primary"] {
  background-color: rgba(29, 126, 0, 1) !important;
  border-color: rgba(29, 126, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important;
}

/* Force secondary button styling */
#cc-main button[data-role="necessary"],
#cc-main .cc__btn[data-role="necessary"],
#cc-main button[data-role="reject"],
#cc-main .cc__btn[data-role="reject"],
#cc-main .cc__btn--secondary,
#cc-main [class*="secondary"] {
  background-color: transparent !important;
  border-color: rgba(231, 231, 231, 1) !important;
  color: rgba(51, 51, 51, 1) !important;
}

/* Force all links to be green */
#cc-main a,
#cc-main [href],
#cc-main .cc__link,
#cc-main [class*="link"] {
  color: rgba(29, 126, 0, 1) !important;
  text-decoration: none !important;
}

#cc-main a:hover,
#cc-main [href]:hover,
#cc-main .cc__link:hover,
#cc-main [class*="link"]:hover {
  color: rgba(21, 94, 0, 1) !important;
  text-decoration: underline !important;
}

/* ==========================================================
   NUCLEAR OPTION - OVERRIDE ALL POSSIBLE BLUE COLORS
========================================================== */

/* Remove any blue colors that might be applied by the library */
#cc-main *[style*="blue"],
#cc-main *[style*="#007"],
#cc-main *[style*="#00a"],
#cc-main *[style*="rgb(0"],
#cc-main *[class*="blue"],
#cc-main *[class*="primary"]:not(.cc__btn--primary) {
  color: rgba(29, 126, 0, 1) !important;
  background-color: transparent !important;
  border-color: rgba(29, 126, 0, 1) !important;
}

/* Force override any CSS custom properties that might contain blue */
#cc-main {
  --cc-btn-primary-bg: rgba(29, 126, 0, 1) !important;
  --cc-btn-primary-color: rgba(255, 255, 255, 1) !important;
  --cc-btn-primary-border: rgba(29, 126, 0, 1) !important;
  --cc-btn-secondary-bg: transparent !important;
  --cc-btn-secondary-color: rgba(51, 51, 51, 1) !important;
  --cc-btn-secondary-border: rgba(231, 231, 231, 1) !important;
  --cc-link-color: rgba(29, 126, 0, 1) !important;
  --cc-link-hover-color: rgba(21, 94, 0, 1) !important;
}

/* Override any potential focus colors */
#cc-main *:focus,
#cc-main *:focus-visible {
  outline: 2px solid rgba(29, 126, 0, 1) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 0.25rem rgba(29, 126, 0, 0.25) !important;
}

/* Force footer styling */
#cc-main .cc__footer,
#cc-main [class*="footer"] {
  background-color: transparent !important;
  border-top: 1px solid rgba(231, 231, 231, 1) !important;
}

/* Force modal content background to match navbar gradient */
#cc-main .cc__modal,
#cc-main [class*="modal"] {
  background: linear-gradient(
    to top,
    rgba(226, 226, 226, 0.9) 0%,
    rgba(219, 219, 219, 0.9) 25%,
    rgba(209, 209, 209, 0.9) 96%,
    rgba(254, 254, 254, 0.9) 100%
  ) !important;
}

/* ==========================================================
   FINAL OVERRIDES - TOGGLE SWITCHES AND MISC ELEMENTS
========================================================== */

/* Force toggle switch colors to match site theme */
#cc-main .cc__toggle,
#cc-main [class*="toggle"],
#cc-main input[type="checkbox"] + *,
#cc-main .cc__toggle-slider {
  background-color: rgba(231, 231, 231, 1) !important;
  border-radius: 24px !important; /* Make slider background rounded */
}

#cc-main input:checked + .cc__toggle-slider,
#cc-main input:checked + [class*="toggle"],
#cc-main .cc__toggle--checked {
  background-color: rgba(29, 126, 0, 1) !important;
  border-radius: 24px !important; /* Keep rounded when checked */
}

/* Force any remaining blue elements to green */
#cc-main [style*="color: blue"],
#cc-main [style*="color: #007"],
#cc-main [style*="background: blue"],
#cc-main [style*="background: #007"],
#cc-main [style*="border: blue"],
#cc-main [style*="border: #007"] {
  color: rgba(29, 126, 0, 1) !important;
  background-color: transparent !important;
  border-color: rgba(29, 126, 0, 1) !important;
}

/* Override any library-specific button classes */
#cc-main .btn-primary,
#cc-main .button-primary,
#cc-main [class*="btn-primary"],
#cc-main [class*="button-primary"] {
  background-color: rgba(29, 126, 0, 1) !important;
  border-color: rgba(29, 126, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important;
}

#cc-main .btn-secondary,
#cc-main .button-secondary,
#cc-main [class*="btn-secondary"],
#cc-main [class*="button-secondary"] {
  background-color: transparent !important;
  border-color: rgba(231, 231, 231, 1) !important;
  color: rgba(51, 51, 51, 1) !important;
}

/* ==========================================================
   MODAL CONTENT STYLING
========================================================== */

/* Modal titles */
.cc__modal .cc__title {
  color: #333333 !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  margin-bottom: 1rem !important;
}

/* Modal descriptions */
.cc__modal .cc__description {
  color: #333333 !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  margin-bottom: 1.5rem !important;
}

/* Section titles in preferences */
.cc__modal .cc__section-title {
  color: #1d7e00 !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  margin-bottom: 0.5rem !important;
}

/* Section descriptions */
.cc__modal .cc__section-description {
  color: #333333 !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
}

/* ==========================================================
   BUTTON STYLING - MATCHING SITE THEME
========================================================== */

/* Primary buttons (Accept All) - Using site's green theme */
#cc-main .cc__btn[data-role="all"],
#cc-main .cc__btn--primary,
.cc__modal .cc__btn--primary {
  background-color: rgba(29, 126, 0, 1) !important; /* Site's primary green */
  border: 1px solid rgba(29, 126, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
}

/* Primary button hover and active states - matching site's btn-green */
#cc-main .cc__btn[data-role="all"]:hover,
#cc-main .cc__btn--primary:hover,
.cc__modal .cc__btn--primary:hover {
  background-color: rgba(23, 105, 0, 1) !important; /* Site's hover green */
  border-color: rgba(20, 87, 0, 1) !important; /* Site's hover border */
  color: rgba(255, 255, 255, 1) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(29, 126, 0, 0.3) !important;
}

#cc-main .cc__btn[data-role="all"]:active,
#cc-main .cc__btn--primary:active,
.cc__modal .cc__btn--primary:active {
  background-color: rgba(21, 94, 0, 1) !important; /* Site's active green */
  border-color: rgba(18, 74, 0, 1) !important; /* Site's active border */
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(29, 126, 0, 0.2) !important;
}

/* Secondary buttons (Reject All, Manage Preferences) - matching site theme */
#cc-main .cc__btn[data-role="necessary"],
#cc-main .cc__btn--secondary,
.cc__modal .cc__btn--secondary {
  background-color: transparent !important;
  border: 1px solid rgba(231, 231, 231, 1) !important;
  color: rgba(51, 51, 51, 1) !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
}

#cc-main .cc__btn[data-role="necessary"]:hover,
#cc-main .cc__btn--secondary:hover,
.cc__modal .cc__btn--secondary:hover {
  background-color: rgba(
    245,
    241,
    235,
    1
  ) !important; /* Site's light background */
  border-color: rgba(29, 126, 0, 1) !important; /* Site's green */
  color: rgba(29, 126, 0, 1) !important; /* Site's green text */
  transform: translateY(-1px) !important;
}

/* Save preferences button */
.cc__modal .cc__btn--save {
  background-color: #1d7e00 !important;
  border: 1px solid #1d7e00 !important;
  color: #ffffff !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
}

.cc__modal .cc__btn--save:hover {
  background-color: #145a00 !important;
  border-color: #145a00 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(29, 126, 0, 0.3) !important;
}

/* ==========================================================
   TOGGLE SWITCHES
========================================================== */

/* Toggle switch container */
.cc__modal .cc__toggle {
  position: relative !important;
  display: inline-block !important;
  width: 50px !important;
  height: 24px !important;
}

/* Toggle switch background */
.cc__modal .cc__toggle-slider {
  position: absolute !important;
  cursor: pointer !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: #e7e7e7 !important;
  transition: 0.3s !important;
  border-radius: 24px !important;
}

/* Toggle switch handle */
.cc__modal .cc__toggle-slider:before {
  position: absolute !important;
  content: "" !important;
  height: 18px !important;
  width: 18px !important;
  left: 3px !important;
  bottom: 3px !important;
  background-color: white !important;
  transition: 0.3s !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Toggle switch when checked */
.cc__modal input:checked + .cc__toggle-slider {
  background-color: #1d7e00 !important;
}

.cc__modal input:checked + .cc__toggle-slider:before {
  transform: translateX(26px) !important;
}

/* Disabled toggle (for necessary cookies) */
.cc__modal input:disabled + .cc__toggle-slider {
  background-color: #1d7e00 !important;
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}

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

/* Footer container */
.cc__modal .cc__footer {
  border-top: 1px solid #e7e7e7 !important;
  padding-top: 1rem !important;
  margin-top: 1.5rem !important;
  text-align: center !important;
}

/* Footer links - matching site theme */
#cc-main .cc__footer a,
.cc__modal .cc__footer a {
  color: rgba(29, 126, 0, 1) !important; /* Site's green */
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  margin: 0 0.75rem !important;
  transition: color 0.3s ease !important;
}

#cc-main .cc__footer a:hover,
.cc__modal .cc__footer a:hover {
  color: rgba(21, 94, 0, 1) !important; /* Site's darker green */
  text-decoration: underline !important;
}

/* Override any default blue link colors */
#cc-main a,
#cc-main .cc__link {
  color: rgba(29, 126, 0, 1) !important; /* Site's green instead of blue */
}

#cc-main a:hover,
#cc-main .cc__link:hover {
  color: rgba(21, 94, 0, 1) !important; /* Site's darker green */
}

/* ==========================================================
   CATEGORY SECTIONS
========================================================== */

/* Category section containers */
.cc__modal .cc__section {
  background-color: #f5f1eb !important;
  border: 1px solid #e7e7e7 !important;
  border-radius: 8px !important;
  padding: 1rem !important;
  margin-bottom: 1rem !important;
}

/* Category headers */
.cc__modal .cc__section-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 0.5rem !important;
}

/* Service counter */
.cc__modal .cc__service-counter {
  background-color: #1d7e00 !important;
  color: white !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 12px !important;
  margin-left: 0.5rem !important;
}

/* ==========================================================
   COOKIE TABLE
========================================================== */

/* Cookie table styling */
.cc__modal .cc__cookie-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-top: 1rem !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 0.85rem !important;
}

.cc__modal .cc__cookie-table th {
  background-color: #1d7e00 !important;
  color: white !important;
  font-weight: 600 !important;
  padding: 0.75rem 0.5rem !important;
  text-align: left !important;
  border: 1px solid #145a00 !important;
}

.cc__modal .cc__cookie-table td {
  padding: 0.5rem !important;
  border: 1px solid #e7e7e7 !important;
  background-color: white !important;
}

.cc__modal .cc__cookie-table tr:nth-child(even) td {
  background-color: #f5f1eb !important;
}

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

/* Close button (X) */
.cc__modal .cc__close-btn {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  background: none !important;
  border: none !important;
  font-size: 1.5rem !important;
  color: #333333 !important;
  cursor: pointer !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
}

.cc__modal .cc__close-btn:hover {
  background-color: #f5f1eb !important;
  color: #1d7e00 !important;
}

/* ==========================================================
   RESPONSIVE DESIGN
========================================================== */

/* Mobile adjustments */
@media (max-width: 768px) {
  .cc__modal {
    margin: 1rem !important;
    max-width: calc(100vw - 2rem) !important;
  }

  .cc__modal .cc__title {
    font-size: 1.1rem !important;
  }

  .cc__modal .cc__description {
    font-size: 0.9rem !important;
  }

  .cc__modal .cc__btn--primary,
  .cc__modal .cc__btn--secondary,
  .cc__modal .cc__btn--save {
    padding: 0.6rem 1.2rem !important;
    font-size: 0.9rem !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
  }

  .cc__modal .cc__footer a {
    display: block !important;
    margin: 0.5rem 0 !important;
  }
}

/* ==========================================================
   ANIMATIONS
========================================================== */

/* Modal entrance animation */
.cc__modal {
  animation: ccModalSlideIn 0.3s ease-out !important;
}

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

/* Button hover animations */
.cc__modal .cc__btn--primary,
.cc__modal .cc__btn--secondary,
.cc__modal .cc__btn--save {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Toggle switch animation */
.cc__modal .cc__toggle-slider {
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.cc__modal .cc__toggle-slider:before {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}