/* ==========================================================
   NORDEA OPEN – ATP RESULTS (Production)
   Clean Flex Layout – Token Driven
   ========================================================== */


/* ==========================================================
   DESIGN TOKENS
   ========================================================== */

:root {

  /* Card */
  --no-card-bg: #ffffff;
  --no-card-text: #000000;
  --no-card-radius: 8px;
  --no-card-shadow: 0 8px 22px rgba(0,0,0,.08);

  /* Rows */
  --no-row-bg: #f7f4f4;
  --no-row-win-bg: #99ccff;
  --no-row-radius: 6px;

  /* Pills */
  --no-pill-round-bg: #474748;
  --no-pill-round-text: #ffffff;
  --no-pill-court-bg: #81d742;
  --no-pill-court-text: #0a0a0a;
  --no-pill-radius: 6px;

  /* Sets */
  --no-set-win-bg: #00005e;
  --no-set-win-text: #ffffff;
  --no-set-lose-bg: #e6e4e3;
  --no-set-lose-border: #7b8291;
  --no-set-lose-text: #2d2f36;

  --no-set-pill-size: 34px;
  --no-set-font-size: 14px;
  --no-set-tb-font-size: 9px;

  --no-set-grid-gap: 8px;
  --no-set-column-width: 150px;

  --no-set-tb-top: 3px;
  --no-set-tb-right: 6px;

  /* Status badges */
  --no-ret-bg: #ffbd61;
  --no-ret-text: #000000;
  --no-wo-bg: #5ed34a;
  --no-wo-text: #90c900;

  /* Players */
  --no-player-font: 13px;
  --no-flag-size: 18px;

  /* Layout */
  --no-card-pad-y: 12px;
  --no-card-pad-x: 8px;
  --no-card-gap: 8px;

  --no-row-pad-y: 8px;
  --no-row-pad-x: 10px;
  --no-row-gap: 6px;

}


/* ==========================================================
   RESULTS WRAPPER
   ========================================================== */

.no26-atp-results{
  width:100%;
  max-width:900px;
  margin:0 auto;
}


/* ==========================================================
   ROUND TITLE
   ========================================================== */

.no26-round{
  margin-top:28px;
  margin-bottom:10px;
  font-size:18px;
  font-weight:700;
  text-transform:uppercase;
}


/* ==========================================================
   LIST
   ========================================================== */

.no26-atp-results-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--no-card-gap);
}


/* ==========================================================
   CARD
   ========================================================== */

.no26-atp-result-card{
  background:var(--no-card-bg);
  color:var(--no-card-text);
  border-radius:var(--no-card-radius);
  padding:var(--no-card-pad-y) var(--no-card-pad-x);
  box-shadow:var(--no-card-shadow);
  display:flex;
  flex-direction:column;
  gap:var(--no-card-gap);
    min-height:92px;
}


/* ==========================================================
   HEADER
   ========================================================== */

.no26-atp-result-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.result-pill{
  padding:4px 10px;
  border-radius:var(--no-pill-radius);
  font-size:12px;
  font-weight:600;
}

.result-pill-round{
  background:var(--no-pill-round-bg);
  color:var(--no-pill-round-text);
}

.result-pill-court{
  background:var(--no-pill-court-bg);
  color:var(--no-pill-court-text);
}

.result-time{
  font-size:12px;
}


/* ==========================================================
   BODY
   ========================================================== */

.no26-atp-result-body{
  display:flex;
  flex-direction:column;
  gap:var(--no-row-gap);
}


/* ==========================================================
   ROW
   ========================================================== */

.no26-atp-result-row{
  display:flex;
  align-items:center;
  padding:var(--no-row-pad-y) var(--no-row-pad-x);
  background:var(--no-row-bg);
  border-radius:var(--no-row-radius);
}

.no26-atp-result-row.winner{
  background:var(--no-row-win-bg);
}


/* Left column */

.no26-atp-result-row > .result-player,
.no26-atp-result-row > .result-team{
  flex:1 1 auto;
  min-width:0;
}


/* ==========================================================
   PLAYER
   ========================================================== */

.result-player{
  display:flex;
  align-items:center;
  gap:8px;
}

.result-player span{
  font-size:var(--no-player-font);
}

.no26-atp-result-row.winner .result-player span{
  font-weight:700;
}

.player-flag{
  width:var(--no-flag-size);
  height:auto;
  flex-shrink:0;
}


/* ==========================================================
   DOUBLES TEAM - 4 rader
   

.result-team{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.team-player{
  display:flex;
  align-items:center;
  gap:6px;
}

========================================================== */

/* ==========================================================
   DOUBLES TEAM
   ========================================================== */

.result-team{
display:flex;
align-items:center;
gap:6px;
white-space:nowrap;
}

.result-team span{
  font-size:var(--no-player-font);
}

.result-team .player-flag{
  width:var(--no-flag-size);
  height:auto;
  flex-shrink:0;
}

.team-sep{
  opacity:.6;
  margin:0 3px;
}

.no26-atp-result-row.winner .result-team span{
  font-weight:700;
}

/* ==========================================================
   SET COLUMN
   ========================================================== */

.result-sets{
  margin-left:auto;
  flex:0 0 var(--no-set-column-width);
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:var(--no-set-grid-gap);
}


/* ==========================================================
   SET PILL
   ========================================================== */

.set-pill{
  width:var(--no-set-pill-size);
  height:var(--no-set-pill-size);
  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center;

  position:relative;
}

.set-pill-win{
  background:var(--no-set-win-bg);
  color:var(--no-set-win-text);
}

.set-pill-lose{
  background:var(--no-set-lose-bg);
  border:2px solid var(--no-set-lose-border);
  color:var(--no-set-lose-text);
}

.set-main{
  font-size:var(--no-set-font-size);
  font-variant-numeric: tabular-nums;
  line-height:1;
}

.tb-score{
  position:absolute;
  top:var(--no-set-tb-top);
  right:var(--no-set-tb-right);
  font-size:var(--no-set-tb-font-size);
}


/* ==========================================================
   RET / WO
   ========================================================== */

.set-pill.ret{
  background:#444;
  color:#fff;
  font-weight:700;
}

.result-badge-ret,
.result-badge-wo{

  display:inline-block;
  margin-left:6px;

  padding:2px 6px;

  border-radius:999px;

  font-size:10px;
  font-weight:700;
}

.result-badge-ret{
  background:var(--no-ret-bg);
  color:var(--no-ret-text);
}

.result-badge-wo{
  background:var(--no-wo-bg);
  color:var(--no-wo-text);
}


/* ==========================================================
   YEAR SWITCHER
   ========================================================== */

.no26-year-switcher{

display:flex;
gap:8px;

overflow-x:auto;
overflow-y:hidden;

white-space:nowrap;

padding-bottom:6px;

scrollbar-width:thin;

}

.no26-year-switcher a{

flex:0 0 auto;

padding:6px 12px;

border-radius:20px;

font-size:13px;
font-weight:600;

background:#f3f3f3;
color:#000;

text-decoration:none;

}

.no26-year-switcher a.active{

background:#00005e;
color:#fff;

}


/* ==========================================================
   RANDOM MATCH
   ========================================================== */

.no26-random-match{

  padding:16px;

  border-radius:10px;

  background:#fff;

  box-shadow:0 6px 16px rgba(0,0,0,.06);

  text-align:center;

}

.random-title{

  font-size:13px;
  font-weight:700;

  text-transform:uppercase;

  margin-bottom:6px;

}

.random-match{

  font-size:12px;
  opacity:.7;

}

.random-players{

  font-size:16px;
  font-weight:700;

  margin-top:6px;

}

.random-score{

  font-size:14px;
  margin-top:4px;

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:600px){

  :root{

    --no-set-pill-size: 28px;
    --no-set-font-size: 12px;
    --no-set-column-width: 105px;

  }

}