/* =========================================================
   JKYC GANESH PUJA INVITATION
   5 x 7 INCH PROFESSIONAL PUJA DESIGN
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;

    background:
        radial-gradient(circle at top, #f7f0d7 0%, #dfe8c7 45%, #c8d7b7 100%);

    font-family:
        "Noto Sans Oriya",
        "Noto Serif Oriya",
        sans-serif;

    color: #174d2b;
}


/* =========================================================
   ACTION BAR
========================================================= */

.invite-actions {
    position: sticky;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    padding: 12px;

    background: rgba(17, 54, 32, .96);

    backdrop-filter: blur(10px);

    box-shadow: 0 5px 25px rgba(0,0,0,.2);
}

.invite-actions button,
.invite-actions a {
    border: 0;

    padding: 10px 17px;

    border-radius: 999px;

    background: linear-gradient(
        135deg,
        #e7bd43,
        #fff0a5,
        #c99622
    );

    color: #183d25;

    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

    font-size: 14px;

    box-shadow:
        0 3px 10px rgba(0,0,0,.2);

    transition: .2s;
}

.invite-actions button:hover,
.invite-actions a:hover {
    transform: translateY(-2px);
}


/* =========================================================
   STAGE
========================================================= */

.invite-stage {
    min-height: calc(100vh - 60px);

    padding: 30px;

    display: flex;

    justify-content: center;
    align-items: flex-start;
}


/* =========================================================
   5 x 7 CARD
========================================================= */

.invite-card {
    position: relative;

    width: 5in;
    height: 7in;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 22%,
            rgba(255, 238, 157, .95),
            transparent 22%
        ),

        radial-gradient(
            circle at 10% 35%,
            rgba(153, 198, 126, .24),
            transparent 28%
        ),

        radial-gradient(
            circle at 90% 35%,
            rgba(153, 198, 126, .24),
            transparent 28%
        ),

        linear-gradient(
            180deg,
            #fff9df 0%,
            #f8f0c9 50%,
            #eaf1d3 100%
        );

    box-shadow:
        0 25px 70px rgba(0,0,0,.30);

    color: #164d2c;
}


/* =========================================================
   GOLD FRAME
========================================================= */

.gold-frame {
    position: absolute;

    inset: 8px;

    border:
        3px solid #c89825;

    pointer-events: none;

    z-index: 50;
}

.gold-frame::before {
    content: "";

    position: absolute;

    inset: 5px;

    border:
        1px solid rgba(167,120,14,.7);
}

.gold-frame::after {
    content: "";

    position: absolute;

    inset: 10px;

    border:
        1px dashed rgba(173,130,30,.6);
}


/* =========================================================
   BACKGROUND MANDALA
========================================================= */

.bg-mandala {
    position: absolute;

    width: 155px;
    height: 155px;

    border-radius: 50%;

    opacity: .48;

    background:

        radial-gradient(
            circle,
            transparent 0 19%,
            rgba(117,164,81,.35) 20% 21%,
            transparent 22% 31%,
            rgba(117,164,81,.30) 32% 33%,
            transparent 34% 43%,
            rgba(117,164,81,.27) 44% 45%,
            transparent 46%
        );

    border:
        2px solid rgba(120,165,84,.30);

    box-shadow:
        0 0 0 12px rgba(120,165,84,.08),
        0 0 0 24px rgba(120,165,84,.06);

    z-index: 1;
}

.bg-mandala::before,
.bg-mandala::after {
    content: "";

    position: absolute;

    inset: 25px;

    border:
        2px solid rgba(120,165,84,.25);

    transform: rotate(45deg);
}

.bg-mandala::after {
    transform: rotate(22deg);
}

.mandala-left {
    left: -55px;
    top: 110px;
}

.mandala-right {
    right: -55px;
    top: 110px;
}


/* =========================================================
   TOP GARLAND
========================================================= */

.top-garland {
    position: absolute;

    top: 8px;
    left: 50%;

    transform: translateX(-50%);

    width: 76%;

    display: flex;

    justify-content: space-around;

    font-size: 15px;

    z-index: 20;

    filter:
        drop-shadow(0 2px 2px rgba(120,70,0,.25));
}

.top-garland::after {
    content: "";

    position: absolute;

    left: 5%;
    right: 5%;

    top: 13px;

    height: 3px;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            transparent,
            #cf9c26,
            #e2ba48,
            #cf9c26,
            transparent
        );
}


/* =========================================================
   TOP LEAVES
========================================================= */

.top-leaves {
    position: absolute;

    top: 18px;

    font-size: 48px;

    opacity: .9;

    z-index: 15;
}

.left-leaves {
    left: 25px;

    transform: rotate(-18deg);
}

.right-leaves {
    right: 25px;

    transform: scaleX(-1) rotate(-18deg);
}


/* =========================================================
   BELLS
========================================================= */

.bell {
    position: absolute;

    top: 25px;

    z-index: 20;

    font-size: 25px;

    filter:
        drop-shadow(0 3px 4px rgba(70,40,0,.35));
}

.bell-left {
    left: 72px;
}

.bell-right {
    right: 72px;
}

.bell-chain {
    width: 2px;
    height: 25px;

    margin: -25px auto 0;

    background: #b88b22;
}


/* =========================================================
   SIDE DIYA
========================================================= */

.side-diya {
    position: absolute;

    top: 160px;

    z-index: 18;

    font-size: 27px;

    filter:
        drop-shadow(0 0 7px rgba(255,184,36,.7));
}

.diya-left {
    left: 55px;
}

.diya-right {
    right: 55px;
}


/* =========================================================
   SIDE LEAVES
========================================================= */

.side-leaves {
    position: absolute;

    top: 300px;

    font-size: 30px;

    line-height: .9;

    opacity: .72;

    z-index: 3;
}

.side-leaves-left {
    left: 18px;

    transform: rotate(-15deg);
}

.side-leaves-right {
    right: 18px;

    transform: scaleX(-1) rotate(-15deg);
}


/* =========================================================
   CONTENT
========================================================= */

.invite-content {
    position: relative;

    z-index: 10;

    width: 100%;

    height: 100%;

    padding:
        28px
        27px
        20px;

    text-align: center;
}


/* =========================================================
   MANTRA
========================================================= */

.mantra {
    margin-top: 0;

    font-family:
        "Noto Serif Oriya",
        serif;

    font-size: 14px;

    font-weight: 800;

    color: #a12818;

    text-shadow:
        0 1px 0 #fff;
}

.ornament-line {
    margin: 2px 0 2px;

    font-size: 10px;

    color: #c69622;

    letter-spacing: 2px;
}


/* =========================================================
   GANESH HERO
========================================================= */

.ganesh-hero {
    position: relative;

    height: 116px;

    display: flex;

    justify-content: center;
    align-items: center;

    margin-top: 0;
}


/* corner decoration */

.corner-flower {
    position: absolute;

    top: 9px;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #c89520;

    font-size: 28px;

    background:
        radial-gradient(
            circle,
            rgba(255,221,93,.45),
            transparent 68%
        );

    text-shadow:
        0 0 7px rgba(200,145,25,.6);

    z-index: 15;
}

.corner-one {
    left: 48px;

    transform: rotate(-15deg);
}

.corner-two {
    right: 48px;

    transform: rotate(15deg);
}


/* =========================================================
   PHOTO
========================================================= */

.ganesh-photo-wrap {
    position: relative;

    width: 108px;
    height: 108px;

    display: flex;

    justify-content: center;
    align-items: center;

    z-index: 20;
}

.photo-glow {
    position: absolute;

    width: 116px;
    height: 116px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,210,72,.45),
            transparent 65%
        );

    filter: blur(5px);
}

.photo-ring {
    position: absolute;

    inset: 1px;

    border-radius: 50%;

    border:
        4px solid #d1a128;

    box-shadow:
        0 0 0 4px #fff5ca,
        0 0 0 6px #b98316,
        0 0 18px rgba(204,151,30,.65);

    z-index: 3;
}

.ganesh-photo-wrap img {
    width: 100px;
    height: 100px;

    object-fit: cover;

    border-radius: 50%;

    position: relative;

    z-index: 2;

    display: block;
}


/* =========================================================
   SALUTE
========================================================= */

.salute {
    font-size: 11px;

    font-weight: 800;

    margin-top: 1px;

    color: #28623a;
}


/* =========================================================
   MAIN TITLE
========================================================= */

.invite-card h1 {
    margin:
        1px
        0
        3px;

    font-family:
        "Noto Serif Oriya",
        serif;

    font-size: 25px;

    line-height: 1.05;

    font-weight: 800;

    color: #14552f;

    text-shadow:
        1px 1px 0 #e6c75e,
        2px 2px 0 rgba(60,90,30,.12);
}


/* =========================================================
   RIBBON
========================================================= */

.invite-ribbon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    min-width: 190px;

    padding:
        4px 20px;

    border-radius: 7px;

    background:
        linear-gradient(
            180deg,
            #c51e16,
            #8e0909
        );

    border:
        2px solid #d8a52b;

    color: #fff6c9;

    font-family:
        "Noto Serif Oriya",
        serif;

    font-size: 15px;

    font-weight: 800;

    box-shadow:
        0 3px 0 #6d180c,
        0 5px 10px rgba(70,30,0,.25);
}


/* =========================================================
   INVITATION TEXT
========================================================= */

.invite-text {
    margin:
        6px
        auto
        7px;

    max-width: 430px;

    font-size: 10.5px;

    line-height: 1.45;

    font-weight: 600;

    color: #285b36;
}


/* =========================================================
   DATE LOCATION
========================================================= */

.event-info {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 7px;

    margin:
        5px
        0
        7px;
}

.info-box {
    min-height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 4px;

    background:
        rgba(255,251,226,.84);

    border:
        1.5px solid #d0a02b;

    border-radius: 9px;

    box-shadow:
        inset 0 0 12px rgba(202,155,35,.08);
}

.info-icon {
    font-size: 19px;
}

.info-box div {
    text-align: left;
}

.info-box b {
    display: block;

    font-size: 9.5px;

    line-height: 1.25;

    color: #285a35;
}

.info-box small {
    display: block;

    font-size: 8.5px;

    margin-top: 2px;

    color: #587149;
}


/* =========================================================
   PROGRAM
========================================================= */

.program {
    margin-top: 2px;
}

.program-heading {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-bottom: 5px;

    color: #fff3bd;

    font-family:
        "Noto Serif Oriya",
        serif;

    font-size: 14px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #16603a 12%,
            #16603a 88%,
            transparent
        );

    padding: 4px 20px;
}

.program-heading span {
    color: #e4b52f;
}

.program-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 5px;
}

.program-item {
    min-height: 39px;

    display: flex;

    align-items: center;

    gap: 6px;

    padding:
        3px 7px;

    text-align: left;

    border:
        1.5px solid #d3a22e;

    border-radius: 8px;

    background:
        rgba(255,252,231,.90);

    box-shadow:
        inset 0 0 8px rgba(210,163,45,.10);
}

.program-icon {
    width: 27px;

    text-align: center;

    font-size: 18px;
}

.program-item strong {
    display: block;

    font-size: 9.5px;

    line-height: 1.15;

    color: #245b34;
}

.program-item span {
    display: block;

    margin-top: 2px;

    font-size: 8.5px;

    color: #6b6b3e;
}


/* =========================================================
   BLESSING
========================================================= */

.blessing {
    margin:
        5px
        auto
        5px;

    font-size: 9.5px;

    line-height: 1.3;

    font-weight: 700;

    color: #285b36;
}


/* =========================================================
   MANTRA BOX
========================================================= */

.ganesh-mantra {
    position: relative;

    padding:
        5px
        13px;

    border:
        1.5px solid #d0a02b;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(215,235,187,.68),
            rgba(250,247,215,.90)
        );

    box-shadow:
        inset 0 0 18px rgba(90,130,55,.08);
}

.mantra-title {
    font-family:
        "Noto Serif Oriya",
        serif;

    font-size: 12px;

    font-weight: 800;

    color: #28633a;
}

.ganesh-mantra p {
    margin:
        2px
        0;

    font-family:
        "Noto Serif Oriya",
        serif;

    font-size: 8.8px;

    line-height: 1.3;

    font-weight: 700;
}

.ganesh-mantra .second-mantra {
    font-size: 7.8px;

    line-height: 1.27;
}

.mantra-divider {
    width: 70%;

    height: 1px;

    margin: 3px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c79a28,
            transparent
        );
}


/* =========================================================
   ORGANIZERS
========================================================= */

.organizers {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 7px;

    margin-top: 6px;
}

.organizer-box {
    padding:
        4px
        5px;

    border:
        1.5px solid #d0a02b;

    border-radius: 8px;

    background:
        rgba(255,252,230,.88);
}

.organizer-box span {
    display: block;

    font-size: 8.5px;

    font-weight: 800;

    color: #6a6b35;
}

.organizer-box b {
    display: block;

    margin-top: 1px;

    font-size: 9.5px;

    color: #205c35;
}


/* =========================================================
   FINAL MESSAGE
========================================================= */

.jkyc-await {
    margin-top: 5px;

    color: #9c2117;

    font-family:
        "Noto Serif Oriya",
        serif;

    font-size: 11px;

    font-weight: 800;
}

.jkyc-await strong {
    display: inline-block;

    margin-top: 2px;

    padding:
        3px 18px;

    border-radius: 4px;

    background:
        linear-gradient(
            90deg,
            #16623b,
            #26734a,
            #16623b
        );

    color: #fff;

    font-family:
        "Noto Sans Oriya",
        sans-serif;

    font-size: 8.5px;

    border:
        1px solid #cda02b;
}


/* =========================================================
   BOTTOM
========================================================= */

.bottom-decoration {
    margin-top: 3px;

    color: #b98a1c;

    font-size: 12px;

    letter-spacing: 5px;
}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 650px) {

    .invite-stage {
        padding: 12px 5px;
    }

    .invite-card {
        transform-origin: top center;

        width: 5in;
        height: 7in;

        box-shadow:
            0 10px 30px rgba(0,0,0,.25);
    }

    .invite-actions {
        flex-wrap: wrap;

        gap: 6px;
    }

    .invite-actions button,
    .invite-actions a {
        padding: 8px 11px;

        font-size: 12px;
    }
}


/* =========================================================
   PRINT 5 x 7
========================================================= */

@page {
    size: 5in 7in;

    margin: 0;
}

@media print {

    html,
    body {
        width: 5in;
        height: 7in;

        margin: 0 !important;
        padding: 0 !important;

        background: white !important;
    }

    .invite-actions {
        display: none !important;
    }

    .invite-stage {
        display: block;

        width: 5in;
        height: 7in;

        min-height: 7in;

        padding: 0 !important;
        margin: 0 !important;
    }

    .invite-card {
        width: 5in !important;
        height: 7in !important;

        margin: 0 !important;

        box-shadow: none !important;

        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .gold-frame,
    .bg-mandala,
    .top-garland,
    .top-leaves,
    .bell,
    .side-diya,
    .side-leaves,
    .corner-flower {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}
/* =========================================================
   FINAL 5x7 HEIGHT FIX
   BOTTOM PART CUT HEBA NAHI
========================================================= */

.invite-card{
    width:5in !important;
    height:7in !important;
    overflow:hidden !important;
}

/* Content ku slightly compact karuchhi */
.invite-content{
    padding-top:24px !important;
    padding-bottom:12px !important;
}


/* Top Ganesh area */
.ganesh-hero{
    height:105px !important;
}

.ganesh-photo-wrap{
    width:98px !important;
    height:98px !important;
}

.ganesh-photo-wrap img{
    width:90px !important;
    height:90px !important;
}

.photo-glow{
    width:106px !important;
    height:106px !important;
}


/* Main title */
.invite-card h1{
    font-size:23px !important;
    margin:1px 0 2px !important;
}


/* Invitation text */
.invite-text{
    margin:5px auto 5px !important;
    font-size:9.5px !important;
    line-height:1.30 !important;
}


/* Date / Location */
.event-info{
    margin:4px 0 5px !important;
    gap:5px !important;
}

.info-box{
    min-height:38px !important;
    padding:3px !important;
}

.info-box b{
    font-size:8.5px !important;
}

.info-box small{
    font-size:7.5px !important;
}


/* Program */
.program-heading{
    padding:3px 18px !important;
    margin-bottom:4px !important;
    font-size:12px !important;
}

.program-grid{
    gap:4px !important;
}

.program-item{
    min-height:34px !important;
    padding:2px 6px !important;
}

.program-icon{
    font-size:15px !important;
    width:23px !important;
}

.program-item strong{
    font-size:8.5px !important;
}

.program-item span{
    font-size:7.5px !important;
}


/* Blessing */
.blessing{
    margin:4px auto !important;
    font-size:8.5px !important;
    line-height:1.2 !important;
}


/* Mantra box */
.ganesh-mantra{
    padding:4px 10px !important;
}

.mantra-title{
    font-size:10.5px !important;
}

.ganesh-mantra p{
    font-size:7.7px !important;
    line-height:1.18 !important;
    margin:1px 0 !important;
}

.ganesh-mantra .second-mantra{
    font-size:6.9px !important;
    line-height:1.16 !important;
}

.mantra-divider{
    margin:2px auto !important;
}


/* Organizers */
.organizers{
    margin-top:4px !important;
    gap:5px !important;
}

.organizer-box{
    padding:3px 4px !important;
}

.organizer-box span{
    font-size:7.5px !important;
}

.organizer-box b{
    font-size:8.5px !important;
}


/* Final message */
.jkyc-await{
    margin-top:3px !important;
    font-size:9.5px !important;
}

.jkyc-await strong{
    margin-top:1px !important;
    padding:2px 14px !important;
    font-size:7.5px !important;
}


/* Bottom decoration */
.bottom-decoration{
    margin-top:1px !important;
    font-size:10px !important;
}


/* =========================================================
   PRINT FIX
========================================================= */

@page{
    size:5in 7in;
    margin:0;
}

@media print{

    html,
    body{
        width:5in !important;
        height:7in !important;
        margin:0 !important;
        padding:0 !important;
    }

    .invite-stage{
        width:5in !important;
        height:7in !important;
        min-height:7in !important;
        padding:0 !important;
        margin:0 !important;
    }

    .invite-card{
        width:5in !important;
        height:7in !important;
        overflow:hidden !important;
        margin:0 !important;
        box-shadow:none !important;
    }

    .invite-content{
        height:auto !important;
        max-height:7in !important;
        overflow:visible !important;
    }
}