/* ============================================================
   TTNZ — MembershipPro Custom CSS v1
   Paste this into Components → Membership Pro → Configuration →
   Custom CSS on the TTNZ Joomla install (separate from TTC's).
   REPLACE EVERYTHING in that field with this.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --ttnz-bg:      #0C0E12;
  --ttnz-card:    #191D25;
  --ttnz-card2:   #1F242D;
  --ttnz-border:  #2A2F3A;
  --ttnz-red:     #C8102E;
  --ttnz-red2:    #a20d25;
  --ttnz-silver:  #C7CBD1;
  --ttnz-grey:    #A3A9B3;
  --ttnz-grey-lt: #6E7480;
  --ttnz-white:   #FFFFFF;
}

body, input, select, textarea, button {
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* OSMembership's own stylesheet applies underline to links site-wide
   (not just inside its own container), overriding the header/footer
   nav's normal no-underline style. Force it back off everywhere. */
a {
  text-decoration: none !important;
}

/* ── CONSTRAIN WIDTH ── */
.osm-container,
.osm-plan-1,
.osm-signup-page,
[class*="osm-container"],
[class*="osm-plan-"] {
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  float: none !important;
  box-sizing: border-box !important;
}

h1 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: -1px !important;
  color: var(--ttnz-white) !important;
  margin-bottom: 6px !important;
  line-height: 1.15 !important;
}

h2, h3, legend {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--ttnz-grey) !important;
  border-bottom: 1px solid var(--ttnz-border) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  padding: 0 0 12px 0 !important;
  margin: 32px 0 20px !important;
  background: none !important;
  box-shadow: none !important;
}

label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--ttnz-silver) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea,
.form-control {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  color: var(--ttnz-white) !important;
  background: var(--ttnz-card) !important;
  border: 1.5px solid var(--ttnz-border) !important;
  border-radius: 6px !important;
  padding: 11px 14px !important;
  width: 100% !important;
  height: auto !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  transition: border-color .15s, background .15s !important;
  display: block !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--ttnz-red) !important;
  background: var(--ttnz-card2) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(200,16,46,0.15) !important;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A3A9B3' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 40px !important;
}

/* ── HIDE PASSWORD TOGGLE BUTTON ── */
button.input-password-toggle,
button.btn-secondary,
.input-password-toggle,
.osm-invisible-to-visitors,
.input-group-append,
.input-group-btn {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
  position: absolute !important;
}

.input-group {
  display: block !important;
  position: relative !important;
}

.input-group input[type="password"],
.input-group input[type="text"] {
  border-radius: 6px !important;
  width: 100% !important;
  display: block !important;
}

/* ── LOGIN BUTTON — fixed width, centered ── */
input[value="Login"],
input[value="LOGIN"],
input[value="login"] {
  display: block !important;
  width: auto !important;
  min-width: 220px !important;
  max-width: 320px !important;
  margin: 8px auto 0 !important;
  text-align: center !important;
  background: var(--ttnz-red) !important;
  color: #fff !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 13px 36px !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background .2s !important;
}

input[value="Login"]:hover {
  background: var(--ttnz-red2) !important;
}

/* ── SUBMIT BUTTON (Pay and Enrol) — fixed width, centered ── */
input[type="submit"] {
  display: block !important;
  width: auto !important;
  min-width: 260px !important;
  max-width: 360px !important;
  margin: 8px auto 0 !important;
  text-align: center !important;
  background: var(--ttnz-red) !important;
  color: #fff !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 16px 32px !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background .2s !important;
}

input[type="submit"]:hover {
  background: var(--ttnz-red2) !important;
}

.form-group, .control-group {
  margin-bottom: 18px !important;
}

/* ── PAYMENT METHOD LOGO (e.g. Stripe) — give it a light backdrop
   so the logo reads clearly instead of disappearing into the dark
   background it wasn't designed for. Scoped narrowly to the logo
   itself so it doesn't catch loading spinners or other icons. ── */
.osm-container img[alt*="stripe" i],
.osm-container img[src*="stripe" i],
.osm-plan-1 img[alt*="stripe" i],
.osm-plan-1 img[src*="stripe" i] {
  background: #fff !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  display: inline-block !important;
}

.required, .star {
  color: var(--ttnz-red) !important;
}

.help-block, .text-danger, .has-error .help-block, .invalid-feedback {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #ff6b7a !important;
  margin-top: 5px !important;
  display: block !important;
}

.has-error .form-control, input.error {
  border-color: #ff6b7a !important;
}

.alert {
  border-radius: 8px !important;
  border: none !important;
  font-size: 13px !important;
  padding: 14px 20px !important;
}
.alert-success {
  background: rgba(61,186,111,0.12) !important;
  color: #6ee7a8 !important;
}
.alert-danger {
  background: rgba(200,16,46,0.12) !important;
  color: #ff8a94 !important;
}

hr {
  border: none !important;
  border-top: 1px solid var(--ttnz-border) !important;
  margin: 24px 0 !important;
}

input[type="checkbox"] {
  display: none !important;
}

@media (max-width: 640px) {
  h1 { font-size: 22px !important; }
  .osm-container, .osm-plan-1 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ── USERNAME LABEL — signup form only ── */
#osm-signup-page label[for="username1-lbl"]::after {
  content: " (lowercase only)" !important;
  font-weight: normal !important;
  text-transform: none !important;
}