/* ==============================================================
   Chennai Matrimony — Registration steps (2–5) UI redesign (v1.5)
   Scoped under .reg_wrapper (present on every step page) so it
   restyles the EXISTING form markup in place — all server controls,
   AJAX and JS stay untouched. No global resets (master is safe).
   ============================================================== */
.reg_wrapper {
  --paper:#ffffff; --ink:#1f1410; --mute:#766357; --line:rgba(31,20,16,0.12);
  --primary:#d91234; --primary-dark:#80081b; --primary-soft:#fcdde3; --gold:#d4a84b;
  --surface:#fbefde;
}
.reg_wrapper, .reg_wrapper * { font-family:'Roboto','Inter',Arial,sans-serif !important; box-sizing:border-box; }

/* ---- 2-column layout: form + side panel ---- */
.reg_wrapper {
  max-width:1120px !important; width:auto !important; margin:30px auto !important; padding:0 24px !important;
  display:grid !important; grid-template-columns:1.5fr 0.75fr; gap:28px; align-items:start; float:none !important;
}
.reg_wrapper .content-left-box,
.reg_wrapper .content-right { width:auto !important; float:none !important; margin:0 !important; border-right:none !important; }

/* ---- form card ---- */
.reg_wrapper #Reg_form {
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 24px 60px -34px rgba(31,20,16,0.3); padding:30px 30px 26px; width:auto !important;
}
.reg_wrapper #Reg_form > h1 { font-size:26px !important; font-weight:700 !important; color:var(--ink) !important; margin:0 0 4px !important; }
.reg_wrapper #Reg_form > p { font-size:14px !important; color:var(--mute) !important; margin:0 0 6px !important; line-height:1.5 !important; }

/* ---- progress meter (added in markup) ---- */
.reg_wrapper .cm-meter { margin:14px 0 22px; }
.reg_wrapper .cm-meter-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; }
.reg_wrapper .cm-meter-lbl { font-size:13px !important; color:var(--mute) !important; font-weight:500; }
.reg_wrapper .cm-meter-pct { font-size:13px !important; color:var(--primary) !important; font-weight:700; }
.reg_wrapper .cm-meter-bar { height:8px; background:var(--line); border-radius:6px; overflow:hidden; }
.reg_wrapper .cm-meter-fill { height:100%; background:linear-gradient(90deg,var(--primary),var(--gold)); border-radius:6px; }

/* ---- section: design has no section headers / card grouping ---- */
.reg_wrapper .form_step1 { margin-bottom:0 !important; background:none !important; border:none !important; padding:0 !important; }
.reg_wrapper .form_step1 > h1 { display:none !important; }

/* ---- field label + wrapper ---- */
.reg_wrapper .style90 {
  display:block !important; float:none !important; width:auto !important; height:auto !important;
  font-size:13px !important; font-weight:600 !important; color:var(--ink) !important; margin:0 0 6px !important; padding:0 !important;
}
.reg_wrapper .style90 span { color:var(--primary) !important; }
.reg_wrapper .ffieldnew {
  display:block !important; float:none !important; width:auto !important; height:auto !important; margin:0 0 15px !important; padding:0 !important;
}
.reg_wrapper .ffieldnew > span { display:none; }            /* the   spacer */
.reg_wrapper .tooltips { display:block !important; position:static !important; }
.reg_wrapper .tooltips > span { display:none !important; }  /* hide inline help bubble text for clean cards */
.reg_wrapper .style89 { font-size:12px !important; color:var(--mute) !important; margin:5px 0 0 !important; }
.reg_wrapper .errmsg { font-size:12px !important; color:var(--primary) !important; }

/* ---- inputs / selects / textareas ---- */
.reg_wrapper .nor,
.reg_wrapper .ffieldnew select,
.reg_wrapper .ffieldnew input[type="text"],
.reg_wrapper .ffieldnew input[type="tel"],
.reg_wrapper .ffieldnew input[type="number"],
.reg_wrapper .ffieldnew input[type="password"],
.reg_wrapper .ffieldnew textarea {
  width:100% !important; max-width:none !important; min-width:0 !important; height:50px !important;
  padding:0 14px !important; border:1px solid #d6cabb !important; border-radius:6px !important;
  font-size:16px !important; color:var(--ink) !important; background:#fff !important; margin:0 !important;
}
.reg_wrapper .ffieldnew textarea { height:auto !important; padding:12px 14px !important; max-width:none !important; min-height:90px; }
/* Profile description (step 5): the remaining-characters counter is a read-only <input type=text>,
   so the full-width field rule above blew it up. Keep it a small chip. `input#remLen1` (id) is
   needed to out-specify `.reg_wrapper .ffieldnew input[type="text"]`. */
.reg_wrapper input#remLen1 {
  width:56px !important; max-width:56px !important; min-width:0 !important;
  height:34px !important; padding:0 8px !important; font-size:13px !important;
  text-align:center !important; display:inline-block !important; vertical-align:middle !important;
  background:#f7f4ef !important; color:var(--mute) !important; border:1px solid #e0d7cb !important;
  border-radius:6px !important; cursor:default !important;
}
.reg_wrapper .nor:focus,
.reg_wrapper .ffieldnew select:focus,
.reg_wrapper .ffieldnew input:focus,
.reg_wrapper .ffieldnew textarea:focus {
  outline:none !important; border-color:var(--primary) !important; box-shadow:0 0 0 3px var(--primary-soft) !important;
}
/* gender / radio rows */
.reg_wrapper .ffieldnew input[type="radio"],
.reg_wrapper .ffieldnew input[type="checkbox"] { width:auto !important; margin-right:6px; }

/* ---- submit: hide legacy image, show flat button ---- */
.reg_wrapper .cm-real-submit { position:absolute !important; width:1px; height:1px; opacity:0; pointer-events:none; }
.reg_wrapper .cm-reg-submit {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:auto !important; max-width:none !important; height:44px; padding:0 36px; border:none; border-radius:22px;
  background:var(--primary); color:#fff; font-weight:700; font-size:16px; cursor:pointer;
  box-shadow:0 8px 20px -8px rgba(217,18,52,0.5); margin-top:24px;
}
.reg_wrapper .cm-reg-submit:hover { background:var(--primary-dark); }

/* ---- right "Why Choose" / info panel ---- */
.reg_wrapper .content-right-box-head {
  background:var(--surface) !important; border:1px solid var(--line); border-radius:14px 14px 0 0;
  padding:16px 18px; margin:0;
}
.reg_wrapper .content-right-box-head h4 { font-size:16px !important; color:var(--ink) !important; margin:6px 0 0 !important; }
.reg_wrapper .content-right-box-head h5 { font-size:14px !important; color:var(--primary) !important; margin:0 !important; }
.reg_wrapper .content-right-box {
  background:var(--paper); border:1px solid var(--line); border-top:none; border-radius:0 0 14px 14px;
  padding:18px; font-size:13.5px !important; color:var(--mute) !important; line-height:1.6;
}

/* ---- responsive ---- */
@media (max-width:880px) {
  .reg_wrapper { grid-template-columns:1fr !important; }
  .reg_wrapper .nor, .reg_wrapper .ffieldnew select, .reg_wrapper .ffieldnew input, .reg_wrapper .ffieldnew textarea { max-width:100% !important; }
}

/* ---- design info-card aside (A Few Steps / Need Assistance) — step 2 ---- */
.reg_wrapper .content-right.cm-rg-aside { background:#FBEFDE !important; padding:24px !important; display:flex !important; flex-direction:column !important; gap:18px !important; border:none !important; align-self:stretch !important; border-radius:16px !important; }
.reg_wrapper .cm-ic { background:var(--paper) !important; border:1px solid #efe7dd !important; border-radius:12px !important; padding:22px 24px !important; box-shadow:0 6px 18px rgba(138,24,60,0.04); }
.reg_wrapper .cm-ic-head { display:flex !important; align-items:center !important; gap:14px !important; padding-bottom:16px !important; margin-bottom:16px !important; border-bottom:1px solid var(--line) !important; }
.reg_wrapper .cm-ibadge { width:40px !important; height:40px !important; flex:none !important; border-radius:50% !important; background:var(--primary) !important; color:#fff !important; display:flex !important; align-items:center !important; justify-content:center !important; box-shadow:0 8px 18px -7px rgba(194,18,58,0.6); }
.reg_wrapper .cm-ibadge svg { width:20px !important; height:20px !important; display:block; }
.reg_wrapper .cm-ic-title { font-size:22px !important; font-weight:700 !important; color:var(--ink) !important; line-height:1.12 !important; letter-spacing:-0.3px; }
.reg_wrapper .cm-ic-title span { display:block !important; font-size:13.5px !important; font-weight:500 !important; color:var(--mute) !important; margin-top:3px !important; }
.reg_wrapper .cm-ic-list { list-style:none !important; margin:0 !important; padding:0 !important; }
.reg_wrapper .cm-ic-list li { position:relative !important; padding:6px 0 6px 22px !important; font-size:15.5px !important; color:var(--ink) !important; line-height:1.5 !important; background:none !important; }
.reg_wrapper .cm-ic-list li::before { content:"" !important; position:absolute !important; left:0 !important; top:11px !important; border-left:7px solid var(--primary) !important; border-top:5px solid transparent !important; border-bottom:5px solid transparent !important; }
.reg_wrapper .cm-ic-phones li { font-size:22px !important; font-weight:600 !important; letter-spacing:0.3px; padding-top:8px !important; padding-bottom:8px !important; }
.reg_wrapper .cm-ic-phones li::before { top:16px !important; }

/* ---- Secondary Mobile: country code (left) + number (right) on one row ---- */
.reg_wrapper #divSecMobile .ffieldnew { display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:10px !important; }
.reg_wrapper #divSecMobile .ffieldnew select { flex:0 0 120px !important; width:120px !important; max-width:120px !important; }
.reg_wrapper #divSecMobile .ffieldnew input[type="text"] { flex:1 1 0 !important; min-width:0 !important; width:auto !important; max-width:none !important; }
/* "(Optional)" now sits beside the label — mute it so it isn't styled like the red asterisk */
.reg_wrapper #divSecMobile .style90 .cm-optional {
  color:var(--mute) !important; font-weight:400 !important; font-size:12.5px !important; margin-left:6px !important;
}
/* mobile: keep the country code + number on ONE row. The row also holds a leading
   &nbsp; spacer span, which pushed the number input onto a second line. */
@media (max-width:600px) {
  .reg_wrapper #divSecMobile .ffieldnew { gap:8px !important; }
  .reg_wrapper #divSecMobile .ffieldnew > span:first-child { display:none !important; }
  .reg_wrapper #divSecMobile .ffieldnew select { flex:0 0 110px !important; width:110px !important; max-width:110px !important; }
  .reg_wrapper #divSecMobile .ffieldnew input[type="text"] { flex:1 1 0 !important; min-width:0 !important; }
}

/* ---- Residing City (fSelect .fs-wrap) -> match other fields (full-width, 50px) ---- */
.reg_wrapper #div_drpcity { width:100% !important; max-width:none !important; margin:0 !important; }
.reg_wrapper .fs-wrap { width:100% !important; max-width:none !important; display:block !important; margin:0 !important; }
.reg_wrapper .fs-wrap .fs-label-wrap { height:50px !important; display:flex !important; align-items:center !important; padding:0 !important; border:1px solid #d6cabb !important; border-radius:6px !important; background:#fff !important; box-sizing:border-box !important; cursor:pointer !important; }
/* label must fill the whole box: fSelect binds the open-click to .fs-label, so if it only
   spans its text the field opens just from the left corner. flex:1 makes the entire box clickable. */
.reg_wrapper .fs-wrap .fs-label { flex:1 1 auto !important; width:100% !important; display:block !important; font-size:16px !important; color:var(--ink) !important; padding:0 34px 0 14px !important; cursor:pointer !important; }
/* redraw the caret locally so a missing/overridden external rule can't leave it iconless */
.reg_wrapper .fs-wrap .fs-arrow { display:block !important; width:0 !important; height:0 !important;
  border-left:5px solid transparent !important; border-right:5px solid transparent !important; border-top:6px solid #7a6a58 !important;
  position:absolute !important; top:50% !important; right:14px !important; bottom:auto !important; margin-top:-3px !important; pointer-events:none !important; }
/* dropdown must match the field width (was 29% -> a narrow sliver that wrapped every city name) */
.reg_wrapper .fs-wrap .fs-dropdown, .reg_wrapper .fs-dropdown {
  width:100% !important; min-width:0 !important; left:0 !important; right:auto !important;
  box-sizing:border-box !important; border:1px solid #d6cabb !important; border-radius:0 0 8px 8px !important;
  box-shadow:0 12px 26px -12px rgba(31,20,16,0.28) !important; z-index:100 !important;
}
.reg_wrapper .fs-dropdown .fs-search { padding:8px !important; box-sizing:border-box !important; }
.reg_wrapper .fs-dropdown .fs-search input {
  width:100% !important; max-width:none !important; box-sizing:border-box !important;
  height:38px !important; padding:0 10px !important; font-size:14px !important;
  border:1px solid #d6cabb !important; border-radius:6px !important;
}
.reg_wrapper .fs-dropdown .fs-options { max-height:260px !important; overflow-y:auto !important; }
.reg_wrapper .fs-dropdown .fs-option { padding:10px 14px !important; font-size:14px !important; white-space:normal !important; }

/* ---- step heading (Registration Continue + red italic step counter) ---- */
.reg_wrapper #Reg_form .reg-f2 { font-size:36px !important; font-weight:700 !important; color:var(--ink) !important; line-height:1.1 !important; letter-spacing:-0.6px !important; margin:0 0 6px !important; }
.reg_wrapper #Reg_form .reg-f2 .cm-steps { color:var(--primary) !important; font-style:italic !important; font-size:38px !important; font-weight:500 !important; }
/* mobile: keep the heading to TWO lines — "Registration Continue" / "(Step N of 5)".
   The step counter is forced onto its own line so it can never split across two. */
@media (max-width:600px) {
  .reg_wrapper #Reg_form .reg-f2 { font-size:24px !important; line-height:1.25 !important; letter-spacing:-0.3px !important; }
  .reg_wrapper #Reg_form .reg-f2 .cm-steps { font-size:22px !important; display:block !important; white-space:nowrap !important; }
}

/* ---- steps WITHOUT the design aside (3/4/5): center the form, hide legacy Why Choose panel ---- */
.reg_wrapper:not(:has(.cm-rg-aside)) { display:block !important; max-width:760px !important; }
.reg_wrapper .content-right:not(.cm-rg-aside) { display:none !important; }

/* ---- inline radio groups (Body type / Physical Status etc.) ---- */
.reg_wrapper .ffieldnew table { width:auto !important; border-collapse:collapse !important; }
.reg_wrapper .ffieldnew table td { padding:0 22px 6px 0 !important; white-space:nowrap !important; vertical-align:middle !important; }
.reg_wrapper .ffieldnew table label { font-size:15px !important; color:var(--ink) !important; font-weight:500 !important; margin-left:6px !important; }
.reg_wrapper .ffieldnew table input[type="radio"] { accent-color:var(--primary) !important; vertical-align:middle !important; width:auto !important; height:auto !important; }

/* ---- step 4: Time of Birth (hrs / mins / AM-PM) stay in one row ---- */
.reg_wrapper #divTimeofBirth .ffieldnew { display:block !important; }
.reg_wrapper #divTimeofBirth .tooltips { display:flex !important; flex-wrap:nowrap !important; gap:10px !important; align-items:center !important; width:100% !important; }
.reg_wrapper #divTimeofBirth .tooltips select { width:auto !important; min-width:0 !important; flex:1 1 0 !important; height:50px !important; margin:0 !important; }
.reg_wrapper #divTimeofBirth .tooltips > span { display:none !important; }

/* ---- step 5: Profile Description label (left) + Help me to write (right) ---- */
.reg_wrapper #divProfileDesc .style90 { display:flex !important; align-items:center !important; flex-wrap:wrap !important; }
.reg_wrapper #divProfileDesc .style90 #myCheck { order:1 !important; margin-left:auto !important; accent-color:var(--primary) !important; width:auto !important; height:auto !important; vertical-align:middle !important; }
.reg_wrapper #divProfileDesc .style90 #profdesc { order:2 !important; color:var(--ink) !important; text-decoration:none !important; font-weight:500 !important; margin-left:6px !important; }

/* ---- master header: center the logo (this CSS loads only on reg steps 2-5) ---- */
.Reg-head-wrapper { text-align:center !important; }
.Reg-head-wrapper .header_wrapper_logo_main { float:none !important; display:inline-block !important; margin:0 auto !important; width:auto !important; }
.Reg-head-wrapper .header_wrapper_logo { float:none !important; display:inline-block !important; vertical-align:middle !important; }
.Reg-head-wrapper .header_wrapper_logo_name { display:none !important; }

/* ---- City autocomplete: dropdown was 20% wide + offset (only the name was clickable).
        Make it sit full-width under the input with comfortable, fully-clickable rows. ---- */
.reg_wrapper #divResidingCity .ffieldnew { position:relative !important; }
.reg_wrapper .autocomplete-items {
  width:auto !important; left:0 !important; right:0 !important; top:100% !important; margin:0 !important; padding:0 !important;
  background:#fff !important; border:1px solid #d6cabb !important; border-top:none !important; border-radius:0 0 8px 8px !important;
  box-shadow:0 12px 26px -12px rgba(31,20,16,0.28) !important; z-index:100 !important; max-height:260px !important; overflow-y:auto !important;
}
.reg_wrapper .autocomplete-items div { padding:10px 14px !important; font-size:14px !important; border-bottom:1px solid var(--line) !important; }
.reg_wrapper .autocomplete-items div:last-child { border-bottom:none !important; }
.reg_wrapper .autocomplete-items div:hover { background:var(--surface) !important; }

/* ---- remove Weight & Blood Group fields (step 3) per request (optional fields) ---- */
.reg_wrapper #divWeight, .reg_wrapper #divBloodGroup { display:none !important; }