/*
 * Tapa Fan Teams — favourite-team strip, picker modal and personalised product row.
 *
 * The theme styles bare <button> elements globally (uppercase text, fixed line-height, shrinking
 * flex children), so the rules below reset those properties explicitly wherever a button is used
 * as a layout container. `!important` appears only on the handful of properties the theme wins.
 */

.tapa-teams-bar,
.tapa-modal,
.tapa-nfy {
  --tapa-accent: #0a7d55;
  --tapa-heart: #e0182d;
  --tapa-line: #e6e8ea;
  --tapa-muted: #6b7680;
  /* Matches the site's Elementor content width so the blocks line up with every other section. */
  --tapa-content: 1140px;
}

/*
 * Dropped into an Elementor container via the shortcode, the container already applies the site
 * width and gutters — so the block must not add a second set or it ends up narrower than its
 * neighbours.
 */
.elementor-widget-shortcode .tapa-nfy,
.elementor-widget-shortcode .tapa-teams-bar__inner {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ===================================================================== *
 * Shared: tiles and cards built on <button>
 * ================================================================== */

.tapa-tile,
.tapa-card,
.tapa-tab,
.tapa-teams-bar__all,
.tapa-modal__save,
.tapa-modal__close,
.tapa-slot__remove {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: normal;
  height: auto !important;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  color: inherit;
}

/* Logos must never be squeezed by the flex column they sit in. */
.tapa-avatar,
.tapa-tile__badge,
.tapa-slot > img,
.tapa-slot > .tapa-avatar {
  flex: 0 0 auto !important;
}

/* ===================================================================== *
 * "Shop Your Teams" strip
 * ================================================================== */

.tapa-teams-bar {
  border-bottom: 1px solid var(--tapa-line);
  padding: 16px 0;
  background: #fff;
}

.tapa-teams-bar__inner {
  display: flex;
  align-items: center;
  gap: 26px;
  max-width: var(--tapa-content);
  margin: 0 auto;
  padding: 0 20px;
}

.tapa-teams-bar__head { flex: 0 0 auto; }

.tapa-teams-bar__title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: none;
}

.tapa-teams-bar__all {
  margin-top: 3px;
  font-size: 13px;
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tapa-teams-bar__all:hover { color: var(--tapa-heart); }

.tapa-teams-bar__scroller {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding: 4px 0;
  min-width: 0;
}

.tapa-teams-bar__scroller::-webkit-scrollbar { display: none; }

.tapa-teams-bar__mine {
  display: flex;
  gap: 4px;
  padding-right: 16px;
  margin-right: 12px;
  border-right: 1px solid var(--tapa-line);
}

.tapa-teams-bar__leagues { display: flex; gap: 4px; }

/* --- tiles ------------------------------------------------------------ */

.tapa-tile {
  flex: 0 0 auto;
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: #222;
  padding: 4px 2px;
}

.tapa-tile__avatar {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
}

.tapa-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  /* Logos, not photography — contain keeps crests whole instead of cropping them. */
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--tapa-line);
  padding: 5px;
  display: block;
  box-sizing: border-box;
}

.tapa-avatar--text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--tapa-muted);
  background: #f2f4f6;
}

.tapa-tile__heart {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}

.tapa-tile__heart svg { width: 11px; height: 11px; fill: var(--tapa-heart); }

.tapa-tile__label {
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-transform: none;
}

.tapa-tile__badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f2f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #1c2b39;
  box-sizing: border-box;
  transition: background .15s ease, box-shadow .15s ease;
}

.tapa-tile:hover .tapa-tile__badge { background: #e8ebee; box-shadow: 0 0 0 2px var(--tapa-accent); }
.tapa-tile:hover .tapa-avatar { box-shadow: 0 0 0 2px var(--tapa-accent); }

/* ===================================================================== *
 * Picker modal
 * ================================================================== */

body.tapa-modal-open { overflow: hidden; }

.tapa-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.tapa-modal[hidden] { display: none; }

.tapa-modal__panel {
  position: relative;
  width: 100%;
  max-width: 860px;
  max-height: calc(100vh - 48px);
  background: #fff;
  border-radius: 10px;
  outline: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tapa-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 30px;
  height: 30px !important;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.tapa-modal__close:hover { background: #f2f4f6; color: #111; }

.tapa-modal__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 24px 28px 0;
}

.tapa-modal__title {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  text-transform: none;
}

/* A plain underlined link read as decoration next to the title, so Save is a real button. */
.tapa-modal__save {
  margin-left: auto;
  padding: 9px 22px;
  border-radius: 999px;
  background: var(--tapa-accent);
  color: #fff;
  font-size: 14px;
  /* The theme ships style-font-weight-500.css, which forces 500 with !important across a broad
     selector list; a primary CTA needs to out-weigh that. */
  font-weight: 700 !important;
  letter-spacing: .01em;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(10, 125, 85, .3);
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}

.tapa-modal__save:hover {
  background: #08633f;
  color: #fff;
  box-shadow: 0 3px 8px rgba(10, 125, 85, .35);
}

.tapa-modal__save:active { transform: translateY(1px); }

.tapa-modal__save:focus-visible { outline: 2px solid #0a7d55; outline-offset: 3px; }

.tapa-modal__sub {
  margin: 0;
  padding: 20px 28px 10px;
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
}

.tapa-modal__error { color: #c0392b; padding: 24px 28px; }

/* --- chosen-team slots ------------------------------------------------ */

.tapa-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 28px 4px;
}

.tapa-slot {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: block;
  flex: 0 0 auto;
}

.tapa-slot .tapa-avatar { width: 52px; height: 52px; }

.tapa-slot--empty {
  border: 1px dashed #cfd4d8;
  background: none;
}

.tapa-slot__remove {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 19px;
  height: 19px !important;
  border: 1px solid var(--tapa-line);
  border-radius: 50%;
  background: #fff;
  font-size: 12px;
  line-height: 1;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tapa-slot__remove:hover { background: var(--tapa-heart); border-color: var(--tapa-heart); color: #fff; }

/* --- league tabs ------------------------------------------------------ */

.tapa-tabs {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--tapa-line);
  padding: 0 28px;
  flex: 0 0 auto;
}

.tapa-tabs::-webkit-scrollbar { display: none; }

.tapa-tab {
  flex: 0 0 auto;
  padding: 8px 0 12px;
  font-size: 14px;
  color: var(--tapa-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.tapa-tab:hover { color: #111; }
.tapa-tab.is-active { color: #111; font-weight: 700; border-bottom-color: #111; }

/* --- team grid -------------------------------------------------------- */

.tapa-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 28px 26px;
  -webkit-overflow-scrolling: touch;
}

.tapa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.tapa-card {
  position: relative;
  border: 1px solid var(--tapa-line);
  border-radius: 8px;
  background: #fff;
  padding: 16px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  text-align: center;
  min-height: 118px;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.tapa-card:hover { border-color: #b9c0c6; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.tapa-card.is-picked { border-color: var(--tapa-heart); }

.tapa-avatar--card {
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  background: none;
}

.tapa-card__name {
  font-size: 12px;
  line-height: 1.35;
  color: #1c2b39;
  text-transform: none;
  word-break: break-word;
}

.tapa-card__heart {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.tapa-card__heart svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #9aa5b1;
  stroke-width: 1.8;
}

.tapa-card.is-picked .tapa-card__heart svg { fill: var(--tapa-heart); stroke: var(--tapa-heart); }

/* ===================================================================== *
 * "New For You"
 * ================================================================== */

.tapa-nfy {
  max-width: var(--tapa-content);
  margin: 32px auto;
  padding: 0 20px;
}

.tapa-nfy[hidden] { display: none; }

.tapa-nfy__title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
  text-transform: none;
}

.tapa-nfy__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 1fr);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}

.tapa-prod {
  scroll-snap-align: start;
  text-decoration: none;
  color: #222;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.tapa-prod__media {
  position: relative;
  display: block;
  background: #f5f6f7;
  border-radius: 6px;
  overflow: hidden;
}

/* --- data-driven badges ------------------------------------------------ */

.tapa-prod__badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  z-index: 1;
  pointer-events: none;
}

.tapa-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700 !important; /* same site-wide 500 override as the Save button */
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.tapa-badge--best { background: #b3341f; }
.tapa-badge--new  { background: #1c5c8c; }

.tapa-prod__media img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .3s ease;
}

.tapa-prod:hover .tapa-prod__media img { transform: scale(1.04); }

.tapa-prod__title {
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tapa-prod__price { font-size: 15px; font-weight: 600; }
.tapa-prod__price del { font-weight: 400; opacity: .55; margin-right: 5px; }
.tapa-prod__team { font-size: 12px; color: var(--tapa-accent); }

/* ===================================================================== *
 * Small screens
 * ================================================================== */

@media (max-width: 767px) {
  .tapa-teams-bar__inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .tapa-teams-bar__head { display: flex; align-items: baseline; gap: 12px; }
  .tapa-teams-bar__title { font-size: 17px; }

  .tapa-modal { padding: 0; }
  .tapa-modal__panel { border-radius: 0; max-height: 100vh; height: 100vh; }
  .tapa-modal__head,
  .tapa-modal__sub,
  .tapa-slots,
  .tapa-tabs,
  .tapa-modal__body { padding-left: 16px; padding-right: 16px; }

  .tapa-grid { grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); }
  .tapa-card { min-height: 108px; padding: 14px 6px 10px; }
  .tapa-avatar--card { width: 38px; height: 38px; }
}