/************************************
  Sound Diving — Membership Pro (LIGHT THEME)
  Everything on WHITE with blue accents
************************************/

/* Base text & box model */
.osmembership, .osm-container, .osm, .oms-container, .oms-form {
  font-family: Arial, Helvetica, sans-serif;
  color: #0F1720; /* dark text */
  background: transparent;
}
.osmembership *, .osm-container * { box-sizing: border-box; }

/* Headings & labels */
.osmembership h1, .osmembership h2, .osmembership h3,
.osm-container h1, .osm-container h2, .osm-container h3 { color: #0F1720; }
.osmembership label, .osm-container label { color: #0F1720; font-weight: 600; }

/* Plans grid (cards on white) */
.osmembership .osm-plans, .osm-container .osm-plans {
  display: grid; gap: 18px; grid-template-columns: 1fr; margin: 12px 0 24px;
}
@media (min-width:680px){ .osmembership .osm-plans{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width:980px){ .osmembership .osm-plans{ grid-template-columns: repeat(3,minmax(0,1fr)); } }

.osmembership .osm-plan, .osm-container .osm-plan, .osm .osm-plan {
  background: #ffffff; /* WHITE! */
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 18px 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.osmembership .osm-plan:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  border-color: rgba(36,195,222,0.35);
}
.osmembership .osm-plan .osm-title,
.osmembership .osm-plan h3, .osmembership .osm-plan h4 { margin: 0 0 8px; color: #0F1720; }
.osmembership .osm-plan .osm-price { color: #24C3DE; font-weight: 800; font-size: 1.35rem; margin-bottom: 10px; }
.osmembership .osm-plan .osm-desc { color: #1f2937; opacity: .95; line-height: 1.6; }

/* Buttons (blue accent) */
.osmembership .btn, .osmembership .button, .osmembership .osm-btn,
.osm .btn, .osm .button {
  background: #24C3DE;
  color: #0F1720; /* readable on blue */
  border: 0;
  border-radius: 12px;
  font-weight: 700;
  padding: 10px 16px;
  line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.osmembership .btn:hover, .osmembership .button:hover, .osmembership .osm-btn:hover {
  background: #1BA6BF;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(27,166,191,.25);
}

/* Forms — light inputs on white */
.osmembership form input[type="text"],
.osmembership form input[type="email"],
.osmembership form input[type="password"],
.osmembership form input[type="tel"],
.osmembership form input[type="number"],
.osmembership form select,
.osmembership form textarea,
.osm-container form input[type="text"],
.osm-container form select,
.osm-container form textarea {
  width: 100%; max-width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 10px;
  background: #ffffff; /* WHITE */
  color: #0F1720;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  overflow-wrap: anywhere;
}
.osmembership form input:focus,
.osmembership form select:focus,
.osmembership form textarea:focus {
  border-color: #24C3DE;
  box-shadow: 0 0 0 3px rgba(36,195,222,0.18);
}
.osmembership .form-group, .osm-container .form-group, .osmembership .control-group { margin-bottom: 14px; }

/* Address line overflow — responsive grid + min-width fix */
.osmembership .osm-address-grid, .osm-container .osm-address-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width:680px){
  .osmembership .osm-address-grid {
    grid-template-columns: minmax(0,2fr) minmax(0,1.2fr) minmax(0,1fr);
  }
}
/* Auto-apply if no wrapper present */
.osmembership .osm-address-auto { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width:680px){
  .osmembership .osm-address-auto {
    grid-template-columns: minmax(0,2fr) minmax(0,1.2fr) minmax(0,1fr);
  }
}
/* prevent pushing outside */
.osmembership input[name*="address"],
.osmembership input[name*="street"],
.osmembership input[name*="city"],
.osmembership input[name*="postal"],
.osmembership input[name*="zip"],
.osmembership input[name*="postcode"],
.osmembership input[name*="county"],
.osmembership input[name*="state"] { min-width: 0; }

/* Radios & checkboxes */
.osmembership .radio, .osmembership .checkbox,
.osmembership input[type="checkbox"] + label,
.osmembership input[type="radio"] + label { display: flex; gap: 10px; align-items: center; }

/* Alerts / validation on white */
.osmembership .alert, .osmembership .text-danger, .osmembership .invalid, .osmembership .error {
  border-radius: 10px;
}
.osmembership .alert-warning { background: #FFF8E1; color: #8A6D00; border: 1px solid #F3DE9B; }
.osmembership .alert-success { background: #E8F5E9; color: #1B5E20; border: 1px solid #B7E1BC; }
.osmembership .alert-danger, .osmembership .text-danger { background: #FDECEE; color: #8A0A1F; border: 1px solid #F5B7BF; padding: 8px 10px; }

/* Tables (history/invoices) on white */
.osmembership table {
  width: 100%; border-collapse: collapse; background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; overflow: hidden;
}
.osmembership table th, .osmembership table td {
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 10px 12px; color: #0F1720;
}
.osmembership table th {
  background: #F7FAFC; color: #0F1720; font-weight: 700;
}
.osmembership table tr:hover td { background: #F8FEFF; }

/* Utility nudges */
.osmembership .row, .osm-container .row { gap: 12px 18px; }
.osmembership img { max-width: 100%; height: auto; border-radius: 10px; }

/* Kill any leftover dark backgrounds from template or prior CSS */
.osmembership [style*="background: rgb(15, 23, 32)"],
.osmembership [style*="#0f3f52"],
.osmembership [style*="#114d64"] { background: #ffffff !important; }
/* === Agreement checkboxes alignment fix (Privacy / Newsletter / Terms) === */

/* 1) Neutralize legacy floats/offsets on checkbox rows */
.osmembership .checkbox,
.osmembership .radio,
.osmembership .controls .checkbox,
.osmembership .form-group .checkbox,
.osmembership .control-group .checkbox {
  float: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  position: static !important;
}

/* 2) Make each checkbox row a clean flex line */
.osmembership .checkbox,
.osmembership input[type="checkbox"] + label {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
}

/* 3) Keep the tick box tight; let the label wrap */
.osmembership .checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 3px 0 0 0; /* align with first line of label text */
}
.osmembership .checkbox label,
.osmembership input[type="checkbox"] + label {
  flex: 1 1 auto;
  margin: 0;
  color: #0F1720;
  line-height: 1.45;
  cursor: pointer;
}

/* 4) If those three fields use predictable names, snap them for good measure */
.osmembership input[type="checkbox"][name*="privacy"],
.osmembership input[type="checkbox"][name*="newsletter"],
.osmembership input[type="checkbox"][name*="term"],
.osmembership input[type="checkbox"][name*="condition"] {
  /* ensure they never inherit weird offsets */
  margin-left: 0 !important;
}

/* 5) Some templates add left gutters to .controls — cancel just for checkboxes */
.osmembership .controls:has(input[type="checkbox"]) {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* 6) Compact help text beneath */
.osmembership .checkbox .help-block,
.osmembership .checkbox small {
  display: block;
  margin-top: 6px;
  color: #4b5563;
}
/* === Newsletter + Terms alignment catch‑all === */

/* 1) Normalize the common alt wrappers */
.osmembership .form-check,
.osmembership .form-check-inline,
.osmembership .checkbox-inline,
.osmembership .control-group .controls,
.osmembership .control-group .form-check {
  float: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* 2) Flex rows for all checkbox styles (including inline) */
.osmembership .form-check,
.osmembership .checkbox-inline,
.osmembership .form-check-inline {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
}

/* 3) Inputs themselves — cancel offsets */
.osmembership input[type="checkbox"][name*="newsletter"],
.osmembership input[type="checkbox"][name*="news"],
.osmembership input[type="checkbox"][name*="term"],
.osmembership input[type="checkbox"][name*="condition"],
.osmembership input[type="checkbox"][id*="newsletter"],
.osmembership input[type="checkbox"][id*="term"],
.osmembership input[type="checkbox"][id*="condition"] {
  float: none !important;
  margin: 3px 0 0 0 !important; /* top-align with first line */
  flex: 0 0 auto;
}

/* 4) Labels next to those inputs — let them wrap nicely */
.osmembership label[for*="newsletter"],
.osmembership label[for*="news"],
.osmembership label[for*="term"],
.osmembership label[for*="condition"],
.osmembership .form-check-label {
  margin: 0 !important;
  color: #0F1720;
  line-height: 1.45;
  flex: 1 1 auto;      /* take remaining width */
  max-width: 100%;
}

/* 5) When markup is <label><input>Text…</label> (input inside label) */
.osmembership .form-check > label,
.osmembership .checkbox-inline > label,
.osmembership .checkbox > label {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin: 0 !important;
}
.osmembership .form-check > label > input[type="checkbox"],
.osmembership .checkbox-inline > label > input[type="checkbox"],
.osmembership .checkbox > label > input[type="checkbox"] {
  margin: 3px 0 0 0 !important;
  flex: 0 0 auto;
}

/* 6) Kill any left gutter some templates add on .controls just for these rows */
.osmembership .control-group .controls input[type="checkbox"][name*="newsletter"],
.osmembership .control-group .controls input[type="checkbox"][name*="term"],
.osmembership .control-group .controls input[type="checkbox"][name*="condition"] {
  margin-left: 0 !important;
}

/* 7) Tidy help text under the checkboxes */
.osmembership .form-check .help-block,
.osmembership .form-check small,
.osmembership .checkbox-inline .help-block {
  display: block;
  margin-top: 6px;
  color: #4b5563;
}