/* Soorena home UI kit — scoped to the public home page. */
:root {
    --home-red: #b32d2d;
    --home-red-hover: #922323;
    --home-black: #050505;
    --home-surface: #101010;
    --home-white: #fff;
    --home-muted: #d7d7d7;
    --home-border: rgba(255, 255, 255, .12);
    --home-space-1: .5rem;
    --home-space-2: 1rem;
    --home-space-3: 1.5rem;
    --home-space-4: 2rem;
    --home-radius-sm: 12px;
    --home-radius-md: 20px;
    --home-radius-lg: 28px;
    --home-shadow: 0 16px 38px rgba(0, 0, 0, .28);
}

body {
    overflow-x: hidden;
    line-height: 1.65;
}

.container {
    width: min(calc(100% - 2rem), 1180px) !important;
    padding-top: var(--home-space-3) !important;
}

.branches-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
    grid-auto-rows: 1fr;
    justify-content: center !important;
    align-items: stretch !important;
    gap: var(--home-space-3) !important;
    margin: 0 auto var(--home-space-4) !important;
}

.branch-card {
    width: 100% !important;
    max-width: 360px !important;
    height: 100%;
    min-height: 0 !important;
    padding: var(--home-space-2) !important;
    border: 1px solid var(--home-border) !important;
    border-radius: var(--home-radius-lg) !important;
    background: var(--home-black) !important;
    box-shadow: var(--home-shadow) !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(2.8rem, auto) auto auto;
    align-content: start;
    justify-items: center;
    gap: var(--home-space-1);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

.branch-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(179, 45, 45, .8) !important;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .34) !important;
}

.branch-image {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover !important;
    margin: 0 0 var(--home-space-1) !important;
    border: 0 !important;
    border-radius: var(--home-radius-md) !important;
}

.branch-title {
    margin: 0 !important;
    color: var(--home-white) !important;
    font-size: clamp(1.2rem, 2vw, 1.45rem) !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}

.branch-address {
    width: 100%;
    min-height: 2.8rem;
    margin: 0 !important;
    padding: .45rem .75rem !important;
    display: grid !important;
    place-items: center;
    border: 1px solid rgba(179, 45, 45, .75) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--home-muted) !important;
    font-size: .82rem !important;
    line-height: 1.65 !important;
}

.branch-phone {
    margin: 0 !important;
    color: var(--home-muted) !important;
    font-size: .85rem !important;
    line-height: 1.5 !important;
}

.btn-order {
    width: 100%;
    min-height: 44px;
    margin-top: .25rem;
    padding: .65rem 1rem !important;
    justify-content: center;
    border-radius: 999px !important;
    background: var(--home-red) !important;
    color: var(--home-white) !important;
    font-size: .9rem !important;
    font-weight: 750 !important;
    box-shadow: none !important;
}

.btn-order:hover {
    background: var(--home-red-hover) !important;
    transform: none !important;
}

.quick-actions {
    width: min(100%, 760px);
    max-width: 760px !important;
    margin: 0 auto var(--home-space-4) !important;
    padding-top: var(--home-space-3) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--home-space-2) !important;
    border-top: 1px solid var(--home-border) !important;
}

.action-card {
    min-height: 124px;
    padding: var(--home-space-2) !important;
    gap: .35rem !important;
    justify-content: center;
    border: 1px solid var(--home-border) !important;
    border-radius: var(--home-radius-md) !important;
    background: var(--home-black) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22) !important;
}

.action-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(179, 45, 45, .8) !important;
}

.action-card svg {
    width: 32px !important;
    height: 32px !important;
}

.action-title {
    font-size: .9rem !important;
    line-height: 1.5;
}

.action-detail {
    max-width: 100%;
    color: var(--home-muted) !important;
    font-size: .72rem !important;
    line-height: 1.55;
}

.btn-order:focus-visible,
.action-card:focus-visible,
.footer-social a:focus-visible,
.popup-close:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .9) !important;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .container {
        width: min(calc(100% - 2rem), 380px) !important;
        padding-top: var(--home-space-2) !important;
    }

    .branches-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-rows: auto;
        gap: var(--home-space-2) !important;
        margin-bottom: var(--home-space-3) !important;
    }

    .branch-card {
        max-width: none !important;
        height: auto !important;
        padding: var(--home-space-2) !important;
        border-radius: 24px !important;
    }

    .branch-image {
        border-radius: 16px !important;
    }

    .quick-actions {
        gap: var(--home-space-1) !important;
        padding-top: var(--home-space-2) !important;
    }

    .action-card {
        min-height: 108px;
        padding: .75rem .5rem !important;
        border-radius: 16px !important;
    }

    .action-title { font-size: .78rem !important; }
    .action-detail { font-size: .64rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    .branch-card,
    .action-card,
    .btn-order {
        transition: none !important;
    }
}