/* html {font-family: Roboto,sans-serif;}
.betbuildnav {width:80%;margin:0 10%;padding:8px 10px;margin-bottom:12px;border-radius:10px}
.betbuildnavfoc {background-color:#28ffbb}
.betbuildbet {width:150px;height:30px;margin:0 auto;background-color:#ffdf1b;color:#000;text-align:center;font-size:20px;font-weight:700;line-height:30px; border-radius:5px}
.betbuildbet a {text-decoration:none;color:#000;display:block; width:100%; height:100%;}
*/

html {
  font-family: Roboto, Arial, sans-serif;
}

.betbuilder-card {
  position: relative;
  width: 300px;
  height: 400px;
  overflow: hidden;
  border-radius: 14px;
  background: #071f1c;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.betbuilder-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark readable layer over the background */
.betbuilder-overlay {
  position: absolute;
  inset: 0;
  padding: 40px 14px 0;
  box-sizing: border-box;
  background: none;
}

/* Rounded bordered box around the bet card content */
.betbuilder-box {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(5, 18, 16, 0.42);
  padding: 10px 10px 12px;
  box-sizing: border-box;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Reset button — reloads the iframe from scratch */
.betbuild-reset {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  cursor: pointer;
  background-color: rgba(5, 18, 16, 0.55);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpolyline points='21 3 21 9 15 9'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.betbuild-reset:hover {
  background-color: #25e0a0;
  border-color: #25e0a0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23043a2c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpolyline points='21 3 21 9 15 9'/%3E%3C/svg%3E");
}

/* Optional heading */
.betbuilder-header {
  margin-bottom: 12px;
  text-align: left;
}

.betbuilder-brand {
  color: #28ffbb;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.betbuilder-subtitle {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 500;
}

/* Form lays out the rows with even spacing (hidden inputs are display:none,
   so they don't create phantom gaps) */
#betbuilder {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Selects (rows) */
.betbuildnav {
  width: 100%;
  height: 31px;
  margin: 0;
  padding: 0 32px 0 38px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  /* dark translucent row for not-yet-selected markets */
  background-color: rgba(8, 28, 25, 0.72);
  color: rgba(220, 235, 230, 0.92);
  font-size: 12px;
  font-weight: 600;
  line-height: 31px;
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 3px 8px rgba(0, 0, 0, 0.28);
  appearance: none;
  -webkit-appearance: none;
  /* left market icon + right chevron */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcd6cd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right 11px center;
  background-size: 14px 14px;
  background-repeat: no-repeat;
}

.betbuildnav:focus {
  border-color: rgba(40, 255, 187, 0.55);
  box-shadow:
    0 0 0 2px rgba(40, 255, 187, 0.22),
    0 3px 8px rgba(0, 0, 0, 0.28);
}

/* Wrapper added (by JS) around a selected row so the clear button can sit
   over the right edge of the select */
.betbuildrow {
  position: relative;
  display: block;
  width: 100%;
}

/* Clear (X) button — removes this selection and re-submits the form */
.betbuildclear {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  z-index: 4;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  background-color: rgba(4, 38, 29, 0.18);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304261d' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 9px 9px;
  background-repeat: no-repeat;
  transition: background-color 0.15s ease;
}

.betbuildclear:hover {
  background-color: rgba(4, 38, 29, 0.42);
}

/* Dropdown option list (when a select is opened) */
.betbuildnav option {
  background-color: #0a201c;
  color: #e6f3ee;
  font-weight: 600;
  padding: 8px 10px;
}

.betbuildnav option:checked,
.betbuildnav option:hover {
  background: #25e0a0;
  color: #04261d;
}

/* Selected/active fields — bright mint pill, dark text.
   Extra right padding leaves room for the clear (X) button + chevron. */
.betbuildnavfoc {
  background-color: #25e0a0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063a2c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  border-color: rgba(6, 58, 44, 0.25);
  color: #04261d;
  font-weight: 700;
  padding-right: 50px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30);
}

/* Greyed-out (mutually-exclusive) rows: visible but not selectable */
.betbuilddisabled {
  opacity: 0.4;
  filter: grayscale(75%);
  pointer-events: none;
}

/* Per-market left icons (light variant for dark rows) */
#buildernav {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcd6cd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6.5' width='18' height='11' rx='2.5'/%3E%3Cline x1='12' y1='6.5' x2='12' y2='17.5'/%3E%3Ccircle cx='12' cy='12' r='2.3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcd6cd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: 11px center, right 11px center;
  background-size: 16px 16px, 13px 13px;
  background-repeat: no-repeat, no-repeat;
}

#matchwinnernav {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcd6cd' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h12v3a6 6 0 0 1-12 0V4Z'/%3E%3Cpath d='M6 5H3v1a3 3 0 0 0 3 3'/%3E%3Cpath d='M18 5h3v1a3 3 0 0 1-3 3'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M12 14v4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcd6cd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: 11px center, right 11px center;
  background-size: 16px 16px, 13px 13px;
  background-repeat: no-repeat, no-repeat;
}

/* Double chance — two overlapping circles (covers two outcomes) */
#dcnav {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcd6cd' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='12' r='5.5'/%3E%3Ccircle cx='15' cy='12' r='5.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcd6cd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: 11px center, right 11px center;
  background-size: 16px 16px, 13px 13px;
  background-repeat: no-repeat, no-repeat;
}

#firstscorernav {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcd6cd' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5.5 19a6.5 6.5 0 0 1 13 0'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcd6cd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: 11px center, right 11px center;
  background-size: 16px 16px, 13px 13px;
  background-repeat: no-repeat, no-repeat;
}

/* Anytime goalscorer — football */
#anytimescorernav {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcd6cd' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5.5 19a6.5 6.5 0 0 1 13 0'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcd6cd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: 11px center, right 11px center;
  background-size: 16px 16px, 13px 13px;
  background-repeat: no-repeat, no-repeat;
}

#bttsnav {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcd6cd' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolygon points='12 7 16 10 14.5 15 9.5 15 8 10'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcd6cd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: 11px center, right 11px center;
  background-size: 16px 16px, 13px 13px;
  background-repeat: no-repeat, no-repeat;
}

#goalsnav {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcd6cd' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 9 12 4 17 9'/%3E%3Cpolyline points='7 15 12 20 17 15'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcd6cd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: 11px center, right 11px center;
  background-size: 16px 16px, 13px 13px;
  background-repeat: no-repeat, no-repeat;
}

/* Corners — corner flag */
#cornersnav {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcd6cd' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V4'/%3E%3Cpath d='M6 4l12 3-12 3z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcd6cd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: 11px center, right 11px center;
  background-size: 16px 16px, 13px 13px;
  background-repeat: no-repeat, no-repeat;
}

/* Dark-icon overrides when a row is selected (mint background) */
.betbuildnavfoc#buildernav {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063a2c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6.5' width='18' height='11' rx='2.5'/%3E%3Cline x1='12' y1='6.5' x2='12' y2='17.5'/%3E%3Ccircle cx='12' cy='12' r='2.3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063a2c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.betbuildnavfoc#matchwinnernav {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063a2c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h12v3a6 6 0 0 1-12 0V4Z'/%3E%3Cpath d='M6 5H3v1a3 3 0 0 0 3 3'/%3E%3Cpath d='M18 5h3v1a3 3 0 0 1-3 3'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M12 14v4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063a2c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.betbuildnavfoc#dcnav {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063a2c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='12' r='5.5'/%3E%3Ccircle cx='15' cy='12' r='5.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063a2c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.betbuildnavfoc#firstscorernav {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063a2c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5.5 19a6.5 6.5 0 0 1 13 0'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063a2c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.betbuildnavfoc#anytimescorernav {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063a2c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5.5 19a6.5 6.5 0 0 1 13 0'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063a2c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.betbuildnavfoc#bttsnav {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063a2c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolygon points='12 7 16 10 14.5 15 9.5 15 8 10'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063a2c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.betbuildnavfoc#goalsnav {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063a2c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 9 12 4 17 9'/%3E%3Cpolyline points='7 15 12 20 17 15'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063a2c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.betbuildnavfoc#cornersnav {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063a2c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V4'/%3E%3Cpath d='M6 4l12 3-12 3z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063a2c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* CTA */
/* Pinned near the card bottom, above the baked-in 18+/GambleAware footer, so it
   stays in a fixed position regardless of how many market rows are shown.
   Anchored to the overlay (inset:0), so left/right/bottom are measured from the
   card edges; 24px sides align it with the rows (overlay 14px + box 10px). */
.betbuildbet {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 46px;
  height: 40px;
  margin: 0;
  background: linear-gradient(180deg, #ffe84a 0%, #ffcf00 100%);
  border-radius: 10px;
  color: #000;
  text-align: center;
  font-weight: 900;
  box-shadow:
    0 5px 0 #b88900,
    0 12px 22px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.betbuildbet:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 0 #b88900,
    0 14px 24px rgba(0, 0, 0, 0.42);
}

.betbuildbet:active {
  transform: translateY(3px);
  box-shadow:
    0 2px 0 #b88900,
    0 8px 16px rgba(0, 0, 0, 0.32);
}

.betbuildbet a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  width: 100%;
  height: 100%;
  padding: 0 14px;
  box-sizing: border-box;
  color: #000;
  text-decoration: none;
}

.betbuildbet span {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Pipe divider between CTA label and price */
.betbuildsep {
  width: 2px;
  height: 22px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 2px;
  flex: 0 0 auto;
}

.betbuildbet strong {
  font-size: 20px;
  line-height: 1;
}