:root {
  --accent: #e50914;            /* Netflix crvena */
  --accent-weak: rgba(229, 9, 20, 0.15);
  --surface: transparent;       /* providno */
  --border: var(--bs-gray-800);
}

.join-box { background: var(--surface); }
.join-box__header { color: var(--accent); display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border); margin:-16px -16px 14px; }
.join-box__header .title { font-weight:700; text-transform:uppercase; letter-spacing:.4px; font-size:12px; }

.join-box__section { margin-bottom:16px; }
.section-title { display:flex; align-items:center; gap:8px; color:#fff; font-weight:700; font-size:12px; text-transform:uppercase; margin-bottom:10px; }
.section-title .index { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; color:var(--accent); font-size:11px; }

/* Inputi sa ikonama */
.input-with-icon { position:relative; }
.input-with-icon > i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#6b7280; opacity:.9; }
.input-with-icon .toggle-pass { position:absolute; right:10px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:#6b7280; }

/* Bele kontrole u join box-u – jača specifičnost + !important zbog data-bs-theme="dark" */
.join-box .form-control,
html[data-bs-theme="dark"] .join-box .form-control,
html[data-bs-theme] .join-box .form-control {
  height:48px;
  padding-left:38px;
  background-color:#ffffff !important;
  color:#111111 !important;
  border:1px solid #d0d5dd !important; /* svetlija bordura da deluje "belo" */
  box-shadow:none;
}
.join-box input[type="email"].form-control,
.join-box input[type="password"].form-control { caret-color:#111111; }

/* Fokus */
.join-box .form-control:focus {
  background-color:#ffffff !important;
  color:#111111 !important;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 2px var(--accent-weak) !important;
}

/* Placeholder bledo sivi */
.join-box .form-control::placeholder { color:#9aa3af; opacity:1; }
.join-box .form-control::-ms-input-placeholder { color:#9aa3af; }
.join-box .form-control:-ms-input-placeholder  { color:#9aa3af; }

/* Safari/Chrome autofill – izbledi žuto i zadrži crni tekst */
.join-box input.form-control:-webkit-autofill,
.join-box input.form-control:-webkit-autofill:hover,
.join-box input.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color:#111111 !important;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow:0 0 0px 1000px #ffffff inset !important;
}

/* Plan kartice */
.join-box .plan-card {
  display:block;
  border-radius:.5rem;
  overflow:hidden;
  background:#ffffff !important;
  color:#111111 !important;
  cursor:pointer;
}
.join-box .plan-card + .plan-card { margin-top:8px; }
.join-box .plan-card__input { display:none; }
.join-box .plan-card__body { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; gap:12px; }
.join-box .plan-card__title { font-weight:700; font-size:16px; color:#111111 !important; }
.join-box .plan-card__sub { font-size:12px; color:#6b7280 !important; }
.join-box .plan-card .amount { font-size:28px; line-height:1; font-weight:800; color:#111111 !important; }
.join-box .plan-card .currency,
.join-box .plan-card .decimals { font-size:16px; opacity:.9; color:#111111 !important; }
.join-box .plan-card .per { font-size:12px; color:#6b7280 !important; margin-top:2px; text-align:center;}

/* Hover i checked stanje u crvenoj temi – ostaju beli, samo crveni akcenti */
.join-box .plan-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-weak) inset;
  background:#f7c9c9!important;
  transition: all .2s ease-in-out;
}
/* Aktivna (checked) kartica: crvena pozadina + beli tekst */
.join-box .plan-card:has(.plan-card__input:checked),
.join-box .plan-card.is-active {
  background: var(--accent) !important;
  color: #fff !important;
}
.join-box .plan-card:has(.plan-card__input:checked) .plan-card__title,
.join-box .plan-card:has(.plan-card__input:checked) .plan-card__sub,
.join-box .plan-card:has(.plan-card__input:checked) .amount,
.join-box .plan-card:has(.plan-card__input:checked) .currency,
.join-box .plan-card:has(.plan-card__input:checked) .decimals,
.join-box .plan-card:has(.plan-card__input:checked) .per,
.join-box .plan-card.is-active .plan-card__title,
.join-box .plan-card.is-active .plan-card__sub,
.join-box .plan-card.is-active .amount,
.join-box .plan-card.is-active .currency,
.join-box .plan-card.is-active .decimals,
.join-box .plan-card.is-active .per {
  color: #fff !important;
}

/* Highlight varijanta i dalje crveni akcenat, ali na beloj pozadini */
.join-box .plan-card--highlight {
  background:#ffffff !important;
  border:2px solid var(--accent) !important;
}

/* Payment metode */
.join-box .payment-methods { display:grid; grid-template-columns:1fr; gap:8px; }
.join-box .pm-btn {
  width:100%;
  border:1px solid #d0d5dd !important;
  background:#ffffff !important;
  color:#111111 !important;
  padding:10px 12px;
  border-radius:.5rem;
  display:flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none;
}
.join-box .pm-btn:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-weak) inset;
}
.join-box .pm-btn--dialxs { border-color: var(--accent) !important; }