.gm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 10px;
}

.gm-dialog {
    background:#f3f4ff;
    max-width: 640px;
    width: 100%;
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(15,23,42,0.55);
    position: relative;
    overflow: hidden;
    font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* CLOSE BUTTON */
.gm-close {
    position:absolute;
    top:10px;
    right:10px;
    width:30px;
    height:30px;
    border:none;
    border-radius:999px;
    background:#f3f4f6;
    color:#4b5563;
    font-size:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .15s;
}
.gm-close:hover{background:#e5e7eb;color:#111827}

/* HEADER */
.gm-header {
    padding:16px 18px 10px 18px;
    text-align:center;
}
.gm-heading-row{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
}
.gm-heading-row h3{
    margin:0;
    font-size:1.05rem;
    font-weight:700;
}
.gm-saving-pill{
    background:#16a34a;
    color:#ffffff;
    border-radius:999px;
    padding:4px 12px;
    font-size:0.8rem;
    font-weight:600;
}
.gm-sub{
    margin-top:6px;
    font-size:0.82rem;
    color:#000000; 
}

/* BODY: CARDS */
.gm-body{
    padding:14px 18px 18px 18px;
    background:#ffffff;
}
.gm-actions{
    border-top:1px solid #e5e7eb;
    background:#ffffff;
    padding:10px 18px 14px 18px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.gm-row{
    display:flex;
    gap:14px;
    align-items:stretch;
}
.gm-card{
    flex:1;
    border-radius:14px;
    border:1px solid #e5e7eb;
    background:#f9fafb;
    padding:10px 10px 12px 10px;
    display:flex;
    flex-direction:column;
    position:relative;
}
.gm-card-left{background:#f9fafb;}
.gm-card-right{
    background:#ffffff;
    border-color:#16a34a;
    box-shadow:0 0 0 1px rgba(22,163,74,0.25);
}

.alt-arrow {
    margin-left: 6px;
    font-size: 1.8em;
    font-weight: 900;
    line-height: 1;
    color: #12853d !important;
    vertical-align: middle;
}

/* SMALL TOP LABELS */
.gm-chip{
    position:absolute;
    top:10px;
    left:10px;
    border-radius:999px;
    padding:3px 9px;
    font-size:0.7rem;
    font-weight:600;
    text-transform:uppercase;
}
.gm-chip-left{
    background:#e5e7eb;
    color:#000000;
}
.gm-chip-right{
    background:#16a34a;
    color:#ffffff;
}

/* IMAGE + TEXT */
.gm-product{
    margin-top:24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}
.gm-img-box {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    display: flex !important;        /* 👈 ye add karo */
    align-items: center !important;  /* 👈 ye add karo */
    justify-content: center !important; /* 👈 ye add karo */
    margin-bottom: 10px;
}

.gm-img {
    max-width: 90%;
    max-height: 90%;
    width: 100%;           /* 👈 ye add karo */
    height: 100%;          /* 👈 ye add karo */
    object-fit: contain;
    object-position: center; /* 👈 ye add karo */
}
.gm-title{
    font-size:0.9rem;
    font-weight:600;
    color:#111827;
    margin-bottom:3px;
}
.gm-brand{
    font-size:0.78rem;
    color:#111827;  
    margin-bottom:10px;
}

/* PRICE AREA */
.gm-price-block{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
}
.gm-price-main{
    font-size:1.2rem;
    font-weight:700;
    color:  #085018;
}
.gm-price-row{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:0.8rem;
}
.gm-mrp{
    color:#000000;
    text-decoration:line-through;
}
.gm-disc{
    background:#fee2e2;
    color:#b91c1c;
    border-radius:999px;
    padding:2px 6px;
    font-size:0.72rem;
    font-weight:600;
}
.gm-per-unit{
    font-size:0.75rem;
    color:#000000;
}

/* CENTER ICON BETWEEN CARDS */
.gm-center-icon{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:32px;
    height:32px;
    border-radius:999px;
    background:#107a22;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.9rem;
}

/* ACTION BUTTONS */
.gm-btn{
    border:none;
    border-radius:999px;
    padding:11px 16px;
    font-size:0.95rem;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:all .15s;
}
.gm-btn-primary{
    background:#16a34a;
    color:#ffffff;
}
.gm-btn-primary:hover{background:#15803d}
.gm-btn-ghost{
    background:transparent;
    color:#6b7280;
}
.gm-btn-ghost:hover{background:#f3f4f6;color:#111827}

/* MOBILE - IMPROVED SMALL SCREEN CARD SIZING */
@media (max-width: 640px) {
    .gm-backdrop {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 10px;
        background: rgba(15,23,42,0.55);
        z-index: 9999;
        box-sizing: border-box;

        /* allow the whole overlay to scroll if needed */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .gm-img-box {
        width: 80px !important;
        height: 80px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .gm-img {
        max-width: 90% !important;
        max-height: 90% !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    /* --- Make the dialog taller so inner scrolling is not required --- */
    .gm-dialog {
        width: 100%;
        max-width: 380px;                 /* slightly wider if you want */
        border-radius: 14px;
        padding: 10px;
        box-sizing: border-box;

        /* increased height so most content fits without inner scroll */
        max-height: 150vh;                 /* <-- HERE: large visible box (90% of viewport) */
        height: auto;
        overflow: visible;                /* remove inner scrollbar */
    }

    .gm-chip{
    position:absolute;
    top:10px;
    left:10px;
    z-index: 2;
}

    .gm-card {
    position: relative;
    padding-top: 32px !important;   /* 👈 extra top space for label */
}

    /* Ensure inner containers don't force scrolling */
    .gm-body,
    .gm-card,
    .gm-row,
    .gm-actions {
        max-height: none !important;
        overflow: visible !important;
    }

.gm-product{
    margin-top:16px !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

    /* Constrain very large images or iframes so they don't break layout */
    .gm-img,
    .gm-img-box img,
    .gm-img-box > img,
    iframe {
        max-width: 100%;
        height: auto;
        max-height: 60vh;                 /* image won't exceed 60% of viewport */
        display: block;
    }

    /* small tweaks for spacing and text */
    .gm-header { padding: 10px 12px 6px; }
    .gm-heading-row h3 { font-size: 0.95rem; margin: 0; line-height:1; text-align:center; }
    .gm-body { padding: 10px 12px; }
    .gm-card { padding: 8px; border-radius: 12px; }
    .gm-img-box { width: 72px; height: 72px; }
    .gm-title { font-size: 0.9rem; }
    .gm-price-main { font-size: 1.05rem; }

    /* keep close button accessible */
    .gm-close { top: 10px; right: 10px; width: 30px; height: 30px; }

    /* tiny phones: slightly smaller but still large enough */
    @media (max-width: 400px) {
        .gm-dialog { max-width: 340px; max-height: 88vh; }
        .gm-img-box { width: 64px; height: 64px; }
        .gm-title { font-size: 0.86rem; }
    }
}