/* ====== INDEX – layout pe carduri (homepage) ====== */

/* containerul homepage */
.container-index{
  background:#ffffff; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,0.1);
  padding:1rem; max-width:1000px; width:95%; margin:1rem auto; box-sizing:border-box;
}

/* Hero „Explore Our Topup & Gift Card Services” */
.topup-benefits-index{
  background:#dee1fa;
  padding:1.5rem .5rem;
  text-align:center;
  border-radius:12px;
}
.section-title-index{
  font-size:1.5rem; font-weight:600; color:#333; text-align:center; margin-bottom:1rem;
}

/* Grid 2 carduri (Topup / Gift) */
.benefits-grid-index{ display:flex; flex-direction:column; gap:1rem; }
.benefit-item-index{
  background:#fff; border-radius:12px; padding:1.2rem; box-shadow:0 2px 8px rgba(0,0,0,0.05);
  text-align:center; cursor:pointer; transition:transform .2s, box-shadow .2s;
  border:1px solid #e5e7eb;
}
.benefit-item-index:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.benefit-item-index i{ font-size:2rem; color:#4a90e2; margin-bottom:.6rem; }
.benefit-item-index h3{ font-size:1.1rem; margin:.3rem 0; color:#222; }
.benefit-item-index p{ font-size:.9rem; color:#555; }

@media (min-width:600px){
  .benefits-grid-index{ flex-direction:row; justify-content:center; }
  .benefit-item-index{ width:45%; }
}

/* „Popular Gift Card Brands” */
.voucher-logos{
  margin-top:50px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
.section-title{ font-size:1.4rem; color:#1a237e; margin-bottom:1rem; font-weight:700; }
.voucher-logos img{
  border-radius:8px; background:#fff; padding:6px;
  box-shadow:0 1px 4px rgba(0,0,0,0.05);
}

/* ====== DARK POLISH pentru index ====== */
[data-theme="dark"] .container-index{
  background:var(--surface) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
}

[data-theme="dark"] .topup-benefits-index{
  background:#0f172a;
  color:#e5e7eb;
  border:1px solid #1f2937;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}
[data-theme="dark"] .section-title-index,
[data-theme="dark"] .benefit-item-index h3,
[data-theme="dark"] .section-title{ color:#e5e7eb; }

[data-theme="dark"] .benefit-item-index{
  background:#0b1220;
  color:#e5e7eb;
  border:1px solid #243047;
  border-radius:12px;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}
[data-theme="dark"] .benefit-item-index p{ color:#cbd5e1; }
[data-theme="dark"] .benefit-item-index i{ color:#8ab4f8; }

[data-theme="dark"] .voucher-logos{
  background:#0b1220;
  color:#e5e7eb;
  border:1px solid #1f2937;
  border-radius:12px;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}
[data-theme="dark"] .voucher-logos .section-title{ color:#e5e7eb; }

/* logo-urile pe dark par mai „vii” → temperează */
[data-theme="dark"] .voucher-logos img{ filter:brightness(.92) saturate(.95); }
/* ====== DARK: logo-urile în card compact ====== */
[data-theme="dark"] .voucher-logos img{
  height: 44px;                 /* mai mic decât 50px */
  object-fit: contain;

  background: #111827;          /* închis, dar nu exagerat */
  border: 1px solid #243047;    /* contur discret */
  border-radius: 6px;           /* radius mai mic */
  padding: 4px;                 /* padding mai mic */
  box-shadow: 0 1px 3px rgba(0,0,0,.35); /* umbră mai fină */

  display: inline-block;        /* strânge tile-ul pe conținut */
  vertical-align: middle;       /* elimină gap-ul de baseline */

  /* dacă vrei foarte discret, poți comenta linia de mai jos */
  filter: brightness(.98) saturate(.98);
}

/* opțional: micșorează gap-ul dintre logo-uri doar pe dark */
[data-theme="dark"] .voucher-logos > div{
  gap: 16px;
}

/* opțional: și mai compact pe ecrane mici */
@media (max-width: 480px){
  [data-theme="dark"] .voucher-logos img{
    height: 40px;
    padding: 3px;
  }
}
/* asigură centrul pentru titlurile din secțiunea "Popular" */
.text-center { text-align: center; }                 /* dacă nu există deja */

.voucher-logos .section-title{
  display: block;
  width: 100%;
  text-align: center;                                /* centrează textul */
  margin: 0 auto 1rem;                              /* spațiere frumoasă */
}

/* dacă alt CSS îți forțează left, folosește varianta mai specifică: */
.voucher-logos.text-center .section-title{ 
  text-align: center !important;
}
