/* =========================================================
   EBL Registration — UNIFIED CSS (base + player block UI)
   Safe to replace ebl-registration.css — contains everything.
   ========================================================= */

/* =================== TOKENS =================== */
:root{
  --ebl-bg-gradient: linear-gradient(135deg,#e6f4ff,#e9fdf0);
  --ebl-card:#fff;
  --ebl-text:#111;
  --ebl-muted:#555;
  --ebl-line:#ddd;
  --ebl-row-alt:#f9f9f9;

  --ebl-primary:#49a8ff;
  --ebl-primary-600:#1f8ff8;
  --ebl-accent:#007b83;
  --ebl-focus:#ffd166;

  --ebl-note-bg:#fff8e5;
  --ebl-note-border:#ffd166;
  --ebl-note-text:#4b3b08;

  --ebl-radius:16px;
  --ebl-radius-sm:10px;
  --ebl-shadow:0 4px 18px rgba(0,0,0,.10);

  --ebl-space-1:4px;
  --ebl-space-2:8px;
  --ebl-space-3:12px;
  --ebl-space-4:16px;
  --ebl-space-5:20px;

  --ebl-logo-max: clamp(48px, 9vw, 96px);
}

/* =================== RESET LIGHT =================== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ebl-text);
  background:var(--ebl-bg-gradient);
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Helvetica, Arial, sans-serif;
  line-height:1.5;
}
.wrap{max-width:1100px; margin:24px auto; padding:0 20px}

/* =================== HEADER =================== */
:is(header, .site-header, [role="banner"], .topbar){
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:12px; padding:10px 0;
}
:is(header, .site-header, [role="banner"], .topbar) img,
img.logo, .logo img{
  max-height:var(--ebl-logo-max); height:auto; width:auto; max-width:100%; vertical-align:middle;
}
h1{ margin:0; line-height:1.2; }
.sub{ color:var(--ebl-muted); font-size:14px; }

/* =================== CARD =================== */
.card{
  background:var(--ebl-card);
  border:1px solid var(--ebl-line);
  border-radius:var(--ebl-radius);
  box-shadow:var(--ebl-shadow);
  padding:var(--ebl-space-5);
  overflow-x:hidden; /* desktop tidy; mobile override below */
}
.card h2{margin:0 0 var(--ebl-space-4)}

/* =================== COLLAPSIBLE INFO (triangle) =================== */
.info-box{
  margin:var(--ebl-space-4) 0;
  border-left:4px solid var(--ebl-accent);
  background:#f8fbff;
  border-radius:var(--ebl-radius-sm);
  overflow:hidden;
  font-size:15px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.info-box summary{
  list-style:none; cursor:pointer;
  padding:14px 18px; font-weight:700; font-size:1.1em; color:var(--ebl-accent);
  display:flex; align-items:center; background:#eef6ff; outline:none;
}
.info-box summary::-webkit-details-marker{display:none}
.info-box summary::marker{content:""}
.info-box summary::before{
  content:"";
  width:0; height:0; margin-right:8px;
  border-left:8px solid currentColor;
  border-top:6px solid transparent; border-bottom:6px solid transparent;
  transition:transform .2s ease;
}
.info-box[open] summary::before{transform:rotate(90deg)}
.info-box[open] summary{border-bottom:1px solid #e4ecf7}
.info-box > *:not(summary){padding:0 18px 14px 36px}
.info-box summary:focus-visible{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ebl-focus), transparent 45%);
  border-radius:6px;
}

/* =================== FORMS =================== */
label{ display:inline-flex; align-items:center; gap:8px; margin:10px 20px 10px 0; font-weight:600; }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select{
  display:inline-block; padding:10px 12px;
  border:1px solid #cfcfcf; border-radius:10px; background:#fff;
  font-size:15px; line-height:1.3; min-height:40px; vertical-align:middle;
  box-shadow:0 1px 0 rgba(0,0,0,.02) inset;
}
input::placeholder{ color:#616a73; opacity:1; }
:where(input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select):focus{
  outline:none;
  border-color: color-mix(in srgb, var(--ebl-primary), #000 10%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ebl-focus), transparent 45%);
}

/* Select styling + arrow */
select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #666 50%),
    linear-gradient(135deg, #666 50%, transparent 50%),
    linear-gradient(to right, #e9e9e9, #e9e9e9);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%,
    calc(100% - 40px) 50%;
  background-size:6px 6px, 6px 6px, 1px 60%;
  background-repeat:no-repeat;
  padding-right:46px; margin-right:14px;
}
select:last-of-type{ margin-right:0 }

@media (max-width: 600px){
  label{display:block; margin:8px 0}
  input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select{width:100%}
  select{margin-right:0; margin-top:10px}
}

/* =================== BUTTONS =================== */
.btn, input[type="button"], input[type="submit"]{
  border:0; padding:10px 16px; border-radius:12px;
  font-weight:700; cursor:pointer; white-space:nowrap;
  transition:opacity .15s, transform .02s;
}
.btn.primary, input[type="submit"]{
  color:#fff; background:linear-gradient(180deg, var(--ebl-primary), var(--ebl-primary-600));
}
.btn.secondary, input[type="button"]{
  color:var(--ebl-text); background:#f0f0f0; border:1px solid #cfcfcf;
}
.btn:active, input[type="button"]:active, input[type="submit"]:active{transform:translateY(.5px)}
.btn:hover, input[type="button"]:hover, input[type="submit"]:hover{opacity:.92}
.btn:focus-visible, input[type="button"]:focus-visible, input[type="submit"]:focus-visible{
  outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--ebl-focus), transparent 40%);
}
.actions{display:flex; justify-content:center; gap:12px; margin-top:20px; flex-wrap:wrap}

/* =================== TABLES (base) =================== */
table{width:100%; border-collapse:collapse; margin-top:var(--ebl-space-4); table-layout:auto}
th,td{padding:10px 12px; border-bottom:1px solid var(--ebl-line); text-align:left; vertical-align:middle}
th{background:var(--ebl-primary); color:#fff; text-align:center}
tr:nth-child(even){background:var(--ebl-row-alt)}
/* Prima colonna conservativa (#) */
th:first-child, td:first-child{
  width:64px; max-width:64px; text-align:center; white-space:nowrap; overflow:hidden;
}

/* Tabelle con bottone nella 1ª colonna: no clipping */
@supports selector(:has(*)) {
  table:has(td:first-child :is(.btn, button, input[type="button"], input[type="submit"])) 
    :is(th:first-child, td:first-child){
    width:auto !important; max-width:none !important; white-space:nowrap !important;
    overflow:visible !important; text-align:center !important;
  }
  table:has(td:first-child :is(.btn, button, input[type="button"], input[type="submit"])) 
    td:first-child :is(.btn, button, input[type="button"], input[type="submit"]){
    display:inline-flex; align-items:center; justify-content:center;
    min-width:88px; padding:6px 12px; font-size:14px; line-height:1.1; border-radius:10px; white-space:nowrap; box-sizing:border-box;
  }
}

/* =================== NOTE BOX =================== */
.note{
  margin:18px 0 0 0; padding:12px 14px; border:1px solid var(--ebl-note-border);
  background:var(--ebl-note-bg); color:var(--ebl-note-text); border-radius:10px; font-size:15px;
}
.note a{font-weight:700}
/* Fallback se non puoi mettere .note nell’HTML */
.card + p:last-of-type{
  margin:18px 0 0 0; padding:12px 14px; border:1px solid var(--ebl-note-border);
  background:var(--ebl-note-bg); color:var(--ebl-note-text); border-radius:10px; font-size:15px;
}
.card + p:last-of-type a{font-weight:700}

/* =================== ACCESSORI =================== */
.visually-hidden{
  position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap
}

/* =================== PLAYER BLOCK UI (row-based) =================== */
/* Team name inside the card */
.team-name{
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 900;
  letter-spacing: .3px;
  margin: 0 0 12px 0;
  line-height: 1.1;
  color: var(--ebl-text);
}

/* Blocks */
#playersUI .player-block{margin:18px 0 10px}
#playersUI .player-strip{
  background:var(--ebl-primary); color:#fff; font-weight:700;
  padding:6px 12px; border-radius:6px; font-size:18px;
}
#playersUI .player-card{padding:12px 8px}

/* Rows */
#playersUI .row{ margin:6px 0 }
#playersUI .name-row{ font-size:20px; font-weight:800; margin:6px 0 4px }
#playersUI .upper{ text-transform:uppercase; font-weight:inherit }

/* Country | Titled on same line, with spacing */
#playersUI .top-row{ display:flex; align-items:center; gap:12px; flex-wrap:nowrap }
#playersUI .top-row .pg-country{ min-width:0; overflow:hidden; text-overflow:ellipsis; flex:0 1 auto }
#playersUI .top-row .pg-titles{ flex:0 0 auto; white-space:nowrap; margin-left:16px }
#playersUI .insignia{ font-size:1.05em; vertical-align:-2px; margin-right:6px }

/* Gender + DOB row */
#playersUI .meta-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap }
#playersUI .meta-row .field{ display:flex; align-items:center; gap:10px; flex:1 1 280px; min-width:200px }
#playersUI .pg-dob input[type="text"]{ width:100%; max-width:none }

/* Contact box (email + phone) */
#playersUI .contact-row-box{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  background:#f7f9fb; border-radius:10px; padding:10px; margin-top:6px
}
#playersUI .contact-row-box label{ display:flex; align-items:center; gap:10px; flex:1 1 360px; min-width:240px }
#playersUI .contact-row-box input[type="email"],
#playersUI .contact-row-box input[type="tel"]{ width:100%; max-width:none }

/* Inline icons */
#playersUI .icon{ display:inline-block; vertical-align:-2px; margin-right:6px; white-space:nowrap; font-size:1.05em }

/* Mobile behaviour for the block UI */
@media (max-width:700px){
  #playersUI .meta-row{ flex-direction:column; align-items:flex-start; gap:10px }
  #playersUI .meta-row .field{ width:100%; min-width:0 }
  .card{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* =================== DESKTOP CLEANUP =================== */
@media (min-width: 701px){
  .card{ overflow-x:hidden; } /* no ugly scrollbars */
}

/* =================== MOTION REDUCTION =================== */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* === Yellow note: supporta sia .note sia .highlight, ovunque dentro .card === */
.card :is(.note, .highlight){
  margin: 18px 0 0 0;
  padding: 12px 14px;
  border: 1px solid var(--ebl-note-border);
  background: var(--ebl-note-bg);
  color: var(--ebl-note-text);
  border-radius: 10px;
  font-size: 15px;
  text-align: left;            /* evita il centrato ereditato da wrapper con align="center" */
}

/* Tipografia interna (coerente e leggibile) */
.card :is(.note, .highlight) small{
  display:block;
  margin-bottom: 6px;
  color: var(--ebl-note-text);
  opacity: .95;
}
.card :is(.note, .highlight) a{
  font-weight: 700;
  text-decoration: underline;
}

/* Se vuoi mantenere anche il fallback “ultimo paragrafo dopo .card” */
.card + p:last-of-type{
  margin: 18px 0 0 0;
  padding: 12px 14px;
  border: 1px solid var(--ebl-note-border);
  background: var(--ebl-note-bg);
  color: var(--ebl-note-text);
  border-radius: 10px;
  font-size: 15px;
}

/* Titled colours */
.card .basicinforow :is(b.titled, b > .titled)::before{
  content:"\1F396\FE0F";
  display:inline-block; margin-right:6px; vertical-align:-2px; font-size:1.05em;
  filter:none;
}

/* Non-titled black/white */
.card .basicinforow :is(b.untitled, b > .untitled)::before{
  content:"\1F396\FE0F";
  display:inline-block; margin-right:6px; vertical-align:-2px; font-size:1.05em;
  filter:grayscale(100%); opacity:.6;
}


/* ==== Page4 tweak: icona mostrine + sfondo nome ==== */

/* 1) Icona mostrine (🎖️) prima di "Titled" 
   In .basicinforow l’ultimo <b> è "Titled" e NON contiene <input>.
   Il <b> del nome invece contiene gli <input hidden>, quindi lo escludiamo. */
/*.card .basicinforow b:not(:has(input))::before{
  content: "\1F396\FE0F";      /* 🎖 + variation selector a colori */
/*  display: inline-block;
  margin-right: 6px;
  vertical-align: -2px;
  font-size: 1.05em;
} */
/* Spazio minimo così non si incolla al paese (U.S.A., England, ecc.) */
.card .basicinforow :is(b.titled, b.untitled){ margin-left:8px }

/* 2) Sfondino dietro al NOME giocatore
   Il <b> del nome include <input> nascosti → lo intercettiamo con :has(input) */
.card .basicinforow b:has(input){
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  background: linear-gradient(90deg, #eef6ff, rgba(238,246,255,0));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ebl-primary, #49a8ff), white 70%) inset;
}

/* 3) Allineamento tipografico leggermente più “pulito” */
.card .basicinforow{
  line-height: 1.35;
}

/* Riga separatrice sotto ogni giocatore (6px azzurra) */
.card .player-separator{
  display: block;
  width: 100%;
  height: 6px;
  background: var(--ebl-primary, #49a8ff);
  border: 0;                 /* annulla lo stile default dell’hr */
  border-radius: 3px;
  margin: 12px 0 16px;       /* respiro sopra/sotto */
  break-inside: avoid;       /* evita spezzature strane in stampa */
}

/* Se l'hr è dentro una tabella */
.card table .player-separator{
  display: block;
  width: 100%;
  height: 6px;
  margin: 12px 0 16px;
}

/* Opzionale: niente riga dopo l'ULTIMO giocatore */
.player-block:last-child .player-separator{ display: none; }

/* Fields to complete */
input[type="text"]:not(:disabled),
input[type="email"]:not(:disabled),
input[type="tel"]:not(:disabled),
select:not(:disabled) {
  background-color: #fffef2;
  border: 1px solid #d4b106;
}

/* Pre-filled fields */
input:disabled,
select:disabled {
  background-color: #f2f4f7;
  color: #555;
  border: 1px dashed #ccc;
  cursor: not-allowed;
}