/**
 * @file
 * CSS for Bathnes Cookie Consent module.
 */

/* Cookie Banner Styles */
.cookie-banner {
  background-color: #f3f2f1;
  border-bottom: 1px solid #b1b4b6;
  padding: 20px 0;
  position: relative;
  z-index: 1000;
  display: none; /* Hide by default, JavaScript will show if needed */
}

/* Show banner if no consent cookie exists - checked immediately via inline script */
html.js-show-cookie-banner .cookie-banner {
  display: block;
}

.cookie-banner__message {
  margin-bottom: 20px;
}

.cookie-banner__buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: center;
}

.cookie-banner__button {
  margin-bottom: 0;
}

.cookie-banner__link {
  font-size: 16px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 0.1em;
}

.cookie-banner__link:hover {
  text-decoration-thickness: 3px;
}

.cookie-banner--hidden {
  display: none;
}

.cookie-settings-link {
  margin-top: 10px;
}

.cookie-settings-link a {
  color: #1d70b8;
  text-decoration: underline;
}

.cookie-settings-link a:hover {
  color: #003078;
}

.cookie-settings-link a:focus {
  outline: 3px solid #ffdd00;
  outline-offset: 0;
}

/* Cookie Page Styles */
.cookie-consent-page {
  padding: 20px 0;
}

.cookie-category {
  border: 1px solid #b1b4b6;
  margin-bottom: 30px;
  padding: 20px;
}

.cookie-category h3 {
  margin-top: 0;
  margin-bottom: 15px;
}

.cookie-table {
  margin-top: 20px;
}

.cookie-table th,
.cookie-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #b1b4b6;
}

.cookie-table th {
  background-color: #f3f2f1;
  font-weight: bold;
}

.cookie-status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: bold;
}

.cookie-status--enabled {
  background-color: #00703c;
  color: white;
}

.cookie-status--disabled {
  background-color: #d4351c;
  color: white;
}

.cookie-status--essential {
  background-color: #1d70b8;
  color: white;
}

.cookie-settings-panel {
  background-color: #f3f2f1;
  border: 1px solid #b1b4b6;
  padding: 20px;
  margin: 30px 0;
}

.cookie-settings-panel h2 {
  margin-top: 0;
}

.cookie-toggle {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.cookie-toggle input[type="checkbox"] {
  margin-right: 10px;
}

.cookie-toggle label {
  margin-bottom: 0;
  cursor: pointer;
}

.cookie-description {
  margin-left: 30px;
  color: #505a5f;
  font-size: 16px;
}

.back-link {
  margin-bottom: 30px;
}

.cookie-info-box {
  background-color: #f3f2f1;
  border-left: 4px solid #1d70b8;
  padding: 15px;
  margin: 20px 0;
}

.cookie-info-box p {
  margin: 0;
}

.cookie-settings-panel .govuk-radios {
  margin-bottom: 20px;
}

.cookie-settings-panel .govuk-hint {
  margin-top: 10px;
}

/* Notification Styles */
.cookie-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #00703c;
  color: white;
  padding: 15px 20px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1001;
  max-width: 300px;
}

.cookie-notification--error {
  background-color: #d4351c;
}

.cookie-notification--warning {
  background-color: #f47738;
}

/* Responsive Design */
@media (max-width: 640px) {
  .cookie-banner__buttons {
    flex-direction: column;
  }
  
  .cookie-banner__button {
    width: 100%;
  }
  
  .cookie-notification {
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    max-width: none;
  }
}

@media (max-width: 768px) {
  .cookie-category {
    padding: 15px;
  }
  
  .cookie-settings-panel {
    padding: 15px;
  }
  
  .cookie-table {
    font-size: 14px;
  }
  
  .cookie-table th,
  .cookie-table td {
    padding: 8px;
  }
}

/* Accessibility Improvements */
.cookie-banner:focus-within {
  outline: 3px solid #ffdd00;
  outline-offset: 2px;
}

.cookie-banner__button:focus {
  outline: 3px solid #ffdd00;
  outline-offset: 2px;
}

/* Animation for smooth transitions */
.cookie-banner {
  transition: all 0.3s ease-in-out;
}

.cookie-notification {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .cookie-banner {
    border-bottom: 2px solid #000000;
  }
  
  .cookie-category {
    border: 2px solid #000000;
  }
  
  .cookie-settings-panel {
    border: 2px solid #000000;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: none;
  }
  
  .cookie-notification {
    animation: none;
  }
}