@charset "UTF-8";
/* ==========================================================================
   COSPTY Mobile App shell — EU cookie consent (v1.7.0)

   Why this file exists at all
     The app shell is a document of its own: app page controllers print their
     HTML and stop, so PrestaShop's theme hooks never fire on them. Every
     cookie-consent module on the market — including the UE Cookie Law Pro the
     shop is setting up — renders its banner through one of those theme hooks.
     On a phone, that banner therefore never appeared. Rather than leave the
     phone experience outside the law, the shell prints a compliant banner
     itself; when a consent module IS installed its hooks are executed and
     bridged in instead (see cosptyapp::consentBridge()), so the module the
     merchant configures stays the single source of truth for the whole shop.

   Compliance notes — the three things the shop asked for, literally
     1. Nothing is pre-ticked. Necessary cookies are described but not
        offered as a choice (they cannot be switched off), and the analytics /
        marketing switches ship `unchecked` in the markup, not unchecked by
        script. With JavaScript disabled the visitor still sees an honest,
        un-ticked banner.
     2. "Reject all" and "Accept all" are the same size, the same weight and
        sit side by side in the same row — the AEPD's guidance, and the thing
        most banner libraries get wrong by making refusal a small grey link.
     3. The choice is revisitable. Once answered, the banner never returns on
        its own, but Settings carries a "Preferencias de cookies" entry and
        window.cosptyConsent.open() re-opens it with the current state ticked.

   Everything else (gates, events, the cookie itself) lives in consent.js.
   ========================================================================== */

.cpa-consent {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* the markup is printed VISIBLE so a no-JS visitor is asked too; the shell
   hides it again in an inline script the moment a stored choice is found */
.cpa-consent[hidden] { display: none !important; }

.cpa-consent-veil {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, .44);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  animation: cpaConsentFade .22s ease-out;
}
@keyframes cpaConsentFade { from { opacity: 0 } to { opacity: 1 } }

.cpa-consent-sheet {
  position: relative;
  width: 100%;
  white-space: normal;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 16px calc(14px + var(--cpa-safe-b, 0px));
  background: var(--cpa-card, #fff);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(17, 24, 39, .24);
  animation: cpaConsentUp .3s cubic-bezier(.22, .8, .3, 1);
}
@keyframes cpaConsentUp {
  from { transform: translateY(18px); opacity: .65 }
  to   { transform: none; opacity: 1 }
}
@media (min-width: 620px) {
  .cpa-consent { align-items: center; padding: 20px; }
  .cpa-consent-sheet { border-radius: 20px; }
}

/* ------------------------------------------------------------------ head */
.cpa-consent-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}
.cpa-consent-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 10px;
  background: #fff4ec;
  font-size: 17px;
  line-height: 1;
}
.cpa-consent-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--cpa-ink, #111827);
}
.cpa-consent-x {
  margin-left: auto;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 0;
  border-radius: 50%;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.cpa-consent-x:active { background: #e5e7eb; }

/* ------------------------------------------------------------------ lead */
.cpa-consent-lead {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--cpa-ink-2, #374151);
}
.cpa-consent-link {
  display: inline-block;
  margin-left: 3px;
  font-weight: 700;
  color: var(--cpa-primary, #FF8D4F);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------- expander */
.cpa-consent-more {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--cpa-line-2, #e5e9f0);
  border-radius: 12px;
  background: #fbfcfd;
  color: var(--cpa-ink, #111827);
  font-size: 12.5px;
  font-weight: 700;
}
.cpa-consent-more svg {
  width: 15px;
  height: 15px;
  margin-left: auto;
  flex: 0 0 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}
.cpa-consent-more[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ------------------------------------------------------------- categories */
.cpa-consent-prefs {
  margin: 0 0 12px;
  border: 1px solid var(--cpa-line, #eef1f6);
  border-radius: 14px;
  overflow: hidden;
}
.cpa-consent-prefs[hidden] { display: none !important; }
.cpa-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 12px;
  background: #fff;
  border-bottom: 1px solid var(--cpa-line, #eef1f6);
}
.cpa-consent-row:last-child { border-bottom: 0; }
.cpa-consent-row-t { flex: 1 1 auto; min-width: 0; }
.cpa-consent-row-t b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--cpa-ink, #111827);
}
.cpa-consent-row-t i {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-style: normal;
  line-height: 1.5;
  color: var(--cpa-mute, #9aa1b1);
}
.cpa-consent-lock {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* the switch is a real checkbox underneath: keyboard and screen readers get
   the platform control, the shopper gets an iOS-style toggle */
.cpa-consent-sw {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  height: 27px;
  margin-top: 1px;
}
.cpa-consent-sw input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cpa-consent-sw span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #d5dae4;
  transition: background .18s ease;
}
.cpa-consent-sw span::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(17, 24, 39, .28);
  transition: transform .18s ease;
}
.cpa-consent-sw input:checked + span { background: var(--cpa-ok, #047857); }
.cpa-consent-sw input:checked + span::after { transform: translateX(19px); }
.cpa-consent-sw input:focus-visible + span {
  outline: 2px solid var(--cpa-primary, #FF8D4F);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- actions
   Equal prominence is a requirement, not a style choice: the two buttons
   share one row, one height and one type scale. */
.cpa-consent-actions {
  display: flex;
  align-items: stretch;
  gap: 9px;
}
.cpa-consent-btn {
  flex: 1 1 0;
  min-height: 46px;
  padding: 0 12px;
  border: 1.5px solid transparent;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cpa-consent-btn.is-reject {
  background: #eef1f6;
  border-color: #dde2ea;
  color: var(--cpa-ink, #111827);
}
.cpa-consent-btn.is-reject:active { background: #e2e7ef; }
.cpa-consent-btn.is-accept {
  background: var(--cpa-primary, #FF8D4F);
  border-color: var(--cpa-primary, #FF8D4F);
  color: #fff;
}
.cpa-consent-btn.is-accept:active { filter: brightness(.94); }

.cpa-consent-save {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 10px;
  border: 1.5px solid var(--cpa-line-2, #e5e9f0);
  border-radius: 13px;
  background: #fff;
  color: var(--cpa-ink, #111827);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.cpa-consent-save[hidden] { display: none !important; }

.cpa-consent-note {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  color: var(--cpa-mute, #9aa1b1);
}

/* while the dialog is up the page behind it must not scroll */
body.cpa-consent-noscroll { overflow: hidden; }

/* ------------------------------------------------------------- re-entry
   The Settings entry is a <button>; .cpa-menu-item was written for <a> tags,
   so it needs the neutralisation a button requires. */
.cpa-menu-btn {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #f4f6f9;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--cpa-ink, #111827);
  text-align: left;
  cursor: pointer;
}
.cpa-menu-btn:last-child { border-bottom: 0; }

/* ...and the app footer carries a second, always-visible way back to the
   choice, so a visitor who answered by mistake does not have to remember
   that it lived under My account > Settings. */
.cpa-consent-foot-link {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 10.5px;
  line-height: 1.55;
  color: #b6bdcb;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cpa-consent-foot-link:active { color: var(--cpa-mute, #9aa1b1); }