/* ==============================================================
   Chennai Matrimony — Search form (matrimonial-search-profiles.aspx)
   EXACT design (search.html / search.css). Restyle-IN-PLACE, scoped
   under .cm-search (#tabs). jQuery-UI tabs, fSelect, AJAX, ImageButtons
   and all flow stay intact — CSS only (+ a JS swap for the red Search pill).
   ============================================================== */
.cm-search {
  --paper:#fff; --ink:#1f1410; --mute:#766357; --line:rgba(31,20,16,0.14);
  --primary:#d91234; --primary-dark:#80081b; --primary-soft:#fcdde3; --surface:#fbefde;
  --serif:'Roboto',sans-serif; --sans:'Roboto',sans-serif;
  max-width:1200px !important; width:auto !important; margin:40px auto 80px !important;
  padding:0 24px !important; float:none !important; background:none !important; border:none !important;
}
.cm-search, .cm-search * { font-family:'Roboto',sans-serif !important; box-sizing:border-box; }

/* ── Tabbed dashboard header (#search_menu ul li a) = .sh-tabs-bar / .sh-tab ── */
.cm-search #search_menu { width:auto !important; margin:0 !important; padding:0 !important; background:none !important; border:none !important; }
.cm-search #search_menu ul {
  display:grid !important; grid-template-columns:repeat(5,1fr) !important; gap:6px !important;
  list-style:none !important; margin:0 !important; padding:6px !important;
  background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:12px !important;
}
.cm-search #search_menu li {
  list-style:none !important; margin:0 !important; padding:0 !important; background:none !important;
  border:none !important; float:none !important; display:flex !important; align-items:stretch !important;
  position:static !important; top:auto !important;
}
.cm-search #search_menu li a {
  display:flex !important; align-items:center !important; justify-content:center !important; gap:8px;
  width:100% !important; height:auto !important; line-height:1.2 !important; box-sizing:border-box !important;
  padding:13px 10px !important; font-size:17px !important; font-weight:600 !important;
  color:var(--mute) !important; background:transparent !important; background-image:none !important;
  border:1px solid transparent !important; border-radius:8px !important; text-decoration:none !important;
  white-space:nowrap; transition:all .25s ease; margin:0 !important; position:static !important; top:auto !important; float:none !important;
}
.cm-search #search_menu li a:hover { color:var(--ink) !important; background:rgba(0,0,0,0.02) !important; }
/* active tab — driven by our own .cm-active (set by JS on click), plus legacy .active / jQuery-UI classes.
   Uses border-COLOR only (the 1px transparent border is already on every tab) so the active tab is the
   SAME height as the others and sits flush inside the bar instead of popping out. */
.cm-search #search_menu li.cm-active a,
.cm-search #search_menu li.active a,
.cm-search #search_menu li.ui-tabs-active a,
.cm-search #search_menu li.ui-state-active a {
  background:var(--paper) !important; background-image:none !important; color:var(--primary-dark) !important; font-weight:700 !important;
  box-shadow:0 4px 12px rgba(31,20,16,0.08) !important; border-color:var(--line) !important;
}

/* ── neutralize jQuery-UI tab chrome (if .tabs() initialises) so our design wins ── */
.cm-search.ui-tabs, .cm-search.ui-widget, .cm-search.ui-widget-content {
  background:none !important; border:none !important; padding:0 !important; font-family:'Roboto',sans-serif !important; color:var(--ink) !important;
}
.cm-search #search_menu ul.ui-tabs-nav, .cm-search #search_menu ul.ui-widget-header {
  background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:12px !important;
}
.cm-search #search_menu li.ui-state-default,
.cm-search #search_menu li.ui-state-active,
.cm-search #search_menu li.ui-corner-top {
  background:none !important; border:none !important; border-radius:8px !important; float:none !important; margin:0 !important; top:0 !important;
}
.cm-search #search_menu li a.ui-tabs-anchor { float:none !important; padding:14px 10px !important; }
.cm-search .ui-tabs-panel { background:none !important; border:none !important; padding:0 !important; }

/* remove the legacy wrapper's background + border — ONLY before login (when #tabs.cm-search
   is present). After login there's no .cm-search, so the legacy wrapper keeps its styling. */
.search_wrapper:has(.cm-search) { background:none !important; border:none !important; box-shadow:none !important; }

/* ── Form card (.search_form) = .sh-card ── */
.cm-search #search_main, .cm-search .form_left {
  width:auto !important; float:none !important; padding:0 !important; background:none !important; border:none !important;
}
/* gap between the tab bar and the card (design = .sh-tabs-bar margin-bottom:30px) */
.cm-search #search_main { margin-top:30px !important; }
.cm-search #tabs-1, .cm-search #tabs-2, .cm-search #tabs-3, .cm-search #tabs-5, .cm-search #tabs-6 { margin-top:0 !important; }
.cm-search .search_form {
  background:var(--paper) !important; border:1px solid var(--line) !important; border-radius:16px !important;
  padding:40px !important; width:auto !important; box-shadow:0 12px 30px -15px rgba(31,20,16,0.12) !important; margin-bottom:40px !important;
}
/* per-tab heading ("Quick Search" etc.) + intro description — shown on EVERY tab */
.cm-search .search_form > h1 {
  display:block !important; font-family:var(--serif) !important; font-size:22px !important; font-weight:700 !important; color:#C97210 !important;
  margin:0 0 6px !important; padding:0 !important; line-height:1.3 !important; border-bottom:none !important;
}
/* intro description sits directly under the heading; the divider line goes UNDER the description */
.cm-search .search_form > .search_tbl:first-of-type > div:first-child {
  display:block !important; border-bottom:1px solid var(--line) !important; padding-bottom:16px !important; margin-bottom:4px !important;
}
.cm-search .search_form > .search_tbl:first-of-type > div:first-child br { display:none !important; }
.cm-search .search_tbl > div { font-family:var(--serif) !important; font-size:14.5px !important; color:var(--mute) !important; font-style:italic; line-height:1.5 !important; margin-bottom:8px; }

/* remove the legacy .search_tbl dotted bottom border (from external search_final.css) */
.cm-search .search_tbl { border-bottom:none !important; border:none !important; width:auto !important; }

/* ── rows: legacy table laid out like the design's .sh-row (label column + field column) ── */
.cm-search .search_tbl table,
.cm-search .search_tbl tbody { display:block !important; width:100% !important; max-width:760px !important; margin:18px 0 0 !important; }
/* exact design .sh-row: flex, centered, 15px padding, dotted bottom border */
.cm-search .search_tbl tr {
  display:flex !important; align-items:center !important; flex-wrap:wrap; gap:8px 10px;
  border-bottom:1px dotted #ccc !important; padding:15px 0 !important; margin:0 !important; width:100% !important;
}
.cm-search .search_tbl tr:last-child { border-bottom:none !important; }
.cm-search .search_tbl td { display:block !important; width:auto !important; height:auto !important; padding:0 !important; border:none !important; vertical-align:middle !important; }
/* label = the FIRST cell of every row (handles .style97, .style01, etc.) = design .sh-row-label */
.cm-search .search_tbl tr > td:first-child {
  font-family:var(--sans) !important; font-size:14.5px !important; font-weight:700 !important; color:var(--ink) !important;
  text-align:left !important; flex:0 0 25% !important; width:25% !important; min-width:150px !important; white-space:normal;
}
/* empty spacer cells are hidden by JS (cm-spacer) so fields line up in one column */
.cm-search .search_tbl tr td.cm-spacer { display:none !important; }
.cm-search .style95, .cm-search .style01 { font-size:14.5px !important; color:var(--ink) !important; }

/* ── heading-based rows (<h2>Label</h2> + field table) -> label-left / field-right same line ── */
.cm-search .search_tbl:has(> h2) {
  display:flex !important; align-items:center !important; flex-wrap:wrap; gap:8px 10px;
  border-bottom:1px dotted #ccc !important; padding:15px 0 !important; margin:0 !important; width:100% !important; max-width:760px !important;
}
.cm-search .search_tbl:has(> h2) > h2 {
  flex:0 0 25% !important; width:25% !important; min-width:150px !important; margin:0 !important;
  font-family:var(--sans) !important; font-size:14.5px !important; font-weight:700 !important; color:var(--ink) !important;
}
.cm-search .search_tbl:has(> h2) > table,
.cm-search .search_tbl:has(> h2) > div { flex:1 1 auto !important; width:auto !important; margin:0 !important; display:block !important; }
/* inside a heading section, the field cell is NOT a label -> let it fill, no extra row borders */
.cm-search .search_tbl:has(> h2) table tr { display:block !important; border:none !important; padding:0 !important; }
.cm-search .search_tbl:has(> h2) table tr > td:first-child { flex:none !important; width:auto !important; min-width:0 !important; font-weight:400 !important; }

/* ── inputs / selects = .sh-select ── */
.cm-search select,
.cm-search input[type="text"],
.cm-search input[type="number"] {
  height:40px !important; padding:0 14px !important; border:1px solid var(--line) !important; border-radius:6px !important;
  font-size:14.5px !important; color:var(--ink) !important; background:var(--paper) !important;
  min-width:130px; max-width:340px; outline:none; transition:all .15s ease;
}
.cm-search select {
  -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:34px !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23766357' d='M0 0h10L5 6z'/></svg>") !important;
  background-repeat:no-repeat !important; background-position:right 14px center !important;
}
.cm-search select:focus,
.cm-search input[type="text"]:focus,
.cm-search input[type="number"]:focus { border-color:var(--primary) !important; box-shadow:0 0 0 3px var(--primary-soft) !important; }
.cm-search input[type="radio"], .cm-search input[type="checkbox"] { width:16px; height:16px; accent-color:var(--primary); margin-right:6px; vertical-align:middle; }
.cm-search input#fa, .cm-search input#ta { width:70px !important; min-width:0 !important; text-align:center; }

/* ── multi-select widgets kept functional (B1) but styled to fit the design ── */
/* native multi-select listbox (Caste = #txtcaste / .style98) */
.cm-search select[multiple],
.cm-search .style98 {
  border:1px solid var(--line) !important; border-radius:6px !important; padding:6px 8px !important;
  width:auto !important; min-width:240px !important; max-width:340px !important;
  height:auto !important; max-height:170px !important; font-size:14px !important; background:#fff !important;
}
.cm-search select[multiple] option { padding:3px 4px; }
/* fSelect widget (Division / Sub-Caste, class .test) */
.cm-search .fs-wrap { width:300px !important; max-width:100% !important; margin:0 !important; }
.cm-search .fs-label {
  border:1px solid var(--line) !important; border-radius:6px !important; background:#fff !important;
  font-size:14px !important; color:var(--ink) !important; padding:9px 12px !important; min-height:40px;
}
.cm-search .fs-dropdown {
  border:1px solid var(--line) !important; border-radius:8px !important; padding:6px !important;
  box-shadow:0 12px 30px -10px rgba(31,20,16,0.25) !important; z-index:60 !important; background:#fff !important;
}
/* the Search box inside the dropdown */
.cm-search .fs-search { padding:4px !important; margin-bottom:4px; }
.cm-search .fs-search input {
  width:100% !important; height:38px !important; padding:0 12px !important; margin:0 !important;
  border:1px solid var(--line) !important; border-radius:6px !important; font-size:14px !important;
  color:var(--ink) !important; background:#fff !important; box-sizing:border-box !important; outline:none;
}
.cm-search .fs-search input:focus { border-color:var(--primary) !important; box-shadow:0 0 0 3px var(--primary-soft) !important; }
/* the checkbox option list */
.cm-search .fs-options { max-height:230px !important; overflow-y:auto !important; }
.cm-search .fs-option { padding:7px 10px !important; font-size:14px !important; border-radius:4px; display:flex; align-items:center; gap:8px; }
.cm-search .fs-option:hover, .cm-search .fs-option.hl { background:var(--primary-soft) !important; }
.cm-search .fs-option.selected { background:#fff !important; font-weight:600; }
.cm-search .fs-option .checkbox { flex:0 0 auto; }
/* vsb (vanilla-select-box) widget search box (Caste = #search_txtcaste) — full width, no 230px cap */
.cm-search .vsb-js-search-zone {
  z-index:1001 !important; background:#fff !important; box-sizing:border-box !important; max-width:none !important;
}
.cm-search .vsb-js-search-zone input,
.cm-search input[id^="search_"] {
  max-width:none !important; width:100% !important; height:38px !important; padding:0 12px !important; margin:0 !important;
  border:1px solid var(--line) !important; border-radius:6px !important; font-size:14px !important; color:var(--ink) !important;
  background:#fff !important; box-sizing:border-box !important; outline:none;
}
.cm-search .vsb-js-search-zone input:focus,
.cm-search input[id^="search_"]:focus { border-color:var(--primary) !important; box-shadow:0 0 0 3px var(--primary-soft) !important; }
.cm-search .vsb-menu { width:100% !important; max-width:340px !important; border:1px solid var(--line) !important; border-radius:8px !important; box-shadow:0 12px 30px -10px rgba(31,20,16,0.25) !important; }
/* the vsb dropdown option list + items — remove the 260px/200px caps so names aren't cut */
.cm-search ul.multi { min-width:260px !important; max-width:none !important; max-height:400px !important; width:auto !important; }
.cm-search ul.multi li,
.cm-search ul.multi li.short { max-width:none !important; width:auto !important; white-space:nowrap; }

/* the legacy "Caste" / section sub-heading -> left label look */
.cm-search .search_tbl h2 {
  font-family:var(--sans) !important; font-size:14.5px !important; font-weight:700 !important; color:var(--ink) !important;
  margin:18px 0 10px !important; padding:0 !important;
}

/* ── Gender as red/white pills ("Looking For") on Quick & Occupation (JS-built) ── */
.cm-search .cm-gender-pills {
  display:inline-flex; align-items:stretch; height:36px; width:200px; max-width:100%;
  border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff;
}
.cm-search .cm-gp {
  flex:1 1 0; border:none; background:#fff; color:var(--ink); font-family:'Roboto',sans-serif !important;
  font-size:14px; font-weight:600; cursor:pointer; padding:0 16px; transition:all .2s ease;
}
.cm-search .cm-gp + .cm-gp { border-left:1px solid var(--line); }
.cm-search .cm-gp.active { background:var(--primary); color:#fff !important; font-weight:700; }

/* ── Search button: hide legacy ImageButton, show exact red pill (injected by JS) ── */
.cm-search .search { display:none !important; }
.cm-search td[align="right"] { text-align:right !important; padding-top:18px !important; }
.cm-search .btn-search-red {
  background:#E50000; color:#fff !important; border:none; border-radius:20px; padding:8px 36px;
  font-family:var(--sans); font-size:17px; font-weight:700; cursor:pointer; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(229,0,0,0.25); transition:all .2s ease;
}
.cm-search .btn-search-red:hover { background:#C80000; transform:scale(1.02); }

@media (max-width:768px) {
  /* tab header: no icons, two-column (left/right) grid, each label centered inside its cell */
  .cm-search #search_menu ul { grid-template-columns:repeat(2, 1fr) !important; gap:8px !important; align-items:stretch !important; }
  .cm-search #search_menu li { display:block !important; min-width:0 !important; width:auto !important; }
  .cm-search #search_menu li a {
    display:block !important; width:100% !important; box-sizing:border-box !important;
    text-align:center !important; white-space:normal !important; word-break:break-word !important;
    font-size:14px !important; line-height:1.25 !important; padding:12px 6px !important;
    margin:0 !important; float:none !important; position:static !important; left:auto !important; right:auto !important;
  }
  .cm-search #search_menu li a svg { display:none !important; }
  /* selected tab: full-width white card in its own cell, dark-red centered label */
  .cm-search #search_menu li.cm-active a,
  .cm-search #search_menu li.active a,
  .cm-search #search_menu li.ui-tabs-active a,
  .cm-search #search_menu li.ui-state-active a {
    display:block !important; width:100% !important; margin:0 !important; position:static !important; left:auto !important;
    color:var(--primary-dark) !important; box-shadow:none !important;
  }
  .cm-search .search_form { padding:22px 16px !important; }
  .cm-search .style97 { width:auto !important; display:block; white-space:normal; }
}

/* divider below a non-heading field group (e.g. Religion) so it separates from the next section (Caste) */
.cm-search .search_form > .search_tbl:not(:has(> h2)) { border-bottom:1px dotted #ccc !important; padding-bottom:15px !important; }

/* Show Profile checkbox labels (With Photo / With Horoscope) — consistent font/style */
.cm-search .search_tbl input[type="checkbox"] { width:16px !important; height:16px !important; accent-color:var(--primary) !important; vertical-align:middle !important; margin:0 8px 0 0 !important; flex:none !important; }
.cm-search .search_tbl td:has(input[type="checkbox"]) {
  font-family:var(--sans) !important; font-size:14px !important;  color:var(--ink) !important; font-style:normal !important;
  display:inline-flex !important; align-items:center !important;
}

/* ============================================================
   Tamilnadu Community Based Brides & Grooms — EXACT home-page design
   (rendered before login only). Full-bleed standalone segment; vars
   declared on the section so it's self-contained.
   ============================================================ */
.community-links-section {
  --bg:#fffcf8; --paper:#FFFFFF; --surface:#FBEFDE; --ink:#1F1410; --mute:#766357;
  --line:rgba(31,20,16,0.10); --primary:#D91234; --primary-dark:#80081B; --gold:#D4A84B;
  --font-sans:'Roboto',sans-serif; --font-serif:'Fraunces',Georgia,serif;
  --transition:all 0.3s cubic-bezier(0.25,0.8,0.25,1); --radius-md:8px;
  padding: 80px 0; background: var(--bg); border-top: 1px solid var(--line);
  position: relative; overflow: hidden;
  width: 100vw !important; max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
  font-family: var(--font-sans);
}
.community-links-section * { box-sizing: border-box; }
.community-links-section .container { max-width: 1200px; width: auto; margin: 0 auto; padding: 0 24px; }
.community-section-header { text-align: center; max-width: 800px; margin: 0 auto 56px; position: relative; z-index: 2; }
.community-section-header .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; }
.community-section-header .section-title { font-family: var(--font-sans); font-weight: 500; color: var(--ink); letter-spacing: -0.5px; line-height: 1.15; font-size: 38px; margin-bottom: 16px; }
.community-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 24px; margin-bottom: 48px; position: relative; z-index: 2; }
.community-col { display: flex; flex-direction: column; gap: 12px; }
.comm-link {
  font-family: var(--font-sans); font-size: 13.5px; color: var(--mute); text-decoration: none; font-weight: 500;
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md);
  transition: var(--transition); box-shadow: 0 2px 4px rgba(31,20,16,0.02);
}
.comm-link::before { content: "\2726"; color: var(--gold); font-size: 9px; transition: transform 0.3s ease; }
.comm-link:hover { background: var(--surface); border-color: var(--primary); color: var(--primary); transform: translateX(4px); box-shadow: 0 4px 10px rgba(31,20,16,0.05); }
.comm-link:hover::before { transform: scale(1.2) rotate(90deg); color: var(--primary); }
.community-footer { text-align: center; margin-top: 24px; position: relative; z-index: 2; }
.comm-more-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px;
  background: var(--primary); color: #fff !important; border-radius: 99px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; text-decoration: none;
  box-shadow: 0 8px 24px -8px var(--primary); transition: var(--transition);
}
.comm-more-btn span, .comm-more-btn svg { color: #fff !important; stroke: #fff; }
.comm-more-btn:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 12px 28px -6px var(--primary); }
.comm-more-btn svg { transition: transform 0.3s ease; }
.comm-more-btn:hover svg { transform: translateX(4px); }
@media (max-width: 1024px) { .community-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .community-links-section { padding: 60px 24px; } .community-section-header .section-title { font-size: 28px; } .community-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px) { .community-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Quick Search form — Complexion removed, Dosham inline, mobile stacking
   ============================================================ */

/* Complexion field removed from the search form. Targeted via the select so it stays
   hidden regardless of the inline style on the wrapper. The hidden #htxtComplexion input
   is left in the form and simply posts empty (= "any"), so the search logic is unchanged. */
.cm-search .search_tbl:has(#txtComplexion) { display: none !important; }

/* Dosham: Yes / No on one line. The generic `.search_tbl td { display:block }` rule above
   stacked the two cells vertically. */
/* Radio cells (Gender, Dosham): radio + its label on ONE line, options side by side.
   The legacy markup sets width="30" / width="50" on these cells, so as flex items they
   shrank below their content and the label wrapped under the radio ("Female"). */
.cm-search .search_tbl td:has(input[type="radio"]) {
  display: inline-flex !important; align-items: center !important;
  width: auto !important; min-width: 0 !important; flex: 0 0 auto !important;
  white-space: nowrap !important; margin: 0 28px 0 0 !important;
  vertical-align: middle !important; line-height: 1.4 !important;
  font-size: 14.5px !important; color: var(--ink) !important;
  /* align every radio cell to the same cross-start edge. With align-items:center the first
     cell in a row centred differently from the rest, leaving the radios 4px apart. */
  align-self: flex-start !important;
}
/* Dosham's row is inside a :has(> h2) section, where the generic rule sets tr{display:block}.
   Inline layout there left the two radios 4px apart; flex + align-items:center (the same as
   every other search row) puts them on exactly the same line. */
.cm-search .search_tbl:has(> h2) table:has(input[name="radioDosham"]) tr {
  display: flex !important; align-items: center !important; flex-wrap: wrap !important;
}
.cm-search .search_tbl input[type="radio"] {
  width: 16px !important; height: 16px !important; accent-color: var(--primary) !important;
  margin: 0 8px 0 0 !important; vertical-align: middle !important; flex: none !important;
}

/* Mobile: a 25%/150px label + two 130px fields overflow a phone, so the fields wrapped
   mid-row ("18 to" / "25"). Put the label on its own line and let the fields flow below. */
@media (max-width: 768px) {
  .cm-search .search_tbl tr > td:first-child,
  .cm-search .search_tbl:has(> h2) > h2 {
    flex: 0 0 100% !important; width: 100% !important; min-width: 0 !important; margin: 0 0 8px !important;
  }

  .cm-search .search_tbl:has(> h2) > table,
  .cm-search .search_tbl:has(> h2) > div {
    flex: 1 1 100% !important; width: 100% !important;
  }

  .cm-search select,
  .cm-search input[type="text"],
  .cm-search input[type="number"] {
    min-width: 0 !important; max-width: 100% !important;
  }
}