/*
 * Dekho Rishtey - refined look for the web portal.
 *
 * A thin layer loaded AFTER style.css. It keeps the existing palette
 * (brand red #dd0001, warm orange, cream backgrounds, #e9e6e0 lines) and the
 * existing layout; it only modernises shapes, spacing, type, shadows and
 * motion. Remove the <link> to css/modern.css in include/header.php to go
 * back to the previous look instantly.
 */

:root {
    --dr-red: #dd0001;
    --dr-orange: #f9a630;
    --dr-cream: #faf9f5;
    --dr-line: #e9e6e0;
    --dr-ink: #3c3634;
    --dr-muted: #706a68;
    --dr-dark: #292624;
    --dr-radius: 16px;
    --dr-radius-sm: 12px;
    --dr-shadow: 0 6px 22px rgba(60, 54, 52, .08);
    --dr-shadow-lg: 0 14px 36px rgba(60, 54, 52, .14);
    --dr-ease: cubic-bezier(.22, .61, .36, 1);
}

html { scroll-behavior: smooth; }
body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-weight: 400;
}
::selection { background: rgba(221, 0, 1, .18); }
a { transition: color .2s var(--dr-ease), background-color .2s var(--dr-ease), opacity .2s var(--dr-ease); }
img { -webkit-user-drag: none; }

/* ---------- type ---------- */
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', 'Roboto', sans-serif; letter-spacing: -.01em; }
.section-title h1, .section-title h2, .section-title h3, .tp-title-center h1, .tp-title-center h2 { font-weight: 600; letter-spacing: -.015em; }
.section-title, .tp-title-center { position: relative; }
.section-title h1::after, .section-title h2::after, .tp-title-center h1::after, .tp-title-center h2::after {
    content: ""; display: block; width: 54px; height: 3px; border-radius: 3px;
    background: var(--dr-red); margin: 14px auto 0;
}
.section-title p, .tp-title-center p { font-weight: 400; }
.how-does-it-work-data h3, .how-does-it-work-data h4 { font-weight: 600; }

/* Partner-site banners that point to a dead domain would show as broken images. */
img[src*="sunaarshaadi.com"] { display: none !important; }
#adslider .item:not(:has(img:not([src*="sunaarshaadi.com"]))) { display: none; }

/* ---------- top bar + header + navigation ---------- */
.top-bar { padding: 7px 0; letter-spacing: .04em; }
.top-links li a { transition: opacity .2s var(--dr-ease); }
.top-links li a:hover { opacity: .8; }

.header {
    position: sticky; top: 0; z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 16px rgba(60, 54, 52, .07);
    transition: box-shadow .25s var(--dr-ease);
}
.header .logo img, .header .navbar-brand img { transition: transform .3s var(--dr-ease); }
.header .navbar-brand:hover img { transform: scale(1.03); }

#navigation > ul > li > a { position: relative; letter-spacing: .05em; transition: color .2s var(--dr-ease); }
#navigation > ul > li > a::after {
    content: ""; position: absolute; left: 6px; right: 24px; bottom: 0; height: 2px; border-radius: 2px;
    background: var(--dr-red); transform: scaleX(0); transform-origin: left center;
    transition: transform .28s var(--dr-ease);
}
#navigation > ul > li > a:hover, #navigation > ul > li > a:focus-visible { color: var(--dr-red); }
#navigation > ul > li > a:hover::after, #navigation > ul > li > a:focus-visible::after { transform: scaleX(1); }
#navigation ul ul { border-radius: 0 0 var(--dr-radius-sm) var(--dr-radius-sm); box-shadow: var(--dr-shadow-lg); overflow: hidden; }

/* ---------- buttons ---------- */
.btn {
    border-radius: 999px; padding: 11px 26px; letter-spacing: .06em;
    transition: transform .18s var(--dr-ease), box-shadow .25s var(--dr-ease), background-color .2s var(--dr-ease), color .2s var(--dr-ease);
}
.btn-primary, .btn-default { box-shadow: 0 5px 16px rgba(221, 0, 1, .22); }
.btn-primary:hover, .btn-default:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(60, 54, 52, .2); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid rgba(221, 0, 1, .28); outline-offset: 2px; }
.btn-lg { padding: 14px 32px; }
.btn-sm, .btn-xs { padding: 7px 16px; }

/* ---------- forms ---------- */
.form-control {
    border-radius: var(--dr-radius-sm); border-width: 1.5px; box-shadow: none;
    transition: border-color .2s var(--dr-ease), box-shadow .2s var(--dr-ease), background-color .2s var(--dr-ease);
}
input.form-control, select.form-control { height: 46px; padding: 10px 16px; }
textarea.form-control { padding: 12px 16px; line-height: 1.55; }
.form-control:focus { box-shadow: 0 0 0 4px rgba(221, 0, 1, .12); }
.form-control::placeholder, ::placeholder { opacity: .78; font-weight: 500; }
label, .control-label { font-weight: 600; letter-spacing: .01em; }
.select2.select2-container .select2-selection { min-height: 46px; transition: box-shadow .2s var(--dr-ease); }
.select2.select2-container.select2-container--focus .select2-selection,
.select2.select2-container.select2-container--open .select2-selection { box-shadow: 0 0 0 4px rgba(221, 0, 1, .12); }
.checkbox label, .radio label { font-weight: 400; }

/* ---------- cards / boxes ---------- */
.well-box, .well-white {
    border-radius: var(--dr-radius); border: 1px solid var(--dr-line);
    box-shadow: var(--dr-shadow);
    transition: transform .25s var(--dr-ease), box-shadow .3s var(--dr-ease);
}
.well-box:hover { box-shadow: var(--dr-shadow-lg); }
.feature-block.well-box:hover, .couple-block:hover, .vendor-block:hover { transform: translateY(-4px); }
.panel, .thumbnail, .jumbotron { border-radius: var(--dr-radius); }
.modal-content { border: 0; border-radius: var(--dr-radius); box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
.alert { border-radius: var(--dr-radius-sm); border: 0; }
.table { border-radius: var(--dr-radius-sm); }
.table > thead > tr > th { font-weight: 600; letter-spacing: .02em; }
.pagination > li > a, .pagination > li > span { border-radius: 10px !important; margin: 0 3px; border-color: var(--dr-line); transition: transform .15s var(--dr-ease), background-color .2s var(--dr-ease); }
.pagination > li > a:hover { transform: translateY(-1px); }

/* ---------- home hero + join card ---------- */
.register_box {
    height: auto !important; width: 380px !important; max-width: 100%;
    padding: 26px 26px 22px !important; border-radius: 20px !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
}
.register_box { min-height: 0 !important; }
.register_box h3, .register_box h4 { font-weight: 600; letter-spacing: -.01em; margin-bottom: 14px; }
.register_box .btn { margin: 4px 2px; }
.register_box .cstm-form {
    height: 44px; padding: 0 18px; border-width: 1.5px; border-radius: 999px; font-size: 14px; font-weight: 500;
    transition: box-shadow .2s var(--dr-ease), border-color .2s var(--dr-ease);
}
.register_box .cstm-form:focus { outline: 0; box-shadow: 0 0 0 4px rgba(221, 0, 1, .12); }
.register_box .reg-btn { min-width: 132px; }
.register_box .tabbable-line > .nav-tabs { margin-bottom: 14px; }
.register_box .nav-tabs > li > a { border-radius: 10px 10px 0 0; font-weight: 500; }
.finder-caption h1 { text-shadow: 0 3px 18px rgba(0, 0, 0, .45); }

/* quick search strip */
#searcharea, .quick-search, .search-section { border-radius: var(--dr-radius); }
select.form-control { cursor: pointer; }

/* how it works */
.how-does-it-work-data, .how-does-it-work-new {
    transition: transform .3s var(--dr-ease);
}
.how-does-it-work-main > div:hover .how-does-it-work-data { transform: translateY(-5px); }
.how-does-it-work-data img, .how-does-it-work-data .fa, .how-does-it-work-data i { transition: transform .3s var(--dr-ease), box-shadow .3s var(--dr-ease); }
.how-does-it-work-main > div:hover .how-does-it-work-data img { box-shadow: 0 10px 24px rgba(249, 166, 48, .35); border-radius: 50%; }

/* ---------- inner page banner ---------- */
.tp-page-head .page-header { letter-spacing: -.01em; }
.tp-page-head .page-header h1, .tp-page-head .page-header h2 { font-weight: 600; }
.tp-breadcrumb .breadcrumb { padding-top: 10px; padding-bottom: 10px; letter-spacing: .05em; text-transform: uppercase; font-size: 12px; font-weight: 500; }
.main-container { padding-top: 34px; padding-bottom: 34px; }

/* ---------- member listing cards ---------- */
body .user-card-compact {
    border-radius: var(--dr-radius) !important; border: 1px solid var(--dr-line) !important;
    box-shadow: var(--dr-shadow) !important;
    transition: transform .25s var(--dr-ease), box-shadow .3s var(--dr-ease) !important;
}
body .user-card-compact:hover { transform: translateY(-3px); box-shadow: var(--dr-shadow-lg) !important; }
body .user-photo-fixed { border-radius: 14px !important; transition: transform .4s var(--dr-ease); }
body .user-card-compact:hover .user-photo-fixed { transform: scale(1.02); }
body .user-name-compact { letter-spacing: -.01em; }
body .meta-tag-sm { border-radius: 999px !important; }
body .btn-view-sm, body .btn-interest-sm, body .btn-already-sm, body .btn-login-sm {
    border-radius: 999px !important;
    transition: transform .18s var(--dr-ease), box-shadow .25s var(--dr-ease), filter .2s var(--dr-ease) !important;
}
body .btn-view-sm:hover, body .btn-interest-sm:hover, body .btn-login-sm:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 8px 18px rgba(60, 54, 52, .2); }

/* listing: refine-search sidebar - one filter per row so labels are not cut off */
.filter-sidebar { background: #fff; border: 1px solid var(--dr-line); border-radius: var(--dr-radius); box-shadow: var(--dr-shadow); padding-bottom: 14px; overflow: hidden; }
.filter-sidebar .form-title h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 14px 0 10px; }
.filter-sidebar .select2-container { width: 100% !important; }
.filter-sidebar [class*="col-md-6"], .filter-sidebar [class*="col-sm-6"] { width: 100%; float: none; }
.filter-sidebar label { font-size: 12px; letter-spacing: .05em; }

/* ---------- listing page (users_listing.php) ---------- */
/* refine-search card */
body .filter-sidebar .form-title { border-bottom: 1px solid var(--dr-line); padding: 6px 20px 12px; }
body .filter-sidebar .form-title h2 { margin: 12px 0 0; font-size: 18px; }
body .filter-sidebar .item.form-group { margin: 0; padding: 14px 20px 0; border: 0 !important; }
body .filter-sidebar .select2.select2-container .select2-selection {
    height: 46px !important; border-width: 1.5px !important; border-radius: 12px !important; background: #fff;
}
body .filter-sidebar .select2.select2-container .select2-selection .select2-selection__rendered {
    line-height: 43px !important; padding-left: 16px !important; font-size: 14px; font-weight: 600;
}
body .filter-sidebar .select2.select2-container .select2-selection .select2-selection__arrow {
    background: transparent !important; border: 0 !important; height: 44px !important; right: 8px !important;
}
body #users_search > .form-group { padding: 0; margin-top: 16px; }
body #users_search .btn-block { height: 48px; }

/* name / ID search strip */
.main-container .col-md-8 > form[action="user-details.php"] { margin-bottom: 22px !important; }
.main-container .col-md-8 > form[action="user-details.php"] > .row { display: flex; align-items: center; gap: 12px; margin: 0; }
.main-container .col-md-8 > form[action="user-details.php"] > .row > [class*="col-"] { float: none; width: auto; padding: 0; }
.main-container .col-md-8 > form[action="user-details.php"] > .row > .col-md-10 { flex: 1 1 auto; }
.main-container .col-md-8 > form[action="user-details.php"] .form-group { margin: 0; }
.main-container .col-md-8 > form[action="user-details.php"] input.form-control { height: 48px; padding-left: 20px; border-radius: 999px; }
.main-container .col-md-8 > form[action="user-details.php"] .btn { height: 48px; padding: 0 30px; }

/* member cards */
body .user-card-body { padding: 16px 18px !important; }
body .user-name-compact { font-size: 19px !important; font-weight: 700 !important; margin: 4px 0 10px !important; }
body .user-details-compact { border-radius: 12px !important; padding: 9px 14px !important; }
body .btn-view-sm, body .btn-interest-sm, body .btn-already-sm, body .btn-login-sm {
    display: flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 40px; font-weight: 600;
}

/* pagination (long page lists are compacted by js/modern.js) */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 30px 0 12px; padding: 0; }
.pagination > li { float: none; display: inline-block; }
.pagination > li > a, .pagination > li > span {
    min-width: 40px; height: 40px; line-height: 38px; padding: 0 14px; text-align: center; float: none;
    border-radius: 12px !important; margin: 0 !important; border: 1px solid var(--dr-line); font-weight: 600;
}
.pagination > li:not(.active) > a, .pagination > li:not(.active) > span { background-color: #fff; }
.pagination > li.dr-gap > span { border: 0; background: transparent; min-width: 24px; padding: 0; box-shadow: none; }
.pagination::before, .pagination::after { display: none !important; content: none !important; }
.pagination > li > a::after, .pagination > li > a::before { display: none !important; }

/* ---------- footer ---------- */
.footer { padding-top: 56px; padding-bottom: 28px; }
.ft-link ul li { transition: transform .2s var(--dr-ease); }
.ft-link ul li:hover { transform: translateX(4px); }
.socialmediaicons a, .social-icon a { transition: transform .22s var(--dr-ease), box-shadow .25s var(--dr-ease); }
.socialmediaicons a:hover, .social-icon a:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }
.tiny-footer { letter-spacing: .03em; }

/* ---------- floating WhatsApp ---------- */
.whatsapp-float, a.whatsapp, .float-whatsapp { box-shadow: 0 8px 22px rgba(0, 0, 0, .25); transition: transform .2s var(--dr-ease); }
.whatsapp-float:hover, a.whatsapp:hover, .float-whatsapp:hover { transform: scale(1.06); }

/* ---------- small screens ---------- */
@media (max-width: 767px) {
    .top-bar { padding: 5px 0; }
    .header { position: sticky; }
    .register_box { width: 100% !important; min-height: 0; padding: 22px 18px !important; border-radius: 18px !important; }
    .btn { padding: 11px 22px; }
    .section-title h1::after, .section-title h2::after, .tp-title-center h1::after, .tp-title-center h2::after { width: 44px; margin-top: 10px; }
    .main-container { padding-top: 22px; padding-bottom: 22px; }
    .well-box { padding: 20px; }
    .footer { padding-top: 38px; }
}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}