/* FRONTEND LUXURY */
.stc5-booking {
  min-height: 100vh;
  background: #000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
}
.stc5-fade{opacity:0;animation:stc5FadeIn .9s ease forwards;}
@keyframes stc5FadeIn{to{opacity:1;}}
.stc5-booking-card{
  width:100%;max-width:620px;
  padding:40px 32px;
  border-radius:28px;
  background:radial-gradient(circle at top left,rgba(245,229,138,0.18),rgba(5,5,5,0.96));
  box-shadow:0 26px 80px rgba(0,0,0,0.9);
  color:#f9f9f9;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
}
.stc5-booking-title{
  font-size:1.7rem;margin:0 0 .35rem;
  letter-spacing:.12em;text-transform:uppercase;color:#f5e58a;
}
.stc5-booking-sub{margin:0 0 1.8rem;color:#d0d0d0;font-size:.95rem;}
.stc5-field{margin-bottom:1rem;}
.stc5-field label{
  display:block;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:#c8c8c8;margin-bottom:.35rem;
}
.stc5-field input,.stc5-field select,.stc5-field textarea{
  width:100%;border-radius:999px;border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(circle at top left,rgba(245,229,138,.1),#050505);
  padding:.75rem 1rem;font-size:.9rem;color:#f9f9f9;
}
.stc5-field textarea{border-radius:18px;resize:vertical;}
.stc5-slots{display:flex;flex-wrap:wrap;gap:.5rem;}
.stc5-slot-btn{
  border-radius:999px;border:1px solid rgba(245,229,138,.6);
  background:transparent;color:#f5e58a;
  padding:.45rem .9rem;font-size:.85rem;text-transform:uppercase;
  letter-spacing:.12em;cursor:pointer;
}
.stc5-slot-btn.is-selected{
  background:radial-gradient(circle at 20% 0,#f5e58a,#d9a91a 40%,#9c7a14 85%);
  color:#050505;box-shadow:0 0 18px rgba(245,229,138,.8);
}
.stc5-submit-btn{
  display:inline-block;margin-top:1.2rem;padding:.9rem 2.4rem;
  border-radius:999px;border:none;
  background:radial-gradient(circle at 20% 0,#f5e58a,#d9a91a 40%,#9c7a14 85%);
  color:#050505;text-transform:uppercase;letter-spacing:.14em;
  font-size:.78rem;font-weight:600;cursor:pointer;
}
.stc5-notice{border-radius:14px;padding:.85rem 1rem;font-size:.85rem;margin-bottom:1rem;}
.stc5-notice--success{
  background:rgba(24,134,65,.18);border:1px solid rgba(24,134,65,.7);color:#bfffd7;
}

/* ACCOUNT */
.stc5-account{
  max-width:1000px;margin:40px auto;padding:32px 24px;
  border-radius:28px;background:radial-gradient(circle at top left,rgba(245,229,138,.18),rgba(5,5,5,.97));
  box-shadow:0 26px 80px rgba(0,0,0,.9);color:#f9f9f9;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
}
.stc5-account--auth{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;
}
.stc5-account-col h2{
  font-size:1.1rem;text-transform:uppercase;letter-spacing:.16em;color:#f5e58a;margin-bottom:.8rem;
}
.stc5-form .stc5-field{margin-bottom:.8rem;}
.stc5-btn-primary,.stc5-btn-secondary{
  padding:.8rem 2.2rem;border-radius:999px;border:1px solid rgba(245,229,138,.7);
  text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;cursor:pointer;background:transparent;
}
.stc5-btn-primary{
  background:radial-gradient(circle at 20% 0,#f5e58a,#d9a91a 40%,#9c7a14 85%);color:#050505;border:none;
}
.stc5-btn-secondary{color:#f5e58a;}
.stc5-notice--error{
  background:rgba(180,32,32,.18);border:1px solid rgba(255,99,99,.7);color:#ffd1d1;
}
.stc5-account-header{display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem;}
.stc5-account-avatar{
  width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 20% 0,#f5e58a,#9c7a14 60%);
  display:flex;align-items:center;justify-content:center;
  color:#050505;font-weight:700;font-size:1.1rem;box-shadow:0 0 30px rgba(245,229,138,1);
}
.stc5-account-meta h1{margin:0 0 .15rem;font-size:1.4rem;}
.stc5-account-meta p{margin:0;font-size:.92rem;color:#d0d0d0;}
.stc5-account-section{margin-top:2rem;}
.stc5-account-section h2{
  font-size:1rem;text-transform:uppercase;letter-spacing:.14em;color:#f5e58a;margin-bottom:.9rem;
}
.stc5-account-section--summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;
}
.stc5-loyalty-card{
  padding:1.1rem 1.3rem;border-radius:20px;border:1px solid rgba(245,229,138,.12);background:rgba(0,0,0,.7);
}
.stc5-table{width:100%;border-collapse:collapse;font-size:.9rem;}
.stc5-table th,.stc5-table td{padding:.5rem .3rem;border-bottom:1px solid rgba(255,255,255,.06);}
.stc5-table th{text-align:left;color:rgba(245,229,138,.9);font-weight:500;}
.stc5-table--compact th,.stc5-table--compact td{padding:.4rem .25rem;}
@media(max-width:640px){
  .stc5-booking-card{padding:28px 20px;}
  .stc5-account{padding:24px 18px;}
  .stc5-account-header{flex-direction:column;align-items:flex-start;}
}
/* ================================
   CONTUL MEU — CARDURI LOYALTY
   ================================ */

/* Cardurile există deja (.stc5-loyalty-card).
   Aici doar le rafinăm + adăugăm variantele pe nivel. */

.stc5-account-section--summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 768px) {
  .stc5-account-section--summary {
    grid-template-columns: 1fr;
  }
}

.stc5-loyalty-card {
  position: relative;
  padding: 1.1rem 1.3rem;
  border-radius: 20px;
  border: 1px solid rgba(245, 229, 138, 0.18);
  background: radial-gradient(circle at top left,
    rgba(245, 229, 138, 0.12),
    rgba(0, 0, 0, 0.9)
  );
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.9);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.stc5-loyalty-card h3 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #f5e58a;
}

.stc5-loyalty-card p {
  margin: 0;
  font-size: 0.86rem;
  color: #d0d0d0;
}

/* ================================
   LOYALTY – CLASIC / GOLD / BLACK
   ================================ */

/* Classic – clean, discret */
.stc5-loyalty-card--classic {
  background: radial-gradient(circle at top left,
    rgba(245, 229, 138, 0.10),
    rgba(0, 0, 0, 0.98)
  );
  border-color: rgba(245, 229, 138, 0.22);
}

/* Gold – aur lichid clar, dar nu agresiv */
.stc5-loyalty-card--gold {
  background: radial-gradient(circle at 15% 0,
    #f5e58a,
    #d9a91a 42%,
    #9c7a14 82%
  );
  border-color: rgba(245, 229, 138, 0.75);
  box-shadow:
    0 0 26px rgba(245, 229, 138, 0.75),
    0 0 4px rgba(0, 0, 0, 0.8) inset;
}

.stc5-loyalty-card--gold h3,
.stc5-loyalty-card--gold p {
  color: #251b07;
  text-shadow: 0 0 6px rgba(255, 230, 150, 0.5);
}

/* Black – card „uimitor”: sticlă neagră cu aur pe margine */
.stc5-loyalty-card--black {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 0,
      rgba(245, 229, 138, 0.20),
      transparent 40%) ,
    radial-gradient(circle at 80% 120%,
      #130b06 0,
      #000000 55%);
  border-color: rgba(245, 229, 138, 0.9);
  box-shadow:
    0 0 55px rgba(0, 0, 0, 0.95),
    0 0 40px rgba(245, 229, 138, 0.40);
}

/* reflex lucios pe partea de sus a cardului Black */
.stc5-loyalty-card--black::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.16),
    transparent 45%
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

/* text pe Black – clar, premium */
.stc5-loyalty-card--black h3 {
  color: #f5e58a;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.stc5-loyalty-card--black p {
  color: #f4eee0;
}

/* ================================
   Card activ (nivelul tău actual)
   ================================ */

.stc5-loyalty-card--active {
  position: relative;
  transform: translateY(-4px);
  box-shadow:
    0 0 38px rgba(245, 229, 138, 0.95),
    0 0 10px rgba(0, 0, 0, 1) inset;
  border-color: rgba(245, 229, 138, 0.98);
}

.stc5-loyalty-card--active::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(245, 229, 138, 0.98);
  pointer-events: none;
}
/* Badge „Nivelul tău actual” */
.stc5-loyalty-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .8rem;
  padding: .28rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(245,229,138,.55);
  background: radial-gradient(circle at 20% 0,#f5e58a,#9c7a14 55%,#050505 100%);
  color: #050505;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.stc5-loyalty-pill__label {
  opacity: .85;
}

.stc5-loyalty-pill__value {
  font-weight: 700;
}
/* ================================
   FIX – Dropdown servicii (Chrome desktop)
   ================================ */

/* stil pentru select-ul închis (câmpul din formular) */
.stc5-select {
  color: #f9f9f9;
}

/* stil pentru opțiunile din lista deschisă */
.stc5-select option {
  background: #050505 !important;  /* fundal închis */
  color: #f5e58a !important;       /* text auriu, vizibil */
}
/* --- FIX: carduri loialitate pe mobil la fel ca pe desktop --- */

/* Ne asigurăm că grid-ul se așază frumos pe mobil, dar păstrează look-ul premium */
@media (max-width: 768px) {
  .stc5-loyalty-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .stc5-loyalty-card {
    background: radial-gradient(circle at top left, rgba(245,229,138,0.16), rgba(5,5,5,0.96));
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(245,229,138,0.45);
    padding: 18px 16px;
  }

  .stc5-loyalty-card__badge {
    font-size: 11px;
    letter-spacing: 0.12em;
  }

  .stc5-loyalty-card__title {
    font-size: 15px;
    margin-bottom: 4px;
  }

  .stc5-loyalty-card__perks {
    font-size: 12px;
    opacity: .9;
  }
}

/* Ne mai asigurăm o dată că starea "activă" rămâne glow & gold și pe mobil */
.stc5-loyalty-card--active {
  box-shadow: 0 0 0 1px rgba(245,229,138,0.6), 0 28px 80px rgba(0,0,0,1);
  background: radial-gradient(circle at top left, rgba(245,229,138,0.28), rgba(5,5,5,0.98));
}
/* Text mic sub puncte (Contul Meu – Rezervări) */
.stc5-account-meta-small {
  font-size: 11px;
  opacity: 0.8;
  display: inline-block;
  margin-top: 2px;
  color: #d0d0d0;
}