/* ==============================================================
   Chennai Matrimony — HOME (index.aspx) pre-login redesign (v1.5)
   Scoped under body.cm-prelogin so it ONLY affects logged-out
   visitors. The live Register/Search form markup is untouched;
   it is restyled in place. New decorative sections use cm- classes.
   ============================================================== */

body.cm-prelogin {
  --paper:#fff; --surface:#fbefde; --ink:#1f1410; --mute:#766357;
  --line:rgba(31,20,16,0.10); --primary:#d91234; --primary-dark:#80081b;
  --primary-soft:#fcdde3; --gold:#d4a84b; --green:#1f472f; --green-soft:#ddebe0;
  --sans:'Roboto',sans-serif;
}

/* ==============================================================
   FULL-BLEED — let the home design span the full page width.
   The master wraps content in .content_wrapper (centered/max-width);
   neutralise it on the home page so banner & sections go edge-to-edge.
   (home-redesign.css loads only on index.aspx, so this is contained.)
   ============================================================== */
.content_wrapper,
body.cm-prelogin .content_wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
/* Any common centering wrappers the master/legacy CSS may apply */
.content_wrapper > .row,
.fix-box { max-width: 100% !important; }

/* ==============================================================
   HOME BANNER GLUE — present the live Register/Search form as the
   design's reg-card (right column of .anniversary-banner).
   Loaded only on index.aspx, so these can be unscoped.
   ============================================================== */
.cm-home-banner .container { align-items: start; }
.cm-banner-left { color: #fff; }
/* .cm-banner-left .banner-collage img { width: 100%; max-width: 480px; border-radius: 16px; display: block; box-shadow: 0 24px 60px -30px rgba(0,0,0,.6); } */
.cm-banner-left .banner-title { font-size: 38px !important; line-height: 1.12 !important; font-weight: 700; margin: 22px 0 12px; color: #fff; }
.cm-banner-left .banner-title em { color: var(--gold); font-style: normal; }
.cm-banner-left .banner-desc { font-size: 16px !important; color: #eadfd0; margin: 0; max-width: 520px; }

/* Hide the legacy featured-listing carousel (banImg server control stays in DOM, just hidden) */
.cm-home-banner .t-left_col { display: none !important; }

/* The live form column becomes the white card */
.cm-home-banner .hero-forms-column { width: 480px; max-width: 100%; }
.cm-home-banner .fix-box,
.cm-home-banner .t-right_col {
  width: 100% !important; height: auto !important; float: none !important; margin: 0 !important;
}
.cm-home-banner .right_form_box {
  background: #fff !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.55) !important;
  padding: 28px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  float: none !important;
  margin: 0 !important;
  overflow: visible !important;
  font-family: 'Roboto', sans-serif !important;
}
/* Make sure the column that holds the card clears the legacy float */
.cm-home-banner .hero-forms-column,
.cm-home-banner .fix-box,
.cm-home-banner .t-right_col { float: none !important; overflow: visible !important; }
.cm-home-banner .hero-forms-column::after { content: ""; display: block; clear: both; }
@media (max-width: 900px) {
  .cm-home-banner .hero-forms-column { width: 100%; }
}

/* ==============================================================
   REG-CARD MATCH — make the live register form look like the
   design's .reg-card (badge, title, labels-above, form-control
   inputs, flat primary submit). Scoped to the home banner.
   ============================================================== */
.cm-home-banner .right_form_box { position: relative !important; padding: 30px 24px 26px !important; }
.cm-home-banner .right_form_box > div[style*="356px"] { width: 100% !important; }

/* Hide the Register/Search tabs (search lives in its own section below) */
.cm-home-banner #countrytabs { display: none !important; }

/* Card header */
.cm-home-banner .reg-badge {
  position: absolute; top: -14px; left: 24px;
  background: var(--primary); color: #fff; padding: 5px 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  border-radius: 3px;
}
.cm-home-banner .cm-reg-title { font-size: 24px !important; font-weight: 600 !important; color: var(--ink) !important; margin: 6px 0 4px !important; }
.cm-home-banner .cm-reg-hint { font-size: 13px !important; color: var(--mute) !important; margin-bottom: 18px !important; }

/* Field rows -> form-group; labels above (force normal flow; legacy CSS positions these absolutely) */
.cm-home-banner .f-row,
.cm-home-banner .f-row1,
.cm-home-banner .f-row2 {
  margin: 0 0 15px 0 !important; padding: 0 !important;
  position: static !important; clear: both !important;
  float: none !important; height: auto !important; width: 100% !important; overflow: visible !important;
}
/* keep visible rows block, but NEVER override an inline display:none (hidden fields) */
.cm-home-banner .f-row:not([style*="display:none"]),
.cm-home-banner .f-row1:not([style*="display:none"]) { display: block; }
.cm-home-banner .f-lab {
  display: block !important; position: static !important; float: none !important;
  font-size: 12px !important; color: var(--mute) !important;
  font-weight: 500 !important; margin: 0 0 5px 0 !important; padding: 0 !important;
  width: auto !important; height: auto !important; line-height: 1.4 !important;
}
.cm-home-banner .f-lab .star { display: none !important; }

/* Inputs & selects -> form-control */
.cm-home-banner #country1 input[type="text"],
.cm-home-banner #country1 input[type="email"],
.cm-home-banner #country1 input[type="password"],
.cm-home-banner #country1 select,
.cm-home-banner .f-input {
  width: 100% !important; padding: 11px 12px !important; height: auto !important;
  border: 1px solid var(--line) !important; border-radius: 4px !important;
  font-size: 14px !important; color: var(--ink) !important; background: #fff !important;
  box-sizing: border-box !important; margin: 0 !important; font-family: 'Roboto', sans-serif !important;
}
.cm-home-banner #country1 input:focus,
.cm-home-banner #country1 select:focus,
.cm-home-banner .f-input:focus {
  border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-soft) !important; outline: none !important;
}

/* Date of Birth: three equal selects in a row (DD MM YY after the JS reorder).
   NOTE: `select#ID` (element+id) is required so these beat both the inline
   `style="width:65px..."` on the controls AND `.cm-home-banner #country1 select { width:100% }`. */
.cm-home-banner select#DOBDAY,
.cm-home-banner select#DOBMONTH,
.cm-home-banner select#DOBYEAR,
.cm-home-banner #country1 select#DOBDAY,
.cm-home-banner #country1 select#DOBMONTH,
.cm-home-banner #country1 select#DOBYEAR {
  /* 3 selects + 2x 7px gaps = 100% -> flush with the full-width fields above/below.
     (The JS reorder leaves the whitespace text nodes behind, so there is no extra
     inline-block gap to budget for.) */
  width: calc((100% - 14px) / 3) !important; min-width: 0 !important; display: inline-block !important;
  float: none !important; vertical-align: top !important;
  margin: 0 7px 0 0 !important; font-size: 14px !important;
}
/* YEAR is last after the reorder -> no trailing gap */
.cm-home-banner select#DOBYEAR,
.cm-home-banner #country1 select#DOBYEAR { margin-right: 0 !important; }

/* Mobile: country code + number on one line */
.cm-home-banner #txtmobc1 { width: 120px !important; display: inline-block !important; margin-right: 8px !important; vertical-align: top; }
.cm-home-banner #txtMobile { width: calc(100% - 132px) !important; display: inline-block !important; vertical-align: top; }

/* Gender radios: visible, inline */
.cm-home-banner #txtGender { border: 0 !important; }
.cm-home-banner #txtGender td { padding-right: 18px !important; }
.cm-home-banner #txtGender label,
.cm-home-banner #txtGender input { font-size: 14px !important; color: var(--ink) !important; vertical-align: middle; }
.cm-home-banner #txtGender label { margin-left: 4px !important; }

/* Hide inline tooltip help & validation spans for a clean card */
.cm-home-banner .tooltips span,
.cm-home-banner .spanchk { display: none !important; }

/* Submit: hide the green image, show flat primary button */
.cm-home-banner .cm-real-submit { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cm-home-banner .f-row2 { text-align: left !important; margin-top: 20px !important; }
.cm-home-banner .cm-reg-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 46px; border: none; border-radius: 4px;
  background: var(--primary); color: #fff; font-weight: 700; font-size: 14.5px; cursor: pointer;
  box-shadow: 0 4px 14px -4px rgba(217, 18, 52, 0.45); font-family: 'Roboto', sans-serif;
  transition: background .2s ease;
}
.cm-home-banner .cm-reg-submit:hover { background: var(--primary-dark); }

/* Visible real submit (ImageButton2) on step 2 — clicked directly (original flow) */
.cm-home-banner .cm-reg-imgbtn {
  display: inline-block; cursor: pointer; border: none; background: none;
  height: 46px; width: auto; max-width: 100%; vertical-align: middle;
}
.cm-home-banner #cmStep2Actions .cm-reg-imgbtn { flex: 1 1 auto !important; height: 46px !important; object-fit: contain; }

/* Christian division row shows inline when toggled (keep its own display logic) */
.cm-home-banner #christdivi .f-row { margin-bottom: 15px !important; }

/* ===== "6 fields only" tweaks ===== */
/* Mobile: country-code dropdown shown beside the number (percent widths so this also
   beats the legacy `input#txtMobile { max-width:63% }` rule on small phones) */
/* NOTE: `select#txtmobc1` / `input#txtMobile` (element+id) is required so these beat the
   generic `.cm-home-banner #country1 select { width:100% }` rule above. */
.cm-home-banner select#txtmobc1,
.cm-home-banner #country1 select#txtmobc1 { display: inline-block !important; width: 33% !important; margin: 0 2% 0 0 !important; vertical-align: top !important; }
.cm-home-banner input#txtMobile,
.cm-home-banner #country1 input#txtMobile { display: inline-block !important; width: 62% !important; max-width: 62% !important; margin: 0 !important; vertical-align: top !important; }

/* Gender: plain radio buttons (RadioButtonList renders a table of input+label) */
/* drop table layout so the cells hug their content (a 100%-wide table splits 50/50
   and pushes "Female" to the middle) */
.cm-home-banner #txtGender { display: inline-block !important; width: auto !important; border: 0 !important; border-collapse: separate; }
.cm-home-banner #txtGender tbody,
.cm-home-banner #txtGender tr { display: inline !important; }
.cm-home-banner #txtGender td { display: inline-block !important; width: auto !important; white-space: nowrap !important; padding: 0 32px 0 0 !important; vertical-align: middle !important; }
.cm-home-banner #txtGender td:last-child { padding-right: 0 !important; }
.cm-home-banner #txtGender input[type="radio"] {
  position: static !important; opacity: 1 !important; width: 16px !important; height: 16px !important;
  margin: 0 7px 0 0 !important; vertical-align: middle !important; accent-color: var(--primary);
}
.cm-home-banner #txtGender label {
  display: inline !important; text-align: left !important; cursor: pointer; margin: 0 !important;
  border: none !important; border-radius: 0 !important; padding: 0 !important; background: none !important;
  font-size: 14px !important; color: var(--ink) !important; font-weight: 500 !important; vertical-align: middle !important;
}
.cm-home-banner #txtGender input[type="radio"]:checked + label {
  border: none !important; background: none !important; color: var(--ink) !important; font-weight: 600 !important;
}

/* Profile By full width */
.cm-home-banner #txtPC { width: 100% !important; }

/* Progress bar (static, step 1 of 2) */
.cm-home-banner .cm-progress { display: flex; gap: 8px; margin: 0 0 20px; }
.cm-home-banner .cm-progress-seg { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.cm-home-banner .cm-progress-seg.active { background: var(--primary); }

/* Password Show/Hide toggle */
/* Force the password row + input visible (external reg JS may set inline display:none) */
.cm-home-banner .cm-pass-row { display: block !important; visibility: visible !important; height: auto !important; overflow: visible !important; }
.cm-home-banner .cm-pass-row .cm-pass-wrap,
.cm-home-banner .cm-pass-row input {
  display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important;
}
.cm-home-banner .cm-pass-wrap { position: relative; display: block; width: 100%; }
/* .cm-home-banner .cm-pass-wrap .f-input, */
.cm-home-banner .cm-pass-wrap input[type="password"],
.cm-home-banner .cm-pass-wrap input[type="text"] {
  width: 100% !important; height: auto !important; display: block !important;
  padding: 11px 58px 11px 12px !important;
  border: 1px solid var(--line) !important; border-radius: 4px !important;
  font-size: 14px !important; color: var(--ink) !important; background: #fff !important;
  box-sizing: border-box !important; margin: 0 !important; font-family: 'Roboto', sans-serif !important;
}
.cm-home-banner .cm-pass-show {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--primary); font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 4px; font-family: 'Roboto', sans-serif; z-index: 2;
}

/* Wizard action rows: keep fully inside the card */
.cm-home-banner .f-row2 {
  position: static !important; float: none !important; clear: both !important;
  width: 100% !important; max-width: 100% !important; display: block !important;
  margin: 28px 0 0 0 !important; padding-top: 4px !important; box-sizing: border-box !important;
}
.cm-home-banner #cmStep1Actions,
.cm-home-banner #cmStep2Actions { width: 100% !important; box-sizing: border-box !important; }

/* Step-2 actions: Back + Register side by side, contained */
.cm-home-banner #cmStep2Actions { display: flex; gap: 10px; }
.cm-home-banner #cmStep2Actions .cm-reg-submit { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; }
.cm-home-banner .cm-reg-back {
  flex: 0 0 auto; height: 46px; padding: 0 18px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-weight: 700; font-size: 14px;
  border-radius: 4px; cursor: pointer; white-space: nowrap; font-family: 'Roboto', sans-serif;
}
.cm-home-banner .cm-reg-back:hover { border-color: var(--primary); color: var(--primary); }

/* ---------- New decorative sections wrapper ---------- */
.cm-home-section { font-family: var(--sans); }
.cm-home-section, .cm-home-section * { font-family: 'Roboto', sans-serif !important; line-height: 1.5 !important; }
.cm-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- HERO band ---------- */
.cm-hero {
  background: linear-gradient(115deg, #2f5a3a 0%, #244a30 55%, #1b3a24 100%);
  color: #fff;
  padding: 56px 0 60px;
  border-bottom: 4px solid var(--primary);
}
.cm-hero .cm-wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.cm-hero-eyebrow {
  display: inline-block; background: rgba(255,255,255,0.14); color: #ffe4ca;
  font-size: 13px !important; font-weight: 700; letter-spacing: .5px;
  padding: 6px 14px; border-radius: 40px; margin-bottom: 18px;
}
.cm-hero h1 {
  font-size: 44px !important; line-height: 1.12 !important; font-weight: 700;
  margin: 0 0 16px; color: #fff;
}
.cm-hero h1 em { color: var(--gold); font-style: normal; }
.cm-hero p { font-size: 17px !important; color: #eadfd0; margin: 0 0 26px; max-width: 520px; }
.cm-hero-stats { display: flex; gap: 36px; flex-wrap: wrap; }
.cm-hero-stat .num { font-size: 30px !important; font-weight: 700; color: var(--gold); display: block; }
.cm-hero-stat .lab { font-size: 13.5px !important; color: #d9cdbd; }
.cm-hero-aside {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px; padding: 28px; backdrop-filter: blur(2px);
}
.cm-hero-aside h3 { font-size: 20px !important; margin: 0 0 14px; color: #fff; }
.cm-hero-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cm-hero-aside li { font-size: 15px !important; color: #f0e8db; display: flex; gap: 10px; align-items: center; }
.cm-hero-aside li::before {
  content: '\2713'; color: #1b3a24; background: var(--gold); font-weight: 800;
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; flex: 0 0 auto; font-size: 13px !important;
}

/* ---------- Generic section heading ---------- */
.cm-section { padding: 56px 0; }
.cm-section.alt { background: #fffaf3; }
.cm-section-head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.cm-section-head h2 { font-size: 34px !important; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.cm-section-head h2 em { color: var(--primary); font-style: normal; }
.cm-section-head p { font-size: 15.5px !important; color: var(--mute); margin: 0; }

/* ---------- Trust stat cards ---------- */
.cm-trust-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.cm-trust-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 28px; text-align: center; box-shadow: 0 10px 30px -20px rgba(31,20,16,.25);
}
.cm-trust-card .num { font-size: 34px !important; font-weight: 800; color: var(--primary); }
.cm-trust-card .lab { font-size: 14.5px !important; color: var(--mute); margin-top: 6px; }

/* ---------- Religion cards ---------- */
.cm-religion-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.cm-religion-card {
  display: block; text-decoration: none; text-align: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 30px 18px; transition: all .2s ease; color: var(--ink);
}
.cm-religion-card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 14px 30px -18px rgba(217,18,52,.35); }
.cm-religion-card .ico { font-size: 34px !important; }
.cm-religion-card .name { font-size: 17px !important; font-weight: 700; margin-top: 12px; }
.cm-religion-card .cta { font-size: 13px !important; color: var(--primary); font-weight: 600; margin-top: 6px; }

/* ---------- Success stories ---------- */
.cm-stories-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.cm-story-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px; box-shadow: 0 10px 30px -22px rgba(31,20,16,.3);
}
.cm-story-card .quote { font-size: 15px !important; color: var(--ink); line-height: 1.6 !important; }
.cm-story-card .who { margin-top: 16px; font-size: 13.5px !important; color: var(--primary); font-weight: 700; }
.cm-story-card .stars { color: var(--gold); font-size: 15px !important; margin-bottom: 10px; }

/* ---------- Premium assisted callout ---------- */
.cm-premium {
  background: linear-gradient(120deg, #2a1a1c, #4a1020);
  border-radius: 20px; padding: 44px; color: #fff;
  display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 30px; align-items: center;
}
.cm-premium h2 { font-size: 30px !important; margin: 0 0 12px; color: #fff; }
.cm-premium p { font-size: 15.5px !important; color: #e9d9dd; margin: 0; }
.cm-premium .cm-btn-gold {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: #2a1a1c; font-weight: 800; font-size: 15px !important;
  padding: 14px 26px; border-radius: 8px; text-decoration: none; white-space: nowrap;
}
.cm-premium .cm-btn-gold:hover { filter: brightness(1.06); }

/* ==============================================================
   RESTYLE-IN-PLACE of the existing Register / Search form
   (selectors target the live markup; scoped to logged-out only)
   ============================================================== */

/* The form column -> clean card */
body.cm-prelogin .fix-box,
body.cm-prelogin .t-right_col,
body.cm-prelogin .right_form_box {
  height: auto !important;
  width: auto !important;
  background: var(--paper) !important;
  font-family: 'Roboto', sans-serif !important;
}
body.cm-prelogin .right_form_box {
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 44px -26px rgba(31,20,16,.3) !important;
  /* padding: 8px 18px 20px !important; */
 
}

/* Tabs (Register Free / Search) */
body.cm-prelogin #countrytabs.shadetabs { border: none !important; padding: 0 !important; margin: 4px 0 16px !important; display: flex; gap: 8px; }
body.cm-prelogin #countrytabs.shadetabs li { display: inline-block; margin: 0 !important; }
body.cm-prelogin #countrytabs.shadetabs li a {
  display: inline-block; padding: 10px 18px !important; border-radius: 8px 8px 0 0 !important;
  background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line) !important;
  font-size: 14.5px !important; font-weight: 700 !important; text-decoration: none !important;
}
body.cm-prelogin #countrytabs.shadetabs li a.selected,
body.cm-prelogin #countrytabs.shadetabs li a:hover {
  background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important;
}

/* Field rows + labels */
body.cm-prelogin .f-row,
body.cm-prelogin .f-row1,
body.cm-prelogin .f-row2 { margin-bottom: 14px !important; }
/* body.cm-prelogin .f-lab { font-size: 13.5px !important; font-weight: 600 !important; color: var(--ink) !important; margin-bottom: 6px !important; } */
body.cm-prelogin .star { color: var(--primary) !important; display: inline; }

/* Inputs, selects (both Register and Search tabs) */
/* body.cm-prelogin .f-input, */
body.cm-prelogin .f-input2,
body.cm-prelogin #country1 input[type="text"],
body.cm-prelogin #country1 input[type="email"],
body.cm-prelogin #country1 input[type="password"],
body.cm-prelogin #country1 select,
body.cm-prelogin #country2 input[type="text"],
body.cm-prelogin #country2 select {
  height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: var(--paper) !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 14.5px !important;
  color: var(--ink) !important;
  box-sizing: border-box;
}
body.cm-prelogin .f-input:focus,
body.cm-prelogin #country1 select:focus,
body.cm-prelogin #country2 select:focus,
body.cm-prelogin #country2 input[type="text"]:focus {
  outline: none !important; border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-soft) !important;
}
/* DOB selects sit inline – let them auto-size */
body.cm-prelogin #DOBDAY, body.cm-prelogin #DOBMONTH, body.cm-prelogin #DOBYEAR { width: auto !important; min-width: 70px; }
/* Gender radio row */
body.cm-prelogin #txtGender label { font-size: 14.5px !important; margin-right: 14px; }

/* Submit / search image buttons – give them breathing room */
body.cm-prelogin .f-row2 { text-align: center; margin-top: 18px !important; }
body.cm-prelogin .subnit, body.cm-prelogin #ImageButton1 { max-width: 100%; }

/* Tooltip helper text – keep subtle */
body.cm-prelogin .tooltips span { font-size: 12px !important; color: var(--mute) !important; }

/* ---------- Inline validation errors (shown under each input) ----------
   The existing Validate() writes its messages into these *_span elements.
   The legacy spnchk.css hides/mis-positions them, so we force them visible
   as a red message directly below the field. Empty spans collapse to nothing. */
body.cm-prelogin #name_span,
body.cm-prelogin #gender_span,
body.cm-prelogin #dob_span,
body.cm-prelogin #reli_span,
body.cm-prelogin #divi_span,
body.cm-prelogin #caste_span,
body.cm-prelogin #subcaste_span,
body.cm-prelogin #mobno_span,
body.cm-prelogin #email_span,
body.cm-prelogin #pass_span1,
body.cm-prelogin #pass_span,
body.cm-prelogin .spanchk {
  display: block !important;
  position: static !important;
  float: none !important;
  clear: both !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 4px 0 6px !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  text-align: left !important;
  color: #d91234 !important;
  background: none !important;
  border: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* collapse empty error spans so they take no space until a message appears */
body.cm-prelogin #name_span:empty,
body.cm-prelogin #gender_span:empty,
body.cm-prelogin #dob_span:empty,
body.cm-prelogin #reli_span:empty,
body.cm-prelogin #divi_span:empty,
body.cm-prelogin #caste_span:empty,
body.cm-prelogin #subcaste_span:empty,
body.cm-prelogin #mobno_span:empty,
body.cm-prelogin #email_span:empty,
body.cm-prelogin #pass_span1:empty,
body.cm-prelogin .spanchk:empty { margin: 0 !important; }
/* force the error colour onto any child nodes Validate() injects */
body.cm-prelogin .spanchk *,
body.cm-prelogin #email_span *,
body.cm-prelogin #pass_span1 * { color: #d91234 !important; font-size: 12px !important; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cm-hero .cm-wrap { grid-template-columns: 1fr; }
  .cm-trust-grid, .cm-stories-grid { grid-template-columns: 1fr; }
  .cm-religion-grid { grid-template-columns: 1fr 1fr; }
  .cm-premium { grid-template-columns: 1fr; text-align: center; }
  .cm-hero h1 { font-size: 34px !important; }
}