/* ==========================================================================
   SWITA — Raklet Signup Form Custom CSS
   Matches: https://www.visitsouthwestidaho.org/join
   Target:  https://swita.raklet.com/signup/... (Bootstrap 4 markup)

   Fonts: free Google Fonts substitutes for the site's Adobe Typekit faces
          - Oswald   ≈ Refrigerator Deluxe (headings: condensed, bold, UPPERCASE)
          - Mulish   ≈ Proxima Nova        (body copy)

   HOW TO APPLY IN RAKLET:
   Admin → Settings → Customization (Appearance) → Custom CSS, then paste
   everything below. If Raklet strips the @import line, instead add this to
   the site's custom header HTML:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700&family=Oswald:wght@500;600;700&display=swap" rel="stylesheet">
   ========================================================================== */

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

/* --------------------------------------------------------------------------
   1. Brand tokens (pulled from the live visitsouthwestidaho.org theme)
   -------------------------------------------------------------------------- */
:root {
  --swita-navy:        #1d2d5a;  /* primary brand */
  --swita-blue:        #347ebb;  /* links / headings accent */
  --swita-blue-2:      #3a7fb7;  /* secondary / hover */
  --swita-blue-light:  #bbcee3;
  --swita-orange:      #c74330;  /* accent */
  --swita-ink:         #191919;  /* dark text */
  --swita-grey:        #4c4c4c;  /* body text */
  --swita-grey-light:  #7c7c7c;  /* muted */
  --swita-page-bg:     #f3f4f8;  /* site background */
  --swita-white:       #ffffff;

  --swita-font-body:    'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --swita-font-display: 'Oswald', 'Arial Narrow', sans-serif;

  --swita-radius:      3px;      /* site uses 3px on buttons */
  --swita-radius-card: 10px;
}

/* --------------------------------------------------------------------------
   2. Page + base typography
   Scoped to the signup page body class so the rest of Raklet is untouched.
   -------------------------------------------------------------------------- */
body.Signup,
body.SignupPlanDetails {
  background-color: var(--swita-page-bg) !important;
  font-family: var(--swita-font-body);
  color: var(--swita-grey);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.SignupPlanDetails .container,
.Signup .container {
  font-family: var(--swita-font-body);
}

/* Headings — Oswald, uppercase, brand blue (mirrors the site h1–h6 rule) */
.SignupPlanDetails h1, .SignupPlanDetails h2, .SignupPlanDetails h3,
.SignupPlanDetails h4, .SignupPlanDetails h5, .SignupPlanDetails h6,
.Signup h1, .Signup h2, .Signup h3, .Signup h4, .Signup h5, .Signup h6 {
  font-family: var(--swita-font-display);
  font-weight: 700;
  color: var(--swita-blue);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   3. Card container — clean white card on the soft grey page
   -------------------------------------------------------------------------- */
.Signup .card,
.SignupPlanDetails .card {
  border: none !important;
  border-radius: var(--swita-radius-card);
  box-shadow: 0 14px 40px rgba(29, 45, 90, 0.10),
              0 2px 6px rgba(29, 45, 90, 0.06) !important;
  overflow: hidden;
}

.Signup .card-header,
.SignupPlanDetails .card-header {
  background-color: var(--swita-white) !important;
  border-bottom: 3px solid var(--swita-navy) !important;
}

/* Plan name (e.g. "Standard Membership") */
.Signup .card-header .mb-0.text-dark.font-weight-bold,
.SignupPlanDetails .mb-0.text-dark.font-weight-bold {
  font-family: var(--swita-font-display);
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--swita-navy) !important;
  font-size: 1.9rem;
  line-height: 1.05;
}

/* Price line ($100 / One Time) */
.Signup .h6.text-muted,
.SignupPlanDetails .h6.text-muted {
  font-family: var(--swita-font-body);
  color: var(--swita-grey-light) !important;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   4. Form labels
   -------------------------------------------------------------------------- */
.Signup .col-form-label,
.Signup label,
.SignupPlanDetails .col-form-label,
.SignupPlanDetails label {
  color: var(--swita-ink);
  font-weight: 600;
  font-family: var(--swita-font-body);
}

/* Required asterisk in brand orange for a subtle accent */
.Signup .field-validation-valid,
.SignupPlanDetails .field-validation-valid {
  color: var(--swita-orange);
}

/* --------------------------------------------------------------------------
   5. Text inputs / selects (Bootstrap .form-control)
   -------------------------------------------------------------------------- */
.Signup .form-control,
.SignupPlanDetails .form-control {
  border: 1px solid #d4dae6;
  border-radius: var(--swita-radius);
  background-color: var(--swita-white);
  color: var(--swita-ink);
  font-family: var(--swita-font-body);
  font-size: 16px;            /* 16px prevents zoom-on-focus on iOS */
  padding: 0.625rem 0.875rem;
  height: auto;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.Signup .form-control::placeholder,
.SignupPlanDetails .form-control::placeholder {
  color: #9aa3b5;
}

.Signup .form-control:focus,
.SignupPlanDetails .form-control:focus {
  border-color: var(--swita-blue);
  box-shadow: 0 0 0 0.18rem rgba(52, 126, 187, 0.22);
  outline: none;
}

/* Input groups (e.g. search field with append button) */
.Signup .input-group-text,
.SignupPlanDetails .input-group-text {
  background-color: var(--swita-page-bg);
  border: 1px solid #d4dae6;
  color: var(--swita-grey);
}

/* --------------------------------------------------------------------------
   6. Checkboxes (terms acceptance, email opt-in, photo release)
   -------------------------------------------------------------------------- */
.Signup .custom-control-label,
.SignupPlanDetails .custom-control-label {
  color: var(--swita-grey);
  font-weight: 400;
}

.Signup .custom-control-input:checked ~ .custom-control-label::before,
.SignupPlanDetails .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--swita-navy);
  border-color: var(--swita-navy);
}

.Signup .custom-control-input:focus ~ .custom-control-label::before,
.SignupPlanDetails .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.18rem rgba(52, 126, 187, 0.22);
}

.Signup .custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
.SignupPlanDetails .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--swita-blue);
}

/* --------------------------------------------------------------------------
   7. File upload (profile photo)
   -------------------------------------------------------------------------- */
.Signup .custom-file-label,
.SignupPlanDetails .custom-file-label {
  border: 1px solid #d4dae6;
  border-radius: var(--swita-radius);
  color: var(--swita-grey-light);
  font-family: var(--swita-font-body);
}

.Signup .custom-file-label::after,
.SignupPlanDetails .custom-file-label::after {
  background-color: var(--swita-navy);
  color: var(--swita-white);
  border-radius: 0 var(--swita-radius) var(--swita-radius) 0;
}

/* --------------------------------------------------------------------------
   8. Buttons — match the site's uppercase, letter-spaced, navy style
   -------------------------------------------------------------------------- */
.Signup .btn,
.SignupPlanDetails .btn {
  font-family: var(--swita-font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-radius: var(--swita-radius);
  padding: 0.75rem 1.75rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Primary (the "Apply" / submit button) — navy, hover to blue */
.Signup .btn-primary,
.SignupPlanDetails .btn-primary {
  background-color: var(--swita-navy) !important;
  border-color: var(--swita-navy) !important;
  color: var(--swita-white) !important;
}

.Signup .btn-primary:hover,
.Signup .btn-primary:focus,
.Signup .btn-primary:active,
.SignupPlanDetails .btn-primary:hover,
.SignupPlanDetails .btn-primary:focus,
.SignupPlanDetails .btn-primary:active {
  background-color: var(--swita-blue-2) !important;
  border-color: var(--swita-blue-2) !important;
  color: var(--swita-white) !important;
  box-shadow: 0 6px 16px rgba(29, 45, 90, 0.22);
}

/* Secondary / outline buttons (Crop, Cancel, Select File, etc.) */
.Signup .btn-outline-secondary,
.SignupPlanDetails .btn-outline-secondary {
  border-color: var(--swita-navy) !important;
  color: var(--swita-navy) !important;
  background-color: transparent !important;
}

.Signup .btn-outline-secondary:hover,
.Signup .btn-outline-secondary:focus,
.SignupPlanDetails .btn-outline-secondary:hover,
.SignupPlanDetails .btn-outline-secondary:focus {
  background-color: var(--swita-navy) !important;
  border-color: var(--swita-navy) !important;
  color: var(--swita-white) !important;
}

/* --------------------------------------------------------------------------
   9. Links — "View Benefits" and other text links
   -------------------------------------------------------------------------- */
.Signup a, .Signup .text-primary,
.SignupPlanDetails a, .SignupPlanDetails .text-primary {
  color: var(--swita-blue) !important;
}

.Signup a:hover, .Signup .view-benefits-link:hover,
.SignupPlanDetails a:hover, .SignupPlanDetails .view-benefits-link:hover {
  color: var(--swita-navy) !important;
}

.Signup .view-benefits-link,
.SignupPlanDetails .view-benefits-link {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   10. Benefits list / modal
   -------------------------------------------------------------------------- */
.Signup .tarrif-card_benefits,
.SignupPlanDetails .tarrif-card_benefits {
  color: var(--swita-grey);
}

.Signup .modal-header,
.SignupPlanDetails .modal-header {
  border-bottom: 2px solid var(--swita-navy);
}

.Signup .modal-title,
.SignupPlanDetails .modal-title {
  font-family: var(--swita-font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--swita-navy);
}

.Signup .list-group-item,
.SignupPlanDetails .list-group-item {
  border-color: #e6e9f1;
  color: var(--swita-grey);
}

/* --------------------------------------------------------------------------
   11. Validation / error messaging
   -------------------------------------------------------------------------- */
.Signup .text-danger, .Signup .field-validation-error,
.SignupPlanDetails .text-danger, .SignupPlanDetails .field-validation-error {
  color: var(--swita-orange) !important;
}

.Signup .form-control.is-invalid,
.SignupPlanDetails .form-control.is-invalid {
  border-color: var(--swita-orange);
}

/* --------------------------------------------------------------------------
   12. Spinner / brand accents
   -------------------------------------------------------------------------- */
.Signup .brand-spinner,
.SignupPlanDetails .brand-spinner {
  border-top-color: var(--swita-navy) !important;
  color: var(--swita-navy) !important;
}

/* --------------------------------------------------------------------------
   13. Responsive polish
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .Signup .card-header .mb-0.text-dark.font-weight-bold,
  .SignupPlanDetails .mb-0.text-dark.font-weight-bold {
    font-size: 1.5rem;
  }

  .Signup .btn, .SignupPlanDetails .btn {
    padding: 0.7rem 1.25rem;
    letter-spacing: 0.1em;
  }

  /* Full-width primary button on small screens */
  .Signup .btn-primary.px-5,
  .SignupPlanDetails .btn-primary.px-5 {
    display: block;
    width: 100%;
  }
}
@media (width > 768px) {
    .profile-image-upload {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

hr {
    display: none;
}