/* ============================================================================
 * cookie-skin.css — Custom "skin" για το CookieScript banner (profitstore.gr)
 * ----------------------------------------------------------------------------
 * ΤΙ ΚΑΝΕΙ
 *   1. Κρύβει το default UI του CookieScript ΜΟΝΟ όταν το skin μας είναι ενεργό
 *      (body.cs-skin-on) — ώστε το native "Ρυθμίσεις" panel να μπορεί να εμφανιστεί
 *      αργότερα κανονικά (αφαιρούμε την κλάση όταν ανοίγει το panel).
 *   2. Στήνει το δικό μας κεντρικό popup (dimmed backdrop) με:
 *        • «Αποδοχή όλων»  → πορτοκαλί primary, μεγαλύτερο/bold, pulse + shine
 *        • «Απόρριψη όλων» → ghost/secondary, ουδέτερο (ίδιο μέγεθος → νόμιμο)
 *   3. «Gating»: όσο εκκρεμεί η επιλογή (body.cookie-pending) κρύβει τα άλλα
 *      first-load popups ώστε να μη ανταγωνίζονται το cookie banner.
 *
 * ΣΗΜΕΙΩΣΗ deploy: σερβίρεται από /gk/cookie-skin.css, φορτώνεται σε ΟΛΑ τα
 * templates (desktop + mobile + legacy) μέσω του plugins/system/cookieskin.php.
 * Τα κλειδωμένα mobile/desktop αρχεία ΔΕΝ αγγίζονται.
 * ========================================================================== */

/* ── 1. Κρύψε το default CookieScript UI όσο ελέγχει το skin μας ─────────── */
body.cs-skin-on #cookiescript_injected,
body.cs-skin-on #cookiescript_injected_wrapper { display: none !important; }

/* ── 2. (ΑΦΑΙΡΕΘΗΚΕ) Gating των άλλων popups ─────────────────────────────── */
/*   Παλιά κρύβαμε #nt_slideup («Δώρα») + .popup1001 όσο εκκρεμεί το consent.
 *   ΠΡΟΒΛΗΜΑ: ο #nt_slideup («Δώρα») έχει timer + auto-dismiss — αν ο χρήστης
 *   αργούσε να επιλέξει, ο κύκλος του έτρεχε ΚΡΥΜΜΕΝΟΣ και «αυτο-κλεινόταν»,
 *   οπότε μετά το accept δεν ξαναεμφανιζόταν («έπαψε να λειτουργεί» στο desktop).
 *   ΛΥΣΗ: δεν πειράζουμε καθόλου τα άλλα popups. Το dimmed backdrop του δικού
 *   μας κεντρικού modal ήδη μειώνει την προσοχή τους όσο διαλέγει ο χρήστης.
 *   (Το body.cookie-pending μπαίνει ακόμα από το JS, απλώς κανένας κανόνας δεν
 *   το χρησιμοποιεί πλέον — αβλαβές, το κρατάμε για πιθανή μελλοντική χρήση.) */

/* ── 3. Overlay + card ──────────────────────────────────────────────────── */
#cs-skin {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,32,.62);
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
  font-family: Arial, Helvetica, sans-serif;
}
#cs-skin .cs-card {
  background: #fff; max-width: 460px; width: calc(100% - 32px);
  border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  padding: 26px 26px 20px; box-sizing: border-box;
  animation: csPop .25s ease;
}
@keyframes csPop { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }

#cs-skin h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.25; color: #16202b; font-weight: 800; }
#cs-skin p  { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: #4a5560; }

/* ── 4. Κουμπιά — ΙΔΙΟ μέγεθος (νόμιμο), διαφορά μόνο σε χρώμα/έμφαση ─────── */
#cs-skin .cs-btns { display: flex; gap: 10px; }
#cs-skin button {
  flex: 1; height: 46px; border-radius: 9px; cursor: pointer; border: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  position: relative; overflow: hidden;
}
#cs-skin .cs-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 12px; font-weight: 900; flex: 0 0 auto; position: relative; z-index: 2;
}
/* Αποδοχή — ζωηρό πορτοκαλί (on-brand), μεγαλύτερο+bold, pulse + shine */
#cs-skin .cs-accept {
  background: #f5911e; color: #fff; font-size: 16px; font-weight: 900; letter-spacing: .2px;
  box-shadow: 0 3px 0 #c9720d; animation: csPulse 1.8s ease-in-out infinite;
}
#cs-skin .cs-accept .cs-txt { position: relative; z-index: 2; }
#cs-skin .cs-accept .cs-ic { background: rgba(255,255,255,.28); color: #fff; }
#cs-skin .cs-accept::before {
  content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-20deg); animation: csShine 2.8s ease-in-out infinite; z-index: 1;
}
#cs-skin .cs-accept:hover { background: #ff9e2c; animation-play-state: paused; }
@keyframes csPulse {
  0%   { transform: scale(1);     box-shadow: 0 3px 0 #c9720d, 0 0 0 0  rgba(245,145,30,.7); }
  55%  { transform: scale(1.055); box-shadow: 0 3px 0 #c9720d, 0 0 0 14px rgba(245,145,30,0); }
  100% { transform: scale(1);     box-shadow: 0 3px 0 #c9720d, 0 0 0 0  rgba(245,145,30,0); }
}
@keyframes csShine { 0% { left: -60%; } 45% { left: 130%; } 100% { left: 130%; } }

/* Απόρριψη — ghost/secondary, ουδέτερο (ορατό, 1 κλικ, ίδιο μέγεθος) */
#cs-skin .cs-reject { background: #fff; color: #6b7680; border: 1.5px solid #cdd4da; font-size: 14px; font-weight: 700; }
#cs-skin .cs-reject .cs-ic { background: #eef1f3; color: #8a949c; }
#cs-skin .cs-reject:hover { background: #f4f6f8; }

/* ── 5. Footer links ────────────────────────────────────────────────────── */
#cs-skin .cs-foot { margin-top: 14px; display: flex; justify-content: space-between; font-size: 12px; }
#cs-skin .cs-foot a { color: #8a949c; text-decoration: underline; cursor: pointer; }

/* ── 6. Accessibility — σεβασμός prefers-reduced-motion ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  #cs-skin .cs-accept { animation: none; }
  #cs-skin .cs-accept::before { display: none; }
  #cs-skin .cs-card { animation: none; }
}