/* =========================================================
   MeConsulta Cookie Consent — aligned with main.css
   - reuses: --border, --shadow, --shadow-soft, --radius, --font-sans
   - reuses button styles from .btn / .btn-primary / .btn-secondary
   ========================================================= */

/* Keep component variables minimal; prefer main.css tokens */
:root{
  --mc-consent-z: 9999;
  --mc-consent-backdrop: rgba(2,6,23,.55); /* closer to your premium overlays */
  --mc-consent-card-bg: rgba(255,255,255,.96);
  --mc-consent-glass: rgba(255,255,255,.08);
  --mc-consent-ring: rgba(23,64,123,.18);
}

/* Backdrops */
.mc-consent-backdrop,
.mc-dialog-backdrop{
  position: fixed;
  inset: 0;
  display: none;
  padding: 18px;
  background: var(--mc-consent-backdrop);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mc-consent-backdrop{
  z-index: var(--mc-consent-z);
  align-items: flex-end;
  justify-content: center;
}

.mc-consent-backdrop[hidden],
.mc-dialog-backdrop[hidden] { display:none !important; }

.mc-consent-backdrop,
.mc-dialog-backdrop { display:flex; }

.mc-dialog-backdrop{
  z-index: calc(var(--mc-consent-z) + 1);
  align-items: center;
  justify-content: center;
}

/* Card surfaces (match .card vibe) */
.mc-consent,
.mc-dialog{
  width: min(980px, 100%);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--mc-consent-card-bg);
  overflow: hidden;

  /* motion aligned */
  transition:
    transform var(--motion-normal) var(--ease-safe),
    box-shadow var(--motion-normal) var(--ease-safe),
    opacity var(--motion-normal) var(--ease-safe);
}

/* Bottom consent: slightly more “banner” */
.mc-consent{
  max-width: min(1040px, 100%);
}

/* Header: same “hero-ish” gradients you already use across sections */
.mc-consent-header,
.mc-dialog-top{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px;

  background:
    radial-gradient(900px 320px at 15% 0%, rgba(254,115,1,.10), transparent 55%),
    radial-gradient(900px 320px at 85% 0%, rgba(42,117,225,.14), transparent 60%),
    linear-gradient(180deg, rgba(8,23,43,.03) 0%, rgba(255,255,255,0) 100%);
  border-bottom: 1px solid rgba(15,23,42,.06);
}

/* Typography aligned with main.css */
.mc-consent-title,
.mc-dialog-top h3{
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,.92);
  line-height: 1.15;
  font-size: 18px;
}

.mc-consent-text,
.mc-dialog-top p{
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-weight: 600;
  color: rgba(15,23,42,.70);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Icon badge: less “toy”, more “brand glass” */
.mc-badge{
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 14px;

  background:
    radial-gradient(circle at 30% 30%, rgba(254,115,1,.18), transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(42,117,225,.18), transparent 60%),
    rgba(255,255,255,.55);

  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow-soft);

  display: flex;
  align-items: center;
  justify-content: center;
}

.mc-badge svg{
  width: 22px;
  height: 22px;
  fill: var(--mc-blue);
}

/* Bodies */
.mc-consent-body{ padding: 0 18px 16px; }
.mc-dialog-body{ padding: 0 18px 18px; }

/* Links: similar to footer style but on light bg */
.mc-consent-links{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 18px 18px;
  color: rgba(15,23,42,.62);
  font: 650 13px/1.4 var(--font-sans);
}

.mc-consent-links a{
  color: rgba(23,64,123,.92);
  text-decoration: none;
  border-bottom: 1px dashed rgba(23,64,123,.35);
}
.mc-consent-links a:hover{
  border-bottom-style: solid;
}

/* Actions: use your site buttons */
.mc-consent-actions{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 0 18px 18px;
}

/* ✅ Alias old component buttons to main.css button system */
.mc-btn{ /* keep compatibility */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 900;
  font-family: var(--font-sans);
  padding: 12px 16px;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform .08s ease,
    box-shadow var(--motion-normal) var(--ease-safe),
    opacity var(--motion-normal) var(--ease-safe),
    background var(--motion-normal) var(--ease-safe),
    border-color var(--motion-normal) var(--ease-safe);
  white-space: nowrap;
}
.mc-btn:active{ transform: translateY(1px); }

/* Match .btn-primary gradient from main.css */
.mc-btn-primary{
  background: linear-gradient(135deg, var(--mc-blue), #2A75E1);
  color: #fff;
  border: 0;
  box-shadow: 0 16px 36px rgba(23,64,123,.25);
}
.mc-btn-primary:hover{ opacity: .96; }

/* Match .btn-secondary */
.mc-btn-secondary{
  background: rgba(15,23,42,.06);
  color: rgba(15,23,42,.88);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: none;
}
.mc-btn-secondary:hover{ background: rgba(15,23,42,.08); }

/* Tertiary stays subtle */
.mc-btn-tertiary{
  background: rgba(255,255,255,.70);
  color: rgba(15,23,42,.86);
  border: 1px solid rgba(15,23,42,.10);
}
.mc-btn-tertiary:hover{
  border-color: rgba(23,64,123,.22);
  box-shadow: 0 12px 30px rgba(2,6,23,.08);
}

/* Dialog rows — closer to your FAQ/details borders */
.mc-row{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(15,23,42,.10);
}
.mc-row:first-child{ border-top: 0; }

.mc-row h4{
  margin: 0;
  font: 900 15px/1.2 var(--font-sans);
  letter-spacing: -0.01em;
  color: rgba(15,23,42,.92);
}
.mc-row p{
  margin: 6px 0 0;
  font: 600 14px/1.55 var(--font-sans);
  color: rgba(15,23,42,.70);
}

/* Pill */
.mc-pill{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  font: 900 12px/1 var(--font-sans);
  color: rgba(15,23,42,.86);
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.10);
  white-space: nowrap;
}

/* Close button matches your lightweight UI */
.mc-x{
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 8px;
  border-radius: 12px;
  transition: background var(--motion-fast) var(--ease-soft);
}
.mc-x:hover{ background: rgba(15,23,42,.06); }
.mc-x svg{ width: 20px; height: 20px; stroke: rgba(15,23,42,.55); }

/* Toggle: keep, but align colors */
.mc-toggle{
  flex: 0 0 auto;
  position: relative;
  width: 52px;
  height: 30px;
}
.mc-toggle input{ display:none; }
.mc-toggle span{
  position:absolute;
  inset: 0;
  background: rgba(15,23,42,.18);
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  transition: background var(--motion-normal) var(--ease-safe);
}
.mc-toggle span:after{
  content:"";
  position:absolute;
  width: 24px;
  height: 24px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 26px rgba(2,6,23,.10);
  transition: left var(--motion-normal) var(--ease-safe);
}
.mc-toggle input:checked + span{
  background: linear-gradient(135deg, var(--mc-blue), #2A75E1);
}
.mc-toggle input:checked + span:after{ left: 25px; }

/* Dialog actions */
.mc-dialog-actions{
  padding: 0 18px 18px;
  display:flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Orange confirm (consistent with your orange pills/badges) */
.mc-btn-orange{
  background: linear-gradient(135deg, rgba(254,115,1,1), rgba(254,115,1,.78));
  color: #fff;
  border: 0;
  box-shadow: 0 14px 28px rgba(254,115,1,.20);
}
.mc-btn-orange:hover{ opacity: .96; }

@media (max-width: 680px){
  .mc-consent-actions{ grid-template-columns: 1fr; }
  .mc-dialog-actions{ flex-direction: column; align-items: stretch; }
}

/* =========================
   Mobile performance overrides
   - remove blur / heavy effects
   - use bottom sheets
========================= */
@media (max-width: 680px){
  /* Remove expensive blur on iOS */
  .mc-consent-backdrop,
  .mc-dialog-backdrop{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(2,6,23,.55); /* keep overlay without blur */
    padding: 12px;
  }

  /* Make consent a bottom sheet */
  .mc-consent-backdrop{
    align-items: flex-end;
  }
  .mc-consent{
    border-radius: 18px;
    max-width: 100%;
  }

  /* Settings becomes bottom sheet too */
  .mc-dialog-backdrop{
    align-items: flex-end;
  }
  .mc-dialog{
    width: 100%;
    border-radius: 18px;
    max-height: 86vh;
    overflow: auto;
  }

  /* Buttons stack (already good) */
  .mc-consent-actions{
    grid-template-columns: 1fr;
  }
  .mc-dialog-actions{
    flex-direction: column;
    align-items: stretch;
  }
}

@media (min-width: 681px){
  .mc-consent-backdrop,
  .mc-dialog-backdrop{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}