/* =========================================================
   GMD Restaurant
   Left Column
   Dining Details
   ========================================================= */

.gmd-restaurant-left h4{

    margin:30px 0 14px;

    font-size:20px;

    color:#111827;

}

/* =========================================================
   Meal Cards
   ========================================================= */

.gmd-meal-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:10px;

}

.gmd-meal-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

 min-height:85px;
padding:14px;
gap:6px;

    background:#ffffff;

    border:2px solid #e5e7eb;

    border-radius:18px;

    cursor:pointer;

    transition:.25s ease;

    text-align:center;

}

.gmd-meal-card:hover{

    border-color:#2563eb;

    background:#eff6ff;

    transform:translateY(-3px);

    box-shadow:0 10px 24px rgba(37,99,235,.18);

}

.gmd-meal-card.active{

    border-color:#2563eb;

    background:#eff6ff;

}

/* =========================================================
   Guest Cards
   ========================================================= */

.gmd-guests-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

}

.gmd-guest-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

min-height:95px;
padding:14px;
gap:6px;

    background:#ffffff;

    border:2px solid #e5e7eb;

    border-radius:18px;

    cursor:pointer;

    transition:.25s ease;

    text-align:center;

}

.gmd-guest-card:hover{

    border-color:#2563eb;

    background:#eff6ff;

    transform:translateY(-3px);

    box-shadow:0 10px 24px rgba(37,99,235,.18);

}

.gmd-guest-card.active{

    border-color:#2563eb;

    background:#eff6ff;

}

/* =========================================================
   Icons
   ========================================================= */

.gmd-meal-card i,
.gmd-guest-card i{

    font-size:26px;

    color:#2563eb;

}

.gmd-meal-card span,
.gmd-guest-card span{

    font-size:17px;

    font-weight:700;

    color:#111827;

}

/* =========================================================
   Selected Badge
   ========================================================= */

.gmd-selected{

    position:absolute;

    top:12px;

    right:12px;

    width:24px;

    height:24px;

    border-radius:50%;

    background:#16a34a;

    color:#ffffff;

    display:none;

    align-items:center;

    justify-content:center;

    font-size:13px;

    font-weight:700;

}

.gmd-meal-card.active .gmd-selected,
.gmd-guest-card.active .gmd-selected{

    display:flex;

}

.gmd-meal-card.active,
.gmd-guest-card.active{

    border:2px solid #2563eb;

    background:#eff6ff;

    box-shadow:0 8px 18px rgba(37,99,235,.15);

    transform:translateY(-2px);

}
/* =========================================================
   GMD Restaurant
   Modern Meal / Guest Cards
   ========================================================= */

.gmd-meal-card,
.gmd-guest-card{

    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:16px;

    color:#111827;

    box-shadow:
        0 2px 5px rgba(15,23,42,.04),
        0 8px 20px rgba(15,23,42,.04);

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


/* Text */

.gmd-meal-card strong,
.gmd-guest-card strong{

    color:#111827;

    font-weight:700;

}


/* Hover */

.gmd-meal-card:hover,
.gmd-guest-card:hover{

    background:#ffffff;

    border-color:#93c5fd;

    transform:translateY(-2px);

    box-shadow:
        0 4px 8px rgba(15,23,42,.06),
        0 12px 24px rgba(37,99,235,.08);
}


/* Selected */

.gmd-meal-card.active,
.gmd-guest-card.active{

    background:#eff6ff;

    border:2px solid #2563eb;

    box-shadow:
        0 4px 10px rgba(37,99,235,.10),
        0 12px 26px rgba(37,99,235,.12);
}


/* Selected text */

.gmd-meal-card.active strong,
.gmd-guest-card.active strong{

    color:#1d4ed8;

}


/* Icons */

.gmd-meal-card .gmd-meal-icon,
.gmd-guest-card .gmd-guest-icon{

    font-size:20px;

    margin-bottom:7px;

}


/* Selected tick */

.gmd-meal-card .gmd-selected,
.gmd-guest-card .gmd-selected{

    width:24px;
    height:24px;

    border-radius:50%;

    background:#16a34a;

    color:#ffffff;

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

    font-size:14px;
    font-weight:700;

    box-shadow:0 3px 8px rgba(22,163,74,.22);

}

/* =========================================================
   GMD Restaurant
   Protect Meal / Guest Cards From Global Button Styles
   ========================================================= */

.gmd-meal-card:hover,
.gmd-meal-card:focus,
.gmd-meal-card:focus-visible,
.gmd-guest-card:hover,
.gmd-guest-card:focus,
.gmd-guest-card:focus-visible{

    background:#ffffff !important;
    border-color:#93c5fd !important;
    color:#111827 !important;
    outline:none !important;

}


/* Selected cards */

.gmd-meal-card.active,
.gmd-meal-card.active:hover,
.gmd-meal-card.active:focus,
.gmd-meal-card.active:focus-visible,
.gmd-guest-card.active,
.gmd-guest-card.active:hover,
.gmd-guest-card.active:focus,
.gmd-guest-card.active:focus-visible{

    background:#eff6ff !important;
    border:2px solid #2563eb !important;
    color:#111827 !important;

    box-shadow:
        0 4px 10px rgba(37,99,235,.10),
        0 12px 26px rgba(37,99,235,.12) !important;

}


/* Keep selected text blue */

.gmd-meal-card.active strong,
.gmd-guest-card.active strong{

    color:#1d4ed8 !important;

}


/* Keep selected tick green */

.gmd-meal-card.active .gmd-selected,
.gmd-guest-card.active .gmd-selected{

    display:flex !important;
    background:#16a34a !important;
    color:#ffffff !important;

}
/* =========================================================
   Restaurant Meal Discount
   ========================================================= */

.gmd-meal-discount{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-top:7px;
    padding:3px 8px;

    background:#ef0038;
    color:#ffffff !important;

    border-radius:999px;

    font-size:11px;
    font-weight:700;
    line-height:1.2;

    white-space:nowrap;

}