/* ============================================
   DENTAL HOME - FULL OPTIMIZED CSS
   ============================================ */

/* === SEARCH APPOINTMENT CARD === */
.shadow-lg {
    border: 3px solid #4587e0;
    border-bottom-right-radius: 24px;
    border-top-left-radius: 24px;
    box-shadow: 0 4px 20px rgba(69, 135, 224, 0.2) !important;
}

@media (max-width: 768px) {
    .shadow-lg {
        border-radius: 16px !important;
        border: 2px solid #4587e0;
        margin: 0 auto;
        max-width: 100% !important;
    }

    .s-block--search-appointments .container {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        gap: 1rem !important;
    }

    .s-block--search-appointments .sm\:w-1\/2 {
        display: none !important;
    }

    salla-search-appointment {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* === HEADER === */
.header-mainbar .sides-wrap {
    padding-top: 0rem;
    padding-bottom: 0rem;
}

.navbar-brand img {
    background: transparent;
    max-height: 60px;
    max-width: 265px;
    border-radius: 60px;
}

.fixed-pinned .navbar-brand img {
    max-height: 4.5rem;
}

.sicon-user:before {
    content: "\f078";
    color: white;
}

.sicon-menu {
    color: white;
}

.sicon-calendar-alt:before {
    content: "\ea29";
    color: white;
}

[class*=" sicon-"], [class^=sicon-] {
    color: white;
}

/* === TYPOGRAPHY === */
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
    color: black;
}

.text-3xl {
    color: #008ad8;
}

.opacity-10 { opacity: .9; }
.opacity-5  { opacity: .8; }

.text-gray-400 {
    --tw-text-opacity: 1;
    color: #122c4f;
}

/* === FOOTER === */
.store-footer__info-bar {
    background-color: transparent !important;
}

.footer-is-light .store-footer {
    border: 3px solid #4587e0;
    border-radius: 20px;
    margin: 0 10px 10px;
}

@media (max-width: 1024px) {
    .footer-is-light .store-footer {
        background-position: center;
        margin: 0 5px 5px;
    }
}

/* === SERVICES CARDS GAP === */
@media (max-width: 768px) {
    .gap-5 {
        gap: 0.75rem;
        padding: 4px;
    }

    .search-bar--mobile {
        padding: 8px 10px;
    }
}

/* === HIDE TRIAL BAR === */
.smt-app-end_of_trial .smt-wrapper .icon-wrapper {
    display: none;
}

/* ============================================
   DOCTORS GRID - MOBILE FIX
   عمودين على الموبايل - ارتفاع كبير يظهر الطبيب كامل
   ============================================ */

/* موبايل: عمودين، ارتفاع كبير */
@media (max-width: 639px) {
    .s-block--banners .grid.has-5-photos {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* الصورة الخامسة تاخد العرض كامل وتتمركز */
    .s-block--banners .grid.has-5-photos .banner-entry:last-child {
        grid-column: 1 / -1 !important;
        max-width: 50% !important;
        margin: 0 auto !important;
        width: 50% !important;
    }

    /* ارتفاع الكارد كبير عشان الصورة تظهر كاملة */
    .s-block--banners .banner-entry a {
        display: block;
        width: 100% !important;
        height: 280px !important;
        background-size: cover !important;
        background-position: center center !important;
        border-radius: 12px !important;
        overflow: hidden;
    }
}

/* تابلت: عمودين كمان بس أطول */
@media (min-width: 640px) and (max-width: 1023px) {
    .s-block--banners .grid.has-5-photos {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    .s-block--banners .grid.has-5-photos .banner-entry:last-child {
        grid-column: 1 / -1 !important;
        max-width: 50% !important;
        margin: 0 auto !important;
        width: 50% !important;
    }

    .s-block--banners .banner-entry a {
        display: block;
        height: 300px !important;
        background-size: cover !important;
        background-position: center center !important;
        border-radius: 12px !important;
        overflow: hidden;
    }
}

/* كمبيوتر: 3 أعمدة */
@media (min-width: 1024px) {
    .s-block--banners .grid.has-5-photos {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }

    .s-block--banners .grid.has-5-photos .banner-entry:last-child {
        grid-column: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .s-block--banners .banner-entry a {
        display: block;
        height: 320px !important;
        background-size: cover !important;
        background-position: center center !important;
        border-radius: 12px !important;
        overflow: hidden;
    }
}