/* ============================================================================
   Catalogy — service landing (home) additions.

   `app.css` is the design's own bundle, kept byte-for-byte so the page renders
   exactly as it was designed. Everything the app needs on top of it — the LTR
   mirror of the design's physical-side decorations and the visit-count pulse —
   lives here so the bundle stays replaceable.
   ========================================================================== */

/* ── Section rhythm ──────────────────────────────────────────────────────────
   `app.css` is an atomic build: it carries only the utilities the mockup
   happened to use, so any spacing class it never emitted silently does nothing.
   The landing's vertical rhythm therefore lives here, on the page's own
   landmarks, where regenerating that bundle cannot drop it.

   A flex column also gives every joint the same measured gap instead of
   whatever the adjacent sections' own margins happen to collapse to. */
.home-shell {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 6vw, 68px);
}

/* The hero carries a little padding of its own on top of the shared gap: it is
   the one section meant to read as open space. */
.home-hero {
    padding-block: clamp(8px, 2vw, 26px);
}

/* ── Service grid: six tiles ─────────────────────────────────────────────────
   The bundle was drawn for five. Its four-column desktop grid leaves the sixth
   tile alone on a row beneath the 2x2 featured card, so the breakpoint drops to
   three columns: featured (2x2) plus five singles closes a 3x3 exactly.

   On a phone the two-column grid has the same problem one row lower, so the
   last tile runs full width and the grid is bookended by two wide cards. */
@media (min-width: 768px) {
    .service-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .service-card--full {
        grid-column: span 3;
    }
}

@media (max-width: 767px) {

    .service-card--wide,
    .service-card--full {
        grid-column: span 2;
    }
}

/* A band, not a stretched square: the full-width tile lays its icon, text and
   arrow out in a row, so it stays short whatever the column count. */
.service-card--full {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 0;
}

.service-card--full h3 {
    margin-top: 0;
}

.service-card--full .service-arrow {
    position: static;
    margin-inline-start: auto;
    flex: none;
}

/* ── Sweets tone ─────────────────────────────────────────────────────────────
   The mockup shipped five palettes and drew the rose one for cosmetics, which
   now has its tile back. Sweets takes this amber, closer to the brand gold and
   a better read for حلويات than rose was. */
.tone-sweets .service-icon {
    color: #9c6f1c;
    background: linear-gradient(135deg, #fbeed0, #eed49a);
}

/* Delivery is the courier's own tile, so it wears the brand blue rather than
   one of the five catalogue palettes. */
.tone-delivery .service-icon {
    color: #2b6382;
    background: linear-gradient(135deg, #dbe9f4, #b2cde2);
}

/* ── Chip tile (delivery) ────────────────────────────────────────────────────
   Stacks where the plain full-width band runs in a row: icon and copy on top,
   the errand chips along the foot. The brand-blue outline marks it as the one
   tile that opens a chat, so it needs no arrow. */
.service-card--chips {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    border-color: #6fa3d1;
}

.service-card--chips:hover {
    border-color: #2f6fa8;
}

.service-chips-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* Stretched link: the title's link covers the whole card, so the card still
   opens the general chat; the chips sit above it and answer for themselves. */
.service-chips-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.service-chips-link:focus-visible {
    outline: none;
}

.service-card--chips:has(.service-chips-link:focus-visible) {
    outline: 2px solid #2f6fa8;
    outline-offset: 3px;
}

.service-chips {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid #e3e9ef;
    background: #f1f4f7;
    color: #4a5563;
    font-size: .85rem;
    font-weight: 800;
    transition: background-color .2s, border-color .2s, color .2s;
}

.service-chip:hover {
    border-color: #b2cde2;
    background: #dbe9f4;
    color: #2b6382;
}

.service-chip:focus-visible {
    outline: 2px solid #2f6fa8;
    outline-offset: 2px;
}

/* ── LTR mirror ──────────────────────────────────────────────────────────────
   The bundle positions its decorations with physical `left`/`right` because it
   was built RTL-only. English readers get the same composition mirrored. */
[dir="ltr"] .gold-circle { right: auto; left: -35px; }
[dir="ltr"] .white-circle { left: auto; right: 15%; }
[dir="ltr"] .service-arrow { left: auto; right: 20px; transform: scaleX(-1); }
[dir="ltr"] .journey-dot { right: auto; left: 0; }
[dir="ltr"] .journey-delivery { right: auto; left: -2px; }
[dir="ltr"] .footer-gold { left: auto; right: -50px; }
[dir="ltr"] .text-right { text-align: left; }

/* ── Visit-count pulse ───────────────────────────────────────────────────────
   Today's homepage visits lead, the all-time total trails behind. Sits under
   the wordmark in the brand header, so it is painted on the panel gradient. */
.home-pulse {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
    font-size: .68rem;
    font-weight: 700;
    color: #ffffffb8;
}

.home-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #7bd88f;
    box-shadow: 0 0 0 4px #7bd88f33;
    flex: none;
}

.home-pulse-total {
    padding-inline-start: 6px;
    border-inline-start: 1px solid #ffffff33;
    color: #ffffff80;
    font-weight: 500;
}

/* ── Footer contact ──────────────────────────────────────────────────────────
   The phone wears the same glass as the channel buttons beneath it, so the
   block is one set of things to tap rather than a line of text over a row of
   chips. The buttons themselves grow to a round thumb-sized target with a
   border that actually reads on the gradient. */
.contact-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding-inline: 14px 18px;
    border-radius: 999px;
    border: 1px solid #ffffff4d;
    background: #ffffff1f;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: .95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    transition: background-color .2s, transform .2s;
}

.contact-pill svg {
    flex: none;
    color: #ffffffc7;
}

.contact-pill:hover {
    background: #ffffff33;
    transform: translateY(-2px);
}

.contact-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.social-button.contact-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-color: #ffffff4d;
    background: #ffffff1f;
    transition: background-color .2s, color .2s, transform .2s;
}

/* Inverts on hover the way the white action pills beside it do, so the two
   columns answer the pointer in one voice. */
.social-button.contact-icon:hover {
    background: #fff;
    color: #123a5c;
}

.contact-pill:focus-visible,
.social-button.contact-icon:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .contact-pill,
    .social-button.contact-icon {
        transition: none;
    }

    .contact-pill:hover,
    .social-button.contact-icon:hover {
        transform: none;
    }
}

/* ── Directory shortcut ──────────────────────────────────────────────────────
   The service grid is the primary way in; this keeps the full merchant
   directory one tap away from the landing. */
.directory-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 12px 22px;
    border-radius: 999px;
    background: #123a5c;
    color: #fff;
    font-size: .85rem;
    font-weight: 900;
    transition: all .2s;
}

.directory-link:hover {
    background: #2f6fa8;
    transform: translateY(-2px);
}

/* ── "Request a product" (partials/product-request) ──────────────────────────
   Skin for the shared floating button + sheet in the landing's palette: the
   brand panel's navy for the button, its mid blue as the accent. Nothing is
   pinned to the bottom edge here, so the partial's default offset stands. */
:root {
    --req-fab-bg: #123a5c;
    --req-fab-fg: #fff;
    --req-halo: #2f6fa8;
    --req-fab-shadow: 0 6px 16px rgba(18, 58, 92, .35);
    --req-surface: var(--card);
    --req-on-surface: var(--foreground);
    --req-muted: var(--muted-foreground);
    --req-line: var(--border);
    --req-accent: #2f6fa8;
    --req-on-accent: #fff;
    --req-radius: 16px;
    --req-input-bg: var(--background);
}

/* ── Takarram band (home.blade.php) ──────────────────────────────────────────
   The landing's inline opener for partials/product-request, alongside its
   floating button; both open the same form. Design:
   .docs/product-request-takarram-redesign.html — a centred stack on phones,
   one row (icon + text at the start, CTA at the end) from 768px. Logical
   properties throughout so the LTR page mirrors for free. */
.takarram-band {
    position: relative;
    overflow: hidden;
    padding: 28px 20px;
    border-radius: 20px;
    background: linear-gradient(120deg, #16395a, #0f2c47);
    color: #fff;
    text-align: center;
}

.takarram-band::after {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    bottom: -70px;
    inset-inline-end: -60px;
    pointer-events: none;
}

.takarram-band__lead {
    position: relative;
    z-index: 1;
}

.takarram-band__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
}

.takarram-band__icon svg {
    width: 24px;
    height: 24px;
}

.takarram-band__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
}

.takarram-band__body {
    max-width: 260px;
    margin: 0 auto 18px;
    font-size: 12.5px;
    line-height: 1.6;
    opacity: .88;
}

.takarram-band__cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #0f2c47;
    font: inherit;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}

.takarram-band__cta svg {
    width: 16px;
    height: 16px;
}

.takarram-band__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}

.takarram-band__cta:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

@media (min-width: 768px) {
    .takarram-band {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 30px 40px;
        text-align: start;
    }

    .takarram-band__lead {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .takarram-band__icon {
        flex-shrink: 0;
        width: 56px;
        height: 56px;
        margin: 0;
    }

    .takarram-band__title {
        font-size: 20px;
    }

    .takarram-band__body {
        max-width: 420px;
        margin: 0;
    }

    .takarram-band__cta {
        flex-shrink: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .takarram-band__cta {
        transition: none;
    }
}