/* ============================================
   THEME: CONVENIÊNCIA
   Palette: Azul escuro (dominante), Azul claro, Amarelo
   ============================================ */

:root {
  --c-deep:       #051736;
  --c-deep-2:     #0A2A5C;
  --c-deep-3:     #103973;
  --c-sky:        #4FB6E8;
  --c-sky-soft:   #79CCEF;
  --c-yellow:     #FFC93C;
  --c-yellow-dim: #E6B433;
  --c-cream:      #EAF2F9;

  --bg: #030C1F;
  --bg-gradient:
    radial-gradient(1100px 700px at 20% -10%, rgba(16,57,115,0.7), transparent 60%),
    radial-gradient(900px 700px at 100% 40%, rgba(79,182,232,0.18), transparent 60%),
    radial-gradient(700px 600px at 50% 120%, rgba(255,201,60,0.10), transparent 60%),
    linear-gradient(180deg, #051736 0%, #030C1F 50%, #01060f 100%);
  --text: var(--c-cream);

  --bubble:        rgba(79, 182, 232, 0.35);
  --bubble-hl:     rgba(255, 255, 255, 0.7);
  --bubble-border: rgba(255, 255, 255, 0.25);

  --mark-bg: linear-gradient(160deg, var(--c-deep-3) 0%, var(--c-deep-2) 100%);
  --mark-border: rgba(79,182,232,0.6);
  --mark-shadow: rgba(79,182,232,0.4);
  --mark-inset: rgba(255,255,255,0.25);
  --mark-ring: rgba(255,201,60,0.6);

  --brand-color: #FFFFFF;
  --brand-accent: var(--c-sky);

  --tag-bg: rgba(79,182,232,0.10);
  --tag-border: rgba(79,182,232,0.25);
  --tag-text: var(--c-yellow);
  --tag-dot: var(--c-sky);

  --section-title: rgba(255,255,255,0.5);

  --card-bg: rgba(10,42,92,0.55);
  --card-bg-hover: rgba(16,57,115,0.85);
  --card-border: rgba(79,182,232,0.18);
  --card-border-hover: rgba(79,182,232,0.7);
  --card-shadow: rgba(0,0,0,0.45);
  --card-shadow-hover: rgba(79,182,232,0.4);
  --card-shine: linear-gradient(135deg, transparent 0%, rgba(79,182,232,0.12) 50%, transparent 100%);
  --card-sweep: rgba(255,201,60,0.25);
  --card-text: var(--c-cream);
  --card-title: #FFFFFF;
  --card-sub: rgba(234,242,249,0.6);

  --icon-bg: linear-gradient(160deg, var(--c-sky) 0%, #2890C6 100%);
  --icon-border: rgba(255,255,255,0.4);
  --icon-color: #03142E;

  --arrow-bg: rgba(255,201,60,0.12);
  --arrow-bg-hover: var(--c-yellow);
  --arrow-color: var(--c-yellow);

  --foot-color: rgba(255,255,255,0.4);
  --foot-pill-bg: rgba(79,182,232,0.06);
  --foot-pill-border: rgba(79,182,232,0.18);
  --foot-pill-text: rgba(255,255,255,0.7);
  --foot-pill-bg-hover: rgba(79,182,232,0.25);
  --foot-pill-text-hover: #FFFFFF;
  --foot-pill-bg-current: var(--c-sky);
  --foot-pill-text-current: var(--c-deep);
}

.conveniencia .card-icon.icon-wa {
  background: linear-gradient(160deg, #25D366 0%, #128C7E 100%);
  color: #fff;
}

/* "Loja N" little badge on conveniencia cards */
.conveniencia .store-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,201,60,0.18);
  border: 1px solid rgba(255,201,60,0.4);
  color: var(--c-yellow);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
  align-self: flex-start;
}

.conveniencia .bubble:nth-child(4n) {
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(255,201,60,0.35) 60%, transparent 70%);
}