.clinic-block-mobile {
    display: contents;
}
.grid-container-AncCustomWeekly-Responsive {
    -ms-grid-columns: auto (1fr)[7] !important;
    grid-template-columns: auto repeat(7, 1fr) !important;
}
.tooltip-content .badge {
    width: 96%;
}
.tooltip-content {
    width: 100%;
}

/* Accessibility/Language button: responsive text and icon + prominent look */
.sr-access-pill {
    font-size: clamp(0.8rem, 0.72rem + 0.4vw, 1rem);
    line-height: 1 !important;
    border: 2px solid #e36c0a; /* orange outline – stands out on the teal */
    box-shadow: 0 4px 12px rgba(227, 108, 10, 0.30), 0 2px 4px rgba(0, 0, 0, 0.12) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

    /* Hover: lifts up, stronger glow, light orange background */
    .sr-access-pill:hover {
        transform: translateY(-3px);
        background-color: #fff4ea !important;
        box-shadow: 0 10px 22px rgba(227, 108, 10, 0.40), 0 3px 6px rgba(0, 0, 0, 0.15) !important;
    }

    /* Click: presses down */
    .sr-access-pill:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(227, 108, 10, 0.30) !important;
    }

.sr-access-icon {
    width: clamp(26px, 22px + 1vw, 34px);
    height: clamp(26px, 22px + 1vw, 34px);
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
    background-color: #e36c0a;
    color: #ffffff !important;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    animation: sr-access-pulse 2s ease-out 0.5s 3; /* pulses 3 times when the page opens */
}

    .sr-access-icon i {
        color: #ffffff !important;
    }

/* Hover: icon grows and tilts, and pulses again */
.sr-access-pill:hover .sr-access-icon {
    transform: scale(1.15);
    animation: sr-access-pulse 1.2s ease-out infinite;
}

.sr-access-pill .accessibility-text {
    color: #000 !important;
}

/* Orange ring that spreads out from the icon */
@keyframes sr-access-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(227, 108, 10, 0.55);
    }

    100% {
        box-shadow: 0 0 0 12px rgba(227, 108, 10, 0);
    }
}

/* Users who turn off animations in their device settings get no movement */
@media (prefers-reduced-motion: reduce) {
    .sr-access-pill,
    .sr-access-icon {
        transition: none;
        animation: none !important;
    }

        .sr-access-pill:hover,
        .sr-access-pill:hover .sr-access-icon {
            transform: none;
        }
}
@media screen and (max-width: 768px) {

    #GridCustomWeekView {
        overflow-x: visible !important;
    }

    .grid-container-AncCustomWeekly,
    .grid-container-AncCustomWeekly-Responsive,
    .grid-container-AncCustomWeekly2 {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 6px !important;
    }

    .header-cell-AncCustomWeekly,
    .weekday-cell-AncCustomWeekly {
        display: none !important;
    }

    .clinic-block-mobile {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
        padding: 6px !important;
        border: 2px solid #01b2c6 !important;
        border-radius: 10px !important;
        background: #fff !important;
        margin-top: 16px !important;
    }

        .clinic-block-mobile:first-of-type {
            margin-top: 0 !important;
        }

    .clinic-name-AncCustomWeekly,
    .clinic-name-AncCustomWeeklyCustom {
        grid-column: 1 / -1 !important;
        border-radius: 6px !important;
        margin-top: 0 !important;
        padding: 8px !important;
    }

    .clinicNameCustom {
        font-size: 13px !important;
    }


    .cell-AncCustomWeekly {
        min-height: 4.8rem !important;
        border-radius: 6px !important;
        padding: 2px 4px 4px !important;
    }

        .cell-AncCustomWeekly::before {
            content: attr(data-day-name) "\A" attr(data-day-date);
            white-space: pre-line;
            text-align: center;
            font-size: 14px;
            font-weight: 700;
            line-height: 1.2;
            color: #ffffff;
            margin-bottom: 7px;
            background: #01b2c6;
            width: 100%;
            border-radius: 4px;
        }

    .tooltip-content .badge {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 13px;
        padding: 3px 2px !important;
        white-space: nowrap;
    }

    .tooltip-content {
        width: 100% !important;
    }

    .intercountText {
        font-size: 13px !important;
    }

    .closedClinic img {
        width: 40px !important;
        height: 26px !important;
    }

    .cell-AncCustomWeekly .calendar-icon-weekday-cell-AncCustomWeekly {
        font-size: 11px;
    }

    #SelfReferralClinicsModal .modal-dialog {
        max-width: 98% !important;
        margin: 8px auto !important;
    }

    .top-header-main.background-svg {
        min-height: 0 !important;
        padding-left: 0px;
        padding-right: 0px;
    }

    .sr-head-logo img {
        width: 150px;
        /*margin-right: -8px;*/
    }

    .sr-access-pill {
        border-radius: 1.25rem !important; /* still looks right if the text wraps to 2 lines */
    }
}

@media screen and (max-width: 420px) {
    .cell-AncCustomWeekly::before {
        font-size: 12px;
    }
    #lbl_SelfReferral {
        font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
        
    }
    .sr-head-logo img {
        width: 100px;
        /*margin-right: -8px;*/
    }
    .sr-head-title {
        line-height: 1 !important;
        font-weight:500;
    }
}
@media screen and (max-width: 360px) {
    .clinic-block-mobile {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (min-width: 300px) {
    .background-svg {
        height: auto !important;
    }
}
        /* Mobile */

        /* ===== end Self Referral header ===== */

        /*@media screen and (max-width: 768px) {
    .grid-container-AncCustomWeekly,
    .grid-container-AncCustomWeekly-Responsive,
    .grid-container-AncCustomWeekly2 {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        -ms-grid-columns: unset !important;
        min-width: 0 !important;
        width: 100% !important;
        gap: 4px !important;
        padding: 2px !important;
    }

    .header-cell-AncCustomWeekly,
    .weekday-cell-AncCustomWeekly {
        display: none !important;
    }

    .clinic-name-AncCustomWeekly,
    .clinic-name-AncCustomWeeklyCustom {
        grid-column: 1 / -1 !important;
        border-radius: 8px !important;
        margin-top: 12px;
        padding: 8px !important;
    }

        .clinic-name-AncCustomWeekly:first-of-type,
        .clinic-name-AncCustomWeeklyCustom:first-of-type {
            margin-top: 0;
        }

    .clinicNameCustom {
        font-size: 13px !important;
    }

    .cell-AncCustomWeekly {
        min-height: 4.8rem !important;
        border-radius: 6px !important;
        padding: 2px 4px 4px !important;
    }

    .cell-AncCustomWeekly::before {
        content: attr(data-day-name) "\A" attr(data-day-date);
        white-space: pre-line;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
        color: #ffffff;
        margin-bottom: 7px;
        background: #01b2c6;
        width: 100%;
        border-radius: 4px;
    }

    .tooltip-content .badge {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 13px;
        padding: 3px 2px !important;
        white-space: nowrap;
    }

    .tooltip-content {
        width: 100% !important;
    }

    .intercountText {
        font-size: 13px !important;
    }

    .closedClinic img {
        width: 40px !important;
        height: 26px !important;
    }

    .cell-AncCustomWeekly .calendar-icon-weekday-cell-AncCustomWeekly {
        font-size: 11px;
    }

    #SelfReferralClinicsModal .modal-dialog {
        max-width: 96% !important;
        margin: 8px auto !important;
    }
}

@media screen and (max-width: 420px) {
    .cell-AncCustomWeekly::before {
        font-size: 12px;
    }
}*/