/*
Theme Name: Thuyarpakirvu - In Memoriam
Theme URI: https://example.com/in-memoriam
Author: In Memoriam Theme
Author URI: https://example.com
Description: A dignified and elegant obituary and memorial theme for honoring and remembering loved ones. Features obituary listings, tribute submissions, condolence messages, candle lighting, and full admin management.
Version: 4.9.7
Requires at least: 5.8
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: in-memoriam
Tags: obituary, memorial, funeral, tribute, condolence, dark, elegant
*/

/* ============================================
   CSS VARIABLES & RESET
   ============================================ */
:root {
    --color-dark: #283c35;
    --color-darker: #1b302b;
    --color-navy: #283c35;
    --color-blue: #526a56;
    --color-blue-light: #344f40;
    --color-gold: #9b763d;
    --color-gold-light: #d8ba77;
    --color-cream: #f5eedf;
    --color-white: #fffaf0;
    --color-gray-50: #f6f0e4;
    --color-gray-100: #eee5d6;
    --color-gray-200: #ddd1bc;
    --color-gray-300: #c9b99e;
    --color-gray-400: #9b907e;
    --color-gray-500: #766c5f;
    --color-gray-600: #655b50;
    --color-gray-700: #4a4b3d;
    --color-text: #334039;
    --color-text-light: #6c7165;
    --color-success: #2d6a4f;
    --color-danger: #c0392b;
    --font-heading: 'Fraunces', 'Noto Serif Tamil', Georgia, serif;
    --font-body: 'DM Sans', 'Noto Sans Tamil', sans-serif;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.08);
    --radius: 4px;
    --radius-md: 8px;
    --transition: all 0.25s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-gray-50);
}

a { color: var(--color-blue); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--color-blue-light); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.3;
    color: var(--color-dark);
    font-weight: 700;
}

/* ============================================
   LAYOUT
   ============================================ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main { flex: 1; padding: 30px 0; }

/* ============================================
   HEADER / NAV
   ============================================ */
.site-header {
    background: var(--color-dark);
    background: linear-gradient(135deg, #1a2332 0%, #1e3a5f 100%);
    border-bottom: 2px solid var(--color-gold);
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0,0,0,0.3);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    max-width: 1280px;
    margin: 0 auto;
    gap: 15px;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: rgba(201,168,76,0.15);
    border: 1px solid var(--color-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.logo-text { color: var(--color-white); }

.logo-text .site-name {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    display: block;
    line-height: 1.1;
    color: var(--color-white);
}

.logo-text .site-tagline {
    font-size: 0.68rem;
    color: var(--color-gold-light);
    letter-spacing: 0.04em;
    display: block;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.main-nav a {
    color: var(--color-gray-200);
    padding: 5px 9px;
    border-radius: var(--radius);
    font-size: 0.81rem;
    font-weight: 500;
    transition: var(--transition);
    white-space: nowrap;
}

.main-nav a:hover {
    color: var(--color-white);
    background: rgba(255,255,255,0.12);
}

.main-nav a.active {
    color: #fff;
    background: rgba(201,168,76,0.22);
    border-bottom: 2px solid var(--color-gold);
    font-weight: 600;
}

.btn-nav-select {
    background: var(--color-blue) !important;
    color: var(--color-white) !important;
    border-radius: var(--radius) !important;
    padding: 5px 12px !important;
    font-weight: 600 !important;
}

.btn-nav-select:hover { background: var(--color-blue-light) !important; }

/* ============================================
   HERO BANNER
   ============================================ */
.hero-banner {
    background: linear-gradient(135deg, #0f1923 0%, #1a2f4a 50%, #243b55 100%);
    padding: 50px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9a84c' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.hero-candles {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(201,168,76,0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 50%, rgba(201,168,76,0.06) 0%, transparent 60%);
    pointer-events: none;
}

.hero-content { position: relative; z-index: 1; }

.hero-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--color-white);
    font-style: italic;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

.hero-subtitle {
    color: var(--color-gold-light);
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 400;
}

/* ============================================
   TWO COLUMN LAYOUT
   ============================================ */
.content-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* ============================================
   SECTION HEADINGS
   ============================================ */
.section-heading {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--color-dark);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-gold);
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-heading::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--color-gold);
    border-radius: 2px;
    flex-shrink: 0;
}

/* ============================================
   OBITUARY CARDS
   ============================================ */
.obituary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 20px;
}

.obituary-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-200);
    transition: var(--transition);
    text-align: center;
}

.obituary-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--color-gold);
}

.obituary-card-photo {
    width: 100%;
    height: 140px;
    object-fit: cover;
    object-position: center top;
}

.obituary-card-photo-placeholder {
    width: 100%;
    height: 140px;
    background: linear-gradient(135deg, var(--color-gray-200) 0%, var(--color-gray-300) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--color-gray-400);
}

.obituary-card-body { padding: 12px 10px; }

.obituary-card-name {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 3px;
}

.obituary-card-years {
    font-size: 0.75rem;
    color: var(--color-gold);
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.obituary-card-excerpt {
    font-size: 0.78rem;
    color: var(--color-text-light);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-dark);
    color: var(--color-white);
    padding: 10px 22px;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--transition);
    margin-top: 10px;
}

.btn-view-all:hover {
    background: var(--color-blue);
    color: var(--color-white);
}

.btn-view-all::after { content: '›'; font-size: 1.1rem; }

/* ============================================
   TRIBUTES & CONDOLENCES
   ============================================ */
.tribute-section {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 25px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-200);
    margin-top: 25px;
}

.tribute-intro {
    color: var(--color-text-light);
    font-size: 0.875rem;
    margin-bottom: 20px;
}

.tribute-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.tribute-message-card {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.tribute-photo {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--color-gold);
}

.tribute-photo-placeholder {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    border: 2px solid var(--color-gold);
    color: var(--color-gray-400);
}

.tribute-text-wrap {}

.tribute-name {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.tribute-name span {
    font-size: 0.8rem;
    color: var(--color-gold);
    font-weight: 400;
    font-style: italic;
    font-family: var(--font-body);
}

.tribute-message {
    font-size: 0.85rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

.tribute-image-wrap {
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 180px;
}

.tribute-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tribute-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn-condolence, .btn-candle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: var(--radius);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--transition);
}

.btn-condolence {
    background: var(--color-dark);
    color: var(--color-white);
}

.btn-condolence:hover { background: var(--color-blue); color: var(--color-white); }

.btn-candle {
    background: var(--color-cream);
    color: var(--color-dark);
    border: 1px solid var(--color-gold);
}

.btn-candle:hover { background: var(--color-gold); color: var(--color-dark); }

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {}

/* Search Widget */
.widget-search {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
}

.widget-search input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--color-gray-300);
    border-right: none;
    border-radius: var(--radius) 0 0 var(--radius);
    font-size: 0.875rem;
    font-family: var(--font-body);
    outline: none;
    transition: var(--transition);
}

.widget-search input:focus { border-color: var(--color-blue); }

.widget-search button {
    padding: 10px 18px;
    background: var(--color-dark);
    color: var(--color-white);
    border: none;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.widget-search button:hover { background: var(--color-blue); }

/* Submit Notice Widget */
.widget-submit {
    background: var(--color-dark);
    background: linear-gradient(135deg, #1e3a5f 0%, #1a2332 100%);
    border-radius: var(--radius-md);
    padding: 22px;
    margin-bottom: 20px;
    border: 1px solid rgba(201,168,76,0.3);
}

.widget-submit-title {
    font-family: var(--font-heading);
    color: var(--color-white);
    font-size: 1.05rem;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.widget-submit-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.btn-submit-obituary {
    background: var(--color-blue);
    color: var(--color-white);
    padding: 9px 12px;
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    display: block;
}

.btn-submit-obituary:hover { background: var(--color-blue-light); color: var(--color-white); }

.btn-contact {
    background: transparent;
    color: var(--color-gray-300);
    padding: 9px 12px;
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    transition: var(--transition);
    display: block;
}

.btn-contact:hover { background: rgba(255,255,255,0.1); color: var(--color-white); }

/* ============================================
   BUTTONS GENERAL
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    font-family: var(--font-body);
    text-decoration: none;
}

.btn-primary { background: var(--color-blue); color: var(--color-white); }
.btn-primary:hover { background: var(--color-blue-light); color: var(--color-white); }
.btn-secondary { background: var(--color-gray-200); color: var(--color-dark); }
.btn-secondary:hover { background: var(--color-gray-300); color: var(--color-dark); }
.btn-danger { background: var(--color-danger); color: var(--color-white); }
.btn-danger:hover { background: #a93226; color: var(--color-white); }
.btn-sm { padding: 6px 12px; font-size: 0.78rem; }
.btn-success { background: var(--color-success); color: var(--color-white); }
.btn-success:hover { background: #1e4d38; color: var(--color-white); }

/* ============================================
   FORMS
   ============================================ */
.form-group { margin-bottom: 18px; }

.form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: 6px;
}

.form-label .required { color: var(--color-danger); margin-left: 2px; }

.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-white);
    transition: var(--transition);
    outline: none;
}

.form-control:focus {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(37,99,168,0.1);
}

textarea.form-control { min-height: 120px; resize: vertical; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Image Upload */
.image-upload-wrap {
    border: 2px dashed var(--color-gray-300);
    border-radius: var(--radius-md);
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: var(--color-gray-50);
}

.image-upload-wrap:hover,
.image-upload-wrap.dragover {
    border-color: var(--color-blue);
    background: rgba(37,99,168,0.04);
}

.image-upload-wrap input[type="file"] {
    display: none;
}

.upload-icon { font-size: 2.5rem; margin-bottom: 10px; opacity: 0.5; }

.upload-text {
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

.upload-text strong { color: var(--color-blue); cursor: pointer; }

.upload-preview {
    display: none;
    margin-top: 15px;
    position: relative;
}

.upload-preview img {
    max-height: 200px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: var(--radius);
    border: 1px solid var(--color-gray-200);
    object-fit: cover;
}

.upload-preview .remove-preview {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: var(--color-danger);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ============================================
   CARDS / PANELS
   ============================================ */
.card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 25px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-200);
    margin-bottom: 20px;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-dark);
    margin-bottom: 5px;
}

/* ============================================
   NOTICES / ALERTS
   ============================================ */
.notice {
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 0.875rem;
    margin-bottom: 16px;
    border-left: 4px solid;
}

.notice-success {
    background: #f0fdf4;
    border-color: #16a34a;
    color: #15803d;
}

.notice-error {
    background: #fef2f2;
    border-color: var(--color-danger);
    color: #b91c1c;
}

.notice-info {
    background: #eff6ff;
    border-color: var(--color-blue);
    color: var(--color-blue);
}

.notice-warning {
    background: #fffbeb;
    border-color: #d97706;
    color: #92400e;
}

/* ============================================
   SINGLE OBITUARY PAGE
   ============================================ */
.obituary-single {}

.obituary-hero {
    background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(255, 215, 0, 0.15);
    color: white;
    padding: 40px 20px;
    border-radius: 16px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

/* Frame card stage — controls size on single page */
.obituary-hero-framed-stage {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

/* On desktop: put frame left + tribute actions right in a 2-col row */
@media (min-width: 768px) {
    .obituary-hero {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 60px;
        padding: 50px;
    }
    .obituary-hero-framed-stage {
        flex: 0 0 420px;
        max-width: 420px;
        margin: 0;
    }
    .obituary-hero .tribute-actions {
        flex: 0 0 320px;
        max-width: 320px;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        margin-top: 0 !important;
        gap: 16px !important;
    }
    .obituary-hero .tribute-actions button {
        width: 100%;
        text-align: center;
        padding: 16px 24px !important;
        font-size: 1rem !important;
    }
}



.obituary-hero-photo {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 4px solid var(--color-gold);
    flex-shrink: 0;
}


.obituary-hero-photo-placeholder {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    flex-shrink: 0;
    border: 4px solid var(--color-gold);
}

.obituary-hero-info {}

.obituary-hero-name {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--color-white);
    margin-bottom: 5px;
}

.obituary-hero-years {
    color: var(--color-gold-light);
    font-size: 1rem;
    margin-bottom: 12px;
    display: block;
}

.obituary-hero-excerpt {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.7;
}

/* ============================================
   CONDOLENCES LIST
   ============================================ */
.condolence-list { list-style: none; }

.condolence-item {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.condolence-item:last-child { border-bottom: none; }

.condolence-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-navy) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.condolence-body {}

.condolence-author {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-dark);
}

.condolence-date {
    font-size: 0.75rem;
    color: var(--color-gray-400);
    margin-left: 8px;
}

.condolence-text {
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-top: 4px;
    line-height: 1.6;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: var(--color-darker);
    color: var(--color-gray-400);
    padding: 30px 0;
    margin-top: auto;
    border-top: 2px solid var(--color-gold);
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-logo {
    font-family: var(--font-heading);
    color: var(--color-gold-light);
    font-size: 1.1rem;
}

.footer-copy { font-size: 0.8rem; }

.footer-nav { display: flex; gap: 20px; }

.footer-nav a {
    color: var(--color-gray-400);
    font-size: 0.8rem;
    transition: var(--transition);
}

.footer-nav a:hover { color: var(--color-gold-light); }

/* ============================================
   PENDING BADGE
   ============================================ */
.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-pending { background: #fef3c7; color: #92400e; }
.status-approved { background: #d1fae5; color: #065f46; }
.status-rejected { background: #fee2e2; color: #991b1b; }

/* ============================================
   ALL OBITUARIES PAGE
   ============================================ */
.obituaries-list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.obituary-list-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-200);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.obituary-list-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--color-gold);
}

.obituary-list-photo {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center top;
}

.obituary-list-photo-placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-gray-200) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--color-gray-400);
}

.obituary-list-body {
    padding: 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.obituary-list-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 4px;
}

.obituary-list-years {
    font-size: 0.82rem;
    color: var(--color-gold);
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
}

.obituary-list-excerpt {
    font-size: 0.875rem;
    color: var(--color-text-light);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 14px;
}

.obituary-list-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-blue);
}

.obituary-list-link:hover { color: var(--color-blue-light); }
.obituary-list-link::after { content: '→'; }

/* ============================================
   SUBMIT PAGE
   ============================================ */
.submit-page-wrap {
    max-width: 750px;
    margin: 0 auto;
}

.submit-page-intro {
    font-size: 0.95rem;
    color: var(--color-text-light);
    margin-bottom: 25px;
    line-height: 1.7;
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 30px;
}

.pagination a,
.pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--color-white);
    color: var(--color-text);
    border: 1px solid var(--color-gray-200);
    transition: var(--transition);
}

.pagination a:hover { border-color: var(--color-blue); color: var(--color-blue); }

.pagination .current {
    background: var(--color-blue);
    color: var(--color-white);
    border-color: var(--color-blue);
}

/* ============================================
   CANDLES
   ============================================ */
.candles-section {
    background: linear-gradient(135deg, #1a2332 0%, #243b55 100%);
    border-radius: var(--radius-md);
    padding: 25px;
    margin-top: 20px;
}

.candles-title {
    color: var(--color-gold-light);
    font-family: var(--font-heading);
    font-size: 1rem;
    margin-bottom: 15px;
    text-align: center;
}

.candles-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.candle-item {
    text-align: center;
    font-size: 2rem;
    position: relative;
}

.candle-name {
    font-size: 0.7rem;
    color: var(--color-gray-400);
    margin-top: 4px;
    display: block;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 5px;
}

@media (max-width: 1024px) {
    .obituary-grid { grid-template-columns: repeat(2, 1fr); }
    .content-layout { grid-template-columns: 1fr; }
    .sidebar { order: -1; }
    .obituaries-list-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .header-inner { flex-wrap: wrap; gap: 10px; }
    .main-nav { display: none; flex-direction: column; width: 100%; background: rgba(15,30,54,0.98); border-radius: var(--radius-md); padding: 12px; gap: 6px; border: 1px solid rgba(201,168,76,0.3); }
    .main-nav.open { display: flex; }
    .main-nav a { padding: 9px 14px; font-size: 0.88rem; width: 100%; }
    .mobile-menu-toggle { display: block; }
}

@media (max-width: 768px) {
    .obituary-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-title { font-size: 1.8rem; }
    .tribute-featured { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .obituaries-list-grid { grid-template-columns: 1fr; }
    .obituary-hero { flex-direction: column; align-items: center; text-align: center; }
    .footer-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
    .obituary-grid { grid-template-columns: 1fr; }
    .widget-submit-buttons { grid-template-columns: 1fr; }
}

/* ============================================
   FOOTER ENHANCEMENTS
   ============================================ */
.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.footer-social,
.footer-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.social-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    text-decoration: none;
}

@media (max-width: 768px) {
    .footer-inner {
        gap: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .footer-nav {
        gap: 8px 12px;
    }
}

/* ============================================
   HOME CATEGORY CARDS
   ============================================ */
.home-category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border-color: var(--color-gold) !important;
    background: #ffffff !important;
}

.home-category-section {
    scroll-margin-top: 80px;
}

@media (max-width: 600px) {
    .home-categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* ==========================================================================
   PERFECT MEMORIAL FRAMING SYSTEM & VISITOR CONNECTIONS
   ========================================================================== */

/* ==========================================================================
   UNIFIED MEMORIAL FRAME CARD ARCHITECTURE (10 DISTINCT SACRED STYLES)
   ========================================================================== */
/* ==========================================================================
   AUTHENTIC IMAGE-BASED MEMORIAL FRAMES (REAL ORNATE PNG OVERLAYS)
   ========================================================================== */
.memorial-frame-card,
.im-frame-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: visible;
    background: transparent;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    user-select: none;
    box-sizing: border-box;
}

.memorial-frame-card:hover,
.im-frame-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.9), 0 0 24px rgba(255, 215, 0, 0.3);
}

.memorial-frame-card.context-hero,
.im-frame-card.context-hero {
    max-width: 440px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.25);
}

.memorial-frame-card.context-hero:hover,
.im-frame-card.context-hero:hover {
    transform: none;
}

/* Aspect Ratio Stages */
.im-frame-stage {
    position: relative;
    width: 100%;
    height: 0;
}

.frame-layout-896-1200 .im-frame-stage {
    padding-top: calc(1200 / 896 * 100%); /* 133.93% */
}

.frame-layout-870-1024 .im-frame-stage {
    padding-top: calc(1024 / 870 * 100%); /* 117.70% */
}

/* Layer 1: Aperture Window (Photo sits underneath the bezel) */
.frame-photo-aperture,
.im-frame-aperture {
    position: absolute;
    overflow: hidden;
    z-index: 1;
    background: transparent;
}

.memorial-framed-photo,
.im-frame-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    transition: transform 0.5s ease;
}

.memorial-frame-card:hover .memorial-framed-photo,
.im-frame-card:hover .im-frame-photo {
    transform: scale(1.04);
}

/* Placeholder for notices without photos */
.memorial-photo-placeholder,
.im-frame-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, #1a2540 0%, #050810 100%);
    color: #ffd700;
}

.im-frame-placeholder .ph-icon {
    font-size: 3rem;
    filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.7));
    line-height: 1;
}

/* Hide placeholder text label — icon only inside the circle */
.im-frame-placeholder .ph-text {
    display: none;
}

/* Layer 2: Ornate PNG Bezel Frame (On top of photo) */
.im-frame-overlay-bezel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    display: block;
    image-rendering: auto;
}

/* Layer 3: Typography Memorial Plaque */
.memorial-frame-plaque,
.im-frame-plaque {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 0 4px;
}

.im-plaque-tag {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.memorial-plaque-name,
.im-plaque-name {
    font-family: var(--font-heading, 'Mukta Malar', Georgia, serif);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 1px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    line-height: 1.25;
}

.context-hero .memorial-plaque-name,
.context-hero .im-plaque-name {
    font-size: 1.35rem;
}

.im-plaque-realname {
    font-size: 0.72rem;
    font-weight: 600;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.context-hero .im-plaque-realname {
    font-size: 0.95rem;
}

.memorial-plaque-dates,
.im-plaque-dates {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    margin-top: 1px;
    flex-wrap: wrap;
    white-space: nowrap;
}

.context-hero .memorial-plaque-dates,
.context-hero .im-plaque-dates {
    font-size: 0.88rem;
}

.memorial-plaque-loc,
.im-plaque-loc {
    font-size: 0.65rem;
    font-weight: 500;
    margin-top: 1px;
    opacity: 0.95;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.context-hero .memorial-plaque-loc,
.context-hero .im-plaque-loc {
    font-size: 0.82rem;
}

.memorial-plaque-action,
.im-plaque-action {
    margin-top: 4px;
    z-index: 5;
    position: relative;
}

.btn-memorial-view,
.im-plaque-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.btn-memorial-view:hover,
.im-plaque-btn:hover {
    filter: brightness(1.15);
    transform: scale(1.05);
}

/* Layer 4: Whole Card Clickable Overlay Link */
.im-frame-click-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    text-indent: -9999px;
    overflow: hidden;
}

/* ==========================================================================
   FRAME-SPECIFIC PIXEL-PERFECT APERTURES & COLOR PALETTES (MATCHING MASTER)
   ========================================================================== */

/* Universal Plaque Typography for All 6 Shrines */
.im-frame-plaque .im-plaque-tag {
    color: #ffd700;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
    margin-bottom: 2px;
}
.im-frame-plaque .im-plaque-name {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 800;
    margin: 1px 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.context-hero .im-frame-plaque .im-plaque-name { font-size: 1.15rem; }
.im-frame-plaque .im-plaque-realname {
    color: #ebd090;
    font-size: 0.72rem;
    font-weight: 600;
    margin: 1px 0 2px 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.context-hero .im-frame-plaque .im-plaque-realname { font-size: 0.85rem; }
.im-frame-plaque .im-plaque-dates {
    color: #ffe178;
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 1px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.context-hero .im-frame-plaque .im-plaque-dates { font-size: 0.82rem; }
.im-frame-plaque .im-plaque-loc {
    color: #cbd5e1;
    font-size: 0.68rem;
    font-weight: 500;
    margin-top: 1px;
    opacity: 0.95;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.context-hero .im-frame-plaque .im-plaque-loc { font-size: 0.75rem; }
.im-frame-plaque .im-plaque-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 5px;
    padding: 3px 14px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 800;
    text-decoration: none;
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    color: #ffffff;
    border: 1px solid #ffd700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    transition: transform 0.2s ease, filter 0.2s ease;
}
.im-frame-plaque .im-plaque-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.15);
}

/* 01. PEACE DOVE (Marana Arivithal) — pixel-scanned 2026-09-25 */
.frame-style-peace-dove .im-frame-aperture,
.frame-style-peace-dove-silver .im-frame-aperture {
    left: 29.58%;
    top: 30.00%;
    width: 40.74%;
    height: 30.58%;
    border-radius: 50%;
}
.frame-style-peace-dove .im-frame-plaque,
.frame-style-peace-dove-silver .im-frame-plaque {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 0 4px;
    left: 4.0%; top: 81.0%; width: 92.0%; height: 17.5%;
}

/* 02. SACRED DIYA (Ninaivu Naal) — pixel-scanned 2026-09-25 */
.frame-style-sacred-diya .im-frame-aperture,
.frame-style-sacred-diya-sandalwood .im-frame-aperture,
.frame-style-golden-heritage-temple .im-frame-aperture {
    left: 28.01%;
    top: 33.25%;
    width: 43.97%;
    height: 33.08%;
    border-radius: 50%;
}
.frame-style-sacred-diya .im-frame-plaque,
.frame-style-sacred-diya-sandalwood .im-frame-plaque,
.frame-style-golden-heritage-temple .im-frame-plaque {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 0 4px;
    left: 4.0%; top: 81.0%; width: 92.0%; height: 17.5%;
}

/* 03. ROYAL ANNIVERSARY (Aandu Ninaivu) — pixel-scanned 2026-09-25 */
.frame-style-royal-anniversary .im-frame-aperture,
.frame-style-royal-anniversary-garland .im-frame-aperture {
    left: 29.69%;
    top: 31.33%;
    width: 40.51%;
    height: 30.33%;
    border-radius: 50%;
}
.frame-style-royal-anniversary .im-frame-plaque,
.frame-style-royal-anniversary-garland .im-frame-plaque {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 0 4px;
    left: 4.0%; top: 81.0%; width: 92.0%; height: 17.5%;
}

/* 04. CRYSTAL TEAR (Kanneer Vanakkam) — pixel-scanned 2026-09-25 */
.frame-style-crystal-tear .im-frame-aperture,
.frame-style-crystal-tear-rose .im-frame-aperture {
    left: 29.24%;
    top: 31.42%;
    width: 41.52%;
    height: 30.75%;
    border-radius: 50%;
}
.frame-style-crystal-tear .im-frame-plaque,
.frame-style-crystal-tear-rose .im-frame-plaque {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 0 4px;
    left: 4.0%; top: 81.0%; width: 92.0%; height: 17.5%;
}

/* 05. ANJALI GRATITUDE (Nandri Navilal) — pixel-scanned 2026-09-25 */
.frame-style-anjali-gratitude .im-frame-aperture,
.frame-style-anjali-jasmine-dawn .im-frame-aperture,
.frame-style-lotus-divine-serenity .im-frame-aperture {
    left: 27.34%;
    top: 32.00%;
    width: 45.20%;
    height: 33.00%;
    border-radius: 50%;
}
.frame-style-anjali-gratitude .im-frame-plaque,
.frame-style-anjali-jasmine-dawn .im-frame-plaque,
.frame-style-lotus-divine-serenity .im-frame-plaque {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 0 4px;
    left: 4.0%; top: 81.0%; width: 92.0%; height: 17.5%;
}

/* 06. MAAVEERAR SACRED (Eelam Heroes Shrine) — pixel-scanned 2026-09-25 */
.frame-style-maaveerar .im-frame-aperture,
.frame-style-maaveerar-sacred .im-frame-aperture,
.memorial-frame-card.is-maaveerar .im-frame-aperture {
    left: 27.90%;
    top: 30.92%;
    width: 44.20%;
    height: 31.92%;
    border-radius: 50%;
}
.frame-style-maaveerar .im-frame-plaque,
.frame-style-maaveerar-sacred .im-frame-plaque,
.memorial-frame-card.is-maaveerar .im-frame-plaque {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 0 4px;
    left: 4.0%; top: 81.0%; width: 92.0%; height: 17.5%;
}

/* --------------------------------------------------------------------------
   4. GLOW & SHIMMER MICRO-ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes lampFlickerGlow {
    0%   { transform: translate(-50%, -50%) scale(0.92); opacity: 0.75; filter: blur(6px); }
    30%  { transform: translate(-50%, -50%) scale(1.10); opacity: 1;    filter: blur(8.5px); }
    70%  { transform: translate(-50%, -50%) scale(0.95); opacity: 0.85; filter: blur(6.5px); }
    100% { transform: translate(-50%, -50%) scale(1.06); opacity: 0.96; filter: blur(8px); }
}

@keyframes crystalShimmer {
    0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(0.9); }
    50%  { opacity: 1;   transform: translate(-50%, -50%) scale(1.15); filter: blur(5px); }
    100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes doveHaloPulse {
    0%   { opacity: 0.5; transform: translate(-50%, -50%) scale(0.95); }
    50%  { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); filter: blur(10px); }
    100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.95); }
}

@keyframes royalGlowPulse {
    0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(0.92); }
    50%  { opacity: 1;   transform: translate(-50%, -50%) scale(1.12); filter: blur(10px); }
    100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.92); }
}

@keyframes anjaliRaysPulse {
    0%   { opacity: 0.5; transform: translate(-50%, -50%) scale(0.94); }
    50%  { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); filter: blur(11px); }
    100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.94); }
}
.frame-gold-ornate.frame-context-card .corner-tr { top: 3px; right: 3px; border-left: none; border-bottom: none; }
.frame-gold-ornate.frame-context-card .corner-bl { bottom: 3px; left: 3px; border-right: none; border-top: none; }
.frame-gold-ornate.frame-context-card .corner-br { bottom: 3px; right: 3px; border-left: none; border-top: none; }

/* Hero Context: Single Memorial Page & Admin Preview */
.frame-gold-ornate.frame-context-hero {
    background: transparent;
    padding: 10px;
}

.frame-gold-ornate.frame-context-hero .gold-frame-outer-rim {
    position: relative;
    padding: 12px;
    background: linear-gradient(135deg, #d4a340 0%, #fff0a8 25%, #a27419 65%, #f6d37a 100%);
    border-radius: 8px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.45), inset 0 0 6px rgba(255,255,255,0.5);
}

.frame-gold-ornate.frame-context-hero .gold-frame-inner-rim {
    background: #0f172a;
    padding: 5px;
    border: 3px solid #5c410b;
    border-radius: 5px;
}

.frame-gold-ornate.frame-context-hero .gold-photo-aperture {
    position: relative;
    width: 240px;
    height: 270px;
    overflow: hidden;
    border-radius: 3px;
    background: #000;
}

.frame-gold-ornate.frame-context-hero .gold-frame-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 3px solid #ffe685;
    pointer-events: none;
    z-index: 4;
}

.frame-gold-ornate.frame-context-hero .corner-tl { top: 4px; left: 4px; border-right: none; border-bottom: none; }
.frame-gold-ornate.frame-context-hero .corner-tr { top: 4px; right: 4px; border-left: none; border-bottom: none; }
.frame-gold-ornate.frame-context-hero .corner-bl { bottom: 4px; left: 4px; border-right: none; border-top: none; }
.frame-gold-ornate.frame-context-hero .corner-br { bottom: 4px; right: 4px; border-left: none; border-top: none; }

/* --------------------------------------------------------------------------
   4. VISITOR CONNECTION CARD & MODAL STYLES
   -------------------------------------------------------------------------- */
.visitor-connect-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.visitor-connect-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0,0,0,0.3) !important;
}

.btn-connect-action:hover {
    background: linear-gradient(135deg, #e0c375 0%, #fff0a8 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(201,168,76,0.6) !important;
}

#visitorConnectModal {
    animation: fadeInModal 0.2s ease;
}

@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* --------------------------------------------------------------------------
   4b. MAAVEERAR POST CARDS & SINGLE MEMORIAL PRESENTATION
   -------------------------------------------------------------------------- */
.home-post-card.home-post-card-maaveerar,
.obituary-list-card.obituary-list-card-maaveerar {
    background: linear-gradient(180deg, #111b2b 0%, #080d17 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 24px rgba(245, 158, 11, 0.08);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.home-post-card.home-post-card-maaveerar:hover,
.obituary-list-card.obituary-list-card-maaveerar:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 30px rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.65) !important;
}

.home-post-card.home-post-card-maaveerar::before,
.obituary-list-card.obituary-list-card-maaveerar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #dc2626 0%, #f59e0b 50%, #dc2626 100%);
    z-index: 5;
}

.home-post-card.home-post-card-maaveerar .home-post-name a,
.obituary-list-card.obituary-list-card-maaveerar .obituary-list-name a {
    color: #ffd875 !important;
    font-weight: 700;
}

.home-post-card.home-post-card-maaveerar .home-post-name a:hover,
.obituary-list-card.obituary-list-card-maaveerar .obituary-list-name a:hover {
    color: #fef08a !important;
}

.home-post-card.home-post-card-maaveerar .home-post-years,
.obituary-list-card.obituary-list-card-maaveerar .obituary-list-years {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    font-weight: 600;
}

.home-post-card.home-post-card-maaveerar .home-post-loc,
.obituary-list-card.obituary-list-card-maaveerar .obituary-list-body p {
    color: #94a3b8;
}

.home-post-card.home-post-card-maaveerar .home-post-excerpt,
.obituary-list-card.obituary-list-card-maaveerar .obituary-list-excerpt {
    color: #cbd5e1;
}

.home-post-card.home-post-card-maaveerar .home-post-footer {
    border-top: 1px solid rgba(245, 158, 11, 0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
}

.home-post-card.home-post-card-maaveerar .home-post-date {
    color: #94a3b8;
}

.home-post-card.home-post-card-maaveerar .home-post-link,
.obituary-list-card.obituary-list-card-maaveerar .obituary-list-link {
    background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #b45309 100%);
    color: #ffffff !important;
    padding: 6px 14px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 2px 10px rgba(217, 119, 6, 0.35);
    border: 1px solid rgba(254, 240, 138, 0.3);
    display: inline-block;
}

.home-post-card.home-post-card-maaveerar .home-post-link:hover,
.obituary-list-card.obituary-list-card-maaveerar .obituary-list-link:hover {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.5);
    color: #0f1e36 !important;
}

/* Single Obituary Page Maaveerar Theme */
.obituary-single.obituary-single-maaveerar .obituary-hero {
    background: radial-gradient(circle at center, #162032 0%, #070c14 100%);
    border: 1px solid rgba(245, 158, 11, 0.4);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(245, 158, 11, 0.1);
}

.obituary-single.obituary-single-maaveerar .obituary-hero-name {
    color: #ffd875 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.obituary-single.obituary-single-maaveerar .obituary-poster-heading {
    color: #f59e0b;
    font-weight: 700;
}

/* ============================================
   5. REALISTIC MEMORIAL SYMBOLS & ANIMATIONS
   ============================================ */
.memorial-symbol-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

/* Sizing Variants */
.memorial-symbol-xs { width: 22px; height: 22px; }
.memorial-symbol-sm { width: 34px; height: 34px; }
.memorial-symbol-md { width: 48px; height: 48px; }
.memorial-symbol-lg { width: 68px; height: 68px; }
.memorial-symbol-xl { width: 92px; height: 92px; }

.memorial-symbol-wrap svg.memorial-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* 1. Maaveerar Karthigaipoo (Tamil Eelam Flame Lily) */
.memorial-symbol-maaveerar {
    border-radius: 50%;
}

.memorial-symbol-maaveerar .maaveerar-sacred-aura {
    position: absolute;
    inset: -14%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.45) 0%, rgba(245, 158, 11, 0.22) 50%, transparent 72%);
    animation: karthigaiSacredPulse 2.4s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 1;
}

.memorial-symbol-maaveerar .maaveerar-sanctum-disc {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, #3b0707 0%, #1c0505 65%, #0c0202 100%);
    border: 2px solid rgba(245, 158, 11, 0.85);
    box-shadow: 0 0 14px rgba(220, 38, 38, 0.75), 0 0 24px rgba(245, 158, 11, 0.4), inset 0 0 10px rgba(239, 68, 68, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.memorial-symbol-maaveerar:hover .maaveerar-sanctum-disc {
    transform: scale(1.06);
    box-shadow: 0 0 22px rgba(239, 68, 68, 0.95), 0 0 34px rgba(245, 158, 11, 0.65), inset 0 0 14px rgba(239, 68, 68, 0.8);
}

.memorial-symbol-maaveerar .karthigai-flower-img {
    width: 82%;
    height: 82%;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(254, 240, 138, 0.6)) drop-shadow(0 0 10px rgba(239, 68, 68, 0.85));
    animation: karthigaiFlowerBreathe 3s ease-in-out infinite alternate;
    position: relative;
    z-index: 3;
}

@keyframes karthigaiSacredPulse {
    0% {
        transform: scale(0.92);
        opacity: 0.6;
        filter: blur(1px);
    }
    100% {
        transform: scale(1.22);
        opacity: 1;
        filter: blur(3px);
    }
}

@keyframes karthigaiFlowerBreathe {
    0% {
        transform: scale(0.95) rotate(-1deg);
        filter: drop-shadow(0 2px 4px rgba(254, 240, 138, 0.5)) drop-shadow(0 0 8px rgba(239, 68, 68, 0.7));
    }
    100% {
        transform: scale(1.05) rotate(1deg);
        filter: drop-shadow(0 3px 8px rgba(254, 240, 138, 0.85)) drop-shadow(0 0 15px rgba(239, 68, 68, 1));
    }
}

/* 2. Peace Dove Floating Animation */
.symbol-anim-float {
    animation: symbolDoveHover 3.2s ease-in-out infinite alternate;
    transform-origin: 50% 50%;
}

@keyframes symbolDoveHover {
    0% {
        transform: translateY(2px) rotate(-1deg);
    }
    100% {
        transform: translateY(-4px) rotate(1.5deg);
    }
}

/* 3. Memorial Wreath & Crystal Tear Glint */
.symbol-anim-gentle {
    animation: symbolWreathSway 4s ease-in-out infinite alternate;
    transform-origin: 50% 50%;
}

@keyframes symbolWreathSway {
    0% {
        transform: rotate(-1.5deg);
    }
    100% {
        transform: rotate(1.5deg);
    }
}

.symbol-anim-tear {
    animation: symbolTearPulse 2.8s ease-in-out infinite alternate;
    transform-origin: 50% 60%;
}

@keyframes symbolTearPulse {
    0% {
        transform: scale(0.96);
        filter: drop-shadow(0 2px 3px rgba(59, 130, 246, 0.4));
    }
    100% {
        transform: scale(1.04);
        filter: drop-shadow(0 3px 8px rgba(96, 165, 250, 0.85));
    }
}

.symbol-sparkle {
    animation: symbolSparkleFlash 2.5s ease-in-out infinite;
}

@keyframes symbolSparkleFlash {
    0%, 100% { opacity: 0.2; transform: scale(0.7); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* 4. Diya Flame Realistic Flicker */
.symbol-anim-flame {
    animation: symbolFlameFlicker 1.8s ease-in-out infinite alternate;
    transform-origin: 50% 55px;
}

@keyframes symbolFlameFlicker {
    0% {
        transform: scale(0.96, 0.94) skewX(-1.5deg);
        filter: drop-shadow(0 0 4px #ea580c);
    }
    50% {
        transform: scale(1.03, 1.05) skewX(1deg);
        filter: drop-shadow(0 0 8px #f59e0b);
    }
    100% {
        transform: scale(0.98, 1.02) skewX(-0.5deg);
        filter: drop-shadow(0 0 6px #ea580c);
    }
}

.symbol-halo-pulse {
    animation: symbolHaloBreathe 2.6s ease-in-out infinite alternate;
    transform-origin: 50% 50%;
}

@keyframes symbolHaloBreathe {
    0% { transform: scale(0.92); opacity: 0.6; }
    100% { transform: scale(1.08); opacity: 0.95; }
}

/* 5. Golden Laurel Shimmer Sweep */
.symbol-anim-sweep {
    animation: symbolGoldBreathe 3.5s ease-in-out infinite alternate;
    transform-origin: 50% 50%;
}

@keyframes symbolGoldBreathe {
    0% {
        transform: scale(0.97);
        filter: drop-shadow(0 2px 4px rgba(133, 77, 14, 0.35));
    }
    100% {
        transform: scale(1.03);
        filter: drop-shadow(0 3px 10px rgba(234, 179, 8, 0.65));
    }
}

/* 6. Reverence / Anjali Mudra Warm Glow */
.symbol-anim-reverence {
    animation: symbolAnjaliBreathe 3s ease-in-out infinite alternate;
    transform-origin: 50% 70%;
}

@keyframes symbolAnjaliBreathe {
    0% {
        transform: scale(0.97);
    }
    100% {
        transform: scale(1.03);
    }
}

/* Category cards hover on homepage */
.home-category-card:hover .memorial-symbol-wrap {
    transform: scale(1.12);
}

/* --------------------------------------------------------------------------
   FUNERAL LIVE STREAM BROADCAST, NANDRI NAVIL & FRAME ENHANCEMENTS
   -------------------------------------------------------------------------- */
.obituary-live-stream-section {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 24px;
    color: #fff;
    margin-bottom: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

.badge-live-pulse {
    animation: livePulseGlow 2s infinite;
}

.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 8px #fff;
    animation: pulseRedDot 1.2s infinite ease-in-out;
}

@keyframes pulseRedDot {
    0%, 100% { transform: scale(0.8); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 1; }
}

@keyframes livePulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
    50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

.obituary-nandri-navil-section {
    transition: all 0.3s ease;
}

.badge-funeral-concluded {
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* Unified Frame Card Grid Items */
.home-post-frame-item,
.obituary-list-frame-item {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Unified Frame Card Grid — Desktop multi-column */
.home-category-posts-grid,
.obituaries-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
    align-items: start;
}

/* Large desktop: up to 4 cards per row */
@media (min-width: 1200px) {
    .home-category-posts-grid,
    .obituaries-list-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 32px;
    }
}

/* Tablet: 2 columns */
@media (max-width: 900px) {
    .home-category-posts-grid,
    .obituaries-list-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Mobile: 1 column */
@media (max-width: 560px) {
    .home-category-posts-grid,
    .obituaries-list-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ============================================
   MAAVEERAR HERO FULL DETAILS TABLE
   (இம் மாவீரரின் முழுமையான விபரம்)
   Matching Official Eelam Memorial Archive Format
   ============================================ */
.maaveerar-details-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px 22px;
    margin-top: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.maaveerar-details-title {
    font-family: var(--font-heading, "Mukta Malar", serif);
    font-size: 1.6rem;
    font-weight: 800;
    color: #1a202c;
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 1.35;
    letter-spacing: -0.2px;
}

.maaveerar-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.maaveerar-details-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
}

.maaveerar-details-table tr.maaveerar-row-label th.maaveerar-field-label {
    background: #ececec;
    color: #1f2937;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 11px 16px;
    text-align: left;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    font-family: inherit;
}

.maaveerar-details-table tr:first-child th.maaveerar-field-label {
    border-top: none;
}

.maaveerar-details-table tr.maaveerar-row-value td.maaveerar-field-value {
    background: #ffffff;
    color: #374151;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 11px 16px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    line-height: 1.65;
}

.maaveerar-details-table tr:last-child td.maaveerar-field-value {
    border-bottom: none;
}

@media (min-width: 768px) {
    .maaveerar-details-container {
        padding: 30px 36px;
    }
    .maaveerar-details-title {
        font-size: 1.75rem;
    }
}





.im-frame-plaque > * {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    line-height: 1.2 !important;
    max-width: 100%;
}




.im-frame-top-tag {
    position: absolute;
    top: 3.5%;
    left: 0;
    width: 100%;
    text-align: center;
    color: #ffd700;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 1px;
    z-index: 10;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 1), 0 0 10px rgba(0,0,0,0.8);
}
.context-hero .im-frame-top-tag {
    font-size: 1.45rem;
}

/* thuyarpakirvu: secular portrait frames that keep the complete photograph visible. */
.site-logo .brand-mark,
.footer-logo .brand-mark { width: 46px; height: 46px; object-fit: contain; flex: none; }
.site-logo .brand-wordmark,
.footer-logo .brand-wordmark { width: clamp(140px, 16vw, 200px); height: auto; max-height: 48px; object-fit: contain; }
.footer-logo a { display: inline-flex; align-items: center; gap: 8px; }

.im-frame-card {
    --im-frame-top: #1b3041;
    --im-frame-bottom: #142332;
    --im-frame-edge: #c1aa7c;
    background: linear-gradient(150deg, var(--im-frame-top), var(--im-frame-bottom));
    border-radius: 2px;
}
.frame-palette-sage { --im-frame-top: #304841; --im-frame-bottom: #1a302c; --im-frame-edge: #c7b996; }
.frame-palette-slate { --im-frame-top: #303745; --im-frame-bottom: #1e2633; --im-frame-edge: #b9ad9b; }
.frame-palette-plum { --im-frame-top: #493d43; --im-frame-bottom: #302931; --im-frame-edge: #d1b8a3; }
.im-frame-card .im-frame-stage::before,
.im-frame-card .im-frame-stage::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 1;
    border: 1px solid var(--im-frame-edge);
}
.im-frame-card .im-frame-stage::before { inset: 3%; opacity: .7; }
.im-frame-card .im-frame-stage::after { inset: 4.5%; opacity: .2; }
.im-frame-card .im-frame-botanical {
    position: absolute;
    z-index: 2;
    top: 8%;
    left: 37%;
    width: 26%;
    height: 4%;
    object-fit: contain;
    pointer-events: none;
}
.im-frame-card .im-frame-top-tag,
.context-hero .im-frame-card .im-frame-top-tag {
    top: 3%;
    padding: 0 8%;
    color: #f6ead2;
    font-size: clamp(11px, 2.5vw, 17px);
    letter-spacing: 0;
    text-shadow: none;
}
.im-frame-card .im-frame-aperture {
    left: 9%;
    top: 13%;
    width: 82%;
    height: 64%;
    border-radius: 0;
    background: #e8e5dc;
    border: 2px solid var(--im-frame-edge);
    box-shadow: 0 0 0 4px var(--im-frame-top), 0 0 0 5px var(--im-frame-edge);
    z-index: 2;
}
.im-frame-card .im-frame-photo,
.im-frame-card:hover .im-frame-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
}
.im-frame-card .im-frame-placeholder {
    border-radius: 0;
    background: radial-gradient(circle at 50% 30%, #f3ecdb, #afbdb7);
    color: #60796e;
}
.im-frame-card .im-frame-placeholder .ph-icon { filter: none; font-size: 3.5rem; }
.im-frame-card .im-frame-plaque {
    left: 9%;
    top: 79%;
    width: 82%;
    height: 18%;
    padding: 3px 5px;
    border-top: 1px solid var(--im-frame-edge);
    border-bottom: 1px solid rgba(250,240,215,.18);
    background: none;
}
.im-frame-card .im-frame-plaque .im-plaque-name,
.im-frame-card .im-frame-plaque .im-plaque-dates,
.im-frame-card .im-frame-plaque .im-plaque-loc,
.im-frame-card .im-frame-plaque .im-plaque-realname {
    color: #f6ead2;
    text-shadow: 0 1px 3px #142332;
}
.im-frame-card .im-frame-plaque .im-plaque-name {
    white-space: normal !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.25 !important;
    font-size: clamp(12px, 2.6vw, 19px);
}
.im-frame-card .im-frame-plaque .im-plaque-btn {
    border-radius: 2px;
    background: var(--im-frame-edge);
    border: none;
    color: var(--im-frame-bottom);
    box-shadow: none;
    padding: 2px 9px;
}

/* ==========================================================================
   AUTHENTIC MEMORIAL PLAQUE ARCHITECTURE (MAAVEERAR, MARANA, NINAIVU, NANDRI)
   Pixel-perfect alignment with commemorative plaques and posters
   ========================================================================== */

/* Outer Plaque Card Board */
.memorial-frame-card,
.im-frame-card.plaque-style-maaveerar,
.im-frame-card.plaque-style-marana,
.im-frame-card.plaque-style-ninaivu,
.im-frame-card.plaque-style-nandri,
.im-frame-card.plaque-style-hindu,
.im-frame-card.plaque-style-christian,
.im-frame-card.plaque-style-ninaivu_hindu,
.im-frame-card.plaque-style-ninaivu_christian,
.im-plaque-board {
    position: relative !important;
    width: 100% !important;
    max-width: 410px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 16px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.memorial-frame-card:hover,
.im-plaque-board:hover {
    transform: translateY(-5px) !important;
}

.memorial-frame-card.context-hero,
.im-plaque-board.context-hero {
    max-width: 460px !important;
}

.memorial-frame-card.context-hero:hover,
.im-plaque-board.context-hero:hover {
    transform: none !important;
}

/* Inner Plaque Surface */
.plaque-card-inner,
.im-plaque-surface {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 24px 16px 20px !important;
    border-radius: 16px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* 1. Maaveerar Plaque Theme (Exact Tamil Eelam Memorial Poster: Solid Pure Black, 18px Rounded Border) */
.plaque-style-maaveerar .plaque-card-inner,
.plaque-theme-maaveerar .plaque-card-inner,
.plaque-theme-maaveerar.im-plaque-surface {
    background: #000000 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 18px !important;
    box-shadow: 
        0 18px 45px rgba(0, 0, 0, 0.98),
        0 4px 14px rgba(0, 0, 0, 0.85) !important;
}

/* Hide distracting action button on Maaveerar card to match reference poster */
.plaque-style-maaveerar .plaque-action-bar,
.plaque-theme-maaveerar .plaque-action-bar {
    display: none !important;
}

.plaque-style-maaveerar .im-frame-click-overlay,
.plaque-theme-maaveerar .im-frame-click-overlay {
    z-index: 15 !important;
    cursor: pointer !important;
}

/* 2. Marana Arivithal Plaque Theme (Deep Black-Emerald, 24k Gold Rim, 18px Rounded) */
.plaque-style-marana .plaque-card-inner,
.plaque-theme-marana .plaque-card-inner,
.plaque-theme-marana.im-plaque-surface {
    background: radial-gradient(circle at 50% 32%, #0a1711 0%, #040806 70%, #010202 100%) !important;
    border: 2px solid #b89345 !important;
    border-radius: 18px !important;
    box-shadow: 
        0 0 0 1px rgba(216, 186, 119, 0.25),
        0 18px 45px rgba(0, 0, 0, 0.98), 
        0 4px 12px rgba(0, 0, 0, 0.8), 
        inset 0 0 30px rgba(184, 147, 69, 0.1) !important;
}

/* 3. Kanneer Anjali Plaque Theme (Midnight Sapphire-Onyx, Platinum Silver Fillet, 18px Rounded) */
.plaque-style-kanneer .plaque-card-inner,
.plaque-theme-kanneer .plaque-card-inner,
.plaque-theme-kanneer.im-plaque-surface {
    background: radial-gradient(circle at 50% 32%, #0a111c 0%, #04070d 70%, #010204 100%) !important;
    border: 2px solid #94a3b8 !important;
    border-radius: 18px !important;
    box-shadow: 
        0 0 0 1px rgba(203, 213, 225, 0.25),
        0 18px 45px rgba(0, 0, 0, 0.98), 
        0 4px 12px rgba(0, 0, 0, 0.8), 
        inset 0 0 30px rgba(148, 163, 184, 0.12) !important;
}

/* 4. Ninaivu Naal Plaque Theme (Deep Bronze-Amber Obsidian, 18px Rounded) */
.plaque-style-ninaivu .plaque-card-inner,
.plaque-theme-ninaivu .plaque-card-inner,
.plaque-theme-ninaivu.im-plaque-surface {
    background: radial-gradient(circle at 50% 32%, #1a1207 0%, #070502 70%, #010101 100%) !important;
    border: 2px solid #d97706 !important;
    border-radius: 18px !important;
    box-shadow: 
        0 0 0 1px rgba(251, 191, 36, 0.3),
        0 18px 45px rgba(0, 0, 0, 0.98), 
        0 4px 12px rgba(0, 0, 0, 0.8), 
        inset 0 0 30px rgba(217, 119, 6, 0.12) !important;
}

/* 5. Nandri Navil Plaque Theme (Imperial Teak & Warm Gold, 18px Rounded) */
.plaque-style-nandri .plaque-card-inner,
.plaque-theme-nandri .plaque-card-inner,
.plaque-theme-nandri.im-plaque-surface {
    background: radial-gradient(circle at 50% 32%, #1a160a 0%, #070603 70%, #010101 100%) !important;
    border: 2px solid #c5a059 !important;
    border-radius: 18px !important;
    box-shadow: 
        0 0 0 1px rgba(245, 158, 11, 0.25),
        0 18px 45px rgba(0, 0, 0, 0.98), 
        0 4px 12px rgba(0, 0, 0, 0.8), 
        inset 0 0 30px rgba(197, 160, 89, 0.12) !important;
}

/* 6. Sacred Hindu Memorial Plaque Theme (Deep Sacred Bronze-Ebony Obsidian & Temple Gold, 18px Rounded) */
.plaque-style-hindu .plaque-card-inner,
.plaque-theme-hindu .plaque-card-inner,
.plaque-theme-hindu.im-plaque-surface,
.plaque-style-ninaivu_hindu .plaque-card-inner,
.plaque-theme-ninaivu_hindu .plaque-card-inner,
.plaque-theme-ninaivu_hindu.im-plaque-surface {
    background: radial-gradient(circle at 50% 32%, #140d05 0%, #090501 70%, #020100 100%) !important;
    border: 2px solid #d4af37 !important;
    border-radius: 18px !important;
    box-shadow: 
        0 0 0 1px rgba(212, 175, 55, 0.3),
        0 18px 45px rgba(0, 0, 0, 0.98), 
        0 4px 12px rgba(0, 0, 0, 0.8), 
        inset 0 0 30px rgba(212, 175, 55, 0.12) !important;
}

/* 7. Sacred Christian Memorial Plaque Theme (Deep Celestial Midnight-Navy & Majestic Gold, 18px Rounded) */
.plaque-style-christian .plaque-card-inner,
.plaque-theme-christian .plaque-card-inner,
.plaque-theme-christian.im-plaque-surface,
.plaque-style-ninaivu_christian .plaque-card-inner,
.plaque-theme-ninaivu_christian .plaque-card-inner,
.plaque-theme-ninaivu_christian.im-plaque-surface {
    background: radial-gradient(circle at 50% 32%, #0a1424 0%, #050b14 70%, #010206 100%) !important;
    border: 2px solid #c9a84c !important;
    border-radius: 18px !important;
    box-shadow: 
        0 0 0 1px rgba(201, 168, 76, 0.3),
        0 18px 45px rgba(0, 0, 0, 0.98), 
        0 4px 12px rgba(0, 0, 0, 0.8), 
        inset 0 0 30px rgba(201, 168, 76, 0.12) !important;
}

/* Plaque Top Header - Fixed Uniform Height for Absolute Horizontal Frame Alignment */
.plaque-top-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    gap: 10px !important;
    padding: 0 8px !important;
    margin: 0 0 16px !important;
    text-align: center !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.context-hero .plaque-top-header {
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    margin: 0 0 18px !important;
}

.plaque-header-icon {
    font-size: 1.35rem !important;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7)) !important;
    user-select: none !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Sacred Karthigaipoo (Flame Lily) Header Emblems */
.header-flame-flower {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 8px rgba(255, 120, 0, 0.9)) !important;
    user-select: none !important;
    pointer-events: none !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.header-flame-flower.flower-left {
    transform: scaleX(-1);
}

.plaque-header-title {
    margin: 0 !important;
    padding: 0 4px !important;
    font-family: var(--font-heading), 'Noto Serif Tamil', Georgia, serif !important;
    line-height: 1.25 !important;
    overflow: visible !important;
    text-align: center !important;
}

.plaque-header-title.text-maaveerar {
    font-size: clamp(1.5rem, 2.4vw, 1.95rem) !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    background: linear-gradient(180deg, #fff7a1 0%, #ffc000 35%, #ff8c00 70%, #d4380d 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 3px 12px rgba(255, 140, 0, 0.85)) drop-shadow(0 1px 2px #000) !important;
}

.plaque-header-title.text-kanneer {
    font-size: clamp(1.2rem, 1.8vw, 1.55rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 35%, #94a3b8 75%, #64748b 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 3px 10px rgba(148, 163, 184, 0.55)) !important;
}

.plaque-header-title.text-marana {
    font-size: clamp(1.2rem, 1.8vw, 1.55rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f4ebdc 35%, #d8ba77 75%, #a0793e 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 3px 10px rgba(216, 186, 119, 0.5)) !important;
}

.plaque-header-title.text-ninaivu {
    font-size: clamp(1.15rem, 1.7vw, 1.45rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    background: linear-gradient(180deg, #fff380 0%, #ffc000 40%, #e0a743 75%, #a66a1a 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 3px 10px rgba(224, 167, 67, 0.55)) !important;
}

.plaque-header-title.text-nandri {
    font-size: clamp(1.2rem, 1.8vw, 1.55rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    background: linear-gradient(180deg, #fff5d6 0%, #f2cf7e 40%, #d49f37 75%, #946914 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 3px 10px rgba(212, 159, 55, 0.5)) !important;
}

.plaque-header-title.text-hindu,
.plaque-header-title.text-christian,
.plaque-header-title.text-ninaivu_hindu,
.plaque-header-title.text-ninaivu_christian {
    font-size: clamp(1.2rem, 1.8vw, 1.55rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f4ebdc 35%, #d8ba77 75%, #a0793e 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 3px 10px rgba(216, 186, 119, 0.5)) !important;
}

/* Central Photo Frame Stage with Flanking Emblems */
.plaque-frame-container {
    position: relative !important;
    width: 100% !important;
    max-width: 310px !important;
    margin: 0 auto 18px !important;
    display: block !important;
}

.plaque-frame-container.frame-hindu,
.plaque-frame-container.frame-christian,
.plaque-frame-container.frame-maaveerar {
    max-width: 335px !important;
}

.context-hero .plaque-frame-container,
.context-hero .plaque-frame-container.frame-hindu,
.context-hero .plaque-frame-container.frame-christian,
.context-hero .plaque-frame-container.frame-maaveerar {
    max-width: 390px !important;
}

/* Sacred Golden Altar Shrine Frame for Maaveerar */
.frame-wood-maaveerar {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 870 / 1024 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.frame-wood-maaveerar::before {
    display: none !important;
}

.frame-wood-maaveerar .plaque-photo-aperture {
    position: absolute !important;
    top: 28.8% !important;
    left: 26.5% !important;
    width: 46.8% !important;
    height: 40.3% !important;
    border-radius: 50% !important;
    background: #0d140e !important;
    overflow: hidden !important;
    z-index: 1 !important;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.95) !important;
}

.frame-wood-maaveerar .plaque-photo-aperture img.plaque-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    border-radius: 50% !important;
}

.frame-wood-maaveerar .plaque-photo-aperture .plaque-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    text-align: center !important;
    background: radial-gradient(circle, #1a2920 0%, #0d140e 100%) !important;
}

.frame-wood-maaveerar .plaque-photo-aperture .plaque-placeholder img.placeholder-karthigaipoo {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 6px !important;
    filter: drop-shadow(0 2px 6px rgba(255, 180, 0, 0.6)) !important;
}

.frame-wood-maaveerar .plaque-photo-aperture .plaque-ph-text {
    font-size: 0.72rem !important;
    color: #ffd875 !important;
    line-height: 1.2 !important;
}

.maaveerar-wood-frame-overlay,
.frame-overlay-maaveerar {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    pointer-events: none !important;
    user-select: none !important;
    z-index: 3 !important;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.9)) !important;
}

.memorial-frame-card.plaque-style-maaveerar .plaque-flank-emblem,
.memorial-frame-card.is-maaveerar .plaque-flank-emblem,
.plaque-frame-container.frame-maaveerar .plaque-flank-emblem {
    display: none !important;
}

/* Sacred Hindu Traditional Temple & Floral Garland Frame */
.frame-wood-hindu {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 682 / 1024 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.frame-wood-hindu::before {
    display: none !important;
}

.frame-wood-hindu .plaque-photo-aperture {
    position: absolute !important;
    top: 15% !important;
    bottom: 33% !important;
    left: 18% !important;
    right: 18% !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    z-index: 1 !important;
    box-shadow: none !important;
}

.frame-wood-hindu .plaque-photo-aperture img.plaque-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    border-radius: 0 !important;
    transform: none !important;
}

.frame-wood-hindu .plaque-photo-aperture .plaque-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    text-align: center !important;
    background: radial-gradient(circle, #2d1804 0%, #150a00 100%) !important;
}

/* Sacred Christian Traditional Holy Cross, Doves & Lilies Frame */
.frame-wood-christian {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 682 / 1024 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.frame-wood-christian::before {
    display: none !important;
}

.frame-wood-christian .plaque-photo-aperture {
    position: absolute !important;
    top: 17% !important;
    bottom: 27% !important;
    left: 18% !important;
    right: 18% !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    z-index: 1 !important;
    box-shadow: none !important;
}

.frame-wood-christian .plaque-photo-aperture img.plaque-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 18% !important;
    border-radius: 0 !important;
    transform: none !important;
}

.frame-wood-christian .plaque-photo-aperture .plaque-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    text-align: center !important;
    background: radial-gradient(circle, #1e293b 0%, #090d16 100%) !important;
}

/* Sacred Hindu Ninaivu Naal Shrine Frame (Lotus Crown, Hibiscus & Hanging Lamps) */
.frame-wood-ninaivu_hindu,
.frame-wood-ninaivu {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 682 / 1024 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.frame-wood-ninaivu_hindu::before,
.frame-wood-ninaivu::before {
    display: none !important;
}

.frame-wood-ninaivu_hindu .plaque-photo-aperture,
.frame-wood-ninaivu .plaque-photo-aperture {
    position: absolute !important;
    top: 15% !important;
    bottom: 31% !important;
    left: 14% !important;
    right: 14% !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    z-index: 1 !important;
    box-shadow: none !important;
}

.frame-wood-ninaivu_hindu .plaque-photo-aperture img.plaque-photo,
.frame-wood-ninaivu .plaque-photo-aperture img.plaque-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    border-radius: 0 !important;
    transform: none !important;
}

.frame-wood-ninaivu_hindu .plaque-photo-aperture .plaque-placeholder,
.frame-wood-ninaivu .plaque-photo-aperture .plaque-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    text-align: center !important;
    background: radial-gradient(circle, #2d1804 0%, #150a00 100%) !important;
}

/* Sacred Christian Ninaivu Naal Shrine Frame (Holy Cross, Lilies & Lantern Candles) */
.frame-wood-ninaivu_christian {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 682 / 1024 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.frame-wood-ninaivu_christian::before {
    display: none !important;
}

.frame-wood-ninaivu_christian .plaque-photo-aperture {
    position: absolute !important;
    top: 18% !important;
    bottom: 27% !important;
    left: 13% !important;
    right: 13% !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    z-index: 1 !important;
    box-shadow: none !important;
}

.frame-wood-ninaivu_christian .plaque-photo-aperture img.plaque-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    border-radius: 0 !important;
    transform: none !important;
}

.frame-wood-ninaivu_christian .plaque-photo-aperture .plaque-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    text-align: center !important;
    background: radial-gradient(circle, #1e293b 0%, #090d16 100%) !important;
}

.frame-overlay-hindu,
.frame-overlay-christian,
.frame-overlay-ninaivu_hindu,
.frame-overlay-ninaivu_christian,
.frame-overlay-ninaivu {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    pointer-events: none !important;
    user-select: none !important;
    z-index: 3 !important;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5)) !important;
}

.memorial-frame-card.plaque-style-hindu .plaque-flank-medallion,
.memorial-frame-card.plaque-style-christian .plaque-flank-medallion,
.memorial-frame-card.plaque-style-ninaivu_hindu .plaque-flank-medallion,
.memorial-frame-card.plaque-style-ninaivu_christian .plaque-flank-medallion,
.memorial-frame-card.plaque-style-ninaivu .plaque-flank-medallion,
.memorial-frame-card.plaque-style-hindu .plaque-flank-emblem,
.memorial-frame-card.plaque-style-christian .plaque-flank-emblem,
.memorial-frame-card.plaque-style-ninaivu_hindu .plaque-flank-emblem,
.memorial-frame-card.plaque-style-ninaivu_christian .plaque-flank-emblem,
.memorial-frame-card.plaque-style-ninaivu .plaque-flank-emblem {
    display: none !important;
}

/* Woodgrain Handcrafted Frame Base (Unified for All Categories) */
.plaque-wood-frame {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 442 / 540 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #000000 !important;
    border: none !important;
    border-radius: 2px !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.98), 0 4px 10px rgba(0, 0, 0, 0.85) !important;
    overflow: visible !important;
}

.plaque-wood-frame::before {
    display: none !important;
}

.plaque-wood-frame .plaque-photo-aperture {
    position: absolute !important;
    top: 8% !important;
    bottom: 8% !important;
    left: 9.8% !important;
    right: 9.8% !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    background: #000000 !important;
    overflow: hidden !important;
    z-index: 1 !important;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.98) !important;
}

/* Aperture & Photo */
.plaque-photo-aperture {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    background: #000000 !important;
    overflow: hidden !important;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.98) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1 !important;
}

.plaque-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    border-radius: 0 !important;
    transform: none !important;
}

/* Sacred Karthigaipoo Maaveerar Placeholder */
.placeholder-maaveerar-art {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: radial-gradient(circle at 50% 45%, #2a1104 0%, #0d0502 65%, #000000 100%) !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.placeholder-karthigaipoo {
    width: 68px !important;
    height: 68px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 14px rgba(255, 140, 0, 0.9)) !important;
    animation: karthigaiGlow 3s ease-in-out infinite alternate !important;
}

@keyframes karthigaiGlow {
    0% { filter: drop-shadow(0 0 10px rgba(255, 100, 0, 0.7)); transform: scale(0.98); }
    100% { filter: drop-shadow(0 0 18px rgba(255, 180, 0, 0.95)); transform: scale(1.02); }
}

.placeholder-maaveerar-art .plaque-ph-text {
    font-size: 0.8rem !important;
    color: #ffc425 !important;
    margin-top: 8px !important;
    font-family: var(--font-heading), 'Noto Serif Tamil', Georgia, serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}

/* Dignified Placeholder Silhouette for other styles */
.plaque-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: radial-gradient(circle at 50% 40%, #1e1710 0%, #060403 100%) !important;
    color: #d4af37 !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.plaque-silhouette-icon {
    width: 62px !important;
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.silhouette-svg {
    width: 100% !important;
    height: 100% !important;
    color: #b89345 !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.85)) !important;
}

.plaque-ph-text {
    font-size: 0.78rem !important;
    color: #bba06a !important;
    margin-top: 6px !important;
    font-family: 'Noto Serif Tamil', Georgia, serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}

/* Flanking Memorial Emblems for Maaveerar (Absolute Left & Right of Frame) */
.plaque-flank-emblem {
    position: absolute !important;
    bottom: -6px !important;
    width: 82px !important;
    height: auto !important;
    z-index: 10 !important;
    filter: drop-shadow(0 4px 16px rgba(255, 120, 0, 0.85)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.95)) !important;
    pointer-events: none !important;
    user-select: none !important;
    display: block !important;
}

.plaque-flank-emblem.emblem-left {
    left: -22px !important;
    right: auto !important;
}

.plaque-flank-emblem.emblem-right {
    right: -22px !important;
    left: auto !important;
}

.context-hero .plaque-flank-emblem {
    width: 98px !important;
    bottom: -8px !important;
}

.context-hero .plaque-flank-emblem.emblem-left {
    left: -28px !important;
}

.context-hero .plaque-flank-emblem.emblem-right {
    right: -28px !important;
}

/* Authentic Culturally-Distinct Picture Frame Moulding Overlay (All Categories) */
.plaque-wood-frame-overlay,
.maaveerar-wood-frame-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    pointer-events: none !important;
    user-select: none !important;
    z-index: 3 !important;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.9)) !important;
}

/* Photorealistic Museum-Grade Cameo Medallions (No Cartoons/Emojis) */
.plaque-flank-medallion {
    position: absolute !important;
    bottom: -10px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    z-index: 10 !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.9)) !important;
    pointer-events: none !important;
    user-select: none !important;
    display: block !important;
    transition: transform 0.3s ease, filter 0.3s ease !important;
}

.plaque-flank-medallion.medallion-left {
    left: -12px !important;
    right: auto !important;
}

.plaque-flank-medallion.medallion-right {
    right: -12px !important;
    left: auto !important;
}

.context-hero .plaque-flank-medallion {
    width: 54px !important;
    height: 54px !important;
    bottom: -12px !important;
}

.context-hero .plaque-flank-medallion.medallion-left {
    left: -16px !important;
}

.context-hero .plaque-flank-medallion.medallion-right {
    right: -16px !important;
}

.memorial-frame-card:hover .plaque-flank-medallion {
    transform: scale(1.08) !important;
    filter: drop-shadow(0 6px 16px rgba(255, 215, 0, 0.65)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.95)) !important;
}

.btn-action-kanneer {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    color: #f1f5f9 !important;
    border: 1px solid #94a3b8 !important;
}

.btn-action-kanneer:hover {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
    box-shadow: 0 6px 18px rgba(148, 163, 184, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Mannil & Vinnil Lifespan Row (Pill Badges on Dark Plaque) */
.marana-lifespan-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 8px 0 6px !important;
    flex-wrap: wrap !important;
}

.lifespan-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-size: 0.8rem !important;
    line-height: 1.25 !important;
}

.badge-mannil {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
}

.badge-vinnil {
    background: rgba(239, 68, 68, 0.16) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.45) !important;
}

.lifespan-label {
    font-weight: 800 !important;
    opacity: 0.9 !important;
    font-size: 0.76rem !important;
}

.lifespan-val {
    font-weight: 700 !important;
}

/* Structured Details Table (3-Column Aligned Grid) */
.plaque-details-table {
    display: grid !important;
    grid-template-columns: 105px 16px 1fr !important;
    column-gap: 6px !important;
    row-gap: 9px !important;
    align-items: baseline !important;
    margin-top: 14px !important;
    padding: 14px 16px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 215, 0, 0.16) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

.table-maaveerar {
    border: none !important;
    background: transparent !important;
    padding: 8px 12px 4px !important;
    box-shadow: none !important;
}

.table-maaveerar .plaque-detail-label {
    color: #ffc425 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.3px !important;
}

.table-maaveerar .plaque-detail-sep {
    color: #ffd700 !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}

.table-maaveerar .plaque-detail-val {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.98rem !important;
    line-height: 1.5 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

.table-marana {
    border-color: rgba(216, 186, 119, 0.3) !important;
    background: rgba(216, 186, 119, 0.04) !important;
}

.table-ninaivu {
    border-color: rgba(224, 167, 67, 0.3) !important;
    background: rgba(224, 167, 67, 0.04) !important;
}

.table-nandri {
    border-color: rgba(216, 186, 119, 0.3) !important;
    background: rgba(216, 186, 119, 0.04) !important;
}

.table-hindu,
.table-ninaivu_hindu {
    border-color: rgba(212, 175, 55, 0.3) !important;
    background: rgba(212, 175, 55, 0.04) !important;
}

.table-christian,
.table-ninaivu_christian {
    border-color: rgba(201, 168, 76, 0.3) !important;
    background: rgba(201, 168, 76, 0.04) !important;
}

.plaque-detail-row {
    display: contents !important;
}

.plaque-detail-label {
    color: #e5c07b !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    font-family: var(--font-heading), 'Noto Serif Tamil', Georgia, serif !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    line-height: 1.4 !important;
}

.plaque-detail-sep {
    color: #ffd700 !important;
    font-weight: 700 !important;
    text-align: center !important;
    line-height: 1.4 !important;
    user-select: none !important;
}

.plaque-detail-val {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* Action Button Bar */
.plaque-action-bar {
    margin-top: 16px !important;
    display: flex !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 4 !important;
}

.btn-plaque-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 24px !important;
    border-radius: 24px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

.btn-action-maaveerar {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 50%, #7f1d1d 100%) !important;
    color: #fff7a1 !important;
    border: 1px solid #f59e0b !important;
    box-shadow: 0 4px 14px rgba(185, 28, 28, 0.45) !important;
}

.btn-action-maaveerar:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.6) !important;
    transform: translateY(-2px) !important;
}

.btn-action-marana {
    background: linear-gradient(135deg, #1e3a2f 0%, #142a22 100%) !important;
    color: #e2c079 !important;
    border: 1px solid #c5a059 !important;
}

.btn-action-marana:hover {
    background: linear-gradient(135deg, #284c3e 0%, #1e3a2f 100%) !important;
    box-shadow: 0 6px 18px rgba(197, 160, 89, 0.3) !important;
    transform: translateY(-2px) !important;
}

.btn-action-ninaivu {
    background: linear-gradient(135deg, #452a12 0%, #2e1b09 100%) !important;
    color: #ffc000 !important;
    border: 1px solid #d97706 !important;
}

.btn-action-ninaivu:hover {
    background: linear-gradient(135deg, #5c3818 0%, #452a12 100%) !important;
    box-shadow: 0 6px 18px rgba(217, 119, 6, 0.4) !important;
    transform: translateY(-2px) !important;
}

.btn-action-nandri {
    background: linear-gradient(135deg, #3d2f16 0%, #261d0c 100%) !important;
    color: #f7d486 !important;
    border: 1px solid #b89345 !important;
}

.btn-action-nandri:hover {
    background: linear-gradient(135deg, #523f1e 0%, #3d2f16 100%) !important;
    box-shadow: 0 6px 18px rgba(184, 147, 69, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Entire Card Click Overlay Link */
.im-frame-click-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    border-radius: 12px !important;
}

/* Full Details Card on Single Obituary View */
.marana-full-details-card {
    background: linear-gradient(180deg, #fffdfa 0%, #faf6f0 100%);
    border: 2px solid #d4af37 !important;
    border-radius: 12px;
    padding: 32px 30px;
    margin-top: 28px;
    box-shadow: 0 10px 30px rgba(180, 140, 60, 0.12);
    position: relative;
    overflow: hidden;
}
.marana-full-details-card::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 8px;
    pointer-events: none;
}

/* Header & Title */
.marana-poster-header {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1.5px solid rgba(212, 175, 55, 0.4);
    position: relative;
}
.marana-poster-title {
    display: inline-block;
    font-family: var(--font-heading, "Mukta Malar", serif);
    font-size: 1.85rem;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, #881337 0%, #9f1239 50%, #be123c 100%);
    padding: 8px 32px;
    border-radius: 30px;
    letter-spacing: 1.5px;
    margin: 0 0 14px;
    box-shadow: 0 4px 14px rgba(136, 19, 55, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border: 1px solid #fda4af;
}
.marana-poster-name {
    font-family: var(--font-heading, "Mukta Malar", serif);
    font-size: 1.6rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 12px;
    line-height: 1.35;
}
.marana-origin-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.95rem;
    color: #475569;
    margin-top: 6px;
}
.origin-item strong {
    color: #881337;
    font-weight: 700;
}
.origin-sep {
    color: #d4af37;
    font-weight: 900;
}
.marana-addresses-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #334155;
    background: rgba(254, 243, 199, 0.45);
    padding: 8px 16px;
    border-radius: 6px;
    margin-top: 10px;
    border: 1px dashed rgba(212, 175, 55, 0.5);
}
.addr-item strong {
    color: #78350f;
    font-weight: 700;
}

/* Relatives Section */
.marana-relatives-section {
    margin-bottom: 26px;
}
.marana-subheading {
    font-family: var(--font-heading, serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e3a8a;
    border-bottom: 2px solid #93c5fd;
    padding-bottom: 8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.marana-subheading::before {
    content: "👨‍👩‍👧‍👦";
    font-size: 1.2rem;
}
.marana-relatives-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rel-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 9px 14px;
    background: #ffffff;
    border-radius: 6px;
    border-left: 4px solid #c9a84c;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.rel-tag {
    flex: 0 0 160px;
    font-weight: 800;
    font-size: 0.92rem;
    color: #1e293b;
    line-height: 1.4;
}
.rel-desc {
    flex: 1;
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.6;
}

/* Funeral & Rites Callout Box */
.marana-funeral-callout-box {
    background: linear-gradient(135deg, #fefce8 0%, #fffbeb 100%);
    border: 2px solid #f59e0b;
    border-radius: 10px;
    padding: 20px 22px;
    margin-bottom: 22px;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.12);
}
.funeral-box-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.funeral-box-icon {
    font-size: 1.4rem;
}
.funeral-box-title {
    font-family: var(--font-heading, serif);
    font-size: 1.15rem;
    font-weight: 800;
    color: #92400e;
}
.funeral-statement {
    font-size: 1.02rem;
    line-height: 1.75;
    color: #451a03;
    margin: 0 0 8px;
}
.funeral-statement strong {
    color: #78350f;
    text-decoration: underline;
    text-decoration-color: #f59e0b;
}
.funeral-note {
    font-size: 0.88rem;
    color: #b45309;
    font-style: italic;
    margin: 0;
    padding-top: 6px;
    border-top: 1px dashed rgba(245, 158, 11, 0.4);
}

/* Contacts & Informant Bar */
.marana-contacts-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
    background: #f1f5f9;
    border-radius: 8px;
    font-size: 0.92rem;
    border: 1px solid #cbd5e1;
}
.contact-item strong {
    color: #0f172a;
    font-weight: 700;
}
.contact-numbers {
    color: #1e40af;
    font-weight: 700;
    letter-spacing: 0.5px;
}

@media (max-width: 640px) {
    .rel-item {
        flex-direction: column;
        gap: 4px;
    }
    .rel-tag {
        flex: auto;
    }
    .marana-poster-title {
        font-size: 1.4rem;
        padding: 6px 20px;
    }
    .marana-poster-name {
        font-size: 1.3rem;
    }
}

/* ============================================
   MAAVEERAR HEROIC MEMORIAL DOSSIER & SINGLE PAGE
   ============================================ */
.single-obituary .obituary-single-maaveerar {
    background: #06080d !important;
    border: 1.5px solid rgba(212, 175, 55, 0.4) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9) !important;
    color: #f1f5f9 !important;
}

.single-obituary .obituary-single-maaveerar .obituary-hero {
    background: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 14px !important;
}

.single-obituary .obituary-single-maaveerar .obituary-hero::before {
    content: "மாவீரர் வீரவணக்கம்  /  HEROIC MARTYR MEMORIAL ARCHIVE" !important;
    color: #ffd700 !important;
}

.single-obituary .obituary-single-maaveerar .obituary-hero::after {
    background: #b91c1c !important;
}

/* Heroic Dossier Container */
.maaveerar-heroic-dossier {
    background: linear-gradient(145deg, #0e121a 0%, #080b10 100%) !important;
    border: 2px solid rgba(212, 175, 55, 0.6) !important;
    border-radius: 16px !important;
    box-shadow: 
        0 14px 40px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 215, 0, 0.25) !important;
    padding: 32px 28px !important;
    margin-top: 28px !important;
    position: relative !important;
    overflow: hidden !important;
}

.maaveerar-heroic-dossier::before {
    content: "" !important;
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
    right: 4px !important;
    bottom: 4px !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    border-radius: 12px !important;
    pointer-events: none !important;
}

.maaveerar-dossier-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    text-align: center !important;
    margin-bottom: 24px !important;
    padding-bottom: 18px !important;
    border-bottom: 1.5px solid rgba(212, 175, 55, 0.35) !important;
    position: relative !important;
    flex-wrap: wrap !important;
}

.dossier-crest-flower {
    width: 52px !important;
    height: 52px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 12px rgba(255, 140, 0, 0.9)) !important;
    animation: karthigaiGlow 3s ease-in-out infinite alternate !important;
}

.dossier-title-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}

.dossier-badge {
    display: inline-block !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #ffd700 !important;
    background: rgba(255, 215, 0, 0.12) !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 215, 0, 0.35) !important;
}

.maaveerar-details-title {
    font-family: var(--font-heading), 'Noto Serif Tamil', Georgia, serif !important;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
    letter-spacing: 0.5px !important;
}

/* Dossier Grid: 2 Columns on desktop, 1 on mobile */
.maaveerar-dossier-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 16px !important;
    margin-bottom: 20px !important;
}

.dossier-card-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 215, 0, 0.18) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
}

.dossier-card-item:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 215, 0, 0.4) !important;
}

.dossier-item-label {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #ffc425 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.dossier-item-val {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.45 !important;
    word-break: break-word !important;
}

/* Dedicated Field of Battle Card */
.dossier-battle-card {
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
    border-radius: 10px !important;
    padding: 20px 22px !important;
    margin-top: 14px !important;
}

.battle-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(245, 158, 11, 0.25) !important;
}

.battle-card-icon {
    font-size: 1.35rem !important;
}

.battle-card-title {
    font-family: var(--font-heading), 'Noto Serif Tamil', Georgia, serif !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #f59e0b !important;
    margin: 0 !important;
}

.battle-card-body {
    font-size: 1.02rem !important;
    line-height: 1.85 !important;
    color: #f1f5f9 !important;
}

/* Heroic History & Tribute Card */
.maaveerar-history-card {
    background: linear-gradient(145deg, #0e121a 0%, #080b10 100%) !important;
    border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
    border-radius: 14px !important;
    padding: 32px 28px !important;
    margin-top: 24px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
}

.maaveerar-history-header {
    margin-bottom: 18px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25) !important;
}

.history-badge {
    display: inline-block !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: #ffd700 !important;
    background: rgba(255, 215, 0, 0.12) !important;
    padding: 3px 12px !important;
    border-radius: 16px !important;
    margin-bottom: 6px !important;
}

.maaveerar-history-title {
    font-family: var(--font-heading), 'Noto Serif Tamil', Georgia, serif !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    color: #ffd700 !important;
    margin: 0 !important;
}

.maaveerar-history-body {
    color: #e2e8f0 !important;
    font-size: 1.05rem !important;
    line-height: 2 !important;
}

.single-obituary .obituary-single-maaveerar .candles-section,
.single-obituary .obituary-single-maaveerar .candles-section-maaveerar {
    background: #0a0d14 !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 10px !important;
    color: #f1f5f9 !important;
}

.single-obituary .obituary-single-maaveerar .candles-title {
    color: #ffd700 !important;
}

.single-obituary .obituary-single-maaveerar .candle-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    color: #ffffff !important;
}

.single-obituary .obituary-single-maaveerar #condolenceSection {
    background: #0a0d14 !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 10px !important;
    color: #f1f5f9 !important;
}

.single-obituary .obituary-single-maaveerar #condolenceSection .section-heading,
.single-obituary .obituary-single-maaveerar #condolenceSection h3 {
    color: #ffd700 !important;
}

.single-obituary .obituary-single-maaveerar .condolence-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
}

.single-obituary .obituary-single-maaveerar .condolence-author {
    color: #ffd700 !important;
}

.single-obituary .obituary-single-maaveerar .condolence-text {
    color: #e2e8f0 !important;
}

@media (max-width: 768px) {
    .maaveerar-dossier-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   NANDRI NAVIL (POST-FUNERAL VOTE OF THANKS / ACKNOWLEDGEMENT)
   Appears below the deceased person's obituary notice
   once the funeral rituals conclude and the family publishes thanks
   ========================================================= */
.obituary-nandri-navil-section {
    position: relative !important;
    background: radial-gradient(circle at 50% 0%, #fffdfa 0%, #fbf6ec 55%, #f4ede0 100%) !important;
    border: 2px solid #c9a84c !important;
    border-radius: 16px !important;
    padding: 36px 32px 30px !important;
    margin-top: 32px !important;
    margin-bottom: 24px !important;
    box-shadow: 
        0 0 0 1px rgba(201, 168, 76, 0.3),
        0 14px 38px rgba(180, 83, 9, 0.08), 
        0 4px 12px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

.nandri-navil-ambient-glow {
    position: absolute !important;
    top: -60px !important;
    right: -60px !important;
    width: 200px !important;
    height: 200px !important;
    background: radial-gradient(circle, rgba(201, 168, 76, 0.15) 0%, transparent 70%) !important;
    pointer-events: none !important;
}

.nandri-navil-inner {
    position: relative !important;
    z-index: 2 !important;
}

.nandri-navil-badge-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
}

.nandri-navil-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(180, 83, 9, 0.09) !important;
    border: 1px solid rgba(180, 83, 9, 0.25) !important;
    border-radius: 999px !important;
    padding: 5px 14px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #92400e !important;
    letter-spacing: 0.5px !important;
}

.nandri-date-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #78350f !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(201, 168, 76, 0.3) !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
}

.nandri-navil-header-wrap {
    margin-bottom: 20px !important;
}

.nandri-navil-title {
    font-family: var(--font-heading), 'Noto Serif Tamil', Georgia, serif !important;
    font-size: clamp(1.5rem, 2.2vw, 1.95rem) !important;
    font-weight: 800 !important;
    color: #78350f !important;
    margin: 0 0 6px !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.nandri-title-en {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #b45309 !important;
    opacity: 0.85 !important;
}

.nandri-navil-subtitle {
    font-size: 0.94rem !important;
    color: #92400e !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.nandri-navil-body-wrap {
    position: relative !important;
    background: #ffffff !important;
    border-left: 4px solid #c9a84c !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 22px 26px !important;
    margin-bottom: 22px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
}

.nandri-navil-body-text {
    font-family: 'Noto Serif Tamil', Georgia, serif !important;
    font-size: 1.05rem !important;
    line-height: 2 !important;
    color: #291b07 !important;
    letter-spacing: 0.2px !important;
}

.nandri-navil-footer-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    padding-top: 14px !important;
    border-top: 1px dashed rgba(201, 168, 76, 0.4) !important;
}

.nandri-footer-left {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #78350f !important;
}

.nandri-footer-check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

.nandri-footer-signoff {
    font-family: 'Noto Serif Tamil', Georgia, serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    font-style: italic !important;
    color: #92400e !important;
}

/* Card Indicator for Active Nandri Navil */
.plaque-nandri-badge-wrap {
    display: flex !important;
    justify-content: center !important;
    margin: 8px 0 12px !important;
    position: relative !important;
    z-index: 5 !important;
}

.plaque-nandri-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.2) 0%, rgba(201, 168, 76, 0.08) 100%) !important;
    border: 1px solid rgba(201, 168, 76, 0.45) !important;
    color: #f6d88c !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}