/* =========================================================
   Refund Ski Portal – Brand styles (Bootstrap-friendly)
   Palette e font forniti da Fabio:
   - Primary:   #153056
   - Secondary: #20CAEC
   - Secondary buttons: #C5922C
   - Text: #FFFFFF (on dark) / #5F5F5F (default)
   - Font: "Sofia Sans Semi Condensed", sans-serif
   ========================================================= */

/* ---------- Brand variables ---------- */
:root{
  /* Colori di brand */
  --brand-primary: #153056;
  --brand-secondary: #20CAEC;
  --brand-secondary-contrast: #0C223F;  /* tono scuro per hover su accent */
  --brand-secondary-btn: #C5922C;

  /* Testo e superfici */
  --text-default: #5F5F5F;  /* corpo su sfondo chiaro */
  --text-on-primary: #FFFFFF; /* testo su sfondo primario */
  --surface-page: #F6F8FB;   /* sfondo pagine */
  --surface-card: #FFFFFF;   /* sfondo card */

  /* Feedback */
  --ok: #25A770;
  --warn: #F4B942;
  --err: #D9534F;

  /* Raggi/ombre */
  --radius-lg: 12px;
  --radius-md: 8px;
  --shadow-soft: 0 6px 16px rgba(21, 48, 86, .10);
}

/* ---------- Base ---------- */
html, body{ height: 100%; }
body{
  font-family: "Sofia Sans Semi Condensed", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text-default);
  background: var(--surface-page);
  font-weight: 400;
  background-color: #153056;
}
a{
  color: var(--brand-secondary);
  text-decoration: none;
}
a:hover{ color: #18B8D8; text-decoration: underline; }

.small, .form-text{ color: #7A7A7A; }

/* ---------- Navbar ---------- */
.navbar{
  border-bottom: 1px solid #E5E7EB;
  background: #fff;
  box-shadow: 0 2px 10px rgba(21,48,86,.06);
}
.navbar-brand .fa-snowflake{ color: var(--brand-secondary); }
.navbar .brand{
  color: var(--brand-primary);
  font-weight: 700;
  letter-spacing: .2px;
}

/* ---------- Headings (su sfondi chiari) ---------- */
h1, h2, h3, h4, h5, h6{
  color: #1f2a44;
  letter-spacing: .2px;
}

/* ---------- Cards ---------- */
.card{
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.card-header{
  border-bottom: 1px solid #EDF2F7;
  background: #fff;
  font-weight: 600;
  color: var(--brand-primary);
}

/* ---------- Buttons (override Bootstrap CSS vars) ---------- */
.btn-primary{
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: #0F2442;
  --bs-btn-hover-border-color: #0F2442;
  --bs-btn-active-bg: #0B1B31;
  --bs-btn-active-border-color: #0B1B31;
  --bs-btn-color: var(--text-on-primary);
}

.btn-secondary{
  --bs-btn-bg: var(--brand-secondary-btn);
  --bs-btn-border-color: var(--brand-secondary-btn);
  --bs-btn-hover-bg: #A87E24;
  --bs-btn-hover-border-color: #A87E24;
  --bs-btn-color: #fff;
}

.btn-outline-secondary{
  --bs-btn-color: #6C757D;
  --bs-btn-border-color: #D1D5DB;
  --bs-btn-hover-bg: #F3F4F6;
}

.btn-link{
  color: var(--brand-secondary);
}
.btn-link:hover{
  color: #18B8D8;
}

/* ---------- Badges / Pills ---------- */
.badge.bg-primary{ background-color: var(--brand-primary) !important; }
.badge.bg-secondary{ background-color: var(--brand-secondary) !important; color: #0c223f; }

/* ---------- Forms ---------- */
.form-label.required::after{
  content: " *";
  color: var(--err);
  font-weight: 600;
}
.form-control, .form-select{
  border-radius: var(--radius-md);
}

.input-group-text{
  background: #F3F6FA;
  border-color: #E5E7EB;
  color: #425061;
}

/* Stati di validazione */
.is-invalid{
  border-color: var(--err) !important;
  box-shadow: 0 0 0 .15rem rgba(217, 83, 79, .15) !important;
}
.is-valid{
  border-color: var(--ok) !important;
  box-shadow: 0 0 0 .15rem rgba(37, 167, 112, .15) !important;
}

/* INVALID FEEDBACK: nascondi di default (Bootstrap behavior) */
.invalid-feedback {
  display: none;   /* default: nascosto */
}

/* Mostra feedback quando l’input diventa invalid */
.is-invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback {
  display: block;
}


/* ---------- Componenti custom pagina ---------- */
.skipass-card{
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.code-hint{ color: #6C778B; }

.dropzone{
  border: 2px dashed #CBD5E1;
  border-radius: var(--radius-md);
  padding: 1rem;
  background: #F9FAFB;
  transition: background .2s ease, border-color .2s ease;
}
.dropzone:hover{
  background: #F1F5F9;
  border-color: var(--brand-secondary);
}

/* ---------- Alerts ---------- */
.alert-info{
  background: linear-gradient(0deg, #EAF8FF 0%, #FFFFFF 100%);
  border-color: #D7EFFE;
  color: #0B4E80;
}
.alert-danger{
  border-color: #F1C0C0;
  background: #FFF5F5;
}
.alert-warning{
  border-color: #FFE7B3;
  background: #FFFBEA;
}

/* ---------- Utility testo su sfondi ---------- */
.text-on-primary{ color: var(--text-on-primary) !important; }
.text-default   { color: var(--text-default) !important; }

/* ---------- Sezioni a sfondo primario ---------- */
.section-primary{
  background: var(--brand-primary);
  color: var(--text-on-primary);
}
.section-primary .card{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

/* ---------- Link “accent” su sfondo scuro ---------- */
.section-primary a{ color: var(--brand-secondary); }
.section-primary a:hover{ color: #18B8D8; }

/* ---------- Toggle/radio come “pill” ---------- */
.btn-outline-primary{
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: rgba(21,48,86,.08);
  --bs-btn-hover-border-color: var(--brand-primary);
}

/* ---------- Footer ---------- */
.footer{
  background: #0E233D;
  color: rgba(255,255,255,.85);
  border-top: 1px solid rgba(255,255,255,.12);
}

/* ---------- Dark Mode (opzionale) ---------- */


/* ===========================================
   Override Bootstrap: rimuovi tutti gli angoli arrotondati
   e imposta i colori dei pulsanti come richiesto
   =========================================== */

/* --- Radius globali (Bootstrap 5 usa CSS variables) --- */
:root{
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-pill: 0;
}

/* --- Forza 0 sui componenti più comuni --- */
.btn,
.card,
.form-control,
.form-select,
.input-group-text,
.badge,
.alert,
.dropdown-menu,
.modal-content,
.nav-tabs .nav-link,
.list-group-item,
.progress,
.table,
.accordion .accordion-item,
.accordion .accordion-button,
.toast,
.offcanvas,
.pagination .page-link,
.img-thumbnail,
.rounded,
.rounded-0,
.rounded-1,
.rounded-2,
.rounded-3 {
  border-radius: 0 !important;
}

/* Se vuoi togliere l’ombra arrotondata delle cards (opzionale):
.card { box-shadow: none; } */

/* -------------------------------------------
   Bottoni: primary/outline-primary/success → SECONDARIO
   Palette già definita:
   --brand-secondary: #20CAEC
   ------------------------------------------- */

/* PRIMARY → Secondario */
.btn-primary{
  --bs-btn-bg: var(--brand-secondary);
  --bs-btn-border-color: var(--brand-secondary);
  --bs-btn-color: #0C223F; /* testo scuro per contrasto su secondario chiaro */
  --bs-btn-hover-bg: #18B8D8;        /* scurisco l’accent in hover */
  --bs-btn-hover-border-color: #18B8D8;
  --bs-btn-active-bg: #119FBF;
  --bs-btn-active-border-color: #119FBF;
}

/* OUTLINE-PRIMARY → contorno e testo secondario */
.btn-outline-primary{
  --bs-btn-color: var(--brand-secondary);
  --bs-btn-border-color: var(--brand-secondary);
  --bs-btn-hover-bg: rgba(32, 202, 236, .12);
  --bs-btn-hover-border-color: var(--brand-secondary);
  --bs-btn-active-bg: rgb(32, 202, 236);
  --bs-btn-active-border-color: var(--brand-secondary);
}

/* SUCCESS → Secondario (stesso stile del primary) */
.btn-success{
  --bs-btn-bg: var(--brand-secondary);
  --bs-btn-border-color: var(--brand-secondary);
  --bs-btn-color: #0C223F;
  --bs-btn-hover-bg: #18B8D8;
  --bs-btn-hover-border-color: #18B8D8;
  --bs-btn-active-bg: #119FBF;
  --bs-btn-active-border-color: #119FBF;
}

/* Outline-success (se lo usi) → secondario */
.btn-outline-success{
  --bs-btn-color: var(--brand-secondary);
  --bs-btn-border-color: var(--brand-secondary);
  --bs-btn-hover-bg: rgba(32, 202, 236, .12);
  --bs-btn-hover-border-color: var(--brand-secondary);
  --bs-btn-active-bg: rgba(32, 202, 236, .20);
  --bs-btn-active-border-color: var(--brand-secondary);
}


/* ===========================================
   Callouts (componenti informativi)
   =========================================== */
.callout{
  --_border: #e5e7eb;
  --_bg: #ffffff;
  --_title: #153056;      /* brand primary */
  --_text: var(--text-default, #5F5F5F);

  position: relative;
  display: block;
  padding: 1.25rem 1.25rem 1.25rem 3.25rem;
  border-left: 4px solid var(--_border);
  background: var(--_bg);
  color: var(--_text);
  border-radius: 0; /* coerente con policy zero-round */
  box-shadow: 0 2px 10px rgba(21,48,86,.06);
  margin-bottom: 1rem;
}

.callout .callout-title{
  margin: 0 0 .25rem 0;
  font-weight: 700;
  color: var(--_title);
  letter-spacing: .2px;
}

.callout .callout-body{
  margin: 0;
}

.callout .callout-icon{
  position: absolute;
  left: 1rem;
  top: 1.1rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--_border);
}

/* Varianti brand */
.callout-info{
  --_border: #20CAEC;           /* secondario */
  --_title: #153056;            /* primario per il titolo */
}
.callout-success{
  --_border: #25A770;
  --_title: #0F5132;
}
.callout-warning{
  --_border: #F4B942;
  --_title: #664d03;
}
.callout-danger{
  --_border: #D9534F;
  --_title: #842029;
}

/* Stato compatto (opzionale) */
.callout.callout-sm{
  padding: .875rem .875rem .875rem 2.75rem;
}