/* =====================================================================
Padmasaliya Matrimonial — v2 components
Load AFTER css/style.css. Reuses the same variables, adds nothing to
the existing rules so the original stylesheet stays untouched.
===================================================================== */
/* Several components below set display:flex / display:grid, which beats the
browser default for [hidden]. Without this line, hiding them from
JavaScript silently does nothing. */
[hidden]{display:none !important;}
/* =====================================================================
COLLAPSIBLE SIDE NAVIGATION
The sidebar is eleven links tall. Docked on a laptop it eats a column
the results could use; stacked on a phone it pushed the profiles a full
screen down. So it is a drawer at every size: the button opens it, the
button closes it. On a laptop it slides the grid open beside the
content; on a phone it floats over the page with a scrim behind.
===================================================================== */
.nav-toggle{
flex:none;width:42px;height:42px;border-radius:11px;
border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
cursor:pointer;padding:0;
}
.nav-toggle span{
display:block;width:18px;height:2px;border-radius:2px;background:#fff;
transition:transform .22s ease, opacity .18s ease;
}
.nav-toggle:hover{background:rgba(255,255,255,.16);}
.nav-toggle:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px;}
/* open state folds the bars into an X */
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.nav-open .nav-toggle span:nth-child(2){opacity:0;}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.nav-scrim{
position:fixed;inset:0;background:rgba(40,15,20,.5);z-index:45;
animation:navScrimIn .2s ease;
}
@keyframes navScrimIn{from{opacity:0;}to{opacity:1;}}
/* ---- laptop and desktop: the column is there or it is not ----
Animating grid-template-columns to zero leaves the item overflowing its
own track at full width, so closing simply removes the column and lets
the results take the space. Instant, and it cannot half-close. */
@media (min-width:1081px){
.s3-body{grid-template-columns:minmax(0,1fr) 300px;}
/* 290 rather than 250. Measured, not guessed: at 250 the label column
came to 98px and the Tamil word wanted 104, so the browser cut it in
half. The badge is the variable — "SOON" is 36px but "விரைவில்" is 61
— so the column is sized for the widest pair with room to spare.
Only the desktop layout pays for it. */
body.nav-open .s3-body{grid-template-columns:290px minmax(0,1fr) 300px;}
.s3-sidebar{display:none;}
body.nav-open .s3-sidebar{display:block;}
.nav-scrim{display:none;}
}
/* ---- tablet and phone: the drawer floats over the page ---- */
@media (max-width:1080px){
.s3-sidebar{
position:fixed;top:0;left:0;bottom:0;z-index:60;
width:min(280px,82vw);
transform:translateX(-102%);
transition:transform .26s cubic-bezier(.22,.61,.36,1);
overflow-y:auto;overscroll-behavior:contain;
border-radius:0;border-right:1px solid var(--line);
box-shadow:0 0 40px rgba(0,0,0,.18);
padding:18px;
}
body.nav-open .s3-sidebar{transform:translateX(0);}
/* inside the drawer the links read as a list again, not a tab strip */
.s3-sidebar .s3-nav-item{width:100%;justify-content:flex-start;}
/* the hamburger is behind the open drawer, so the drawer carries its own
way out — tapping the scrim works too, but it is not signposted */
.nav-close{
position:absolute;top:10px;right:10px;
width:38px;height:38px;border-radius:50%;
border:1px solid var(--line);background:#fff;color:var(--ink);
font-size:24px;line-height:1;cursor:pointer;
}
.nav-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
/* the close button sits over the first thing in the drawer, so the
name block keeps clear of it rather than running underneath */
.s3-side-user{padding-right:44px;}
}
/* docked on a laptop, the drawer has the header's button and needs no X */
@media (min-width:1081px){ .nav-close{display:none;} }
@media (prefers-reduced-motion:reduce){
.s3-body,.s3-sidebar,.nav-toggle span{transition:none;}
.nav-scrim{animation:none;}
}
/* A long email has nowhere to break, and a flex child defaults to
min-width:auto — so the name block grew past the sidebar instead of
wrapping inside it. Let the box shrink, and let the address break. */
.s3-side-user{align-items:flex-start;}
.s3-side-user > div{min-width:0;flex:1;}
.s3-side-user .s3-avatar{flex:none;}
.s3-side-user b{
overflow-wrap:anywhere;word-break:break-word;line-height:1.35;
}
.s3-side-user span{overflow-wrap:anywhere;}
.s3-side-user .verified-chip{margin-top:5px;}
/* Same shape in the header, where the column is even tighter. There the
address is truncated rather than wrapped — the topbar is one line. */
.s3-user{min-width:0;}
.s3-user > div{min-width:0;}
.s3-user > div > b{
display:block;max-width:190px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.s3-user .s3-avatar{flex:none;}
/* ---------- Complete-profile gate ---------- */
.gate-card{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);
border-left:4px solid var(--gold);border-radius:16px;padding:22px;margin:0 0 22px;box-shadow:var(--shadow);}
.gate-card .gate-ic{color:var(--gold);flex:none;}
.gate-card .gate-ic .icon{width:34px;height:34px;}
.gate-body b{display:block;font-family:var(--font-display);font-size:21px;color:var(--maroon);margin-bottom:6px;}
.gate-body p{margin:0 0 12px;font-size:13.5px;color:var(--ink-soft);line-height:1.55;max-width:62ch;}
.gate-missing{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;}
.gate-missing span{background:var(--cream);border:1px solid var(--line);color:var(--maroon);
font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:20px;}
.gate-card .btn-primary{padding:11px 22px;font-size:14px;}
/* The base stylesheet styles .s3-field select but never .s3-field input,
so the Keyword box rendered as a bare browser input, narrower and a
different height from the dropdowns beside it. Match them. */
.s3-field input[type="text"],
.s3-field input[type="tel"],
.s3-field input[type="number"],
.s3-field input[type="date"]{
width:100%;border:1px solid var(--line);border-radius:9px;
padding:10px;font-size:13.5px;font-family:inherit;
background:#fff;color:var(--ink);
}
.s3-field input:focus,
.s3-field select:focus{outline:2px solid var(--gold-light);outline-offset:1px;}
/* ---------- More filters ---------- */
.s3-morefilters{background:#fff;border:1px solid var(--line);border-radius:16px;
padding:18px 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:end;margin:0 0 16px;}
.s3-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);font-weight:600;padding-bottom:9px;}
.s3-check input{width:16px;height:16px;accent-color:var(--maroon);}
.s3-morefilters .btn-ghost{flex:none;padding:10px 14px;}
/* ---------- Free-plan notice above the results ---------- */
.free-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--cream-2);
border:1px dashed var(--gold);border-radius:12px;padding:12px 16px;margin:0 0 16px;
font-size:12.8px;color:var(--ink-soft);line-height:1.5;}
.free-note > .icon{color:var(--gold);flex:none;}
.free-note > span{flex:1;min-width:220px;}
/* WCAG 2.2 AA asks for 24x24 CSS px pointer targets. These read as small
text links, so the height comes from padding rather than a bigger font. */
.link-btn{background:none;border:none;color:var(--maroon);font-weight:700;font-size:12.8px;
text-decoration:underline;padding:5px 2px;min-height:24px;}
.profile-body h4{padding:3px 0;min-height:24px;}
.s3-footer a,.s2-footer a,.s2-links a,.panel-head a{
display:inline-block;padding:5px 2px;min-height:24px;
}
.panel-head a{cursor:pointer;}
/* ---------- Locked (premium) fields on a card ---------- */
.locked-line{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft);margin-top:4px;}
.locked-line .icon{width:13px;height:13px;color:var(--gold);}
.locked-line b{background:linear-gradient(90deg,#e6dcc8,#f2ebdc);color:transparent;border-radius:4px;
user-select:none;font-weight:400;}
.profile-photo.is-locked{background:linear-gradient(135deg,#ded2b8,#c9b58e);}
.profile-photo .tag-locked{position:absolute;bottom:10px;left:10px;background:rgba(44,21,0,.72);color:#f3e3c2;
font-size:10px;font-weight:700;padding:4px 9px;border-radius:6px;display:flex;align-items:center;gap:4px;}
.profile-photo .tag-locked .icon{width:11px;height:11px;color:inherit;}
/* ---------- "Coming in the next phase" buttons ---------- */
/* Kept visible rather than hidden, so parents can see what is coming —
but clearly not clickable-looking, so nobody expects it to work yet. */
.btn-solid.is-soon,
.pm-actions button.is-soon{
background:var(--cream);color:var(--ink-soft);border:1px dashed var(--gold);
cursor:default;box-shadow:none;
}
.btn-solid.is-soon:hover,
.pm-actions button.is-soon:hover{filter:none;}
.btn-solid.is-soon .icon,
.pm-actions button.is-soon .icon{color:var(--gold);}
.s3-nav-item .soon{
background:var(--gold);color:#2c1500;font-size:9px;font-weight:800;
padding:2px 6px;border-radius:5px;margin-left:6px;letter-spacing:.4px;
}
/* ---------- Status pills ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.3px;
padding:4px 9px;border-radius:20px;text-transform:uppercase;}
.pill-pending{background:#fdf1dc;color:#8a5a10;}
.pill-accepted{background:#e3f4ea;color:#1f6b43;}
.pill-declined{background:#f3e6e6;color:#8a3232;}
.pill-draft{background:#eee9df;color:#6b5a55;}
.pill-live{background:#e3f4ea;color:#1f6b43;}
/* ---------- Notification bell ---------- */
.s3-bell .dot{position:absolute;top:-4px;right:-6px;}
.notif-pop{position:absolute;right:0;top:calc(100% + 12px);width:330px;background:#fff;
border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);z-index:60;
max-height:420px;overflow:auto;cursor:default;text-align:left;}
.notif-pop-head{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;
border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;}
.notif-pop-head b{font-size:13.5px;color:var(--ink);}
.notif-pop-head button{background:none;border:none;color:var(--maroon);font-size:12px;font-weight:600;}
.notif-item{padding:12px 16px;border-bottom:1px solid var(--cream);}
.notif-item:last-child{border-bottom:none;}
.notif-item.unread{background:var(--cream-2);}
.notif-item b{display:block;font-size:13px;color:var(--ink);margin-bottom:3px;}
.notif-item p{margin:0 0 3px;font-size:12px;color:var(--ink-soft);line-height:1.5;}
.notif-item time{font-size:11px;color:var(--gold);}
.notif-empty{padding:26px 16px;text-align:center;font-size:12.5px;color:var(--ink-soft);}
/* ---------- Redeem code box ---------- */
.redeem-box{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);position:relative;z-index:1;}
.redeem-box label{display:block;font-size:11.5px;color:var(--ink-soft);margin-bottom:7px;font-weight:600;}
.redeem-row{display:flex;gap:8px;}
.redeem-row input{flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;padding:9px 11px;
font-size:13px;font-family:inherit;text-transform:uppercase;background:#fff;color:var(--ink);}
.redeem-row button{border:1px solid var(--maroon);background:#fff;color:var(--maroon);border-radius:9px;
padding:9px 14px;font-weight:700;font-size:12.5px;}
.premium-state{margin:10px 0 0;font-size:12px;font-weight:600;color:var(--green);}
/* ---------- Profile detail modal ---------- */
.pm-backdrop{position:fixed;inset:0;background:rgba(40,15,20,.55);
display:flex;align-items:flex-start;justify-content:center;padding:34px 16px;z-index:200;overflow:auto;}
.pm-sheet{position:relative;width:100%;max-width:640px;background:#fff;border-radius:18px;
box-shadow:0 30px 70px rgba(0,0,0,.3);overflow:hidden;}
.pm-close{position:absolute;top:10px;right:12px;z-index:3;width:34px;height:34px;border-radius:50%;
border:none;background:rgba(255,255,255,.92);color:var(--ink);font-size:22px;line-height:1;}
.pm-hero{height:230px;background:linear-gradient(135deg,#e9dcc0,#d9c497);display:flex;
align-items:center;justify-content:center;position:relative;}
.pm-hero img{width:100%;height:100%;object-fit:cover;}
.pm-hero .icon-lg{width:70px;height:70px;color:rgba(255,255,255,.9);}
.pm-pad{padding:22px 26px 26px;}
.pm-pad h3{margin:0 0 4px;font-family:var(--font-display);font-size:26px;color:var(--maroon);}
.pm-sub{font-size:13.5px;color:var(--ink-soft);margin:0 0 18px;}
.pm-rows{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-bottom:20px;}
.pm-row{border-bottom:1px solid var(--cream);padding-bottom:9px;}
.pm-row label{display:block;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;
color:var(--gold);font-weight:800;margin-bottom:3px;}
.pm-row div{font-size:14px;color:var(--ink);font-weight:600;}
.pm-row.locked div{background:linear-gradient(90deg,#e6dcc8,#f2ebdc);color:transparent;
border-radius:5px;user-select:none;}
.pm-upsell{background:var(--cream-2);border:1px dashed var(--gold);border-radius:12px;
padding:14px 16px;margin-bottom:18px;font-size:13px;color:var(--ink-soft);line-height:1.55;}
.pm-upsell b{color:var(--maroon);display:block;margin-bottom:4px;font-size:13.5px;}
.pm-actions{display:flex;flex-wrap:wrap;gap:9px;}
.pm-actions button{flex:1;min-width:132px;border-radius:10px;padding:11px 10px;font-size:13px;font-weight:700;
display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);
background:#fff;color:var(--ink);}
.pm-actions button.primary{background:var(--maroon);color:#fff;border-color:var(--maroon);}
.pm-actions button.danger{color:#a33;border-color:#e6c9c9;flex:none;min-width:0;padding:11px 14px;}
.pm-actions button:disabled{opacity:.55;cursor:default;}
.pm-form{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}
.pm-form textarea,.pm-form select{width:100%;border:1px solid var(--line);border-radius:10px;
padding:10px 12px;font-family:inherit;font-size:13.5px;color:var(--ink);background:#fff;margin-bottom:10px;}
/* ---------- Empty states ---------- */
.empty-state{grid-column:1/-1;text-align:center;padding:56px 20px;color:var(--ink-soft);}
.empty-state .icon-lg{opacity:.35;}
.empty-state b{display:block;font-size:16px;color:var(--ink);margin:12px 0 5px;font-family:var(--font-display);}
.empty-state p{margin:0;font-size:13.5px;}
/* ---------- My profile / subscription / settings cards ---------- */
.self-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:18px;}
.self-card h3{margin:0 0 4px;font-family:var(--font-display);font-size:20px;color:var(--maroon);
display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.self-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin:6px 0 14px;max-width:70ch;}
.self-actions{display:flex;flex-wrap:wrap;gap:10px;}
.self-actions button,.self-actions a{border:1px solid var(--line);background:#fff;color:var(--ink);
border-radius:10px;padding:11px 18px;font-size:13px;font-weight:700;
display:inline-flex;align-items:center;gap:7px;cursor:pointer;}
.self-actions button.primary{background:var(--maroon);color:#fff;border-color:var(--maroon);}
.self-actions button.danger{color:#a33;border-color:#e6c9c9;}
/* ---------- Create profile: completeness meter + extras ---------- */
.cp-meter{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:18px;}
.cp-meter-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;gap:12px;}
.cp-meter-top b{font-size:14px;color:var(--ink);}
.cp-meter-top span{font-size:12.5px;color:var(--ink-soft);}
.cp-bar{height:8px;background:var(--cream);border-radius:6px;overflow:hidden;}
.cp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--green));
transition:width .4s ease;}
.cp-meter p{margin:9px 0 0;font-size:12.3px;color:var(--ink-soft);line-height:1.5;}
.cp-req{color:var(--maroon);font-weight:700;}
.cp-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.cp-actions .btn-secondary{border:1px solid var(--maroon);background:#fff;color:var(--maroon);
border-radius:10px;padding:13px 22px;font-weight:700;font-size:14px;}
.cp-actions .btn-danger{border:1px solid #e6c9c9;background:#fff;color:#a33;border-radius:10px;
padding:13px 18px;font-weight:700;font-size:13.5px;margin-left:auto;}
.cp-chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.cp-chip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 14px;
font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.cp-chip.on{background:var(--maroon);border-color:var(--maroon);color:#fff;}
/* Helper line under a field — says what the list is for without turning
the label into a paragraph. */
.cp-hint{display:block;margin-top:6px;font-size:11.8px;color:var(--ink-soft);line-height:1.45;}
#rasiSuggest{color:var(--green);font-weight:600;}
/* "type your own interest" row */
.cp-addrow{display:flex;gap:8px;margin-top:12px;}
.cp-addrow input{
flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;
padding:10px 12px;font-size:13.5px;font-family:inherit;background:#fff;color:var(--ink);
}
.cp-addrow button{
flex:none;border:1px solid var(--maroon);background:#fff;color:var(--maroon);
border-radius:9px;padding:10px 18px;font-weight:700;font-size:13px;min-height:44px;
}
.cp-addrow button:hover{background:var(--maroon);color:#fff;}
/* A datalist input keeps the browser's dropdown arrow off, so mark it as
one that suggests — otherwise it looks like a plain text box. */
input[list]{
background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
linear-gradient(135deg,var(--gold) 50%,transparent 50%);
background-position:calc(100% - 16px) calc(50% + 2px),calc(100% - 11px) calc(50% + 2px);
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:32px !important;
}
@media (max-width:1024px){
.s3-morefilters{grid-template-columns:1fr 1fr;}
.pm-rows{grid-template-columns:1fr;}
}
@media (max-width:640px){
.s3-morefilters{grid-template-columns:1fr;}
.gate-card{flex-direction:column;}
.notif-pop{width:min(330px,86vw);}
.cp-actions .btn-danger{margin-left:0;}
}
/* =====================================================================
PHONE AND TABLET
The dashboard is a three-column desktop layout. Stacking it as-is puts
eleven sidebar links between the phone user and the profiles they came
to see. Below 900px the sidebar becomes a horizontal strip of tabs
pinned under the header instead, so search results are the first thing
on screen and navigation is still one tap away.
===================================================================== */
/* One nav icon was set to icon-lg and rendered three times the others.
Normalise every sidebar icon, on all sizes. */
.s3-nav-item .icon,
.s3-nav-item .icon-lg{width:17px;height:17px;stroke-width:1.9;flex:none;}
/* The base stylesheet drops .s3-body to a single column at 1080px, but the
sidebar stays a tall vertical block — so on a tablet you still scroll past
every nav link to reach the results. The tab strip starts at the same
1080px the grid collapses at, so the two never disagree. */
/* A grid item defaults to min-width:auto, so the tab strip's wide contents
stretched its own track past the viewport and the whole page scrolled
sideways. min-width:0 lets the item stay viewport-width and scroll its
contents internally, which is what the strip is for. */
.s3-body > *{min-width:0;}
.s3-main,.s3-right,.s3-sidebar{min-width:0;}
/* Below 1080px the base stylesheet already drops .s3-body to one column and
the drawer above lifts the sidebar out of the flow entirely, so the main
column simply takes the full width. */
@media (max-width:1080px){
.s3-body{padding:0 0 40px;gap:0;grid-template-columns:1fr;}
.s3-main{padding:20px 16px 0;}
.s3-right{padding:0 16px;}
.s3-right .panel{margin-bottom:14px;}
.s3-nav-item{min-height:44px;} /* comfortable tap target */
}
/* ---- home page: the firewall divider ----
The base stylesheet rotates this column 90deg and counter-rotates its
children — fine as a slim divider between two desktop columns, but the
moment the portal grid stacks (which it does at 1080px, not 900px) the
rotated text overlaps into an unreadable smear. This has to undo the
rotation at the SAME width the grid stacks at, or an iPad lands in the
gap between the two rules and shows the broken version. */
@media (max-width:1080px){
.firewall-col,
.firewall-col *{transform:none !important;}
.firewall-col{
margin:4px auto;padding:18px;max-width:460px;
background:var(--cream-2);border:1px dashed var(--gold-light);border-radius:14px;
}
.firewall-col .shield{width:56px;height:56px;margin-bottom:10px;}
/* the heading carries a
, so leave it in — hiding it would run
ZERO-KNOWLEDGE and FIREWALL together into one word */
.firewall-col b{font-size:12.5px;line-height:1.6;}
.firewall-col p{max-width:none;font-size:12.5px;}
/* ---- home page hero on a tablet ----
.s2-hero-text is capped at 480px and each badge at 150px, so three
badges plus their gaps need 510px and wrap into a ragged narrow
column over the photograph. Widen the text block and lay the badges
out on a grid so they stay even however many fit. */
.s2-hero-inner{padding:56px 32px;}
.s2-hero-text{
max-width:min(620px,72%);
background:rgba(253,249,241,.82);border-radius:16px;padding:22px 24px;
}
.s2-badges{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px 18px;margin-top:24px;
}
.s2-badge{max-width:none;}
.s2-badge b{font-size:13px;}
}
@media (max-width:900px){
/* ---- home page: general ---- */
.s2-hero h1{font-size:30px;}
.s2-portal-grid{gap:16px;}
.s2-stats{grid-template-columns:1fr 1fr;gap:12px;}
.notify-row{flex-wrap:wrap;gap:8px;}
.notify-row input{flex:1 1 100%;}
.notify-row button{width:100%;}
/* ---- header: keep it to one compact line ---- */
.s3-topbar{
gap:10px;padding:10px 14px;flex-wrap:nowrap;
position:sticky;top:0;z-index:50;
}
.s3-topbar .brand-mark{flex:1;min-width:0;gap:8px;}
.s3-topbar .brand-mark img{width:30px;height:26px;}
.s3-topbar .brand-name b{font-size:12px;line-height:1.15;}
.s3-topbar .brand-tagline{display:none;}
.s3-topbar .s3-pill{display:none;}
.s3-topbar-right{gap:12px;margin-left:auto;flex:none;}
/* the markup carries an inline display:flex, so this needs the weight */
.s3-topbar-right > span[data-i18n="s3.help"]{display:none !important;}
.s3-user > div{display:none;} /* name repeats in the tab strip */
.lang-dd-btn{padding:7px 10px;font-size:12.5px;}
.lang-dd-btn .icon-sm{display:none;}
/* ---- main column ---- */
.s3-main{padding:18px 14px 0;}
.s3-main h1{font-size:26px;}
.s3-main .sub{font-size:13px;}
.s3-right{padding:0 14px;}
/* Every tappable thing gets a comfortable target and real spacing
between neighbours — thumbs are not mouse pointers. */
.btn-ghost,.btn-solid,.btn-join,.btn-upgrade,
.s3-search-btn,.s3-more-filters,.redeem-row button,
.pm-actions button,.self-actions button,.self-actions a{min-height:44px;}
.profile-actions{gap:8px;}
.heart{width:40px !important;height:40px !important;}
.lang-dd-btn{min-height:40px;}
.s3-popular .chip{min-height:34px;display:inline-flex;align-items:center;}
.s3-bell{padding:6px;margin:-6px;} /* grows the hit area, not the icon */
/* ---- filters ---- */
.s3-filters{padding:14px;gap:10px;}
.s3-popular-row{flex-wrap:wrap;gap:10px;}
.s3-popular{overflow-x:auto;white-space:nowrap;scrollbar-width:none;}
.s3-popular::-webkit-scrollbar{display:none;}
/* ---- results ---- */
.s3-vp-head{flex-wrap:wrap;gap:8px;}
.profile-grid{grid-template-columns:1fr 1fr;gap:12px;}
.profile-photo{height:150px;}
.profile-body{padding:12px;}
.profile-body h4{font-size:14px;}
.profile-actions{flex-direction:column;gap:6px;}
.profile-actions .btn-ghost,
.profile-actions .btn-solid{flex:none;width:100%;font-size:11px;padding:8px 4px;}
/* ---- gate + notices ---- */
.gate-card{padding:18px;}
.gate-body b{font-size:18px;}
.free-note{font-size:12px;padding:11px 13px;}
/* ---- profile detail sheet: full screen on a phone ----
The sheet is the scroller here, not the backdrop. Stretched to the
viewport by align-items:stretch and carrying the base rule's
overflow:hidden, anything below the fold was simply clipped with no
way to reach it — the profile opened and could not be read. dvh
rather than vh so the phone's collapsing address bar doesn't cut
the last rows off. */
.pm-backdrop{padding:0;align-items:stretch;}
.pm-sheet{max-width:none;border-radius:0;min-height:100%;max-height:100dvh;
overflow-y:auto;-webkit-overflow-scrolling:touch;}
.pm-hero{height:min(52vw,240px);}
.pm-pad{padding:18px 16px 26px;}
.pm-pad h3{font-size:22px;}
.pm-actions button{min-width:0;flex:1 1 46%;}
.pm-actions button.danger{flex:0 0 auto;}
/* ---- notifications drop from the right edge ---- */
.notif-pop{
position:fixed;top:56px;right:8px;left:8px;width:auto;
max-height:calc(100vh - 80px);
}
/* ---- create profile ---- */
.cp-grid{grid-template-columns:1fr;}
.cp-actions{flex-direction:column;align-items:stretch;}
.cp-actions button{width:100%;}
.cp-actions .btn-danger{margin-left:0;order:3;}
.self-actions{flex-direction:column;align-items:stretch;}
.self-actions button,.self-actions a{justify-content:center;}
}
/* Very narrow phones: one card per row reads better than two cramped ones */
@media (max-width:420px){
.profile-grid{grid-template-columns:1fr;}
.profile-photo{height:190px;}
.profile-actions{flex-direction:row;}
.profile-actions .btn-ghost,
.profile-actions .btn-solid{flex:1;width:auto;}
.s3-main h1{font-size:23px;}
}
/* =====================================================================
CREDITS
One credit opens one family. The button says the price every time,
because a silent deduction of real money is how you lose trust.
===================================================================== */
.unlock-row{
display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
margin-top:8px;padding:10px 12px;min-height:44px;
border:1px solid var(--maroon);border-radius:10px;
background:var(--maroon);color:#fff;font-family:inherit;
font-size:12.5px;font-weight:700;cursor:pointer;
}
.unlock-row:hover{background:var(--maroon-dark);}
.unlock-row .icon{width:15px;height:15px;}
.unlock-row[data-nocredit]{
background:#fff;color:var(--maroon);border-style:dashed;
}
.unlock-row.is-open{
background:#e3f4ea;border-color:#bfe4cf;color:#1f6b43;cursor:default;
}
.tag-unlocked{
position:absolute;bottom:10px;left:10px;background:#1f6b43;color:#fff;
font-size:10px;font-weight:700;padding:4px 9px;border-radius:6px;
display:flex;align-items:center;gap:4px;
}
.tag-unlocked .icon{width:11px;height:11px;color:inherit;}
/* balance, on the credits page and in the side panel */
.credit-balance{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;}
.credit-balance b{
font-size:40px;line-height:1;color:var(--maroon);
font-variant-numeric:tabular-nums;font-family:var(--font-display);
}
.credit-balance span{font-size:13px;color:var(--ink-soft);}
.credit-balance.side b{font-size:30px;}
.credit-balance.side{margin-bottom:8px;position:relative;z-index:1;}
.credit-sofar{font-size:12.5px;color:var(--ink-soft);margin:10px 0 0;}
.credit-count{background:var(--gold) !important;color:#2c1500 !important;}
.credit-packs{
display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:12px;margin-top:4px;
}
.credit-pack{
position:relative;text-align:center;background:var(--cream-2);
border:1px solid var(--line);border-radius:14px;padding:20px 14px 16px;
}
.credit-pack b{
display:block;font-size:34px;line-height:1;color:var(--maroon);
font-family:var(--font-display);font-variant-numeric:tabular-nums;
}
.credit-unit{
display:block;font-size:11px;letter-spacing:.6px;text-transform:uppercase;
color:var(--ink-soft);margin-top:2px;
}
.credit-price{font-size:20px;font-weight:700;color:var(--ink);margin-top:12px;}
.credit-per{font-size:11.5px;color:var(--ink-soft);margin-bottom:14px;}
.credit-pack .btn-primary{width:100%;padding:10px;font-size:13px;min-height:44px;}
.credit-off{
position:absolute;top:-9px;left:50%;transform:translateX(-50%);
background:var(--green);color:#fff;font-size:10px;font-weight:800;
letter-spacing:.4px;padding:3px 10px;border-radius:20px;white-space:nowrap;
}
.pm-upsell.open{background:#e9f6ee;border-color:#bfe4cf;}
.pm-upsell.open b{color:#1f6b43;}
/* Confirm dialog — a native window.confirm() lands wherever the OS
decides and cannot be styled, which is why the old one showed up
off-centre and unbranded. This one is just a centred card in the
site's own colours, like every other overlay on the site. */
.cm-backdrop{
position:fixed;inset:0;background:rgba(40,15,20,.55);
display:flex;align-items:center;justify-content:center;
padding:20px;z-index:200;
}
.cm-card{
background:#fff;border-radius:18px;max-width:420px;width:100%;
padding:26px 24px 22px;box-shadow:0 20px 60px rgba(40,15,20,.35);
text-align:center;
}
.cm-card p{
margin:0 0 6px;font-size:14.5px;line-height:1.55;color:var(--ink);
white-space:pre-line;
}
.cm-actions{display:flex;gap:10px;margin-top:18px;}
.cm-actions button{
flex:1;padding:12px 10px;border-radius:11px;font-size:14.5px;font-weight:700;
cursor:pointer;min-height:44px;border:1px solid var(--line);
}
.cm-actions .cm-cancel{background:#fff;color:var(--ink-soft);}
.cm-actions .cm-ok{background:var(--maroon);color:#fff;border-color:var(--maroon);}
.cm-actions .cm-ok:hover{background:var(--maroon-dark);}
/* Extra photos on an opened profile: a thumbnail strip under the hero.
Scrolls sideways rather than wrapping, so the rows below it stay put
whether a family put up two photos or five. */
.pm-shots{display:flex;gap:8px;overflow-x:auto;padding:0 0 4px;margin:0 0 14px;
-webkit-overflow-scrolling:touch;}
.pm-shot{flex:0 0 auto;width:58px;height:58px;padding:0;border-radius:9px;overflow:hidden;
border:2px solid transparent;background:none;cursor:pointer;}
.pm-shot.on{border-color:var(--gold);}
.pm-shot img{width:100%;height:100%;object-fit:cover;display:block;}
.pm-shots-locked{display:flex;align-items:center;gap:6px;margin:0 0 14px;
font-size:12.5px;color:var(--ink-soft);}
.pm-shots-locked .icon{width:14px;height:14px;color:var(--gold);}
/* A paid filter a free member can still see — dimmed, with the reason
spelled out under it, rather than quietly missing from the panel. */
.s3-field.is-locked{position:relative;opacity:.72;}
.s3-field.is-locked input{background:var(--cream);cursor:not-allowed;}
.field-lock{display:block;font-size:11px;color:var(--gold);font-weight:600;margin-top:4px;}
/* Buy-credits dialog: same card, wider, because it holds the pack grid. */
.cm-card-wide{max-width:620px;position:relative;text-align:left;padding-top:30px;
max-height:88vh;overflow-y:auto;}
.cm-card-wide h3{font-family:var(--font-display);color:var(--maroon);font-size:21px;
margin:0 0 8px;text-align:center;}
.cm-card-wide > div > p{margin:0 0 18px;font-size:13.5px;color:var(--ink-soft);
line-height:1.55;text-align:center;}
.cm-card-wide .credit-packs{margin-bottom:18px;}
.cm-card-wide .redeem-row{max-width:340px;margin:0 auto;}
.cm-card-wide .buy-code-label{display:block;text-align:center;font-size:12.5px;
color:var(--ink-soft);margin:16px 0 8px;}
.cm-card-wide .pm-close{top:10px;right:12px;}
/* ---- Phones: home page hero and the public nav's language menu ----
Last in the file on purpose. A wider breakpoint above caps the hero text
at min(620px,72%) and lays the three badges out in three columns — on a
375px phone that is ~270px split three ways, which is the overlapping
"100% Ver… Priv… Community" jumble. And the language menu is anchored to
the right edge of its button; once the nav wraps and the button sits on
the left, the menu opened off the left side of the screen. */
@media (max-width:640px){
.s2-hero-text{max-width:100%;padding:18px 16px;}
.s2-badges{grid-template-columns:1fr;gap:12px;margin-top:18px;}
.s2-badge{max-width:none;align-items:center;}
/* The menu stays anchored to the right edge of its button. Flipping it to
left:0 here used to push the (closed) menu box past the right edge of a
390px screen, which gave the whole page a horizontal scrollbar.
keepMenuInView() in main.js now slides the OPEN menu back inside
whichever way the nav happened to wrap, so CSS no longer guesses. */
.lang-dd-menu{max-width:calc(100vw - 28px);}
}
/* ===================================================================
COOKIE / STORAGE CONSENT BAR
Appended by js/cookie-consent.js. Nothing here hides page content —
the bar sits above it and is dismissed by an explicit choice.
=================================================================== */
.cookie-bar{
position:fixed;left:16px;right:16px;bottom:16px;z-index:9000;
background:#fff;border:1px solid var(--line);border-radius:14px;
box-shadow:0 10px 34px rgba(90,26,26,.18);
padding:16px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
max-width:920px;margin:0 auto;
transform:translateY(130%);opacity:0;transition:transform .3s ease, opacity .3s ease;
}
.cookie-bar.in{transform:translateY(0);opacity:1;}
.cookie-bar p{margin:0;flex:1 1 320px;min-width:0;font-size:13.5px;line-height:1.55;color:var(--ink);}
.cookie-bar a{color:var(--maroon);text-decoration:underline;}
.cookie-bar-btns{display:flex;gap:10px;flex:0 0 auto;flex-wrap:wrap;}
.cookie-bar button{
border-radius:22px;padding:10px 20px;font-size:13.5px;font-weight:600;
font-family:inherit;cursor:pointer;white-space:nowrap;
}
.cookie-bar .ck-essential{background:#fff;border:1px solid var(--line);color:var(--ink);}
.cookie-bar .ck-essential:hover{background:var(--cream);}
.cookie-bar .ck-all{background:var(--maroon);border:1px solid var(--maroon);color:#fff;}
.cookie-bar .ck-all:hover{filter:brightness(1.08);}
@media (max-width:560px){
.cookie-bar{left:10px;right:10px;bottom:10px;padding:14px;gap:12px;}
.cookie-bar-btns{width:100%;}
.cookie-bar button{flex:1;}
}
@media (prefers-reduced-motion:reduce){
.cookie-bar{transition:none;transform:none;opacity:1;}
}
/* ===================================================================
SIDEBAR LABELS IN EVERY LANGUAGE
Tamil, Telugu and Malayalam labels run about half again as long as the
English ones ("Received Interests" -> "பெறப்பட்ட ஆர்வங்கள்"). The row
was a flex line with no min-width rule, so a long label pushed the
SOON/count badge out of the sidebar instead of wrapping.
=================================================================== */
/* The row stays one flex line: icon, label, badge. flex-wrap was tried
and is worse — when the label cannot fit beside the icon it wraps the
whole row, leaving the icon alone on line one and the badge stretched
across line three. The label is a block and wraps its own text, which
is the tidy way to handle a long one. */
.s3-nav-item{align-items:flex-start;}
/* :not(.soon):not(.count) matters. The SOON badge is also a
span[data-i18n], so without it this rule gave the badge flex:1 1 auto
and it stretched to fill the row — 16px of Hindi text inside an 81px
gold bar. And being the more specific selector, it beat the
flex:0 0 auto set for badges below. */
.s3-nav-item > span[data-i18n]:not(.soon):not(.count){
flex:1 1 auto;min-width:0;line-height:1.35;
/* break-word, NOT anywhere: "anywhere" is allowed to split a word at
any letter to avoid overflow, and in a 250px sidebar that is exactly
what it did — "Recommended" came out as "Recommende / d". break-word
wraps between words and only ever splits one that cannot fit alone. */
overflow-wrap:break-word;
hyphens:none;
}
.s3-nav-item .icon,
.s3-nav-item .icon-lg{margin-top:2px;}
/* Badges never break: "SOON" split into "SOO / N" for the same reason. */
.s3-nav-item .soon,
.s3-nav-item .count{flex:0 0 auto;align-self:center;white-space:nowrap;}
/* In a 250px sidebar the label had 98px to fit "Recommended", which wants
about 100 — so it dropped to two lines beside a one-line badge and that
row stood 19px taller than every other. Tightening the gap and the
badge gives the label the handful of pixels it was short. */
/* In the narrow drawer the Tamil label came out 2px short of its word.
Four pixels off the row's side padding is invisible and settles it. */
.s3-sidebar .s3-nav-item{gap:10px;padding-left:10px;padding-right:10px;}
.s3-sidebar .s3-nav-item .soon{font-size:8.5px;padding:2px 5px;margin-left:4px;letter-spacing:.2px;}
/* The count was pushed right with margin-left:auto, which fights a label
that now grows. The label's flex-grow does the same job correctly. */
.s3-nav-item .count{margin-left:6px;}
/* ===================================================================
LANDSCAPE / SHORT VIEWPORTS
A phone turned sideways is ~740-930px wide and only 330-430px tall.
That is wide enough to miss every phone breakpoint but far too short
for the desktop layout, which is what produced the sideways scroll.
=================================================================== */
@media (max-height:520px) and (orientation:landscape){
/* Full-height panels become scrollable rather than taller than the screen */
.s3-sidebar{max-height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.pm-sheet{max-height:100dvh;overflow-y:auto;}
.s2-hero{min-height:0;}
.s2-hero-inner{padding-top:24px;padding-bottom:24px;}
#screen1{min-height:auto;padding:24px 0;}
.lang-dd-menu{max-height:72dvh;overflow-y:auto;}
.lang-dd.open .lang-dd-menu{max-height:72dvh;}
}
/* Tablet-and-under landscape: the dashboard's three columns do not fit
side by side, so the right rail drops under the results instead of
overflowing the viewport. */
@media (max-width:1080px) and (orientation:landscape){
.s3-body{grid-template-columns:minmax(0,1fr);}
.s3-right{grid-column:1 / -1;}
}
/* ===================================================================
SIDEWAYS SCROLL
Deliberately NOT "html,body{overflow-x:hidden}". That rule makes the
root a scroll container, which silently kills every position:sticky on
the page — the public navbar and the dashboard sidebar both rely on it.
The layout is measured clean at every size instead; max-width is the
part that can be kept safely.
=================================================================== */
html,body{max-width:100%;}
/* Reading progress hairline, added by js/motion-fx.js on the long legal
pages only. scaleX is driven by scroll(); the bar is invisible at 0. */
.read-progress{
position:fixed;top:0;left:0;right:0;height:3px;z-index:8000;
background:linear-gradient(90deg,var(--gold),var(--maroon));
transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
}
/* ===================================================================
SUGGESTION COMBOBOX (js/combobox.js)
Replaces