/* ─────────────────────────────────────────────────────────────
   Responsive safety net for the public site.

   Keeps a stray wide element from forcing the whole page to
   scroll sideways on phones. `clip` is used instead of `hidden`
   on purpose: `hidden` turns the page into a scroll container
   and breaks the sticky header, `clip` does not.
   ───────────────────────────────────────────────────────────── */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

/* Media never wider than its container, whatever width="" says. */
img,
video,
iframe,
svg,
table {
    max-width: 100%;
}

/* Long words, emails and URLs must wrap instead of widening the page. */
body {
    overflow-wrap: break-word;
}

/* ── Header on phones ──
   The base header is flex-wrap: nowrap with BOTH the logo and the action
   buttons at flex-shrink: 0, plus a nowrap 2.2rem logo. Nothing was allowed
   to give, so together they measured wider than a phone screen and dragged
   the whole page sideways. Let the logo shrink (with an ellipsis) and tighten
   the controls instead. */
@media (max-width: 767px) {
    .header-bottom > .container {
        gap: 8px;
    }

    .logo {
        flex-shrink: 1;
        min-width: 0;
        gap: 8px;
    }

    .logo-mark {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
    }

    .logo-text {
        font-size: 1.6rem;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-actions {
        gap: 6px;
    }

    .lang-toggle,
    .nav-toggle-btn {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .nav-toggle-btn {
        font-size: 24px;
    }

    .header-bottom .btn-register {
        padding: 8px 12px;
        font-size: 1.05rem;
        white-space: nowrap;
    }
}

/* ── Language picker ──
   On desktop it stays as the globe button in the header. Below 992px the
   navbar collapses into the burger menu, so the picker moves inside that
   menu and the header button is hidden — one less thing crowding the bar. */
.navbar-lang {
    display: none;
}

@media (max-width: 991px) {
    /* The open menu was capped at 310px with overflow:hidden, which is exactly
       what the six links fill — so the language block below them was clipped
       away. Let the menu grow to the screen and scroll when it can't fit. */
    .navbar.active {
        max-height: calc(100vh - 96px);
        overflow: hidden auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .header-actions .lang-switcher {
        display: none;
    }

    .navbar-lang {
        display: block;
        padding: 14px 18px;
        border-block-start: 1px solid hsla(218, 70%, 18%, 0.08);
    }

    .navbar-lang-label {
        display: block;
        margin-block-end: 8px;
        font-size: 1.15rem;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .navbar-lang-options {
        display: flex;
        gap: 8px;
    }

    .navbar-lang-option {
        flex: 1 1 0;
        padding: 10px 12px;
        border: 1px solid hsla(225, 68%, 53%, 0.22);
        border-radius: 10px;
        background: hsla(225, 67%, 91%, 0.32);
        color: var(--oxford-blue-1, #17233a);
        font-weight: 600;
        font-size: 1.2rem;
        text-align: center;
        text-decoration: none;
        transition: 0.2s ease;
    }

    .navbar-lang-option.is-active {
        background: var(--royal-blue-light, #2b62d6);
        border-color: transparent;
        color: #fff;
    }
}

/* Very small phones — trim a little further. */
@media (max-width: 400px) {
    .logo-text {
        font-size: 1.35rem;
    }

    .header-bottom .btn-register {
        padding: 7px 10px;
        font-size: 0.95rem;
    }
}

/* Reviews section on public site */

.reviews-section {
    background: var(--cultured, #f8f9fa);
    padding-block: 80px;
}

.reviews-list-public {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.reviews-list-public .review-card {
    flex: 1 1 300px;
    max-width: 380px;
    display: flex;
    flex-direction: column;
}

.reviews-empty {
    flex-basis: 100%;
    text-align: center;
}

/* The home page shows every comment, so the list scrolls instead of pushing
   the rest of the page down once there are a lot of them. */
.reviews-list-scroll {
    max-height: 620px;
    overflow-y: auto;
    align-content: flex-start;
    padding: 0.5rem;
}

/* The clinic's answer, nested under the review it answers. */
.review-reply {
    margin-top: 0.9rem;
    padding: 0.75rem 0.9rem;
    border-inline-start: 3px solid #4c8bf5;
    background: #f4f8ff;
    border-radius: 0 8px 8px 0;
}

[dir="rtl"] .review-reply {
    border-radius: 8px 0 0 8px;
}

.review-reply-head {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.3rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #2f5fb3;
}

.review-reply-date {
    font-weight: 500;
    opacity: 0.7;
}

.review-reply-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Super Admin's inline reply box. */
.review-reply-form {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #e2e8f0;
}

.review-reply-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 0.35rem;
}

.review-reply-input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
}

.review-reply-input:focus {
    outline: none;
    border-color: #4c8bf5;
}

.review-reply-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.review-reply-hint {
    font-size: 0.72rem;
    color: #94a3b8;
}

/* The author's own "edit mine" link, alive for a few minutes after posting. */
.review-own-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding: 4px 12px;
    border: 1px dashed #4c8bf5;
    border-radius: 999px;
    color: #4c8bf5;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}

.review-own-edit:hover {
    background: #eff6ff;
}

.review-own-edit-timer {
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.review-edit-countdown {
    font-weight: 600;
    color: #4c8bf5;
    font-variant-numeric: tabular-nums;
}

.review-edit-countdown.is-expired {
    color: #c62828;
}

/* Hearts — the only reaction a visitor gets. */
.review-like-form {
    margin-top: 0.75rem;
}

.review-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid #f1d3d8;
    background: #fff;
    color: #9aa0a6;
    border-radius: 999px;
    padding: 4px 14px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.review-like-btn ion-icon {
    font-size: 1.05rem;
}

.review-like-btn:hover:not(:disabled) {
    background: #fff1f3;
    color: #e0245e;
    border-color: #f3b6c0;
}

.review-like-btn:active:not(:disabled) {
    transform: scale(0.94);
}

.review-like-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.review-like-btn.is-liked {
    color: #e0245e;
    border-color: #e0245e;
    background: #fff1f3;
}

/* Super Admin moderation, shown on the public pages only for them. */
.review-admin-bar {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #e2e8f0;
}

.review-admin-btn {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    border-radius: 999px;
    padding: 3px 14px;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
}

.review-admin-btn:hover {
    background: #f1f5f9;
}

.review-admin-btn-danger {
    border-color: #fca5a5;
    color: #c62828;
}

.review-admin-btn-danger:hover {
    background: #fee2e2;
}

.review-card-hidden {
    opacity: 0.72;
    border: 1px dashed #f59e0b;
}

.review-hidden-badge {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 2px 10px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.72rem;
    font-weight: 700;
}

/* Keep the author pinned to the bottom so uneven cards still line up. */
.reviews-list-public .review-card .review-author {
    margin-top: auto;
    padding-top: 0.75rem;
}

.reviews-list-public .review-card .review-text {
    line-height: 1.7;
}

.review-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.review-stars {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.review-stars ion-icon {
    color: #f5b301;
    font-size: 1.1rem;
    vertical-align: middle;
}

.review-text {
    margin: 0.75rem 0 0.5rem;
    font-style: italic;
    color: #444;
}

.review-author {
    margin: 0;
    font-weight: 600;
    color: var(--royal-blue-dark, #1a5fb4);
}

/* Footer CTA button */
.btn-review-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding: 0.9rem 1.75rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #f5b301 0%, #ff8f00 55%, #f5b301 100%);
    color: #1a1a1a;
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(245, 179, 1, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.btn-review-cta ion-icon {
    font-size: 1.25rem;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.btn-review-cta:hover,
.btn-review-cta:focus {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(245, 179, 1, 0.55);
}

.btn-review-cta-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: reviewCtaShine 3s ease-in-out infinite;
}

@keyframes reviewCtaShine {
    0%, 70%, 100% { transform: translateX(-120%); }
    85% { transform: translateX(120%); }
}

.footer-bottom .container {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.footer-bottom-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

@media (max-width: 767px) {
    .footer-bottom-row {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    /* Reviews: one card per row so text stays readable on phones. */
    .reviews-section {
        padding-block: 56px;
    }

    .reviews-page {
        padding-block-start: 130px;
    }

    .reviews-list-public {
        gap: 1rem;
        margin-top: 2rem;
    }

    .reviews-list-public .review-card {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .review-form-panel {
        margin-top: 2.5rem;
        border-radius: 14px;
    }

    .reviews-cta {
        margin-top: 2rem;
    }

    .reviews-cta .btn {
        display: block;
        width: 100%;
    }
}

/* Review modal */
body.review-modal-open {
    overflow: hidden;
}

.review-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.review-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.review-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 25, 47, 0.65);
    backdrop-filter: blur(4px);
}

.review-modal-dialog {
    position: relative;
    width: min(100%, 480px);
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    transform: translateY(16px) scale(0.98);
    transition: transform 0.25s ease;
}

.review-modal.is-open .review-modal-dialog {
    transform: translateY(0) scale(1);
}

.review-modal-close {
    position: absolute;
    top: 0.85rem;
    inset-inline-end: 0.85rem;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #f3f4f6;
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.25rem;
}

.review-modal-header {
    text-align: center;
    margin-bottom: 1.25rem;
    padding-inline: 1.5rem;
}

.review-modal-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5b301, #ff8f00);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 6px 20px rgba(245, 179, 1, 0.4);
}

.review-modal-header .h3 {
    margin-bottom: 0.35rem;
}

.review-modal-header p {
    margin: 0;
    color: #666;
    font-size: 0.95rem;
}

.review-modal-alert {
    margin-bottom: 1rem;
}

.review-form .form-group {
    margin-bottom: 1rem;
}

.review-form .form-label,
.review-form label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 500;
}

.review-form .form-input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font: inherit;
}

.review-form .btn-block {
    width: 100%;
    margin-top: 0.5rem;
}

.star-rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0.25rem;
}

.star-rating-input input {
    display: none;
}

.star-rating-input label {
    cursor: pointer;
    color: #ddd;
    font-size: 1.75rem;
    line-height: 1;
}

.star-rating-input label ion-icon {
    pointer-events: none;
}

.star-rating-input input:checked ~ label,
.star-rating-input label:hover,
.star-rating-input label:hover ~ label {
    color: #f5b301;
}

/* Success toast */
.review-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    background: #2e7d32;
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(46, 125, 50, 0.35);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.review-toast.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.review-toast ion-icon {
    font-size: 1.25rem;
}

.front-alert {
    padding: 0.85rem 1rem;
    border-radius: 8px;
}

.front-alert-success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.front-alert-error {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
}

.front-alert ul {
    padding-inline-start: 1.25rem;
}

/* ── Dedicated public reviews page ── */
.reviews-page {
    /* Clear the fixed site header. */
    padding-block-start: 150px;
}

.reviews-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1.75rem;
}

.reviews-summary-score {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.reviews-summary-avg {
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1;
    color: var(--royal-blue-dark, #1a5fb4);
}

.reviews-summary .review-stars ion-icon {
    font-size: 1.6rem;
}

.reviews-summary-count {
    margin: 0;
    color: #6b7280;
    font-size: 0.95rem;
}

.reviews-page-alert {
    max-width: 640px;
    margin: 1.75rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Nicer, lively review cards */
.review-card {
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
}

.reviews-cta {
    margin-top: 2.75rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

/* Secondary CTA next to the primary one ("write a review" / "see all").
   The base .btn is a blue gradient with white text, so both the fill and the
   text colour have to be replaced or the label goes invisible. */
.reviews-cta .btn-outline {
    background: transparent;
    background-image: none;
    border: 1px solid var(--royal-blue-light, #4c8bf5);
    color: var(--royal-blue-light, #4c8bf5);
    box-shadow: none;
}

.reviews-cta .btn-outline:is(:hover, :focus) {
    background: var(--royal-blue-light, #4c8bf5);
    color: #fff;
}

/* Submit-review form rendered as a centred card */
.review-form-panel {
    max-width: 640px;
    margin: 3.5rem auto 0;
    background: #fff;
    border-radius: 18px;
    padding: 2.75rem 2rem 2.25rem;
    box-shadow: 0 12px 45px rgba(0, 0, 0, 0.09);
}

.review-form-header {
    text-align: center;
    margin-bottom: 1.75rem;
}

.review-form-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5b301, #ffd45e);
    color: #fff;
    font-size: 1.8rem;
    box-shadow: 0 8px 20px rgba(245, 179, 1, 0.35);
}

.review-form-header p {
    margin: 0.4rem 0 0;
    color: #6b7280;
}

.review-form-panel .front-alert {
    margin-bottom: 1.35rem;
}

.review-form-panel .star-rating-input {
    justify-content: center;
}

@media (max-width: 575px) {
    .btn-review-cta {
        width: 100%;
        max-width: 320px;
    }

    .review-modal-dialog {
        padding: 1.25rem;
    }

    .reviews-page {
        padding-block-start: 120px;
    }

    .reviews-summary-avg {
        font-size: 2.5rem;
    }

    .reviews-summary-score {
        gap: 0.5rem;
    }

    .reviews-summary .review-stars ion-icon {
        font-size: 1.25rem;
    }

    .review-form-panel {
        padding: 2rem 1.35rem;
    }

    .review-card {
        padding: 1.1rem 1.15rem;
    }

    /* Comfortable tap targets for picking a rating on touch screens. */
    .star-rating-input {
        gap: 0.5rem;
    }

    .star-rating-input label {
        font-size: 2.1rem;
    }

    .review-form .form-input {
        font-size: 16px; /* stops iOS Safari zooming in on focus */
    }
}