/**
 * Visage Daily - Silktide Consent Manager Aesthetic Theme
 * Minimalist luxury editorial design: neutral beige/cream palette, clean typography,
 * subtle dark borders, and styled primary buttons.
 */

/* 1. CSS Custom Properties / Design Tokens */
#stcm-wrapper {
  --fontFamily: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --primaryColor: #3E4B3F;               /* Visage Daily Deep Moss */
  --backgroundColor: #FDFBF7;            /* Visage Daily Parchment Light */
  --textColor: #2A332B;                  /* Visage Daily Moss Dark */
  --backdropBackgroundColor: rgba(42, 51, 43, 0.45);
  --backdropBackgroundBlur: 4px;
  --iconColor: #3E4B3F;
  --iconBackgroundColor: #F9F7F2;
  --boxShadow: 0 4px 20px -2px rgba(62, 75, 63, 0.08), 0 12px 32px -4px rgba(62, 75, 63, 0.08);
}

/* 2. Banner Aesthetic */
#stcm-wrapper #stcm-banner {
  background-color: #FDFBF7;
  color: #2A332B;
  border: 1px solid #D4C3A3;            /* Champagne border */
  border-radius: 16px;
  box-shadow: 0 12px 36px -4px rgba(62, 75, 63, 0.14), 0 4px 14px -2px rgba(62, 75, 63, 0.08);
  padding: 28px 32px;
  max-width: 540px;
}

#stcm-wrapper #stcm-banner p {
  color: #3E4B3F;
  font-size: 14.5px;
  line-height: 1.6;
  font-family: 'Outfit', sans-serif;
  margin-bottom: 20px;
}

#stcm-wrapper #stcm-banner a {
  color: #C86D51;                        /* Terracotta accent for links */
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

#stcm-wrapper #stcm-banner a:hover {
  color: #3E4B3F;
}

/* 3. Action Buttons */
#stcm-wrapper .stcm-button {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 22px;
  border-radius: 9999px;                 /* Refined pill aesthetic */
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(62, 75, 63, 0.08);
}

/* Primary Button (Accept all / Save) */
#stcm-wrapper .stcm-button-primary,
#stcm-wrapper #stcm-banner .stcm-accept-all,
#stcm-wrapper #stcm-modal .stcm-modal-save {
  background-color: #3E4B3F;
  color: #F9F7F2;
  border: 1px solid #3E4B3F;
}

#stcm-wrapper .stcm-button-primary:hover,
#stcm-wrapper #stcm-banner .stcm-accept-all:hover,
#stcm-wrapper #stcm-modal .stcm-modal-save:hover {
  background-color: #2A332B;
  color: #FFFFFF;
  border-color: #2A332B;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(62, 75, 63, 0.16);
}

/* Reject Non-Essential Button */
#stcm-wrapper #stcm-banner .stcm-reject-all,
#stcm-wrapper #stcm-modal .stcm-modal-reject-all {
  background-color: transparent;
  color: #3E4B3F;
  border: 1px solid #D4C3A3;
}

#stcm-wrapper #stcm-banner .stcm-reject-all:hover,
#stcm-wrapper #stcm-modal .stcm-modal-reject-all:hover {
  background-color: #EDE8DC;
  color: #2A332B;
  border-color: #3E4B3F;
}

/* Preferences Trigger Button in Banner */
#stcm-wrapper #stcm-banner .stcm-preferences-button {
  color: #3E4B3F;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
  padding: 8px 4px;
}

#stcm-wrapper #stcm-banner .stcm-preferences-button:hover span {
  color: #C86D51;
}

/* Silktide Logo in Banner */
#stcm-wrapper #stcm-banner a.stcm-logo {
  fill: #B8A37E;
  opacity: 0.7;
  transition: opacity 0.2s ease, fill 0.2s ease;
}

#stcm-wrapper #stcm-banner a.stcm-logo:hover {
  fill: #3E4B3F;
  opacity: 1;
}

/* 4. Preferences Modal Aesthetic */
#stcm-wrapper #stcm-modal {
  background-color: #FDFBF7;
  color: #2A332B;
  border: 1px solid #D4C3A3;
  border-radius: 20px;
  box-shadow: 0 20px 50px -10px rgba(62, 75, 63, 0.22), 0 8px 16px -4px rgba(62, 75, 63, 0.1);
  padding: 36px 40px;
  max-width: 680px;
}

#stcm-wrapper #stcm-modal header {
  border-bottom: 1px solid #E2DAC8;
  padding-bottom: 16px;
  margin-bottom: 20px;
}

#stcm-wrapper #stcm-modal h1 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  color: #2A332B;
  letter-spacing: -0.01em;
}

#stcm-wrapper #stcm-modal .stcm-modal-close {
  background: transparent;
  color: #3E4B3F;
  border-radius: 50%;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#stcm-wrapper #stcm-modal .stcm-modal-close:hover {
  background-color: #EDE8DC;
  color: #2A332B;
}

#stcm-wrapper #stcm-modal p {
  color: #516252;
  font-size: 14.5px;
  line-height: 1.6;
}

#stcm-wrapper #stcm-modal section {
  margin-top: 24px;
}

/* Modal Fieldset Cards */
#stcm-wrapper #stcm-modal fieldset {
  background-color: #F9F7F2;
  border: 1px solid #E2DAC8;
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 18px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#stcm-wrapper #stcm-modal fieldset:hover {
  border-color: #D4C3A3;
}

#stcm-wrapper #stcm-modal legend {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  color: #2A332B;
  margin-bottom: 6px;
}

#stcm-wrapper #stcm-modal .stcm-consent-description p {
  font-size: 13.5px;
  line-height: 1.55;
  color: #516252;
  margin: 0;
}

/* 5. Toggle Switches */
#stcm-wrapper #stcm-modal .stcm-toggle-track {
  background: #D4C3A3;
  border-radius: 25px;
  transition: background 0.2s ease;
}

#stcm-wrapper #stcm-modal .stcm-toggle-thumb {
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(42, 51, 43, 0.25);
}

#stcm-wrapper #stcm-modal .stcm-toggle input:checked + .stcm-toggle-track {
  background: #3E4B3F;
}

#stcm-wrapper #stcm-modal .stcm-toggle-off,
#stcm-wrapper #stcm-modal .stcm-toggle-on {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
}

/* 6. Modal Footer & Credit Link */
#stcm-wrapper #stcm-modal footer {
  border-top: 1px solid #E2DAC8;
  padding-top: 20px;
  margin-top: 28px;
}

#stcm-wrapper #stcm-modal footer a.stcm-credit-link {
  color: #6A7B6B;
  font-size: 12px;
  transition: color 0.15s ease;
}

#stcm-wrapper #stcm-modal footer a.stcm-credit-link:hover {
  color: #2A332B;
  text-decoration: underline;
}

/* 7. Floating Cookie Badge / Icon */
#stcm-wrapper #stcm-icon {
  background-color: #3E4B3F;
  border: 1px solid #D4C3A3;
  box-shadow: 0 4px 16px rgba(62, 75, 63, 0.18);
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

#stcm-wrapper #stcm-icon:hover {
  background-color: #2A332B;
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(62, 75, 63, 0.24);
}

#stcm-wrapper #stcm-icon svg {
  fill: #F9F7F2;
}

/* Focus Accessibility */
#stcm-wrapper a:focus-visible,
#stcm-wrapper button:focus-visible,
#stcm-wrapper input:focus-visible {
  outline: 2px solid #3E4B3F;
  outline-offset: 2px;
}