/*
 * gdns.css
 * Styles for the gdns (Gadag District Devanga Nagarikara Sangha) homepage
 * - header, nav, all section templates, and footer. Ported 1:1 from the
 * reference design mockup's <style> block, class names unchanged. Loaded
 * on the homepage only (header.php / kn_header.php swap out the old
 * itbt/* stylesheets entirely when $is_gdns_home is true, so there's
 * nothing here to conflict with).
 */

/* ---- Kannada auto-font: whenever a Kannada-script character appears
   ANYWHERE on the page - English pages, Kannada pages, or English pages
   with mixed Kannada content (e.g. a kn_* field rendered by mistake) -
   the browser automatically renders just those characters with this
   face, via unicode-range (U+0C80-0CFF is the Kannada Unicode block,
   U+200C-200D are the zero-width joiner/non-joiner used in Kannada
   conjuncts, U+25CC is the dotted-circle placeholder). Every other
   character (English/Latin) is untouched and keeps falling through to
   Poppins as before - no JS language detection needed. ---- */
@font-face {
    font-family: 'notokan';
    src: url('../fonts/kn/NotoSansKannada-Regular.ttf');
    unicode-range: U+0C80-0CFF, U+200C-200D, U+25CC;
    font-display: swap;
}
*:not([class*="fa-"]) {
    font-family: 'notokan', 'Poppins', sans-serif !important;
}
body.gdns-home-body {
    overflow-x: hidden;
    background-color: #fef9fc;
}

/* ---------- top bar (language switch + social icons) ---------- */
.devanga-topbar {
    background: #001b3d;
    padding: 6px 0;
    font-size: 0.85rem;
}
.devanga-topbar a {
    color: #cfe0ff;
    text-decoration: none;
    margin-left: 14px;
    transition: 0.2s;
}
.devanga-topbar a:first-child { margin-left: 0; }
.devanga-topbar a:hover { color: #ffdf80; }
.devanga-topbar-lang a { margin-left: 0; }
/* Sticky along with the nav below it: topbar pins at the very top, and
   the navbar's own sticky-top offset (below) is pushed down by exactly
   this bar's height so the two stack instead of overlapping. */
.devanga-topbar.sticky-top {
    z-index: 1031;
}

/* ---------- header ---------- */
.devanga-header {
    background:#fff;
    padding: 14px 0;
    transition: all 0.3s;
}
.devanga-header-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.devanga-logo-col {
    flex: 0 0 auto;
}
.devanga-title-col {
    flex: 1 1 auto;
    min-width: 0;
}
.devanga-logo {
    width: 100px;
    height: 100px;
    object-fit: cover;
    background: #fff;
    padding: 5px;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border: 2px solid #ffdf80;
}
.devanga-title {
    color: #000;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
    .devanga-header-inner { justify-content: center; text-align: center; }
    .devanga-title { font-size: 1.15rem; text-align: center; }
    .devanga-logo { width: 50px; height: 50px; }
}

/* ---------- navbar ---------- */
.devanga-navbar {
    background: #0f19a1;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.devanga-navbar.sticky-top {
    /* Stacks directly under .devanga-topbar once both are stuck, instead
       of overlapping it (both would otherwise sit at top:0). Matches the
       topbar's approximate rendered height (6px padding top/bottom +
       ~0.85rem line height). */
    top: 34px;
    z-index: 1030;
}
.devanga-navbar .nav-link {
    color: #fff !important;
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 18px !important;
    transition: 0.2s;
    letter-spacing: 0.3px;
}
.devanga-navbar .nav-link:hover {
    background: #0023d9;
    border-radius: 8px;
    color: #fff !important;
    transform: translateY(-2px);
}
.devanga-navbar .navbar-toggler {
    border: none;
    background: #fff;
}

/* ---------- shared buttons ---------- */
.btn-rosy {
    background: #0023d9;
    color: #fff;
    padding: 12px 32px;
    border-radius: 40px;
    font-weight: 600;
    transition: 0.3s;
    border: none;
    display: inline-block;
}
.btn-rosy:hover {
    background: #311a72;
    transform: scale(1.02);
    color: #fff;
}
.btn-outline-rosy {
    border: 2px solid #0023d9;
    background: transparent;
    color: #fff;
    padding: 10px 28px;
    border-radius: 40px;
    font-weight: 600;
    display: inline-block;
}
.btn-outline-rosy:hover {
    background: #0023d9;
    color: #fff;
}
.btn-outline-rosy-solid {
    border: 2px solid #0023d9;
    background: transparent;
    color: #0023d9;
    padding: 10px 28px;
    border-radius: 40px;
    font-weight: 600;
    display: inline-block;
    transition: 0.3s;
}
.btn-outline-rosy-solid:hover {
    background: #0023d9;
    color: #fff;
}

/* ---------- section heading ---------- */
.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #054599;
    border-left: 6px solid #0023d9;
    padding-left: 18px;
    margin-bottom: 40px;
}
.gdns-badge {
    background: #dc3545;
    color: #fff;
}

/* ---------- hero / slider (gdns_Slider.php) ---------- */
.gdns-hero {
    position: relative;
}
.gdns-hero .carousel-inner,
.gdns-hero .carousel-item {
    min-height: 520px;
}
.gdns-hero-slide {
    min-height: 520px;
    background: linear-gradient(107deg, #2d1b2e 0%, #4a274f 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}
.gdns-hero-content {
    padding: 16px;
    color: #fff;
    width: 50%;
    background: #10101075;
    position: absolute;
    left: 10px;
}
.gdns-hero-content h1 {
    font-size: 1.5rem;
    font-weight: 800;
}
.gdns-hero-content .lead {
    font-size: 1.15rem;
}
@media (max-width: 992px) {
    .gdns-hero-content h1 { font-size: 2.2rem; }
}
.gdns-hero .carousel-control-prev,
.gdns-hero .carousel-control-next {
    width: 5%;
}

/* Slider CTA buttons - one solid, one outline by default; on hover they
   swap (solid becomes outline, outline becomes solid). White-on-dark since
   these always sit on the hero's dark gradient overlay regardless of the
   configured accent color. */
.gdns-hero .gdns-slide-btn {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 40px;
    font-weight: 600;
    border: 2px solid #ffffff;
    transition: 0.3s;
    text-decoration: none;
}
.gdns-hero .gdns-slide-btn.solid {
    background: #ffffff;
    color: #2d1b2e;
}
.gdns-hero .gdns-slide-btn.solid:hover {
    background: transparent;
    color: #ffffff;
}
.gdns-hero .gdns-slide-btn.outline {
    background: transparent;
    color: #ffffff;
}
.gdns-hero .gdns-slide-btn.outline:hover {
    background: #ffffff;
    color: #2d1b2e;
}

/* 3rd/4th/5th headline words highlight (gdns_Slider.php) */
.gdns-hero-content h1 .gdns-hero-yellow {
    color: #ffd60a;
}

/* ---------- stats counter (gdns_Stats_Counter.php) ---------- */
.gdns-stat-box {
    height: 100%;
}
.gdns-stat-icon {
    color: #311a72;
}

/* ---------- about us (gdns_About_Us.php) ---------- */
.gdns-about {
    background: #fef5f9;
}
.gdns-lightbox-trigger {
    cursor: zoom-in;
    transition: 0.2s;
}
.gdns-lightbox-trigger:hover {
    opacity: 0.9;
}

/* ---------- office bearers (gdns_Office_Bearers_Executive_Committee.php) ---------- */
.office-card {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: 0.3s;
    height: 100%;
}
.office-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 30px rgba(0,0,0,0.1);
}
.office-img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 15px;
    border: 3px solid #0023d9;
}

/* ---------- become a member (gdns_Become_a_Member.php) ---------- */
.gdns-membership .progress-bar { background: #dc3545; }

/* ---------- register buttons (gdns_Register_Buttons.php) ---------- */
.gdns-register-buttons { background: #fff; }

/* ---------- community welfare wings (gdns_Community_Welfare_Wings.php) ---------- */
.gdns-welfare-card {
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.gdns-welfare-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 28px rgba(0,0,0,0.10);
    color: inherit;
    border-color: #d9d3f2 !important;
}
.welfare-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ece8fb, #ded7f7);
    color: #311a72;
    font-size: 26px;
}

/* ---------- upcoming events (gdns_Upcoming_Events_Activities.php) ---------- */
.event-item {
    background: #fff;
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 20px;
    border-left: 5px solid #0023d9;
    box-shadow: 0 5px 12px rgba(0,0,0,0.05);
}

/* ---------- documents (gdns_Important_Documents_Downloads.php) ---------- */
.gdns-documents .bg-white {
    height: 100%;
}

/* ---------- matrimony (static section in index.php/kn_index.php) ---------- */
.matrimony-card {
    background:#ffffff;
    border-radius: 24px;
    padding: 20px;
    border: 1px solid #ffe0ec;
    transition: 0.2s;
}
.profile-preview {
    background: #fff;
    border-radius: 18px;
    padding: 12px;
    margin: 10px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* ---------- gallery (existing HTML, kept, now inside the gdns nav flow) ---------- */
.gallery-thumb {
    border-radius: 20px;
    overflow: hidden;
    transition: 0.3s;
    height: 180px;
    object-fit: cover;
    width: 100%;
}
.gallery-thumb:hover {
    transform: scale(1.02);
}

/* ---------- footer (devanga footer in footer.php/kn_footer.php) ---------- */
.gdns-home-body footer.pt-5.pb-3,
footer.pt-5.pb-3 {
    background: #1e0c17;
    color: #f0d3df;
}
footer.pt-5.pb-3 a {
    color: #f0d3df;
}

/* ==========================================================================
   GALLERY ALBUM MODULE (new) — home-page album blocks + standalone album
   viewer page. Column counts come from each album's own Desktop/Tablet/
   Mobile Columns settings via the --gdns-gallery-cols-* custom properties
   set inline per block/grid in gdns_gallery_album_block.php /
   gallery_album_view.php.
   ========================================================================== */
.gdns-gallery-album-section { --gdns-gallery-cols-desktop: 4; --gdns-gallery-cols-tablet: 2; --gdns-gallery-cols-mobile: 1; }

.gdns-gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--gdns-gallery-cols-desktop, 4), 1fr);
    gap: 18px;
}
@media (max-width: 991.98px) {
    .gdns-gallery-grid { grid-template-columns: repeat(var(--gdns-gallery-cols-tablet, 2), 1fr); }
}
@media (max-width: 575.98px) {
    .gdns-gallery-grid { grid-template-columns: repeat(var(--gdns-gallery-cols-mobile, 1), 1fr); }
}

.gdns-gallery-item {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gdns-gallery-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.14);
}
.gdns-gallery-thumb-link {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f3f3f3;
}
.gdns-gallery-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.gdns-gallery-item:hover .gdns-gallery-thumb { transform: scale(1.08); }
.gdns-gallery-video-wrap .gdns-gallery-thumb { object-fit: contain; background: #000; }
.gdns-gallery-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.28);
    color: #fff;
    font-size: 1.4rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.gdns-gallery-item:hover .gdns-gallery-zoom { opacity: 1; }
.gdns-gallery-doc-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fdecef;
}
.gdns-gallery-doc-icon { font-size: 2.6rem; color: #c0143c; }
.gdns-gallery-item-title {
    padding: 10px 14px;
    font-size: 0.92rem;
    font-weight: 500;
    color: #3a1420;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gdns-gallery-carousel .carousel-control-prev,
.gdns-gallery-carousel .carousel-control-next {
    width: 44px;
    height: 44px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(192,20,60,0.85);
    border-radius: 50%;
}
.gdns-gallery-carousel .carousel-control-prev { left: -18px; }
.gdns-gallery-carousel .carousel-control-next { right: -18px; }

.gdns-gallery-album-hero { position: relative; }
.gdns-gallery-filters button { margin: 0 4px 8px; border-radius: 30px; }
.gdns-gallery-filters button.active { background: #c0143c; color: #fff; border-color: #c0143c; }

/* ---------- admin: Gallery Albums list/editor (back office) ---------- */
.gdns-album-card {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    background: #fff;
    transition: box-shadow 0.2s ease;
    height: 100%;
}
.gdns-album-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.gdns-album-card .gdns-album-cover {
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: #f0f0f0;
}
.gdns-album-card .gdns-album-body { padding: 14px; }
.gdns-media-manager-drop {
    border: 2px dashed #c0143c;
    border-radius: 14px;
    padding: 30px;
    text-align: center;
    color: #c0143c;
    background: #fff6f8;
    cursor: pointer;
    transition: 0.2s;
}
.gdns-media-manager-drop.dragover { background: #ffe3ea; }
.gdns-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    margin-top: 16px;
}
.gdns-media-grid .gdns-media-tile {
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    cursor: grab;
    position: relative;
}
.gdns-media-grid .gdns-media-tile img,
.gdns-media-grid .gdns-media-tile video { width: 100%; height: 100px; object-fit: cover; display: block; background:#eee; }
.gdns-media-grid .gdns-media-tile .gdns-media-tile-actions {
    display: flex;
    justify-content: space-between;
    padding: 4px 6px;
    font-size: 0.75rem;
}
.gdns-media-grid .gdns-media-tile-title {
    font-size: 0.75rem;
    padding: 2px 6px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gdns-media-grid .sortable-placeholder-tile {
    border: 2px dashed #c0143c;
    border-radius: 10px;
    background: #ffe3ea;
    height: 130px;
}

/* ==========================================================================
   GALLERY ALBUM MODULE - Carousel display style. Self-contained sliding
   card carousel, no external plugin dependency (init script lives in
   template/front/footer.php / kn_footer.php). Card width per breakpoint
   is driven entirely by the --gdns-vc-cols-* custom properties below,
   set inline per-album from its saved Desktop/Tablet/Mobile Columns -
   the JS engine only handles scrolling/looping/autoplay, never sizing.
   ========================================================================== */
.gdns-vc-wrapper {
    --gdns-vc-cols-desktop: 4;
    --gdns-vc-cols-tablet: 2;
    --gdns-vc-cols-mobile: 1;
    --gdns-vc-gap: 18px;
    position: relative;
}
.gdns-vc-controls-header {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}
.gdns-vc-btn-control {
    background: #fff;
    border: 1px solid #f0c3ce;
    color: #c0143c;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: 0.2s;
}
.gdns-vc-btn-control:hover { background: #c0143c; color: #fff; border-color: #c0143c; }

.gdns-vc-stage { position: relative; }

.gdns-vc-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.gdns-vc-viewport::-webkit-scrollbar { display: none; }

.gdns-vc-track { display: flex; gap: var(--gdns-vc-gap); }

.gdns-vc-card {
    box-sizing: border-box;
    flex: 0 0 calc((100% - (var(--gdns-vc-cols-mobile) - 1) * var(--gdns-vc-gap)) / var(--gdns-vc-cols-mobile));
}
@media (min-width: 768px) {
    .gdns-vc-card {
        flex-basis: calc((100% - (var(--gdns-vc-cols-tablet) - 1) * var(--gdns-vc-gap)) / var(--gdns-vc-cols-tablet));
    }
}
@media (min-width: 992px) {
    .gdns-vc-card {
        flex-basis: calc((100% - (var(--gdns-vc-cols-desktop) - 1) * var(--gdns-vc-gap)) / var(--gdns-vc-cols-desktop));
    }
}
.gdns-vc-card .gdns-gallery-item { height: 100%; }

.gdns-vc-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c0143c;
    transition: 0.2s;
}
.gdns-vc-nav:hover { background: #c0143c; color: #fff; }
.gdns-vc-prev { left: -20px; }
.gdns-vc-next { right: -20px; }
@media (max-width: 575px) {
    .gdns-vc-prev { left: -8px; }
    .gdns-vc-next { right: -8px; }
}

/* ==========================================================================
   UPCOMING EVENTS & ACTIVITIES (redesigned) - home-page compact list card.
   gdns_Upcoming_Events_Activities.php. Uses the site's existing Inter
   font (already loaded in template/front/header.php) and self-hosted
   Font Awesome icons - no new external CDN dependency added.
   ========================================================================== */
.vardha_gdns_news_card_ultra {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 28px;
    padding: 1.6rem 1.4rem 1.8rem;
    box-shadow: 0 20px 40px -16px rgba(8, 20, 40, 0.14), 0 8px 20px -8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.06);
    height: auto;
}
.vardha_gdns_news_event_link { text-decoration: none; display: block; margin-bottom: 10px; }
.vardha_gdns_news_compact_item { display: flex; align-items: center; padding: 10px 12px 10px 10px; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(4px); border-radius: 22px; border: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2); gap: 4px; }
.vardha_gdns_news_bg_grad_1:hover { background: linear-gradient(135deg, #ffffff 0%, #ffe3e8 100%); border-color: #ffb0be; }
.vardha_gdns_news_bg_grad_2:hover { background: linear-gradient(135deg, #ffffff 0%, #d6f3f0 100%); border-color: #6ed0c9; }
.vardha_gdns_news_bg_grad_3:hover { background: linear-gradient(135deg, #ffffff 0%, #ffecce 100%); border-color: #f5c26a; }
.vardha_gdns_news_bg_grad_4:hover { background: linear-gradient(135deg, #ffffff 0%, #e0defa 100%); border-color: #b3aef5; }
.vardha_gdns_news_compact_item:hover { transform: scale(1.015) translateY(-2px); box-shadow: 0 14px 24px -10px rgba(0, 0, 0, 0.10); border-color: transparent; }
.vardha_gdns_news_thumb { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; background: #f0f4fe; font-size: 1.1rem; }
.vardha_gdns_news_thumb img { width: 100%; height: 100%; object-fit: cover; }
.vardha_gdns_news_thumb_icon_1 { background: linear-gradient(145deg, #ffdce2, #fec7cf); color: #ac3a48; }
.vardha_gdns_news_thumb_icon_2 { background: linear-gradient(145deg, #c5eee9, #a6e2db); color: #1a6b64; }
.vardha_gdns_news_thumb_icon_3 { background: linear-gradient(145deg, #fce3c0, #fad4a3); color: #9e5f17; }
.vardha_gdns_news_thumb_icon_4 { background: linear-gradient(145deg, #d2cef7, #c2bef5); color: #3b3296; }
.vardha_gdns_news_details { flex: 1; padding: 0 10px 0 14px; color: #122433; min-width: 0; }
.vardha_gdns_news_title_line h6 { margin: 0; font-weight: 700; font-size: 0.92rem; font-family: 'Inter', sans-serif; }
.vardha_gdns_news_update_line { font-size: 0.72rem; color: #7b92a8; display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.vardha_gdns_news_icon_box { width: 36px; height: 36px; border-radius: 30px; display: flex; align-items: center; justify-content: center; background: rgba(235, 240, 248, 0.6); color: #1d2f40; transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); flex-shrink: 0; font-size: 0.8rem; }
.vardha_gdns_news_event_link:hover .vardha_gdns_news_icon_box { background: #0f2235; color: #fff; transform: rotate(-45deg) scale(1.02); }
.vardha_gdns_news_btn_read_all { width: 100%; padding: 13px 12px; border-radius: 40px; background: #fdf4f5; color: #0a1b2b; font-weight: 700; font-family: 'Inter', sans-serif; border: 1px solid rgba(0,0,0,0.06); transition: 0.25s; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; text-decoration: none; }
.vardha_gdns_news_btn_read_all:hover { background: #0d1f30; color: #fff; border-color: #0d1f30; transform: scale(1.01); }
.vardha_gdns_news_color_dots { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
.vardha_gdns_news_color_dots span { width: 8px; height: 8px; border-radius: 20px; display: block; border: 1px solid rgba(0,0,0,0.05); }

/* ══════════════════════════════════════════════════════════════════
   DEVANGA MATRIMONY MODULE
   ══════════════════════════════════════════════════════════════════ */
.gdns-matri-auth-section { background: linear-gradient(135deg,#f7f8fc 0%,#fdf1f4 100%); min-height: 60vh; }

/* ---- Login card ---- */
.gdns-matri-login-card {
    max-width: 420px;
    background: #fff;
    border-radius: 20px;
    padding: 36px 32px;
    box-shadow: 0 12px 40px rgba(0,35,217,0.12);
}
.gdns-matri-login-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 50%; background: #fff; padding: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.gdns-matri-toggle-pass {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    border: none; background: transparent; color: #888;
}

/* ---- Registration wizard card ---- */
.gdns-matri-reg-card {
    max-width: 820px;
    background: #fff;
    border-radius: 20px;
    padding: 36px 32px;
    box-shadow: 0 12px 40px rgba(0,35,217,0.10);
}

/* Bride/Groom toggle */
.gdns-matri-toggle {
    position: relative;
    width: 260px;
    height: 46px;
    background: #f1f2f8;
    border-radius: 40px;
    display: flex;
    padding: 4px;
}
.gdns-matri-toggle-slider {
    position: absolute;
    top: 4px; left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: #0023d9;
    border-radius: 40px;
    transition: transform 0.3s ease;
}
.gdns-matri-toggle-slider.right { transform: translateX(100%); }
.gdns-matri-toggle-btn {
    position: relative;
    z-index: 1;
    flex: 1;
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: 0.9rem;
    color: #555;
    border-radius: 40px;
    transition: color 0.3s ease;
}
.gdns-matri-toggle-btn.active { color: #fff; }

/* Step indicator */
.gdns-matri-steps { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.gdns-matri-step-item { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; min-width: 70px; }
.gdns-matri-step-num {
    width: 34px; height: 34px; border-radius: 50%;
    background: #e9ebf5; color: #888;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem;
    transition: all 0.25s ease;
}
.gdns-matri-step-item.active .gdns-matri-step-num { background: #0023d9; color: #fff; box-shadow: 0 0 0 4px rgba(0,35,217,0.15); }
.gdns-matri-step-item.done .gdns-matri-step-num { background: #28a745; color: #fff; }
.gdns-matri-step-label { font-size: 0.72rem; color: #777; font-weight: 600; text-align: center; }
.gdns-matri-step-item.active .gdns-matri-step-label { color: #0023d9; }
.gdns-matri-step-connector { width: 30px; height: 2px; background: #e9ebf5; margin: 0 2px; align-self: flex-start; margin-top: 17px; }
.gdns-matri-step-connector.done { background: #28a745; }

.gdns-matri-step-content { display: none; animation: gdnsMatriFadeIn 0.3s ease; }
.gdns-matri-step-content.active { display: block; }
@keyframes gdnsMatriFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.gdns-matri-photo-upload {
    border: 2px dashed #c7cbe8;
    border-radius: 14px;
    padding: 28px 16px;
    text-align: center;
    cursor: pointer;
    background: #f9faff;
    transition: 0.25s;
}
.gdns-matri-photo-upload:hover { border-color: #0023d9; background: #f1f3ff; }
.gdns-matri-photo-icon { font-size: 2rem; color: #0023d9; margin-bottom: 8px; }

/* ---- Dashboard ---- */
.gdns-matri-dash-header {
    background: linear-gradient(120deg, #0023d9 0%, #4b1fa8 60%, #7a1fa8 100%);
    border-radius: 20px;
    padding: 26px 28px;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    box-shadow: 0 14px 36px rgba(0,35,217,0.22);
    color: #fff;
}
.gdns-matri-dash-photo { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 3px solid rgba(255,255,255,0.85); box-shadow: 0 6px 18px rgba(0,0,0,0.2); }
.gdns-matri-dash-photo img { width: 100%; height: 100%; object-fit: cover; }
.gdns-matri-dash-info { flex: 1; min-width: 200px; }
.gdns-matri-dash-info h3 { color: #fff; }
.gdns-matri-dash-info p.text-muted { color: rgba(255,255,255,0.85) !important; }
.gdns-matri-dash-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gdns-matri-dash-header .btn-outline-secondary { color: #fff; border-color: rgba(255,255,255,0.6); }
.gdns-matri-dash-header .btn-outline-secondary:hover { background: rgba(255,255,255,0.15); color: #fff; }

.gdns-matri-dash-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: #fff;
    border-radius: 40px;
    padding: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    position: sticky;
    top: 8px;
    z-index: 5;
}
.gdns-matri-dash-tabs .nav-link {
    color: #555; font-weight: 600; font-size: 0.86rem;
    border-radius: 40px;
    background: transparent;
    border: none;
    padding: 9px 16px;
    transition: all 0.25s ease;
}
.gdns-matri-dash-tabs .nav-link:hover { background: #f1f2f8; }
.gdns-matri-dash-tabs .nav-link.active { background: linear-gradient(120deg, #0023d9, #7a1fa8); color: #fff; box-shadow: 0 4px 14px rgba(0,35,217,0.3); }
.gdns-matri-dash-tabs .nav-link .badge { font-size: 0.68rem; }
.gdns-matri-dash-tabpane { display: none; }
.gdns-matri-dash-tabpane.active { display: block; animation: gdnsMatriDashFade 0.35s ease; }
@keyframes gdnsMatriDashFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Profile cards (browse grid + dashboard lists) ---- */
.gdns-matri-profile-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    height: 100%;
}
.gdns-matri-profile-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,35,217,0.15); }
.gdns-matri-profile-photo-wrap { position: relative; height: 220px; overflow: hidden; background: #f1f2f8; }
.gdns-matri-profile-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.gdns-matri-type-badge {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 12px; border-radius: 20px;
    font-size: 0.72rem; font-weight: 700; color: #fff;
}
.gdns-matri-type-bride { background: #d6336c; }
.gdns-matri-type-groom { background: #0023d9; }
.gdns-matri-wishlist-btn {
    position: absolute; top: 10px; right: 10px;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.9); border: none;
    display: flex; align-items: center; justify-content: center;
    color: #d6336c; font-size: 1rem;
    transition: 0.2s;
}
.gdns-matri-wishlist-btn:hover { background: #fff; transform: scale(1.1); }
.gdns-matri-wishlist-btn.active { color: #d6336c; }
.gdns-matri-profile-body { padding: 16px; }

/* ---- Filter bar ---- */
.gdns-matri-filter-bar { background: #fff; border-radius: 16px; padding: 16px 20px; box-shadow: 0 6px 24px rgba(0,0,0,0.06); }

/* ---- Single profile view ---- */
.gdns-matri-view-photo { width: 100%; max-width: 220px; aspect-ratio: 1/1; object-fit: cover; border-radius: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.gdns-matri-type-badge-static { padding: 5px 14px; border-radius: 20px; font-size: 0.78rem; font-weight: 700; color: #fff; display: inline-block; margin-top: 8px; }
.gdns-matri-view-row { padding: 8px 0; border-bottom: 1px solid #f1f2f8; display: flex; justify-content: space-between; gap: 8px; }
.gdns-matri-view-label { color: #888; font-size: 0.85rem; font-weight: 600; }
.gdns-matri-view-value { color: #222; font-size: 0.88rem; font-weight: 600; text-align: right; }

@media (max-width: 767px) {
    .gdns-matri-reg-card, .gdns-matri-login-card { padding: 24px 18px; }
    .gdns-matri-steps { gap: 0; }
    .gdns-matri-step-label { display: none; }
    .gdns-matri-step-connector { width: 16px; }
    .gdns-matri-dash-header { flex-direction: column; text-align: center; }
}

/* ---- Department Settings: admin-pasted Google Map embed, full-width,
   directly below the Contact section on the home page. The pasted
   <iframe> from Google's "Embed a map" almost always carries hardcoded
   width/height attributes (e.g. width="600" height="450") - forced to
   100% width here so it always spans the full section regardless of
   what the admin pasted. ---- */
.gdns-dept-map-section { width: 100%; }
.gdns-dept-map-wrap { width: 100%; line-height: 0; }
.gdns-dept-map-wrap iframe {
    width: 100% !important;
    height: 420px;
    border: 0;
    display: block;
}

/* ---- Devanga Matrimony compact login card - white overlay box fixed
   on the right side of the hero slider text, rendered once inside
   gdns_Slider.php (sibling of .carousel-inner) so it never re-renders
   per-slide. ---- */
.gdns-hero-matri-overlay {
    position: absolute;
    top: 50%;
    right: 6%;
    transform: translateY(-50%);
    z-index: 6;
    width: 300px;
    max-width: 88vw;
}
.gdns-matri-hbar {
    background: #fff;
    border-radius: 16px;
    padding: 20px 20px 18px;
    box-shadow: 0 14px 36px rgba(0,0,0,0.28);
    color: #2d1b2e;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gdns-matri-hbar-brand { display: flex; align-items: center; gap: 10px; }
.gdns-matri-hbar-brand > i { font-size: 1.5rem; color: #c0143c; }
.gdns-matri-hbar-brand strong { display: block; font-size: 0.92rem; color: #2d1b2e; }
.gdns-matri-hbar-brand span { display: block; font-size: 0.68rem; color: #777; line-height: 1.25; }
.gdns-matri-hbar-form { display: flex; flex-direction: column; gap: 8px; }
.gdns-matri-hbar-form .form-control { width: 100%; border: 1px solid #e5d9de; border-radius: 20px; padding: 6px 14px; font-size: 0.82rem; }
.gdns-matri-hbar-form .btn-rosy { width: 100%; text-align: center; padding: 8px 14px; }
.gdns-matri-hbar-form .btn-outline-light { width: 100%; text-align: center; border: 1px solid #d8b8c4; color: #831843; background: #fff; padding: 8px 14px; }
.gdns-matri-hbar-form .btn-outline-light:hover { background: #fdf1f5; color: #831843; }
.gdns-matri-hbar-link { color: #831843; font-size: 0.75rem; text-decoration: underline; text-align: center; }
.gdns-matri-hbar-link:hover { color: #c0143c; }
.gdns-matri-hbar-actions { display: flex; flex-direction: column; gap: 8px; }
.gdns-matri-hbar-welcome { font-weight: 600; font-size: 0.82rem; color: #2d1b2e; }
.gdns-matri-hbar-actions .btn-rosy,
.gdns-matri-hbar-actions .btn-outline-light { width: 100%; text-align: center; }

@media (max-width: 992px) {
    .gdns-hero-matri-overlay {
        position: static;
        transform: none;
        width: 100%;
        max-width: 420px;
        margin: 18px auto 0;
        right: auto;
        top: auto;
    }
}

/* ---- Compact header/nav ONLY on the matrimony dashboard page, to free
   up vertical space for the dashboard itself (per explicit request) ---- */
body.gdns-matri-dashboard-page .devanga-topbar { padding: 3px 0; font-size: 0.72rem; }
body.gdns-matri-dashboard-page .devanga-header { padding: 8px 0; }
body.gdns-matri-dashboard-page .devanga-logo { width: 46px; height: 46px; padding: 3px; border-width: 1px; }
body.gdns-matri-dashboard-page .devanga-title { font-size: 1.05rem; line-height: 1.2; }
body.gdns-matri-dashboard-page .devanga-header p.text-white { font-size: 0.72rem; margin: 0; }
body.gdns-matri-dashboard-page .devanga-navbar .nav-link { padding: 8px 12px !important; font-size: 0.85rem; }
body.gdns-matri-dashboard-page .devanga-navbar.sticky-top { top: 22px; }
body.gdns-matri-dashboard-page .gdns-matri-auth-section { padding-top: 20px; }

/* ---- "My Profile" tab avatar (click-to-change photo) ---- */
.gdns-matri-editphoto-wrap { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.gdns-matri-editphoto-avatar { position: relative; cursor: pointer; display: inline-block; flex-shrink: 0; }
.gdns-matri-editphoto-avatar img {
    width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
    border: 3px solid #f1f3ff; box-shadow: 0 4px 14px rgba(0,35,217,0.15);
    transition: 0.2s;
}
.gdns-matri-editphoto-avatar:hover img { opacity: 0.85; transform: scale(1.03); }
.gdns-matri-editphoto-badge {
    position: absolute; bottom: 0; right: 0;
    width: 28px; height: 28px; border-radius: 50%;
    background: #0023d9; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; border: 2px solid #fff;
}

/* ---- Browse Profiles: left sidebar filters (animated drawer on mobile) ---- */
.gdns-matri-browse-layout { display: flex; align-items: flex-start; gap: 22px; }
.gdns-matri-filter-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.07);
    position: sticky;
    top: 90px;
}
.gdns-matri-filter-sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid #f1f2f8; }
.gdns-matri-filter-sidebar-head h6 { font-weight: 700; color: #0023d9; }
.gdns-matri-filter-close { background: none; border: none; font-size: 1.4rem; line-height: 1; color: #888; }
.gdns-matri-filter-group { margin-bottom: 16px; }
.gdns-matri-filter-group label { display: block; font-size: 0.78rem; font-weight: 700; color: #555; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.4px; }
.gdns-matri-browse-results { flex: 1; min-width: 0; }

@media (max-width: 991px) {
    .gdns-matri-browse-layout { display: block; }
    .gdns-matri-filter-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 82%;
        max-width: 320px;
        z-index: 1050;
        border-radius: 0 18px 18px 0;
        transform: translateX(-105%);
        transition: transform 0.32s cubic-bezier(.2,.8,.2,1);
        overflow-y: auto;
    }
    .gdns-matri-filter-sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.35); }
    .gdns-matri-filter-backdrop {
        display: none;
        position: fixed; inset: 0; background: rgba(0,0,0,0.45);
        z-index: 1049; opacity: 0; transition: opacity 0.3s ease;
    }
    .gdns-matri-filter-backdrop.open { display: block; opacity: 1; }
}
@media (min-width: 992px) {
    .gdns-matri-filter-backdrop { display: none !important; }
}

/* ── Shared dynamic sub-form rows (Sibling / Property) - used by both
      matrimony_register.php's wizard Step 5 and the dashboard's My
      Profile edit tab ─────────────────────────────────────────────── */
.mrw-subcard { border: 1px dashed #eccdd9; border-radius: 12px; padding: 14px; margin-bottom: 12px; background: #fffafb; position: relative; }
.mrw-subcard .mrw-remove-row { position: absolute; top: 8px; right: 10px; color: #c0143c; background: none; border: none; font-size: .85rem; }
.mrw-add-row-btn { border: 1px dashed #d6336c; color: #d6336c; background: #fff; border-radius: 10px; padding: 8px 16px; font-size: .82rem; font-weight: 600; }

/* ── Left-side profile drawer (shared: matrimony_dashboard.php +
      matrimony_profiles.php) - "View Full Profile" opens this instead
      of navigating to a new page ─────────────────────────────────── */
.gdns-matri-drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(20,10,15,0.5); z-index: 1200; opacity: 0; transition: opacity .25s ease; }
.gdns-matri-drawer-backdrop.open { display: block; opacity: 1; }
.gdns-matri-drawer-panel { position: fixed; top: 0; left: 0; bottom: 0; width: 92%; max-width: 460px; background: #fff; z-index: 1201; box-shadow: 8px 0 40px rgba(0,0,0,0.25); transform: translateX(-105%); transition: transform .3s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; }
.gdns-matri-drawer-panel.open { transform: translateX(0); }
.gdns-matri-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #f0e6ea; flex: 0 0 auto; }
.gdns-matri-drawer-head strong { color: #0d1b3e; font-size: .95rem; }
.gdns-matri-drawer-close { border: none; background: #f6f2f4; color: #a61e4d; width: 32px; height: 32px; border-radius: 50%; font-size: .9rem; }
.gdns-matri-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 18px; }
.gdns-matri-drawer-photo { width: 130px; height: 130px; object-fit: cover; border-radius: 14px; border: 3px solid #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.gdns-matri-drawer-loading { text-align: center; padding: 60px 20px; color: #bbb; }

/* ── Devanga Matrimony Login button - main navbar (header.php /
      kn_header.php), added alongside admin-managed MAIN_MENU items ─── */
.gdns-nav-login-btn {
    display: inline-flex;
    align-items: center;
    margin-left: 14px;
    padding: 8px 20px;
    border-radius: 30px;
    background: linear-gradient(135deg, #d6336c 0%, #a61e4d 100%);
    color: #fff !important;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(166, 30, 77, 0.3);
    transition: transform .2s ease, box-shadow .2s ease;
    white-space: nowrap;
}
.gdns-nav-login-btn:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(166, 30, 77, 0.4);
}
@media (max-width: 991.98px) {
    .gdns-nav-login-btn { margin: 10px 0 4px; }
}

/* ── "View Photo Album" modal (shared: matrimony_profiles.php,
      matrimony_profile_view.php, matrimony_dashboard.php) - centered
      box + backdrop, vanilla JS toggled (.open), body content is
      AJAX-swapped from matri_photo_album_content.php ─────────────── */
.gdns-matri-album-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,10,15,0.6); z-index: 1300; opacity: 0; transition: opacity .25s ease; }
.gdns-matri-album-modal-backdrop.open { display: block; opacity: 1; }
.gdns-matri-album-modal {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%) scale(0.97);
    width: 94%; max-width: 640px; max-height: 88vh; overflow-y: auto; background: #ffffff; border-radius: 20px;
    box-shadow: 0 30px 60px -12px rgba(0,0,0,0.35); z-index: 1301; padding: 24px; opacity: 0; transition: all .25s cubic-bezier(.2,.8,.2,1);
}
.gdns-matri-album-modal.open { display: block; opacity: 1; transform: translate(-50%, -50%) scale(1); }
.gdns-matri-album-modal-close {
    position: absolute; top: 14px; right: 14px; border: none; background: #f6f2f4; color: #a61e4d;
    width: 34px; height: 34px; border-radius: 50%; font-size: .9rem; z-index: 2;
}
.gdns-matri-btn-viewalbum { border-color: #831843 !important; color: #831843 !important; }
.gdns-matri-btn-viewalbum:hover { background: #fdf1f4 !important; }

/* ── Dashboard "My Photo Album" (matrimony_dashboard.php) ───────────── */
.gdns-myphoto-item { position: relative; width: 96px; height: 96px; border-radius: 14px; overflow: hidden; border: 1px solid #f0e6ea; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.gdns-myphoto-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gdns-myphoto-badge { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 0.62rem; font-weight: 700; padding: 3px 2px; color: #fff; }
.gdns-myphoto-badge.pending { background: rgba(217,119,6,0.9); }
.gdns-myphoto-badge.approved { background: rgba(16,185,129,0.9); }
.gdns-myphoto-badge.rejected { background: rgba(220,38,38,0.9); }
.gdns-myphoto-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(15,10,15,0.6); color: #fff; font-size: 0.68rem; display: flex; align-items: center; justify-content: center; }
.gdns-myphoto-remove:hover { background: #a61e4d; }