/* ==========================================================================
   Layout: mobile tab bar  (partials/site/tabbar.blade.php)
   --------------------------------------------------------------------------
   App-style bottom navigation, < 992px only:
     [tab] [tab]  ( احجز )  [tab] [المزيد]
   · a solid white bar attached to the bottom edge, seven hairlines on top
     (the logo's strokes, faint)
   · active tab: ink label with the logo's aqua dot above the icon
   · the centre booking button rises out of the bar: deep ink circle with
     an aqua ring inside it
   · clears the iPhone home indicator via --safe-bottom
   ========================================================================== */

.tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--z-tabbar);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    height: calc(var(--tabbar-h) + var(--safe-bottom));
    padding: 0 var(--space-1) calc(var(--space-2) + var(--safe-bottom));
    border-top: 1px solid var(--line);
    background: var(--card);
}

/* ── Regular tab ─────────────────────────────────────────────────────────── */
.tabbar__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding-top: var(--space-3);
    color: var(--ink-faint);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur) var(--ease-out);
}
.tabbar__item:hover { color: var(--ink); }

.tabbar__icon { font-size: 22px; transition: transform var(--dur) var(--ease-out); }

.tabbar__label {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
}

/* Active: ink colour + the logo's aqua circle above the icon */
.tabbar__item.is-active { color: var(--ink); }
.tabbar__item.is-active::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 50%;
    width: 7px;
    height: 7px;
    border: 1.6px solid var(--second-strong);
    border-radius: 50%;
    transform: translateX(-50%);
}

.tabbar__item:active .tabbar__icon { transform: scale(0.9); }

/* ── Centre booking button ───────────────────────────────────────────────── */
.tabbar__book {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--ink);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.tabbar__book:hover { color: var(--ink); }

.tabbar__book-btn {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-top: -28px;                     /* rises out of the bar */
    border: 4px solid var(--paper);
    border-radius: 50%;
    background: var(--action);
    transition: transform var(--dur) var(--ease-out);
}
.tabbar__book-ring {
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--second);
    border-radius: 50%;
}
.tabbar__book:active .tabbar__book-btn { transform: scale(0.92); }
.tabbar__book.is-active .tabbar__book-ring { background: var(--second); }

/* Hide on desktop even if the utility class is ever dropped */
@media (min-width: 992px) { .tabbar { display: none; } }