/* assets/css/footer.css */

.soc-footer {
  background: var(--c-brand);
  color:      rgba(255,255,255,.75);
  margin-top: auto;
  position:   relative;
  overflow:   hidden;
}

/* ── Anéis decorativos (capa do manual) ── */
.soc-footer__rings {
  position:       absolute;
  inset:          0;
  pointer-events: none;
  z-index:        0;
}
.soc-footer__rings i {
  position:      absolute;
  border-radius: 50%;
  display:       block;
}
.soc-footer__rings i:nth-child(1) {
  right: -190px; top: -190px; width: 560px; height: 560px;
  border: 2px solid rgba(236,106,78,.28);
}
.soc-footer__rings i:nth-child(2) {
  right: 80px; top: 110px; width: 270px; height: 270px;
  border: 2px solid rgba(127,166,172,.35);
}
.soc-footer__rings i:nth-child(3) {
  left: -150px; bottom: -200px; width: 380px; height: 380px;
  border: 2px solid rgba(231,211,179,.18);
}

/* ── WRAPPER ── */
.soc-footer__inner {
  position:       relative;
  z-index:        1;
  padding-top:    var(--sp-10);
  padding-bottom: 0;
}

@media (min-width: 768px) {
  .soc-footer__inner { padding-top: var(--sp-12); }
}

/* ── DIVIDERS ── */
.soc-footer__hr {
  border:     none;
  border-top: 0.5px solid rgba(255,255,255,.12);
  margin:     0;
}

/* ══════════════════════════════════════
   TOP GRID — newsletter + 4 cols
══════════════════════════════════════ */
.soc-footer__top {
  display:        grid;
  grid-template-columns: 1fr;
  padding-bottom: var(--sp-6);
}

@media (min-width: 768px) {
  .soc-footer__top {
    grid-template-columns: 1fr 1fr;
    gap:                   var(--sp-8);
    padding-bottom:        var(--sp-8);
  }
}

@media (min-width: 1024px) {
  .soc-footer__top {
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
    gap:                   var(--sp-8);
    padding-bottom:        var(--sp-10);
  }
}

/* ── NEWSLETTER ── */
.soc-footer__newsletter {
  padding-bottom: var(--sp-6);
}

@media (min-width: 768px) {
  .soc-footer__newsletter { padding-bottom: 0; }
}

@media (min-width: 1024px) {
  .soc-footer__newsletter { padding-right: var(--sp-8); }
}

.soc-footer__nl-title {
  font-family:    var(--font-display);
  font-size:      27px;
  font-weight:    var(--fw-bold);
  letter-spacing: var(--tracking-display);
  text-transform: none;
  line-height:    1.12;
  color:          var(--c-white);
  margin:         0 0 10px;
}

.soc-footer__nl-sub {
  font-size:   12px;
  color:       rgba(255,255,255,.6);
  line-height: 1.6;
  margin:      0 0 18px;
  max-width:   340px;
}
.soc-footer__nl-offer { color: var(--c-accent); font-weight: var(--fw-bold); }

/* Filled pill button — cream on the dark footer, teal text (opens the modal) */
.soc-footer__nl-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             9px;
  background:      var(--c-surface);
  border:          none;
  border-radius:   var(--r-pill);
  font-family:     var(--font-main);
  font-size:       12px;
  font-weight:     var(--fw-semibold);
  letter-spacing:  .04em;
  color:           var(--c-brand-dark);
  padding:         12px 22px;
  cursor:          pointer;
  white-space:     nowrap;
  transition:      background var(--t-fast), transform var(--t-fast);
}
.soc-footer__nl-btn svg { width: 15px; height: 15px; }
.soc-footer__nl-btn:hover {
  background: var(--c-white);
}
.soc-footer__nl-btn:hover svg { transform: translateX(2px); }
.soc-footer__nl-btn svg { transition: transform var(--t-fast); }

/* ── COLUMNS ── */
.soc-footer__col-title {
  font-size:      var(--text-xs);
  font-weight:    var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color:          var(--c-sage);
  margin-bottom:  var(--sp-4);
}

/* Mobile accordion */
@media (max-width: 767px) {
  .soc-footer__top { padding-bottom: 0; }

  .soc-footer__col {
    border-top: 0.5px solid rgba(255,255,255,.12);
  }

  .soc-footer__col-title {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    cursor:          pointer;
    padding:         14px 0;
    margin:          0;
    user-select:     none;
  }
  .soc-footer__col-title::after {
    content:     '+';
    font-size:   18px;
    font-weight: 300;
    color:       rgba(255,255,255,.45);
    line-height: 1;
    flex-shrink: 0;
  }
  .soc-footer__col-title.is-open::after { content: '−'; }

  .soc-footer__links {
    display:        none !important;
    padding-top:    12px !important;
    padding-bottom: 28px !important;
  }
  .soc-footer__links.is-open { display: flex !important; }
}

.soc-footer__links {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-3);
}

.soc-footer__links a {
  font-size:       var(--text-sm);
  color:           rgba(255,255,255,.6);
  text-decoration: none;
  transition:      color var(--t-fast);
  line-height:     1.4;
}
.soc-footer__links a:hover { color: var(--c-white); }

/* ══════════════════════════════════════
   MIDDLE BAR — geo + social
══════════════════════════════════════ */
.soc-footer__mid {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         14px 0;
  flex-wrap:       wrap;
  gap:             var(--sp-4);
}

@media (max-width: 767px) {
  .soc-footer__mid {
    flex-direction: column;
    align-items:    flex-start;
    padding:        0;
    gap:            0;
  }
  /* Sem border-top aqui: o .soc-footer__hr já faz a divisória (senão fica dupla) */
  .soc-footer__mid-lang {
    width:       100%;
    padding:     14px 0;
  }
  .soc-footer__social-wrap {
    width:       100%;
    border-top:  0.5px solid rgba(255,255,255,.12);
    padding:     14px 0;
  }
}

.soc-footer__mid-lang {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-wrap:   wrap;
}

.soc-footer__mid-label {
  font-size:      11px;
  font-weight:    var(--fw-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--c-white);
  white-space:    nowrap;
}

/* ── Geo selects ── */
.soc-footer__geo-selects {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  flex-wrap:   wrap;
}

.soc-footer__geo-select {
  font-family:         var(--font-main);
  font-size:           11px;
  color:               rgba(255,255,255,.8);
  background-color:    transparent;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,.5)' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 8px center;
  border:              0.5px solid rgba(255,255,255,.25);
  padding:             5px 28px 5px 10px;
  cursor:              pointer;
  appearance:          none;
  -webkit-appearance:  none;
  border-radius:       var(--r-pill);
  transition:          border-color var(--t-fast);
}
.soc-footer__geo-select:focus {
  border-color: rgba(255,255,255,.6);
  outline:      none;
}
.soc-footer__geo-select option {
  background: var(--c-brand-dark);
  color:      var(--c-white);
}

.soc-footer__geo-apply {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  height:          32px;
  font-family:     var(--font-main);
  font-size:       11px;
  font-weight:     var(--fw-bold);
  letter-spacing:  var(--tracking-label);
  text-indent:     var(--tracking-label); /* compensa o espaço final do tracking */
  text-transform:  uppercase;
  color:           var(--c-brand-dark);
  background:      var(--c-accent);
  border:          none;
  border-radius:   var(--r-pill);
  padding:         0 20px;
  cursor:          pointer;
  transition:      background var(--t-fast);
}
.soc-footer__geo-apply:hover { background: var(--c-white); }

/* ── Social ── */
.soc-footer__social-wrap {
  display:     flex;
  align-items: center;
  gap:         14px;
}

.soc-footer__social-title {
  font-size:      11px;
  font-weight:    var(--fw-medium);
  letter-spacing: .09em;
  text-transform: uppercase;
  color:          var(--c-white);
  margin:         0;
  flex-shrink:    0;
}

.soc-footer__social {
  display:     flex;
  gap:         14px;
  align-items: center;
}

.soc-footer__social-link {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           34px;
  height:          34px;
  border:          1px solid rgba(245,240,230,.28);
  border-radius:   var(--r-round);
  color:           var(--c-bg-warm);
  transition:      color var(--t-fast), border-color var(--t-fast);
}
.soc-footer__social-link:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* ══════════════════════════════════════
   BOTTOM BAR
══════════════════════════════════════ */
.soc-footer__bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--sp-4);
  padding:         var(--sp-5) 0 var(--sp-6);
}

@media (max-width: 767px) {
  .soc-footer__bottom {
    flex-direction: column;
    align-items:    flex-start;
    padding-top:    var(--sp-5);
  }
}

.soc-footer__copy {
  font-size: var(--text-xs);
  color:     rgba(245,240,230,.5);
  flex:      1;
}

.soc-footer__slogan {
  font-family:    var(--font-display);
  font-style:     italic;
  font-weight:    var(--fw-bold);
  font-size:      19px;
  letter-spacing: var(--tracking-display);
  color:          var(--c-accent);
  text-align:     center;
  flex-shrink:    0;
}
@media (max-width: 767px) { .soc-footer__slogan { text-align: left; margin: 8px 0; } }
.soc-footer__payments { flex: 1; justify-content: flex-end; }

/* ── Payment pills ── */
.soc-footer__payments {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  flex-shrink: 0;
}

.soc-footer__payment-pill {
  height:         24px;
  padding:        0 13px;
  border:         0.5px solid rgba(245,240,230,.28);
  border-radius:  var(--r-pill);
  font-size:      9px;
  color:          rgba(245,240,230,.7);
  display:        flex;
  align-items:    center;
  white-space:    nowrap;
  letter-spacing: .03em;
}

/* ── Logótipos dos métodos de pagamento ──
   Substituem as pastilhas de texto (o markup está em footer.php). Os ficheiros
   são 78×24 e servem-se a 18px de altura — 59×18 — que é o único tamanho que
   deixa a linha inteira caber num portátil de 1024px.

   A altura é a mesma em todos os ecrãs: num telemóvel de 375px cabem cinco por
   linha, e os nove ficam em 5+4. */
/* O tamanho vive em .soc-pay-logo, no components.css — é partilhado com o
   carrinho e o checkout. Aqui fica só o que for específico do rodapé. */

/* Dobrar quando não couber — em QUALQUER largura, não só no telemóvel.
   Nove logótipos mais o copyright e o slogan pedem cerca de 900px; há larguras
   intermédias onde não cabem os três, e sem isto a última ficava cortada.

   ⚠️ Esta regra tem de vir DEPOIS das duas declarações de .soc-footer__payments
   acima: não acrescenta especificidade, portanto quem ganha é a última do
   ficheiro. */
.soc-footer__payments {
  flex-wrap: wrap;
  row-gap:   var(--sp-2);
}

@media (max-width: 767px) {
  .soc-footer__payments {
    width:           100%;
    justify-content: flex-start;
  }
}

/* ═══════════════════════════════════════════════════════════
   NEWSLETTER MODAL (site-wide — opened from the footer button)
   Uses the shared #soc-overlay + soc.openPanel()/soc.closeAll().
   ═══════════════════════════════════════════════════════════ */
.soc-newsletter-modal {
  position:       fixed;
  inset:          0;
  z-index:        1200;
  display:        flex;
  align-items:    center;
  justify-content:center;
  padding:        20px;
  opacity:        0;
  visibility:     hidden;
  pointer-events: none;
  transition:     opacity var(--t-fast), visibility var(--t-fast);
}
.soc-newsletter-modal.is-open {
  opacity:        1;
  visibility:     visible;
  pointer-events: auto;
}

.soc-modal__dialog {
  position:      relative;
  display:       flex;
  flex-direction:column;
  width:         100%;
  max-width:     460px;
  max-height:    calc(100vh - 40px);
  overflow:      hidden; /* clip the inner scrollbar to the rounded corners */
  background:    var(--c-bg);
  border-radius: var(--r-lg);
  box-shadow:    0 24px 60px rgba(7,43,51,.28);
  transform:     translateY(14px) scale(.985);
  transition:    transform var(--t-med, 240ms ease);
}
.soc-newsletter-modal.is-open .soc-modal__dialog { transform: none; }

/* Inner scroll — keeps the dialog corners round even when content overflows */
.soc-modal__scroll {
  overflow-y:    auto;
  padding:       36px 34px 30px;
  -webkit-overflow-scrolling: touch;
}

.soc-modal__close {
  position:    absolute;
  /* Above the scroll area: iOS Safari gives taps to a scrollable overflow
     box over an earlier positioned sibling with z-index auto. */
  z-index:     2;
  top:         14px;
  right:       14px;
  width:       34px;
  height:      34px;
  display:     flex;
  align-items: center;
  justify-content: center;
  border:      none;
  background:  transparent;
  color:       var(--c-text-light);
  font-size:   26px;
  line-height: 1;
  cursor:      pointer;
  border-radius: var(--r-round);
  transition:  background var(--t-fast), color var(--t-fast);
}
.soc-modal__close:hover { background: var(--c-surface); color: var(--c-text); }

.soc-nl__eyebrow {
  font-size:      11px;
  font-weight:    var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color:          var(--c-accent);
  margin:         0 0 8px;
}
.soc-nl__title {
  font-family:    var(--font-display);
  font-size:      26px;
  font-weight:    var(--fw-bold);
  letter-spacing: var(--tracking-display);
  line-height:    1.14;
  color:          var(--c-text);
  margin:         0 0 10px;
}
.soc-nl__body {
  font-size:   13px;
  line-height: 1.6;
  color:       var(--c-text-muted);
  margin:      0 0 22px;
}
.soc-nl__offer { color: var(--c-accent); font-weight: var(--fw-bold); }

.soc-nl__form { display: flex; flex-direction: column; gap: 14px; }

.soc-nl__field  { display: flex; flex-direction: column; gap: 6px; }
.soc-nl__grid2  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.soc-nl__label {
  font-size:      11px;
  font-weight:    var(--fw-semibold);
  letter-spacing: .04em;
  color:          var(--c-text-muted);
}
.soc-nl__opt { color: var(--c-text-light); font-weight: var(--fw-regular); text-transform: none; letter-spacing: 0; }

.soc-nl__ctl {
  width:         100%;
  font-family:   var(--font-main);
  font-size:     14px;
  color:         var(--c-text);
  background:    var(--c-white);
  border:        1px solid var(--c-border-mid);
  border-radius: var(--r-pill);
  padding:       11px 16px;
  transition:    border-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none;
  appearance:    none;
}
.soc-nl__ctl:focus {
  outline:      none;
  border-color: var(--c-brand);
  box-shadow:   0 0 0 3px rgba(14,67,78,.12);
}
.soc-nl__ctl::placeholder { color: var(--c-text-ghost); }

/* Custom caret for selects */
select.soc-nl__ctl {
  padding-right:       40px;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233A565B' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 15px center;
  background-size:     12px 8px;
  cursor:              pointer;
}

/* Phone row: dial code + number */
.soc-nl__phone { display: flex; gap: 8px; }
/* .soc-nl__dial is the flagsel WRAPPER (a div), not the field itself — sizing
   goes here, chrome comes from .soc-nl__ctl on the button inside it. */
.soc-nl__dial  { flex: 0 0 116px; }
@media (max-width: 420px) { .soc-nl__dial { flex-basis: 104px; } }
/* The field class alone can't show the open state — the class lands on the wrapper. */
.soc-nl__phone .flagsel.is-open .flagsel__btn { border-color: var(--c-brand); }
/* Flag + code + chevron don't fit in 116px with the 16px side padding the other
   fields use. Trim it here rather than narrowing the number field. */
.soc-nl__phone .flagsel__btn { padding-left: 13px; padding-right: 11px; }
/* min-width:0 - an input's automatic minimum is ~20 characters, which pushed
   the number past the other fields on 360px phones. */
.soc-nl__num   { flex: 1 1 auto; min-width: 0; }

.soc-nl__hint  { font-size: 11px; line-height: 1.5; color: var(--c-text-light); margin-top: 2px; }

/* Honeypot — visually gone, still in the DOM */
.soc-nl__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

/* Consent — checkbox absolute, text flows so the link stays inline */
.soc-nl__consent {
  position:     relative;
  display:      block;
  padding-left: 28px;
  font-size:    12px;
  line-height:  1.55;
  color:        var(--c-text-muted);
  cursor:       pointer;
}
.soc-nl__consent + .soc-nl__consent { margin-top: -2px; }
.soc-nl__consent input[type="checkbox"] {
  position:    absolute;
  left:        0;
  top:         1px;
  width:       17px;
  height:      17px;
  margin:      0;
  border:      1.5px solid var(--c-border-mid);
  border-radius: 5px;
  background:  var(--c-white);
  cursor:      pointer;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance:  none;
  transition:  background var(--t-fast), border-color var(--t-fast);
}
.soc-nl__consent input[type="checkbox"]:checked {
  background:          var(--c-brand);
  border-color:        var(--c-brand);
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%23fff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     10px 8px;
}
.soc-nl__consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}
.soc-nl__consent-text a { color: var(--c-brand); text-decoration: underline; white-space: nowrap; }
.soc-nl__consent-text a:hover { color: var(--c-brand-dark); }

.soc-nl__submit {
  margin-top:    4px;
  width:         100%;
  font-family:   var(--font-main);
  font-size:     14px;
  font-weight:   var(--fw-semibold);
  letter-spacing:.03em;
  color:         var(--c-white);
  background:    var(--c-brand);
  border:        none;
  border-radius: var(--r-pill);
  padding:       14px 24px;
  cursor:        pointer;
  transition:    background var(--t-fast), opacity var(--t-fast);
}
.soc-nl__submit:hover { background: var(--c-brand-dark); }
.soc-nl__submit.is-loading, .soc-nl__submit:disabled { opacity: .6; cursor: default; }

.soc-nl__fine {
  font-size:      7.5px;
  letter-spacing: -0.01em;
  line-height:    1.4;
  color:          var(--c-text-light);
  text-align:     center;
  white-space:    nowrap;
  margin:         -4px 0 0;
}
@media (max-width: 420px) { .soc-nl__fine { white-space: normal; } }

@media (max-width: 420px) {
  .soc-modal__scroll { padding: 30px 22px 24px; }
  .soc-nl__grid2     { grid-template-columns: 1fr; }
}

/* ── Beat WooCommerce's global form styling inside the modal ──────────────
   On WC pages body.woocommerce makes ".woocommerce select/input" rules leak
   in with !important (square corners, white bg killing the caret, width:100%
   breaking the phone row). ID-scoped overrides win the cascade. */
#soc-newsletter-modal .soc-nl__ctl {
  width:            100% !important;
  background-color: var(--c-white) !important;
  color:            var(--c-text) !important;
  border:           1px solid var(--c-border-mid) !important;
  border-radius:    var(--r-pill) !important;
  box-shadow:       none !important;
  padding:          11px 16px !important;
  font-family:      var(--font-main) !important;
  font-size:        14px !important;
  -webkit-appearance: none !important;
  appearance:       none !important;
}
#soc-newsletter-modal .soc-nl__ctl:focus {
  border-color: var(--c-brand) !important;
  box-shadow:   0 0 0 3px rgba(14,67,78,.12) !important;
}
#soc-newsletter-modal select.soc-nl__ctl {
  padding-right:       40px !important;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233A565B' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat !important;
  background-position: right 15px center !important;
  background-size:     12px 8px !important;
}
#soc-newsletter-modal .soc-nl__dial { width: auto !important; flex: 0 0 116px; }
#soc-newsletter-modal .flagsel.is-open .flagsel__btn { border-color: var(--c-brand) !important; }
#soc-newsletter-modal .flagsel__btn { padding-left: 13px !important; padding-right: 11px !important; }
@media (max-width: 420px) { #soc-newsletter-modal .soc-nl__dial { flex-basis: 104px; } }
#soc-newsletter-modal .soc-nl__num  { width: auto !important; flex: 1 1 auto; min-width: 0 !important; }
/* iOS Safari: an empty date input has no text line inside, so with appearance:none
   it collapses to its padding - and it centres the value. Reserve the line and
   align left like the other fields. */
#soc-newsletter-modal input[type="date"].soc-nl__ctl { min-height: 43px !important; text-align: left !important; }
#soc-newsletter-modal input[type="date"].soc-nl__ctl::-webkit-date-and-time-value { min-height: 1.2em; text-align: left; }