/* ============================================================
   TTC — MembershipPro Custom CSS v10
   REPLACE EVERYTHING with this
   ============================================================ */

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

:root {
  --ttc-navy:    #1E2832;
  --ttc-navy2:   #16202A;
  --ttc-green:   #1da060;
  --ttc-silver:  #F0F2F5;
  --ttc-silver2: #E4E8EC;
  --ttc-silver3: #D8DDE3;
  --ttc-mid:     #8A9BB0;
  --ttc-body:    #5A6878;
  --ttc-white:   #FFFFFF;
}

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

/* ── CONSTRAIN WIDTH ── */
.osm-container,
.osm-plan-1,
.osm-signup-page,
[class*="osm-container"],
[class*="osm-plan-"] {
  max-width: 760px !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(--ttc-navy) !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(--ttc-mid) !important;
  border-bottom: 1px solid var(--ttc-silver3) !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(--ttc-navy) !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(--ttc-navy) !important;
  background: var(--ttc-silver) !important;
  border: 1.5px solid var(--ttc-silver3) !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(--ttc-navy) !important;
  background: var(--ttc-white) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(30,40,50,0.07) !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='%238A9BB0' 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 — inline ── */
input[value="Login"],
input[value="LOGIN"],
input[value="login"] {
  width: auto !important;
  display: inline-block !important;
  background: var(--ttc-navy) !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;
  margin-top: 8px !important;
}

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

/* ── SUBMIT BUTTON — full width ── */
input[type="submit"] {
  display: block !important;
  width: 100% !important;
  background: var(--ttc-navy) !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 24px !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  margin-top: 8px !important;
  transition: background .2s !important;
}

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

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

.required, .star {
  color: var(--ttc-green) !important;
}

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

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

.alert {
  border-radius: 8px !important;
  border: none !important;
  font-size: 13px !important;
  padding: 14px 20px !important;
}
.alert-success {
  background: rgba(29,160,96,0.1) !important;
  color: #137a49 !important;
}
.alert-danger {
  background: rgba(214,48,48,0.08) !important;
  color: #c02828 !important;
}

hr {
  border: none !important;
  border-top: 1px solid var(--ttc-silver3) !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;
  }
}