/* =========================================================
   BWS Membership — front-end styles
   Every size/colour below was measured from the native-resolution
   screenshots (1296px wide = CSS px) and cross-checked with the live
   flatsome-child stylesheet. Scoped under .bws; Flatsome header/footer untouched.
   ========================================================= */

:root {
  --bws-green: #0F5400;                    /* primary buttons, links, footer bar */
  --bws-green-hover: #113709;
  --bws-green-nav: #1f6206;                /* Flatsome primary: nav bar, small default buttons, green headings */
  --bws-green-text: #1f6206;               /* green text values (Active, General Member, KYC Updated) */
  --bws-green-10: rgba(15, 84, 0, .10);    /* secondary button bg, verify box, remove button */
  --bws-green-05: rgba(15, 84, 0, .05);
  --bws-sage: #CFD2A6;                     /* Back / Donate Now pill */
  --bws-olive: #B8BF5B;                    /* password hint pill */
  --bws-cream: #fcfdec;                    /* Parent's Details block */
  --bws-text: #000;                        /* labels */
  --bws-heading: #333;                     /* card / modal headings */
  --bws-value: #222;                       /* values, body copy */
  --bws-input-text: #2B3241;
  --bws-placeholder: #757575;
  --bws-muted: #666666;                    /* helper text, dl keys, checkbox labels */
  --bws-border: #B8B8B8;                   /* inputs */
  --bws-card-border: #DADADA;              /* cards */
  --bws-readonly: #F0F0F0;
  --bws-red: #FF0000;
  --bws-font: "Nunito Sans", sans-serif;
  --bws-heading-font: Roboto, sans-serif;  /* Flatsome heading font — used on the live screens */
}

/* Flatsome page-title / featured-image banner (the "Published … 2006 × 1687" bar). */
body.bws-page .page-title,
body.bws-page .featured-title,
body.bws-page .page-title-bg,
body.bws-page .page-title-inner,
body.bws-page .page-header,
body.bws-page .entry-header,
body.bws-page #fancy_title { display: none !important; }
/* Child style.css sets .container { display:flex; text-align:center } — do not let that reflow membership screens. */
body.bws-page #main.bws,
body.bws-page #main.bws .bws-container { display: block !important; text-align: left; height: auto; justify-content: flex-start; flex-wrap: nowrap; }
body.bws-page #main.bws .row { display: block; height: auto; }

.bws { font-family: var(--bws-font); color: var(--bws-value); font-size: 18px; line-height: 1.5; }
.bws *, .bws *::before, .bws *::after { box-sizing: border-box; }
.bws a { color: var(--bws-green); transition: color .3s; }
.bws a:hover { color: var(--bws-green-hover); }
.bws h1, .bws h2, .bws h3, .bws h4 { font-family: var(--bws-heading-font); color: var(--bws-heading); margin-top: 0; }
.bws .bws-container { max-width: 1250px; margin: 0 auto; padding: 0 15px; }
.bws .bws-section { padding: 100px 0 90px; }
.bws .bws-center { text-align: center; }
.bws .bws-muted { color: var(--bws-muted); }
.bws .bws-required { color: var(--bws-red); }
.bws .bws-hidden { display: none !important; }
.bws .bws-note-red { color: var(--bws-red); font-size: 14px; line-height: 18px; }
.bws .bws-note-green { color: var(--bws-green); }
@media (max-width: 767px) { .bws .bws-section { padding: 50px 0; } .bws { font-size: 16px; } }

/* ---------- Hero banner ("Be A General Member") ---------- */
.bws-hero {
  position: relative; min-height: 449px; display: flex; align-items: center; justify-content: center;
  background: #4a4a4a center/cover no-repeat; color: #fff; text-align: center; padding: 70px 20px; z-index: 1;
}
.bws-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.6); z-index: -1; }
.bws-hero h1 { color: #fff; font-family: var(--bws-heading-font); font-size: 60px; font-weight: 700; line-height: 1.2; margin: 0; letter-spacing: -.5px; }
.bws-hero p { color: #fff; font-size: 20px; margin: 13px 0 0; }
.bws-hero.bws-hero--small { min-height: 200px; padding: 30px 20px; }
.bws-hero.bws-hero--small h1 { font-size: 22px; font-weight: 400; margin: 0; }
.bws-hero .bws-hero-pill {
  display: block; margin: 40px auto 0; max-width: 750px; background: var(--bws-sage); color: var(--bws-green) !important;
  font-family: var(--bws-font); font-weight: 700; font-size: 16px; line-height: 20px; padding: 16px 30px; border-radius: 60px; text-decoration: none; transition: all .4s;
}
.bws-hero .bws-hero-pill:hover { background: var(--bws-green-hover); color: #fff !important; }
@media (max-width: 991px) { .bws-hero h1 { font-size: 46px; } }
@media (max-width: 767px) { .bws-hero { min-height: 300px; } .bws-hero h1 { font-size: 32px; } }

/* ---------- Buttons (60px pills) ----------
   Hard resets: Flatsome styles bare <button> with uppercase, letter-spacing,
   margins, 0 radius and a box-shadow — every one of those is neutralised here. */
.bws .bws-btn, .bws button.bws-btn, .bws a.bws-btn, .bws .bws-upload-btn, .bws button.bws-upload-btn, .bws .bws-swal-btn, .bws button.bws-eye {
  text-transform: none; letter-spacing: 0; margin: 0; min-height: 0; max-width: 100%; box-shadow: none; text-shadow: none;
  vertical-align: middle; -webkit-appearance: none; appearance: none; background-image: none; outline: none;
}
.bws .bws-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 60px; padding: 0 30px; border-radius: 60px; border: 0; cursor: pointer;
  font-family: var(--bws-font); font-weight: 700; font-size: 18px; line-height: 1.2;
  text-decoration: none !important; transition: all .4s; position: relative; white-space: nowrap;
}
.bws .bws-btn:hover, .bws .bws-btn:focus { box-shadow: none; opacity: 1; transform: none; }
.bws .bws-btn--primary { background: var(--bws-green); color: #fff !important; }
.bws .bws-btn--primary:hover { background: var(--bws-green-hover); color: #fff !important; }
.bws .bws-btn--soft { background: var(--bws-green-10); color: var(--bws-green) !important; }
.bws .bws-btn--soft:hover { background: var(--bws-green); color: #fff !important; }
.bws .bws-btn--sage { background: var(--bws-sage); color: var(--bws-green) !important; }
.bws .bws-btn--sage:hover { background: var(--bws-green-hover); color: #fff !important; }
.bws .bws-btn--block { width: 100%; }
.bws .bws-btn--upper { text-transform: uppercase; }
.bws .bws-btn--square { border-radius: 10px; }
/* Flatsome-default small button (bank page "Click Here") */
.bws .bws-btn--small { height: 36px; padding: 0 16px; font-family: var(--bws-heading-font); font-size: 15px; font-weight: 500; border-radius: 3px; background: var(--bws-green-nav); color: #fff !important; }
.bws .bws-btn--small:hover { background: var(--bws-green); }
.bws .bws-btn[disabled] { opacity: .6; cursor: not-allowed; }
.bws .bws-btn--danger { background: var(--bws-red); color: #fff !important; }
@media (max-width: 767px) { .bws .bws-btn { height: 54px; font-size: 16px; padding: 0 24px; } }

/* ---------- Form controls (60px inputs, 10px radius) ----------
   Flatsome gives inputs an inset box-shadow, 1em bottom margin, 0 radius and
   a 2.5em height — all overridden below with higher specificity. */
.bws .bws-field { margin-bottom: 30px; position: relative; width: 100%; }
.bws .bws-field label, .bws .bws-label { display: block; font-size: 18px; line-height: 24px; margin: 0 0 8px; color: var(--bws-text); font-weight: 400; }
.bws input.bws-input, .bws select.bws-select, .bws textarea.bws-textarea, .bws .bws-input, .bws .bws-select, .bws .bws-textarea {
  width: 100%; height: 60px; max-width: 100%; padding: 14px 20px; font-family: var(--bws-font); font-size: 18px; line-height: 1.4; color: var(--bws-input-text);
  border: 1px solid var(--bws-border); border-radius: 10px; background-color: #fff; box-shadow: none; margin: 0; appearance: none; -webkit-appearance: none; transition: border-color .2s;
}
.bws .bws-textarea { height: auto; min-height: 140px; }
.bws .bws-input:focus, .bws .bws-select:focus, .bws .bws-textarea:focus { outline: none; border-color: var(--bws-green); box-shadow: none; }
.bws .bws-input[readonly], .bws .bws-input[disabled] { background: var(--bws-readonly); color: var(--bws-muted); cursor: default; border-color: #d6d6d6; }
.bws .bws-input::placeholder, .bws .bws-textarea::placeholder { color: var(--bws-placeholder); opacity: 1; }
.bws .bws-select { -webkit-appearance: none; padding-right: 48px; color: var(--bws-input-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 20px center; }
.bws .bws-input-wrap { position: relative; overflow: visible; isolation: isolate; }
.bws .bws-input-wrap .bws-input { padding-right: 52px; position: relative; z-index: 1; }
.bws .bws-eye, .bws form button.bws-eye, .bws .bws-input-wrap > .bws-eye {
  position: absolute !important; right: 10px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent !important; cursor: pointer; color: #111;
  padding: 8px; line-height: 0 !important; z-index: 6;
  width: auto !important; max-width: 44px !important; height: auto !important;
  min-width: 36px; min-height: 36px; margin: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  pointer-events: auto; box-shadow: none !important; text-transform: none; letter-spacing: 0; border-radius: 0;
}
.bws .bws-eye svg { display: block; pointer-events: none; }
.bws .bws-hint { display: inline-block; margin-left: 8px; background: var(--bws-olive); color: var(--bws-value); font-size: 14px; font-weight: 600; line-height: 22px; padding: 0 12px; border-radius: 12px; vertical-align: middle; }
@media (max-width: 767px) { .bws .bws-field label, .bws .bws-label { font-size: 16px; } .bws .bws-input, .bws .bws-select { height: 54px; font-size: 16px; } .bws .bws-field { margin-bottom: 22px; } }

/* radios & checkboxes: the native input is hidden and the 20px box is drawn on
   the sibling <i class="bws-box">. Flatsome styles bare <label>, <input> and
   <i> globally (block labels, auto-width inputs, icon fonts), so the geometry
   below is pinned with !important — otherwise the box collapses into a thin
   green bar. Spacing is a margin on the box (not flex gap) so it survives even
   if the label loses its flex display. */
.bws .bws-choices { display: flex; flex-wrap: wrap; gap: 12px 30px; }
.bws .bws-choice, .bws label.bws-choice { display: inline-flex !important; align-items: center; font-size: 18px; line-height: 24px; cursor: pointer; color: var(--bws-muted); position: relative; margin: 0 !important; padding: 0; font-weight: 400; width: auto; max-width: 100%; text-transform: none; }
.bws .bws-check, .bws label.bws-check { display: flex !important; align-items: flex-start; font-size: 18px; line-height: 24px; margin: 0 0 22px !important; padding: 0; color: var(--bws-muted); cursor: pointer; position: relative; font-weight: 400; width: 100%; text-transform: none; }
.bws .bws-choice input, .bws .bws-check input, .bws .bws-choice input[type=checkbox], .bws .bws-choice input[type=radio], .bws .bws-check input[type=checkbox] {
  position: absolute !important; opacity: 0 !important; width: 20px !important; height: 20px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
  left: 0; top: 2px; cursor: pointer; z-index: 1; appearance: auto; -webkit-appearance: auto; pointer-events: auto;
}
.bws .bws-box, .bws i.bws-box, .bws .bws-choice .bws-box, .bws .bws-check .bws-box {
  display: inline-block !important; width: 20px !important; height: 20px !important; min-width: 20px !important; max-width: none !important; flex: 0 0 20px !important;
  margin: 0 10px 0 0 !important; padding: 0 !important; position: relative; box-sizing: border-box; vertical-align: middle; font-style: normal; font-size: 0; line-height: 20px;
  border-width: 2px !important; border-style: solid !important; border-color: var(--bws-green); border-radius: 5px; background: #fff; transition: background .15s; overflow: visible;
}
.bws .bws-check .bws-box { margin: 2px 12px 0 0 !important; }
.bws .bws-box--radio, .bws .bws-choice .bws-box--radio { border-radius: 50%; }
.bws input:checked + .bws-box { background: var(--bws-green); }
.bws input:checked + .bws-box:not(.bws-box--radio)::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.bws input:checked + .bws-box--radio { background: #fff; }
.bws input:checked + .bws-box--radio::after { content: ""; position: absolute; left: 3px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--bws-green); }
.bws input:focus-visible + .bws-box { outline: 2px solid var(--bws-green-10); outline-offset: 2px; }
.bws .bws-choice > span, .bws .bws-check > span { display: inline; }
.bws .bws-check a { font-weight: 700; color: var(--bws-green); text-decoration: none; }
@media (max-width: 767px) { .bws .bws-choices { gap: 10px 20px; } .bws .bws-choice, .bws .bws-check { font-size: 16px; } }

/* field error state — every message is printed directly under its own field
   (bws_field_error() server-side, membership.js client-side). Plain red text,
   never the boxed notice look, so it cannot be mistaken for a page banner. */
.bws .bws-field.has-error .bws-input, .bws .bws-field.has-error .bws-select, .bws .bws-field.has-error .bws-textarea, .bws .bws-field.has-error .bws-upload { border-color: var(--bws-red); }
.bws .bws-field-wrap.has-error .bws-box, .bws .bws-field.has-error .bws-box { border-color: var(--bws-red); }
.bws .bws-field-error, .bws .bws-field .bws-field-error, .bws div.bws-field-error[role=alert] {
  display: block; color: var(--bws-red); font-size: 14px; line-height: 18px; font-weight: 400; text-align: left;
  margin: 8px 0 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
}
.bws .bws-field .bws-choices + .bws-field-error { margin-top: 10px; }
.bws .bws-check + .bws-field-error, .bws .bws-field-wrap .bws-field-error, .bws .bws-field-wrap div.bws-field-error[role=alert] { margin: -14px 0 22px 32px; }
.bws .bws-recaptcha + .bws-field-error { margin-top: 8px; }

/* grid */
.bws .bws-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.bws .bws-grid .bws-span-2 { grid-column: 1 / -1; }
@media (max-width: 767px) { .bws .bws-grid { grid-template-columns: 1fr; } }

/* file upload row: 60px box, red placeholder, 46px green Upload button inside.
   The button is absolutely positioned 6px from the top/right/bottom edges of the
   row so Flatsome's global <button> rules (1em bottom margin, 2.4em line-height,
   uppercase, inset shadow) can no longer push it out of the box. */
.bws .bws-upload { display: flex; align-items: center; border: 1px solid var(--bws-border); border-radius: 10px; background: #fff; height: 60px; padding: 0 162px 0 20px; position: relative; overflow: hidden; }
.bws .bws-upload .bws-upload-text { flex: 1 1 auto; min-width: 0; color: var(--bws-red); font-size: 18px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bws .bws-upload .bws-upload-text.is-set { color: var(--bws-green); }
.bws .bws-upload .bws-upload-btn, .bws .bws-upload button.bws-upload-btn {
  position: absolute !important; top: 6px !important; right: 6px !important; bottom: 6px !important; left: auto !important;
  height: auto !important; min-height: 0 !important; max-height: none !important; width: auto !important; min-width: 146px; max-width: none;
  margin: 0 !important; padding: 0 24px !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important; text-shadow: none !important;
  background: var(--bws-green) !important; background-image: none !important; color: #fff !important;
  font-family: var(--bws-font) !important; font-weight: 400 !important; font-size: 18px !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transform: none !important; opacity: 1 !important; transition: background .4s;
}
.bws .bws-upload .bws-upload-btn:hover, .bws .bws-upload .bws-upload-btn:focus, .bws .bws-upload .bws-upload-btn:active { background: var(--bws-green-hover) !important; color: #fff !important; outline: none; transform: none !important; top: 6px !important; }
.bws .bws-upload .bws-upload-btn svg { display: none; }
.bws .bws-upload input[type=file] { display: none !important; }
.bws .bws-upload-help { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 16px; line-height: 20px; color: var(--bws-green); }
.bws .bws-upload-help .bws-i { display: inline-flex; width: 16px; height: 16px; border-radius: 3px; background: var(--bws-green); color: #fff; font-size: 11px; font-weight: 700; align-items: center; justify-content: center; flex: none; font-family: var(--bws-heading-font); }
.bws .bws-upload-help strong { font-weight: 700; }
@media (max-width: 767px) { .bws .bws-upload { height: 54px; padding: 0 126px 0 16px; } .bws .bws-upload .bws-upload-text { font-size: 15px; } .bws .bws-upload .bws-upload-btn, .bws .bws-upload button.bws-upload-btn { min-width: 110px; padding: 0 16px !important; font-size: 16px !important; } .bws .bws-upload-help { font-size: 14px; } }

/* ---------- Profile photo widget (168px frame, 177x50 buttons) ---------- */
.bws-photo { display: flex; align-items: flex-start; gap: 22px; margin: 0 0 22px; }
.bws-photo .bws-photo-frame { width: 168px; height: 168px; border: 1px solid var(--bws-border); border-radius: 8px; background: #fff; position: relative; overflow: hidden; cursor: grab; flex: none; }
.bws-photo .bws-photo-frame:active { cursor: grabbing; }
.bws-photo .bws-photo-frame img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-drag: none; }
.bws-photo .bws-photo-frame .bws-avatar-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.bws-photo .bws-photo-frame .bws-avatar-ph svg { width: 96px; height: 96px; }
.bws-photo .bws-photo-frame .bws-avatar-ph circle { fill: #a9a9a9; }
.bws-photo .bws-photo-frame .bws-avatar-ph ellipse { fill: #222; }
.bws-photo .bws-photo-actions { display: flex; flex-direction: column; gap: 14px; padding-top: 42px; }
.bws-photo .bws-photo-actions .bws-btn { width: 177px; height: 50px; padding: 0 22px; font-size: 20px; font-weight: 700; border-radius: 10px; gap: 10px; }
.bws-photo .bws-photo-actions .bws-btn svg { width: 16px; height: 16px; }
.bws-photo .bws-photo-actions .bws-photo-remove { background: var(--bws-green-10); color: var(--bws-value) !important; }
.bws-photo .bws-photo-actions .bws-photo-remove:hover { background: var(--bws-green); color: #fff !important; }
.bws-photo input[type=file] { display: none; }
.bws-photo-zoom { width: 168px; margin-top: 6px; accent-color: var(--bws-green); display: block; }
.bws-photo-notes { margin: 0 0 40px; }
.bws-photo-notes .bws-upload-help { margin: 0 0 8px; font-size: 18px; line-height: 24px; }
.bws-photo-notes .bws-notes-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.bws-photo-notes .bws-notes-row .bws-upload-help { margin: 0; }
@media (max-width: 767px) { .bws-photo { gap: 16px; } .bws-photo .bws-photo-frame { width: 140px; height: 140px; } .bws-photo .bws-photo-actions { padding-top: 20px; } .bws-photo .bws-photo-actions .bws-btn { width: 150px; height: 46px; font-size: 17px; } .bws-photo-notes .bws-upload-help { font-size: 15px; } }

/* ---------- Form actions / legal ---------- */
.bws-form-actions { display: flex; gap: 16px; margin: 50px 0 0; flex-wrap: wrap; }
.bws-form-actions .bws-btn { min-width: 210px; }
.bws-legal { margin-top: 60px; font-size: 18px; }
.bws-legal p { margin: 0 0 22px; color: var(--bws-muted); }
.bws-legal a { color: var(--bws-green); font-weight: 700; text-decoration: none; }
.bws-recaptcha { margin: 30px 0 0; }
@media (max-width: 767px) { .bws-form-actions .bws-btn { min-width: 0; width: 100%; } .bws-form-actions { margin-top: 40px; } .bws-legal { margin-top: 40px; } }

/* ---------- Register page (split with side image) ---------- */
.bws-register { display: grid; grid-template-columns: 555px 1fr; min-height: 880px; }
.bws-register .bws-register-form { padding: 60px 80px 80px 38px; background: #fff; }
.bws-register .bws-register-image { background: #b9d1c3 center/cover no-repeat; min-height: 400px; }
.bws-register .bws-back { display: inline-block; color: #000; text-decoration: none; font-weight: 700; font-size: 16px; line-height: 22px; margin: 0 0 77px; transition: color .3s; }
.bws-register .bws-back:hover { color: var(--bws-green); }
.bws-register h1 { font-size: 36px; font-weight: 700; line-height: 46px; color: #000; margin: 0 0 6px; }
.bws-register .bws-lead { color: var(--bws-muted); font-size: 18px; line-height: 24px; margin: 0 0 40px; }
.bws-register .bws-field { margin-bottom: 28px; }
.bws-register .bws-alt { text-align: center; margin: 24px 0 0; font-size: 19px; color: var(--bws-value); }
.bws-register .bws-alt a { font-weight: 700; text-decoration: none; color: var(--bws-green); }
@media (max-width: 1100px) { .bws-register { grid-template-columns: 1fr 1fr; } .bws-register .bws-register-form { padding: 50px 40px 60px 15px; } }
@media (max-width: 767px) { .bws-register { grid-template-columns: 1fr; min-height: 0; } .bws-register .bws-register-image { display: none; } .bws-register .bws-register-form { padding: 30px 15px 50px; } .bws-register .bws-back { margin-bottom: 36px; } .bws-register h1 { font-size: 30px; line-height: 40px; } }

/* ---------- Verify email / OTP ---------- */
.bws-verify-box { background: var(--bws-green-10); padding: 40px 35px; text-align: center; margin: 0 0 50px; border-radius: 4px; }
.bws-verify-box h3 { color: var(--bws-green); font-family: var(--bws-font); font-size: 18px; font-weight: 700; line-height: 24px; margin: 0 0 16px; }
.bws-verify-box .bws-btn { height: 56px; padding: 0 28px; }
.bws-otp { max-width: 767px; margin: 0 auto; text-align: center; }
.bws-otp p { font-size: 20px; line-height: 30px; color: var(--bws-value); margin: 0 0 24px; }
.bws-otp .bws-input { margin-bottom: 30px; text-align: left; }
.bws-otp .bws-btn { min-width: 128px; }
.bws-otp .bws-resend { display: inline-block; margin-top: 18px; font-size: 16px; font-weight: 700; color: var(--bws-green); }
.bws-session-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: flex-end; align-items: center; margin: 0 0 18px; font-size: 15px; font-weight: 700; }
.bws-session-bar a { color: var(--bws-green); text-decoration: none; }
.bws-session-bar a:hover { text-decoration: underline; }
.bws-field-hint { display: block; margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--bws-muted); }
.bws-timer-note { text-align: center; color: var(--bws-red); margin: 40px 0 0; font-size: 18px; line-height: 24px; }
@media (max-width: 767px) { .bws-verify-box { padding: 24px 15px; margin-bottom: 30px; } .bws-otp p { font-size: 17px; line-height: 26px; } .bws-timer-note { font-size: 15px; } }

/* ---------- Modals ---------- */
.bws-modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.6); }
.bws-modal.is-open { display: flex; }
.bws-modal .bws-modal-box { background: #fff; border-radius: 20px; width: 100%; max-width: 480px; padding: 40px 28px 30px; position: relative; max-height: 92vh; overflow: auto; animation: bwsPop .18s ease-out; font-family: var(--bws-font); color: var(--bws-value); }
@keyframes bwsPop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bws-modal .bws-modal-close { position: absolute; right: 18px; top: 14px; border: 0; background: none; font-size: 32px; line-height: 1; color: #333; cursor: pointer; font-weight: 300; }
.bws-modal .bws-modal-title { font-family: var(--bws-heading-font); font-size: 22px; font-weight: 600; line-height: 30px; color: var(--bws-heading); margin: 0 0 40px; }
@media (max-width: 767px) { .bws-modal .bws-modal-box { padding: 30px 18px 20px; } .bws-modal .bws-modal-title { font-size: 19px; margin-bottom: 24px; } }

/* "Continue to payment" — SweetAlert2 look, exactly as on the live site */
.bws-modal--success .bws-modal-box { text-align: center; max-width: 512px; border-radius: 5px; padding: 30px 24px 28px; font-family: var(--bws-heading-font); }
.bws-modal--success .bws-tick { width: 88px; height: 88px; border-radius: 50%; border: 4px solid rgba(165,220,134,.4); margin: 6px auto 30px; display: flex; align-items: center; justify-content: center; }
.bws-modal--success .bws-tick svg { width: 46px; height: 46px; stroke: #a5dc86; stroke-width: 3; fill: none; }
.bws-modal--success h3 { font-family: var(--bws-heading-font); font-size: 30px; color: #595959; margin: 0 0 14px; font-weight: 600; line-height: 1.2; }
.bws-modal--success p { color: #545454; font-size: 18px; margin: 0 0 28px; line-height: 1.4; }
.bws-modal--success .bws-modal-actions { display: flex; gap: 12px; justify-content: center; }
.bws-modal--success .bws-swal-btn { border: 0; border-radius: 4px; padding: 0 20px; height: 57px; font-family: var(--bws-heading-font); font-size: 16px; font-weight: 500; color: #fff; cursor: pointer; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; }
.bws-modal--success .bws-swal-btn--confirm { background: #7066e0; box-shadow: 0 0 0 3px rgba(112,102,224,.5); }
.bws-modal--success .bws-swal-btn--cancel { background: #6e7881; }

/* "Please proceed to payment" */
.bws-pay-summary h4 { font-family: var(--bws-heading-font); font-size: 16px; font-weight: 700; line-height: 22px; color: var(--bws-heading); margin: 0 0 30px; }
.bws-pay-row { display: flex; justify-content: space-between; gap: 20px; font-size: 16px; line-height: 22px; margin-bottom: 16px; color: var(--bws-muted); }
.bws-pay-row .bws-pay-val { color: var(--bws-value); text-align: right; }
.bws-pay-row .bws-pay-val.is-green { color: var(--bws-green-text); }
.bws-pay-total { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ccc; margin-top: 56px; padding: 20px 0 0; font-size: 20px; font-weight: 700; color: var(--bws-value); }
.bws-pay-actions { display: flex; flex-direction: column; align-items: center; gap: 17px; margin-top: 50px; }
.bws-pay-actions form, .bws-pay-actions .bws-btn { width: 100%; max-width: 370px; }
.bws-pay-note { color: var(--bws-red); font-size: 15px; text-align: center; margin: 22px 0 0; line-height: 19px; }
@media (max-width: 767px) { .bws-pay-total { margin-top: 36px; font-size: 18px; } .bws-pay-actions { margin-top: 34px; } }

/* ---------- Bank payment page ---------- */
.bws-bank-intro { text-align: center; margin: 0 0 40px; }
.bws-bank-intro h2 { color: var(--bws-green-text); font-family: var(--bws-heading-font); font-size: 24px; font-weight: 400; line-height: 1.4; margin: 0 0 10px; }
.bws-bank-intro p { margin: 0; font-size: 15px; color: var(--bws-heading); font-family: var(--bws-heading-font); }
.bws-bank { display: grid; grid-template-columns: 392px 1fr; gap: 146px; align-items: start; max-width: 1050px; margin: 0 auto 40px; }
.bws-bank .bws-qr { border: 2px solid #3f7fd6; border-radius: 10px; padding: 14px; background: #fff; width: 392px; }
.bws-bank .bws-qr img { display: block; width: 100%; height: auto; }
.bws-bank h3 { color: var(--bws-green-text); font-family: var(--bws-heading-font); font-size: 24px; font-weight: 700; margin: 20px 0 14px; }
.bws-bank .bws-bank-line { font-family: var(--bws-heading-font); font-weight: 700; font-size: 17px; margin: 0 0 14px; color: var(--bws-heading); text-transform: uppercase; }
.bws-bank .bws-bank-logos { display: flex; align-items: center; gap: 60px; margin: 24px 0 26px; }
.bws-bank .bws-bank-logos img { max-height: 60px; }
.bws-bank .bws-bank-cta { color: var(--bws-green-text); font-family: var(--bws-heading-font); font-size: 15px; margin: 0 0 22px; }
@media (max-width: 991px) { .bws-bank { gap: 50px; grid-template-columns: 320px 1fr; } .bws-bank .bws-qr { width: 320px; } }
@media (max-width: 767px) { .bws-bank { grid-template-columns: 1fr; gap: 30px; justify-items: center; text-align: center; } .bws-bank .bws-qr { width: 100%; max-width: 320px; } .bws-bank .bws-bank-logos { justify-content: center; gap: 30px; } }

/* Offline payment details form */
.bws-offline-form { max-width: 820px; margin: 0 auto 40px; }

/* ---------- Join Us cards ---------- */
.bws-plans { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 40px; }
.bws-plan { flex: 1 1 0; min-width: 240px; border: 2px solid var(--bws-border); border-radius: 30px; padding: 0 0 30px; text-align: center; background: #fff; display: flex; flex-direction: column; overflow: hidden; transition: all .4s; }
.bws-plan:hover { border-color: var(--bws-green); }
.bws-plan h3 { color: var(--bws-value); margin: 0; padding: 36px 20px 0; font-size: 26px; font-weight: 800; line-height: 1.2; height: 125px; font-family: var(--bws-font); }
.bws-plan .bws-plan-price { font-size: 30px; font-weight: 800; color: var(--bws-value); margin: 10px 0 2px; padding: 0 20px; }
.bws-plan .bws-plan-cycle { color: var(--bws-muted); font-size: 16px; margin-bottom: 18px; padding: 0 20px; }
.bws-plan ul { list-style: none; padding: 30px 20px 0; margin: 0 0 22px; text-align: left; font-size: 18px; line-height: 1.2; flex: 1; }
.bws-plan li { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 26px; }
.bws-plan li::before { content: "✓"; color: var(--bws-green); font-weight: 700; flex: none; }
.bws-plan .bws-btn { margin: auto 30px 0; }
@media (max-width: 1000px) { .bws-plans { gap: 20px; } .bws-plan { flex-basis: calc(50% - 10px); } .bws-plan h3 { font-size: 24px; font-weight: 600; height: 110px; } .bws-plan ul { font-size: 16px; } }
@media (max-width: 560px) { .bws-plan { flex-basis: 100%; } .bws-plan .bws-btn { margin: auto 10px 0; } }

/* ---------- Notices ---------- */
.bws-notice { padding: 18px 24px; border-radius: 10px; margin: 0 0 30px; font-size: 16px; line-height: 1.5; }
.bws-notice--error { background: rgba(255,0,0,.07); border-left: 4px solid var(--bws-red); color: #8a1f1f; }
.bws-notice--success { background: var(--bws-green-10); border-left: 4px solid var(--bws-green); color: var(--bws-green); }
.bws-notice--info { background: var(--bws-green-10); border-left: 4px solid var(--bws-green); color: var(--bws-green); }
.bws-notice a { font-weight: 700; }

/* ---------- Profile / dashboard (two cards, no hero) ---------- */
.bws .bws-dash { display: grid; grid-template-columns: 348px minmax(0, 1fr); gap: 34px; align-items: stretch; }
.bws .bws-dash-card { border: 1px solid var(--bws-card-border); border-radius: 20px; padding: 40px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.08); min-width: 0; }
.bws .bws-dash-side { text-align: center; padding: 40px 40px 44px; display: flex; flex-direction: column; align-items: center; }
/* 170px square frame; the saved cropper position (profile_img_dimension) is applied
   inline on the <img> when present, otherwise the photo is centre-cropped. */
.bws .bws-dash-photo-frame { width: 170px; height: 170px; border-radius: 12px; background: #f3f3f3; position: relative; overflow: hidden; margin: 0 auto 26px; flex: none; }
.bws .bws-dash-photo, .bws .bws-dash-photo-frame img.bws-dash-photo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; display: block; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; user-select: none; -webkit-user-drag: none; }
/* left/top/width/height come from the inline style written by BWS_Member::photo_crop_style() */
.bws .bws-dash-photo.has-crop, .bws .bws-dash-photo-frame img.bws-dash-photo.has-crop { right: auto; bottom: auto; object-fit: fill; }
.bws .bws-dash-name { font-family: var(--bws-heading-font); font-size: 30px; font-weight: 700; line-height: 36px; margin: 0 0 30px; color: var(--bws-value); width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.bws .bws-dash-id { font-size: 15px; font-weight: 700; color: var(--bws-muted); margin: -22px 0 26px; word-break: break-all; cursor: pointer; }
.bws .bws-dash-buttons { display: flex !important; flex-direction: column; align-items: stretch; gap: 16px; width: 100%; }
.bws .bws-dash-buttons .bws-btn, .bws .bws-dash-buttons a.bws-btn { display: inline-flex !important; width: 100% !important; min-width: 0; height: 58px; margin: 0 !important; padding: 0 20px; font-size: 18px; font-weight: 700; white-space: normal; line-height: 1.2; text-align: center; }
.bws .bws-dash-links { margin: 26px 0 0; font-size: 15px; color: var(--bws-muted); display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.bws .bws-dash-links a { color: var(--bws-green); font-weight: 700; text-decoration: none; }
.bws-dash-main h2 { font-size: 24px; font-weight: 700; line-height: 30px; margin: 0 0 40px; color: var(--bws-heading); }
.bws-dash-main h2 small { display: block; font-family: var(--bws-font); font-size: 16px; color: var(--bws-muted); font-weight: 400; margin-top: 8px; line-height: 1.4; }
.bws-dl { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 18px 24px; margin: 0; font-size: 20px; line-height: 27px; }
.bws-dl dt { color: var(--bws-muted); font-weight: 400; }
.bws-dl dd { margin: 0; color: var(--bws-value); text-align: right; }
.bws-dl dd.is-green { color: var(--bws-green-text); }
.bws-dl dd.is-red { color: var(--bws-red); }
.bws-badge { display: inline-block; padding: 4px 14px; border-radius: 20px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.bws-badge--success { background: var(--bws-green-10); color: var(--bws-green); }
.bws-badge--pending { background: #fff4d6; color: #8a5a00; }
.bws-badge--danger { background: rgba(255,0,0,.08); color: #8a1f1f; }
.bws-badge--muted { background: #eee; color: var(--bws-muted); }
.bws-dash-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
.bws-dash-actions .bws-btn { min-width: 200px; }
.bws-dash .bws-notice { margin-bottom: 26px; }
@media (max-width: 1100px) { .bws .bws-dash { grid-template-columns: 300px minmax(0, 1fr); gap: 24px; } .bws .bws-dash-card { padding: 30px 24px; } .bws-dl { font-size: 18px; } }
@media (max-width: 860px) { .bws .bws-dash { grid-template-columns: minmax(0, 1fr); } .bws .bws-dash-side { padding: 30px 20px; } .bws .bws-dash-buttons { max-width: 360px; margin: 0 auto; } .bws-dl { grid-template-columns: 1fr; gap: 4px 0; font-size: 16px; } .bws-dl dt { margin-top: 14px; } .bws-dl dd { text-align: left; } .bws-dash-main h2 { margin-bottom: 24px; font-size: 20px; } .bws .bws-dash-name { font-size: 26px; line-height: 32px; } }
.bws-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.bws-table th, .bws-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #e5e5e5; }
.bws-table th { background: var(--bws-green-05); font-weight: 700; color: var(--bws-heading); }

/* ---------- ID card (replica of the approved card, id.jpeg) ----------
   Fixed 620×1025px composition, measured from the 968px reference (×0.64):
   671px white top with two 310px columns and a 3px rule, 225px framed photo,
   354px pale-green footer band. Nothing reflows — on narrow screens
   membership.js scales the whole card down inside .bws-idcard-stage.
   Sizes are pinned (!important) because Flatsome styles p/img/table globally. */
.bws-idcard-wrap { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.bws-idcard-stage { width: 620px; max-width: 100%; position: relative; overflow: visible; }
.bws .bws-idcard, .bws-idcard { position: relative; width: 620px !important; max-width: none !important; min-height: 1025px; margin: 0; background: #fff; font-family: var(--bws-font); color: #000; box-shadow: 0 4px 30px rgba(0,0,0,.10); transform-origin: 0 0; box-sizing: border-box; text-align: left; line-height: 1.3; }
.bws-idcard *, .bws-idcard *::before, .bws-idcard *::after { box-sizing: border-box; }
.bws-idcard p { margin: 0 !important; padding: 0 !important; color: #000; font-family: var(--bws-font); letter-spacing: 0; text-transform: none; }
.bws-idcard img { display: block; border: 0; margin: 0; padding: 0; max-width: none; box-shadow: none; }
.bws-idcard .bws-idcard-top { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch; width: 620px; height: 671px; background: #fff; overflow: hidden; }
.bws-idcard .bws-idcard-left { flex: 0 0 310px; width: 310px; height: 671px; text-align: center; border-right: 3px solid #e5e5e5; padding: 30px 12px 20px; overflow: hidden; }
.bws-idcard .bws-idcard-right { flex: 0 0 310px; width: 310px; height: 671px; padding: 30px 12px 20px; font-size: 29px; line-height: 37px; overflow: hidden; text-align: left !important; }
.bws-idcard .bws-idcard-logo { width: auto !important; height: 66px !important; max-width: 214px; margin: 0 auto 56px; }
.bws-idcard .bws-idcard-photo-frame { width: 225px; height: 225px; margin: 0 auto 40px; border: 2px solid #ccc; padding: 3px; background: #fff; overflow: hidden; }
.bws-idcard .bws-idcard-photo { width: 215px !important; height: 215px !important; object-fit: cover; }
.bws-idcard .bws-idcard-name { font-size: 28px; line-height: 34px; font-weight: 700; text-transform: uppercase !important; overflow-wrap: anywhere; }
.bws-idcard .bws-idcard-role { color: var(--bws-green) !important; font-weight: 700; font-size: 26px; line-height: 32px; margin: 0 0 11px !important; }
.bws-idcard .bws-idcard-idlabel { font-size: 28px; line-height: 34px; font-weight: 700; margin: 0 0 6px !important; }
.bws-idcard .bws-idcard-id { font-weight: 700; font-size: 22px; line-height: 28px; overflow-wrap: anywhere; }
.bws-idcard .bws-idcard-right p { margin: 0 0 14px !important; font-size: 29px; line-height: 37px; font-weight: 400; overflow-wrap: anywhere; text-align: left !important; }
.bws-idcard .bws-idcard-right p:last-child { margin-bottom: 0 !important; }
.bws-idcard .bws-idcard-right .bws-k { display: block; font-weight: 400; }
.bws-idcard .bws-idcard-bottom { width: 620px; height: 354px; background: #e6ede5; padding: 21px 14px 0; font-size: 25px; line-height: 32px; overflow: hidden; }
.bws-idcard .bws-idcard-sign { height: 68px !important; width: auto !important; margin: 0 0 6px; }
.bws-idcard .bws-idcard-sec { font-weight: 700; text-transform: uppercase !important; font-size: 23px; line-height: 29px; }
.bws-idcard .bws-idcard-sectitle { color: var(--bws-green) !important; font-weight: 700; font-size: 25px; line-height: 31px; margin: 0 0 13px !important; }
.bws-idcard .bws-idcard-org { font-size: 34px; line-height: 40px; font-weight: 400; margin: 0 0 6px !important; }
.bws-idcard .bws-idcard-org-sub { font-size: 25px; line-height: 32px; font-weight: 400; }
.bws-idcard-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
@media print {
  header, footer, .bws-idcard-actions, .header, .footer-wrapper, .bws-hero, .bws-notice { display: none !important; }
  .bws-idcard-stage { height: auto !important; }
  .bws .bws-idcard, .bws-idcard { box-shadow: none; transform: none !important; }
  .bws-idcard .bws-idcard-bottom { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Login ---------- */
.bws-login { max-width: 516px; margin: 0 auto; }
.bws-login h1 { font-size: 36px; font-weight: 700; line-height: 46px; margin: 0 0 6px; color: #000; }
.bws-login .bws-lead { font-size: 18px; margin: 0 0 40px; }
.bws-login .bws-links { display: flex; justify-content: space-between; margin-top: 22px; font-size: 16px; font-weight: 700; }

/* ---------- UPI QR checkout (Card / Net Banking omitted) ---------- */
.bws-upi-box { max-width: 420px; margin: 0 auto; padding: 28px 24px; border: 1px solid var(--bws-card-border); border-radius: 16px; background: #fff; box-shadow: 0 0 16px rgba(0,0,0,.06); }
.bws-upi-head { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.bws-upi-title { font-size: 16px; font-weight: 700; margin: 0 0 16px; }
.bws-upi-qr { display: block; width: 220px; height: 220px; margin: 0 auto 16px; }
.bws-upi-status { color: var(--bws-green-text); font-weight: 600; }
.bws-upi-box .bws-btn { margin: 8px auto 0; max-width: 280px; }

/* ---------- Donation ---------- */
.bws-donate { max-width: 900px; margin: 0 auto; }
.bws-donate .bws-panel { border: 1px solid var(--bws-card-border); border-radius: 20px; padding: 30px 30px 0; margin-bottom: 30px; box-shadow: 0 0 10px rgba(0,0,0,.05); }
.bws-donate .bws-panel h3 { margin: 0 0 26px; font-size: 24px; font-weight: 700; line-height: 30px; }
.bws-donate .bws-panel .bws-check:last-of-type { margin-bottom: 30px; }
@media (max-width: 767px) { .bws-donate .bws-panel { padding: 20px 20px 0; } }

/* ---------- Parent block (Junior) ---------- */
.bws-parent-block { background: var(--bws-cream); border: 1px solid #ddd; border-radius: 20px; padding: 24px 20px 0; margin: 60px 0 0; }
.bws-parent-block h3 { margin: 0 0 26px; font-size: 24px; font-weight: 700; line-height: 30px; }
@media (max-width: 767px) { .bws-parent-block { margin-top: 30px; padding-top: 20px; } .bws-parent-block h3 { font-size: 20px; margin-bottom: 15px; } }