/* =========================================================
   GIFT — PAGE-SPECIFIC STYLES (clean, theme-aware)
   Mută culorile & aspectele inline în CSS, fără dubluri.
   ========================================================= */

/* ===== Tokens / fallbacks ===== */
:root{
  --bottom-nav-h: 64px;
  --font-size-base: 15px;
  --benefits-bg-dark: #0f172a;     /* bandă dark ca background-ul paginii */
  --login-notice-h: 120px;         /* înălțimea aproximativă a barei de login */
  --select-font-size: 16.5px;      /* mărire select-uri */
  --select-padding-y: 12px;
  --select-padding-x: 14px;
}

/* ===== Utilities mici ===== */
.is-hidden{ display:none !important; }
.u-text-center{ text-align:center !important; }

/* ===== Benefits (același look ca topup) ===== */
.topup-benefits{
  max-width:960px; margin:0 auto; padding:24px 16px;
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
.section-title{ color:var(--primary, #1a237e); text-align:center; margin:0 0 16px; }
.topup-benefits .benefits-grid{
  display:flex; flex-direction:column; gap:16px;   /* vertical și pe desktop */
}
.benefit-item,
.benefit-item.alt{
  display:flex; gap:16px; align-items:center;
  background:var(--card, #fff);
  border:1px solid var(--border, #e5e7eb);
  border-radius:16px; padding:16px; box-shadow:var(--shadow, 0 4px 10px rgba(0,0,0,.04));
  transition:transform .1s ease-in-out;
}
.benefit-item:hover{ transform:scale(1.02); cursor:pointer; }
.benefit-icon{ font-size:22px; color:var(--primary, #1a237e); flex-shrink:0; padding-top:2px; }
.benefit-content h4{ margin:0; font-size:15.5px; font-weight:600; color:var(--primary, #1a237e); }
.benefit-content p{ font-size:14px; color:var(--text, #333); margin:4px 0 0; line-height:1.5; }

/* Bandă: pale blue în light, închisă (ca bg pagină) în dark */
:root:not([data-theme="dark"]) .benefits-wrapper{
  background:var(--benefits-bg-light, #dee1fa) !important;
}
[data-theme="dark"] .benefits-wrapper{
  background:var(--benefits-bg-dark, var(--bg, #0f172a)) !important;
}

/* ===== Header titluri / banner rate ===== */
#usd-to-pi-rate{
  text-align:center; margin:12px 0;
  font-size:.95em; font-weight:700; color:var(--primary, #1a237e);
}
:root:not([data-theme="dark"]) #usd-to-pi-rate{
  text-shadow:.5px .5px #c5cae9;
}
h2.page-title, .container > h2{
  text-align:center; color:var(--primary, #1a237e);
}

/* ===== Country select (Select2) ===== */
#countrySelect{ width:100%; }
.select2-container--default .select2-selection--single{
  background:var(--surface, #fff);
  border:1px solid var(--border, #ccc);
  border-radius:12px; padding:0;
  min-height:44px; display:flex; align-items:center;
  box-shadow:0 2px 4px rgba(0,0,0,.05);
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--text, #333);
  padding:0 var(--select-padding-x);
  line-height:1.35; font-size:var(--select-font-size);
  display:flex; align-items:center; gap:6px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:100%; right:10px; }
.select2-dropdown{
  background:var(--card, #fff);
  border:1px solid var(--border, #e5e7eb);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.select2-results__option{ display:flex; align-items:center; gap:8px; padding:8px; }
.select2-results__option img{ width:20px; height:14px; object-fit:contain; border-radius:3px; }

/* ===== Notiță informativă (giftNotice) ===== */
#giftNotice{
  margin-top:15px; background:var(--surface, #f9fafb);
  border:1px solid var(--border, #e0e0e0);
  border-radius:12px; padding:16px 20px;
  font-size:.92em; color:var(--text, #333);
  box-shadow:0 2px 4px rgba(0,0,0,.05);
  display:flex; gap:12px; align-items:flex-start;
}
#giftNotice .icon{ flex-shrink:0; font-size:1.5em; color:var(--primary, #1a237e); }
#giftNotice strong{ display:block; margin-bottom:6px; font-size:1.05em; color:var(--primary, #1a237e); }
#giftNotice ul{ padding-left:20px; margin:0; }

/* ===== Search + filtre ===== */
#searchInput{
  display:none; /* JS controlează */
  margin-top:20px; padding:8px; width:100%; max-width:400px;
  margin-left:auto; margin-right:auto;
  border:1px solid var(--border, #ccc); border-radius:8px;
  background:var(--surface, #fff); color:var(--text, #333);
}
#amount-filter{
  margin:8px 0; text-align:center; font-size:.95em; color:var(--muted, #555);
}
#amount-filter span{ cursor:pointer; margin:0 8px; }
#amount-filter span.active{ text-decoration:underline; color:var(--text, #000); }

/* ===== Card list ===== */
.card-wrapper{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:20px; margin-top:30px;
}
.card{
  background:var(--card, #fff);
  border:1px solid var(--border, #ccc);
  border-radius:12px; padding:15px; width:240px; text-align:center;
  box-shadow:0 2px 5px rgba(0,0,0,.1);
}
.card img{ max-width:120px; margin-bottom:10px; }
.card h4{ margin:6px 0 10px; font-size:15px; color:var(--text, #1a237e); }
.card select, .card input{
  margin-top:10px; width:100%; padding:10px 12px;
  border:1px solid var(--border, #ccc); border-radius:10px;
  background:var(--surface, #fff); color:var(--text, #333);
  font-size:var(--select-font-size);
}
.card button{
  margin-top:10px; padding:10px 12px; width:100%;
  background:var(--primary, #1a237e); color:#fff; border:0;
  border-radius:8px; font-weight:600; cursor:pointer;
}
.card button[disabled]{ opacity:.6; cursor:not-allowed; }

/* “You pay / Amount received” — override inline pentru dark support */
.real-value > div{
  background:var(--success-bg, #f1f8e9) !important;
  color:var(--success-text, #33691e) !important;
  padding:6px; border-radius:8px;
}
[data-theme="dark"] .real-value > div{
  background:rgba(34,197,94,.18) !important;
  color:#a7f3d0 !important;
}

/* ===== Pagination ===== */
.pagination{
  display:flex; justify-content:center; align-items:center;
  gap:6px; margin-top:25px; font-size:.85em;
}
.pagination button{
  background:var(--primary, #1a237e); color:#fff; border:none;
  border-radius:8px; padding:5px 10px; font-size:.9em; cursor:pointer; min-width:38px;
  box-shadow:0 1px 2px rgba(0,0,0,.1);
}
.pagination button:disabled{ background:#aaa; cursor:not-allowed; }
.pagination span{ font-weight:500; color:var(--text, #333); min-width:60px; text-align:center; }

/* ===== Page container ===== */
.container{ padding:20px 16px; font-size:var(--font-size-base, 15px); }

/* ===== Sticky login notice + page push (ca topup) ===== */
body{
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
}
body:has(#piLoginNotice){
  padding-bottom: calc(var(--bottom-nav-h) + var(--login-notice-h) + env(safe-area-inset-bottom));
}
#piLoginNotice{
  position:fixed !important; left:0 !important; right:0 !important;
  bottom: var(--bottom-nav-h) !important;
  background:var(--card, #fdfdfd) !important;
  border-top:1px solid var(--border, #d6d9e6) !important;
  box-shadow:0 -4px 10px rgba(0,0,0,.05) !important;
  padding:16px 12px !important; box-sizing:border-box !important; z-index:999;
}
#piLoginNotice p{
  margin:0; font-size:16px !important; line-height:1.35;
  color:var(--primary, #1a237e) !important; font-weight:500; text-align:center;
}
#piLoginNotice button{
  font-size:16px !important; padding:10px 22px !important;
  width:95% !important; display:block !important; margin:10px auto 0 !important;
  box-sizing:border-box;
  background:var(--btn-accent, #ffd700) !important; color:var(--btn-accent-text, #000) !important;
  border:none !important; font-weight:700 !important; border-radius:8px !important; cursor:pointer !important;
}
#piLoginNotice button:disabled{ opacity:.6 !important; cursor:not-allowed !important; }

/* DARK ONLY: login button devine albastru */
[data-theme="dark"] #piLoginNotice button{
  background:var(--primary, #1a237e) !important; color:#fff !important; border:0 !important;
}
[data-theme="dark"] #piLoginNotice button:hover{ filter:brightness(.98); }

/* ===== Dark tweaks ===== */
[data-theme="dark"] .benefit-item p{ color:var(--muted, #cbd5e1); }
[data-theme="dark"] .select2-dropdown{ border-color:rgba(255,255,255,.15); }
[data-theme="dark"] .pagination span{ color:var(--muted, #cbd5e1); }

/* ===== Desktop tweaks ===== */
@media (min-width:768px){
  :root{
    --login-notice-h: 108px;
    --select-font-size: 17px;
  }
}
/* Estimare (pi-range) și green box – spațiu mic între ele */
.card .pi-range{
  display: block;
  margin-top: 6px;        /* mic gap sub input */
}

.card .real-value{
  margin-top: 6px;        /* mic gap între estimare și box-ul verde */
}

/* Green box styling (dacă nu e deja în CSS) */
.card .real-value > div{
  background: var(--success-bg, #f1f8e9);
  color: var(--success-text, #33691e);
  padding: 6px 8px;
  border-radius: 8px;
  line-height: 1.35;
}
/* Search input – mai scurt pe orizontală (nu mic ca font) */
#searchInput{
  width: clamp(260px, 60vw, 480px);  /* între 260px și 480px, ~60% din viewport */
  max-width: 480px;
  margin: 12px auto 10px;            /* centrat */
}

/* Pe mobile, îl lăsăm aproape full width */
@media (max-width: 480px){
  #searchInput{
    width: 95%;
    max-width: none;
  }
}
/* 1) Nu lăsăm niciun element să depășească cardul */
.card{
  position: relative;
  overflow-wrap: anywhere;   /* rupe șiruri lungi */
  word-break: break-word;    /* fallback pentru browsere mai vechi */
}
.card *{
  max-width: 100%;
  box-sizing: border-box;
}
/* VD/Atlas logos — taie 5% sus/jos, fără deformare și fără a strica centrare */
.card img.crop-vd{
  --crop: 20%;
  display:block;
  margin-left:auto;
  margin-right:auto;

  /* 1) clip-path (suportat larg) */
  -webkit-clip-path: inset(var(--crop) 0 var(--crop) 0);
          clip-path: inset(var(--crop) 0 var(--crop) 0);

  /* 2) mask fallback (Chromium/WebKit) */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0 var(--crop),
    #000       var(--crop) calc(100% - var(--crop)),
    transparent calc(100% - var(--crop)) 100%);
          mask-image: linear-gradient(to bottom,
    transparent 0 var(--crop),
    #000       var(--crop) calc(100% - var(--crop)),
    transparent calc(100% - var(--crop)) 100%);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}