/* ============================================================
   TASKLY — PREMIUM MINIMALIST DESIGN SYSTEM
   Accent: #FF385C | Background: #FFFFFF | Text: #222222
   Font: Figtree + IBM Plex Sans Arabic
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
    --accent:        #FF385C;
    --accent-soft:   rgba(255, 56, 92, 0.10);
    --accent-hover:  #E83255;
    --bg:            #FFFFFF;
    --surface:       #FAFBFD;
    --surface-soft:  #F4F6FA;
    --text:          #222222;
    --text-muted:    #888888;
    --text-faint:    #9EA5B3;
    --border:        rgba(34, 34, 34, 0.05);
    --border-mid:    #DDE2EA;
    --shadow-xs:     0 2px 8px rgba(0, 0, 0, 0.03);
    --shadow-sm:     0 8px 28px rgba(0, 0, 0, 0.05), 0 3px 10px rgba(0, 0, 0, 0.04);
    --shadow-md:     0 12px 36px rgba(0, 0, 0, 0.07), 0 6px 16px rgba(0, 0, 0, 0.04);
    --shadow-lg:     0 16px 46px rgba(0, 0, 0, 0.09), 0 8px 18px rgba(0, 0, 0, 0.05);
    --shadow-xl:     0 26px 72px rgba(0, 0, 0, 0.12);
    --radius-sm:     12px;
    --radius-md:     20px;
    --radius-lg:     30px;
    --radius-xl:     36px;
    --radius-pill:   999px;
    --header-h:      82px;
    --bottom-nav-h:  72px;
    --ease-spring:   cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: 'Figtree', 'IBM Plex Sans Arabic', sans-serif !important;
    transition: height 0.3s var(--ease-out), width 0.3s var(--ease-out), max-height 0.3s var(--ease-out);
}

html {
    scroll-behavior: smooth;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    line-height: 1.6;
}

/* Force weight and font on all text elements */
h1, h2, h3, h4, h5, h6, p, span, div, button, input, textarea, select, label {
    font-family: 'Figtree', 'IBM Plex Sans Arabic', sans-serif !important;
    font-weight: 500 !important;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }

/* ── Placeholders ──────────────────────────────────────────── */
::placeholder { color: var(--text-faint) !important; font-weight: 400 !important; opacity: 1; }

/* ── Inputs: hide number spinners ─────────────────────────── */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* ── Focus outline ─────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   HEADER
   ============================================================ */
.glass-header {
    position: sticky;
    top: 0;
    height: var(--header-h);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
    animation: slideDownHeader 0.6s var(--ease-out) both;
}

@keyframes slideDownHeader {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2.5rem;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    position: relative;
}

.header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
}

.header-logo img {
    height: 36px;
}
.header-logo:hover img { /* No hover effect */ }

/* Centered nav pills */
.header-nav-groups.centered {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-right-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* ── Pill groups ─────────────────────────────────────────── */
.header-pill {
    display: flex;
    background: var(--surface);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    overflow: hidden;
    padding: 2px; /* Small padding for pill-in-pill effect */
    gap: 2px;
}

.pill-btn {
    background: transparent;
    border: none;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-muted);
    transition: all 0.2s var(--ease-out);
    min-height: 36px;
    white-space: nowrap;
    border-radius: var(--radius-pill) !important; /* Force pill shape */
}

.pill-btn:not(:last-child) { border-right: none; } /* Remove divider for pure pill look */

.glass-header .pill-btn:hover:not(.active):not(.highlight) { background: transparent !important; color: var(--text) !important; }
.glass-header .pill-btn.active:hover { background: var(--text) !important; color: #fff !important; }
.pill-btn:hover { background: var(--accent-hover); color: #fff; }

.pill-btn.active {
    background: var(--text);
    color: #fff;
    box-shadow: var(--shadow-xs);
}

.pill-btn.highlight {
    background: var(--text);
    color: #fff;
    border-radius: var(--radius-pill);
    padding: 0.6rem 1.4rem;
}
.glass-header .pill-btn.highlight:hover { background: var(--accent) !important; color: #fff !important; }
.pill-btn.highlight:hover { background: var(--accent-hover); }

/* ── Auth button wrapper ─────────────────────────────────── */
.auth-btn-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ── Avatar ─────────────────────────────────────────────── */
.header-avatar-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    border: 1.5px solid var(--border-mid);
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.header-avatar-wrapper:hover { /* No hover effect */ }

.header-avatar-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* ── Dropdown ────────────────────────────────────────────── */
.avatar-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: none;
    flex-direction: column;
    min-width: 180px;
    overflow: hidden;
    z-index: 1001;
}
.avatar-dropdown.show { display: flex; }

.dropdown-item {
    padding: 0.9rem 1.25rem;
    text-align: left;
    background: none;
    border: none;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    color: var(--text);
    transition: background 0.15s ease;
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
}
.dropdown-item:hover { background: var(--surface); }

/* ============================================================
   CATEGORY BAR (Search Hero Area)
   ============================================================ */
.category-bar {
    background: transparent;
    padding: 2rem 0 2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    border-bottom: none;
}

#inline-search-container {
    width: 100%;
    max-width: 760px;
    padding: 0 1.5rem;
    margin: 0 auto;
}

/* Universal Search Input Wrapper */
.search-input-wrapper {
    height: 76px !important;
    border: 1px solid var(--border) !important;
    background: #fff !important;
    border-radius: var(--radius-pill) !important;
    padding: 0 2rem !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.3s var(--ease-out) !important;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: text;
    width: 100%;
}

.search-input-wrapper:focus-within {
    box-shadow: var(--shadow-md) !important;
    border-color: var(--accent) !important;
    transform: scale(1.05) !important;
}

.search-input-wrapper input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    color: var(--text) !important;
    letter-spacing: 0;
    font-family: inherit !important;
    width: 100%;
}

/* Category pills container */
.category-wrapper {
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* Add subtle masks for better scroll feel */
.category-wrapper::before,
.category-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.category-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--bg), rgba(255,255,255,0));
}
.category-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--bg), rgba(255,255,255,0));
}

.category-scroll {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.5rem 1.5rem;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 auto;
    width: max-content;
    max-width: 100%;
}
.category-scroll::-webkit-scrollbar { display: none; }

.category-pill {
    padding: 0.82rem 1rem;
    background: #fff;
    border: 1px solid #EDEFF5;
    border-radius: var(--radius-pill);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: normal;
    cursor: pointer;
    transition: all 0.24s var(--ease-out);
    flex: 0 0 138px;
    color: #484848;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: none;
}

.category-pill.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: none;
    transform: none;
}

/* Card base style */
.card {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.28s var(--ease-out), border-color 0.28s var(--ease-out), height 0.3s var(--ease-out), max-height 0.3s var(--ease-out);
    display: flex;
    flex-direction: column;
    text-align: center;
    cursor: pointer;
    padding: 0;
    width: 100%;
    will-change: transform, box-shadow, border-color;
    backface-visibility: hidden;
}

/* Card hover: Immediate response, consistent thickness */
.card:hover {
    box-shadow: var(--shadow-sm) !important;
    transform: none;
}

.service-card {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    gap: 10px;
}

.service-card:hover {
    box-shadow: none !important;
    transform: none;
}

.card.service-card.pinned {
    border-color: transparent !important;
    background: transparent;
    box-shadow: none !important;
}
.card.request-card.pinned {
    border-color: rgba(255, 215, 0, 0.42) !important;
    box-shadow: 0 12px 32px rgba(255, 215, 0, 0.2), 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

.payment-pill {
    background: #222222 !important;
    color: #fff !important;
    padding: 0.62rem 1.1rem;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0.35rem;
    border: none !important;
}

.pill-btn.highlight {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: var(--radius-pill);
}

.modal-submit-btn, .action-btn.call-btn, .action-btn.chat-btn, .action-btn.share-btn {
    background: var(--accent) !important;
    color: #fff !important;
}
.category-pill.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.category-pill:hover:not(.active) {
    background: var(--surface-soft);
    color: var(--text);
    border-color: var(--border-mid);
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2.5rem;
}

.grid-wrapper { width: 100%; padding-top: 1.25rem; }

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2.5rem;
    padding-bottom: 6rem;
    align-items: start;
    grid-auto-flow: dense;
}

/* Bento-style sizing (Apple feel) */
.card.wide { grid-column: span 2; }
.card.tall { grid-row: span 2; }

.grid-container.chat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    /* MOBILE FIX: Chat grid 1 column on mobile for full width */
    .grid-container.chat-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .grid-container.chat-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   HOME SECTION — Hero + Marketing Flow
   ============================================================ */
.home-section {
    min-height: calc(100vh - var(--header-h));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 2rem 2rem 5rem; /* Removed var(--header-h) since header is sticky */
    margin-top: 0;
}

.home-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2rem;
    width: 100%;
    max-width: 880px;
    margin: 4rem auto 0; /* Space below header */
}

/* Hero eyebrow */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-pill);
    margin-bottom: -0.5rem;
    animation: fadeInUp 0.6s var(--ease-out) both;
}

.hero-title {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.0;
    color: var(--text);
    text-align: center;
    width: 100%;
    animation: fadeInUp 0.7s 0.08s var(--ease-out) both;
}

.hero-title .accent-dot { color: var(--accent); }

/* Rotating subtitle */
.quote-container {
    height: 52px;
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeInUp 0.7s 0.16s var(--ease-out) both;
}

.hero-quote {
    position: absolute;
    width: 100%;
    margin: 0;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 500;
    color: var(--text-muted);
    opacity: 0;
    transform: translateY(24px);
    transition: all 0.7s var(--ease-spring);
    text-align: center;
}
.hero-quote.active  { opacity: 1; transform: translateY(0); }
.hero-quote.exit    { opacity: 0; transform: translateY(-24px); }

/* Hero search */
.hero-search-wrap {
    width: 100%;
    max-width: 600px;
    z-index: 10;
}

.hero-search-wrap .search-input-wrapper {
    height: 76px !important;
    border-width: 1px !important;
    border-color: var(--border) !important;
    background: #fff !important;
    border-radius: var(--radius-pill) !important;
    padding: 0 2rem !important;
    box-shadow: var(--shadow-md) !important;
    transition: all 0.4s var(--ease-spring) !important;
}

.hero-search-wrap .search-input-wrapper:focus-within {
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--accent) !important;
    transform: scale(1.05) !important;
}

.hero-search-wrap .search-input-wrapper input {
    font-size: 1.3rem !important;
    font-weight: 500 !important;
    font-family: inherit !important;
}

/* Hero CTA buttons */
.hero-ctas {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 0.7s 0.32s var(--ease-out) both;
}

.hero-explore-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 1rem 2.2rem;
    border-radius: var(--radius-pill);
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, background 0.2s ease;
    box-shadow: 0 4px 18px rgba(255, 88, 93, 0.30);
    min-height: 52px;
}
.hero-explore-btn:hover {
    background: var(--accent-hover);
}

.hero-explore-btn.secondary {
    background: #fff;
    color: var(--text);
    border: 1.5px solid var(--border-mid);
    box-shadow: var(--shadow-xs);
}
.hero-explore-btn.secondary:hover {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
    color: #fff;
}

/* ── Services Feature Grid ─────────────────────────────────── */
.home-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    width: 100%;
    max-width: 800px;
    margin: 1rem auto 0;
    animation: fadeInUp 0.7s 0.4s var(--ease-out) both;
}

.service-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s var(--ease-out);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.service-tile:hover {
    background: #fff;
    border-color: var(--border-mid);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}
.service-tile-emoji { font-size: 2rem; line-height: 1; }
.service-tile-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* ── Social Proof / Testimonials ──────────────────────────── */
.home-testimonials {
    width: 100%;
    max-width: 900px;
    margin: 4rem auto 0;
    text-align: center;
}

.testimonials-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 2rem;
}

.testimonials-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.testimonial-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2rem;
    text-align: center;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 280px; /* Fixed card height for uniformity */
    justify-content: flex-start;
}

.testimonial-stars {
    color: var(--accent);
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.testimonial-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 1rem;
    height: 80px; /* Static height for text block */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-shrink: 0;
}

.testimonial-author {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.02em;
    height: 40px; /* Static height for author info */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: auto; /* Push to the very bottom of the card */
    flex-shrink: 0;
}

/* ── Carousel Styles ────────────────────────────────────── */
.testimonials-viewport {
    width: 100%;
    overflow: hidden;
    margin-top: 3rem;
}

.testimonials-track {
    display: flex;
    transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
    width: 300%; /* Three groups of 3 */
}

.testimonials-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    width: 33.333%;
    flex-shrink: 0;
    padding: 0.5rem;
}

@media (max-width: 768px) {
    .testimonials-track { width: 600%; } /* 6 individual cards */
    .testimonials-group { 
        grid-template-columns: 1fr; 
        width: 100%;
        display: block;
    }
    .testimonial-card { margin-bottom: 1.25rem; width: 100%; }
}

/* ── Final CTA zone ────────────────────────────────────────── */
.home-final-cta {
    width: 100%;
    max-width: 600px;
    margin: 4rem auto 0;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 3.5rem 2.5rem;
}

.home-final-cta h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--text);
    margin-bottom: 0.75rem;
    line-height: 1.15;
}

.home-final-cta p {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Card image */
.card-image-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3;
    position: relative;
    background-color: var(--surface-soft);
    flex-shrink: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.service-image-shell {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: #F2F2F2;
}

.service-card.pinned .service-image-shell {
    background: rgba(255, 56, 92, 0.06);
    border: 2.2px solid var(--accent);
    box-shadow: 0 12px 32px rgba(255, 56, 92, 0.18), 0 4px 14px rgba(0, 0, 0, 0.04);
}

.image-clip {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}

.service-image-shell .image-clip {
    border-radius: var(--radius-lg);
}

.service-card.pinned .service-image-shell .image-clip {
    border-radius: calc(var(--radius-lg) - 2.2px);
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-content {
    padding: 1.15rem 1.15rem 1.15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
}

.service-card .card-content {
    padding: 0;
    gap: 4px;
}

.seller-name-upper {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(34, 34, 34, 0.5);
    letter-spacing: 0.08em;
    width: 100%;
    display: block;
}

.card-title {
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
}

.service-card .card-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: center;
    color: #222222;
}

.card-footer {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.3rem;
}

/* Price pill */
.payment-pill {
    background: #222222 !important;
    color: #fff;
    padding: 0.62rem 1.1rem;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0.35rem;
}

.payment-tag {
    font-family: 'Figtree', 'IBM Plex Sans Arabic', sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.currency-tag {
    font-family: 'Figtree', 'IBM Plex Sans Arabic', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    opacity: 0.74;
}

/* Internal ad pill */
.ad-pill {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    color: var(--text);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 800;
    box-shadow: var(--shadow-sm);
    z-index: 5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Floating avatar on cards */
.floating-avatar-container {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.service-meta {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.2;
    text-align: center;
}

.service-card-content-skeleton {
    align-items: center;
    padding: 0;
    gap: 4px;
    background: transparent;
}

.service-card-content-skeleton .skeleton-text {
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
}

.request-card {
    text-align: center;
}
.request-avatar-wrap {
    display: flex;
    justify-content: center;
    padding-top: 14px;
}

.request-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 18px 16px;
    gap: 0;
}

.request-card .seller-name-upper {
    margin-top: 2px;
    margin-bottom: 0;
}
.request-card .about-label,
.request-card .card-description {
    text-align: center;
}

.request-card .card-footer {
    justify-content: space-between;
    align-items: flex-end;
}

.request-card .card-title {
    font-size: 20px;
    line-height: 1.18;
    font-weight: 800;
    margin-top: 14px;
    margin-bottom: 14px;
    color: #222222;
}

.request-payment-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #222222;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    margin-top: 0;
    margin-bottom: 14px;
}

.request-posted-line {
    width: 100%;
    height: 1px;
    background: rgba(34, 34, 34, 0.06);
    margin-top: 0;
    margin-bottom: 12px;
}

.request-posted-text {
    font-size: 12px;
    font-weight: 700;
    color: rgba(34, 34, 34, 0.46);
    text-align: center;
    line-height: 1.2;
}

.request-pin-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.26);
    color: #B8860B;
    font-size: 12px;
    font-weight: 800;
    margin-top: 12px;
    margin-bottom: 4px;
}

.request-card .seller-name-upper {
    margin-top: 4px;
    margin-bottom: 0;
}

/* ── Expandable section ────────────────────────────────────── */
.about-section {
    display: block;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.45s var(--ease-out),
                opacity 0.35s ease,
                margin 0.35s ease,
                padding 0.35s ease;
    width: 100%;
    margin-top: 0;
    text-align: left;
}

.card.expanded .about-section {
    max-height: 600px;
    opacity: 1;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(34, 34, 34, 0.06);
}

.request-action-btn {
    display: flex !important;
    max-height: 0;
    opacity: 0;
    overflow: visible;
    transition: max-height 0.45s var(--ease-out),
                opacity 0.35s ease,
                margin 0.35s ease;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    width: 100%;
    pointer-events: none;
}

.card.expanded .request-action-btn {
    max-height: 100px;
    opacity: 1;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    pointer-events: auto;
}

.about-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(34, 34, 34, 0.62);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.6rem;
    display: block;
    text-align: left;
}

.card-description {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.65;
    text-align: left;
}

/* ── Chat card ─────────────────────────────────────────────── */
.card.chat-card {
    height: 88px;
    min-height: 88px;
    max-height: 88px;
    flex-direction: row;
    align-items: center;
    padding: 0 1.5rem;
    text-align: left;
    border-radius: var(--radius-xl);
}

.card.chat-card .card-content {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 0 0 0 1.25rem;
    overflow: hidden;
    align-items: flex-start;
}

.card.chat-card .card-content > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Request header ────────────────────────────────────────── */
.request-header {
    padding: 1.5rem 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

/* ── Manage buttons ────────────────────────────────────────── */
.manage-btn-group {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

.manage-btn {
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.7rem 1rem;
    border-radius: var(--radius-pill);
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.22s var(--ease-out);
    flex: 1;
    min-width: 80px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.manage-btn:hover {
    background: var(--accent-hover);
    color: #fff;
}

.manage-btn.delete { border-color: #ff4444; color: #ff4444; }
.manage-btn.delete:hover { background: var(--accent-hover); color: #fff; border-color: var(--accent-hover); }

.manage-btn.boost-btn {
    background: var(--text);
    color: #fff;
    border: none;
    width: 100%;
    margin-top: 0.5rem;
    flex: none;
}
.manage-btn.boost-btn:hover { background: var(--accent-hover); }

.manage-btn.boost-btn.disabled {
    background: var(--border) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Type pills (modal) ────────────────────────────────────── */
.type-pill {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    min-height: 48px;
}
.type-pill.active { background: var(--text); color: #fff; border-color: var(--text); }
.type-pill:hover:not(.active) { background: rgba(72,72,72,0.06); }

/* ============================================================
   SERVICE DETAIL VIEW
   ============================================================ */
#service-detail-section {
    padding: 2rem 1rem 5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.detail-header {
    display: flex;
    justify-content: flex-start;
    padding: 0.75rem 0 1.5rem;
}

.back-btn {
    background: #fff;
    border: 1px solid var(--border);
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
    transition: all 0.2s ease;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text);
}
.back-btn:hover { background: var(--accent-hover); color: #fff; border-color: var(--accent-hover); }

.detail-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.detail-title {
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    font-weight: 900;
    margin: 0.75rem 0 0.5rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
    max-width: 900px;
    transition: opacity 0.3s var(--ease-out), height 0.3s var(--ease-out);
}

.detail-wide-card {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    width: 100%;
    padding: 3rem;
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 3rem;
    align-items: stretch;
    text-align: center;
    transition: height 0.4s var(--ease-out), min-height 0.4s var(--ease-out);
    contain: layout;
}

.detail-main-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.detail-user-part {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.detail-username {
    font-weight: 800;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.detail-details-card {
    background: var(--surface-soft);
    padding: 3rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    width: 100%;
    transition: all 0.4s ease, height 0.4s var(--ease-out), min-height 0.4s var(--ease-out);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    contain: layout;
    will-change: height;
}

.detail-label {
    margin: 0 0 1rem 0;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    font-weight: 700;
    text-align: center;
    transition: all 0.3s var(--ease-out);
}

.detail-description {
    margin: 0;
    color: var(--text);
    line-height: 1.8;
    font-size: 1.1rem;
    white-space: pre-line;
    text-align: center;
    width: 100%;
    transition: opacity 0.3s var(--ease-out), height 0.3s var(--ease-out);
}

.detail-action-part {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    min-width: 200px;
}

.detail-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 1.5rem;
    width: 100%;
}

.detail-bottom-meta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.detail-review-jump {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: none;
    border: none;
    padding: 0;
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 800;
    cursor: pointer;
}

.detail-review-jump svg {
    width: 16px;
    height: 16px;
}

.detail-posted-meta {
    width: 100%;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    font-style: italic;
    color: #888;
    text-align: center;
}

#detail-reviews-section {
    width: 100%;
}

.detail-reviews-card {
    width: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.detail-reviews-header {
    text-align: center;
}

.detail-reviews-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.detail-reviews-title .service-rating-text {
    margin-inline-start: 0.1rem;
}

.detail-reviews-rating,
.detail-reviews-count {
    font-size: 1.05rem;
    font-weight: 700;
}

.detail-reviews-empty,
.detail-review-compose-note {
    margin: 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.detail-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.detail-review-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 0.9rem;
    align-items: start;
    padding: 1rem;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}

.detail-review-avatar {
    width: 56px;
    height: 56px;
}

.detail-review-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.detail-review-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: baseline;
    flex-wrap: wrap;
}

.detail-review-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text);
}

.detail-review-date {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
}

.detail-review-comment {
    margin: 0.1rem 0 0;
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 0.94rem;
}

.review-stars,
.detail-review-stars {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
}

.detail-review-stars {
    justify-content: flex-start;
}

.review-star-btn {
    background: none;
    border: none;
    padding: 0;
    color: rgba(34, 34, 34, 0.18);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.review-star-btn.active {
    color: var(--text);
}

.review-star-btn svg {
    width: 16px;
    height: 16px;
}

.detail-review-stars .review-star-btn {
    pointer-events: none;
    cursor: default;
}

.detail-review-compose {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 1.25rem;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: var(--shadow-xs);
}

.detail-review-compose-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    text-align: center;
}

.detail-review-compose textarea {
    width: 100%;
    min-height: 96px;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1rem 1.1rem;
    background: #fff;
    resize: vertical;
    color: var(--text);
    font-size: 0.95rem;
    outline: none;
}

.detail-review-compose textarea:focus {
    border-color: var(--accent);
}

.detail-photo-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}

.detail-photo { width: 100%; height: 100%; object-fit: cover; }

.action-btn {
    width: max-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-pill);
    border: none;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s ease;
    min-height: 48px;
    background: var(--accent);
    color: #fff;
    box-shadow: none;
}

.action-btn:hover { 
    background: var(--accent-hover) !important;
}

.chat-btn { background: var(--accent); color: #fff; }
.chat-btn:hover { 
    background: var(--accent-hover) !important;
}

.save-btn {
    background: var(--accent);
    color: #fff;
    border: none;
}
.save-btn:hover { 
    background: var(--accent-hover) !important;
}

.save-btn.active { background: var(--accent-hover) !important; }
.save-btn.active svg { fill: #fff !important; stroke: #fff !important; }

/* ============================================================
   PROFILE SECTION
   ============================================================ */
#profile-section {
    padding: 2rem 1rem;
    max-width: 1100px;
    margin: 0 auto;
}

#profile-content {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 3rem 2rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    transition: box-shadow 0.3s ease;
}

#profile-avatar-border {
    width: 110px;
    height: 110px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: visible;
}

.avatar-whiteboarder {
    --avatar-ring-padding: 3px;
    --avatar-ring-color: #fff;
    --member-badge-size: 18px;
    background: var(--avatar-ring-color);
    border-radius: 50%;
    box-shadow: 0 10px 28px rgba(0,0,0,0.08), 0 3px 10px rgba(0,0,0,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: none;
    padding: var(--avatar-ring-padding) !important;
    flex-shrink: 0;
    position: relative;
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, background 0.25s ease;
    overflow: visible;
    isolation: isolate;
}
.avatar-whiteboarder img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: none !important;
    background: #f3f4f6;
}

/* Taskly Member Style */
.avatar-whiteboarder.member-border {
    --avatar-ring-padding: 3px;
    background: linear-gradient(135deg, #FF385C, #FF5A7A, #FF385C);
    box-shadow: 0 10px 28px rgba(0,0,0,0.08), 0 3px 10px rgba(0,0,0,0.07);
}

.member-star-badge {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: var(--member-badge-size);
    height: var(--member-badge-size);
    background: linear-gradient(135deg, #FF385C, #FF5A7A, #FF385C);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
    z-index: 2;
    padding: 2px;
}

.member-star-badge .star-inner {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-star-icon {
    color: #FF385C;
    font-family: 'Material Icons Round' !important;
    font-size: calc(var(--member-badge-size) * 0.56);
    line-height: 1;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transform: translateY(-0.2px);
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
}

#profile-social-icons { margin-bottom: 1.25rem; }

/* Social icons */
.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    width: 100%;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.social-link {
    text-decoration: none !important;
    color: var(--text) !important;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    min-height: 48px;
    display: flex;
    align-items: center;
}
.social-link.disabled { color: var(--text-faint) !important; cursor: not-allowed; pointer-events: none; }
.social-link:not(.disabled):hover { opacity: 0.55; }

.social-divider { color: var(--border-mid) !important; user-select: none; font-weight: 400; }

#profile-bio-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin: 1.25rem 0;
    text-align: center;
    box-shadow: none;
}

#profile-sort {
    padding: 0.75rem 1.5rem !important;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border);
    background: #fff;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    min-height: 48px;
    color: var(--text);
}

.placeholder-avatar {
    background: var(--surface);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.placeholder-photo {
    background: var(--surface);
    color: var(--text-faint);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ============================================================
   MODALS
   ============================================================ */
.modal {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(72, 72, 72, 0.28) !important;
}

.modal-content {
    background: #fff;
    padding: 2.75rem 2rem;
    border-radius: var(--radius-xl);
    max-width: 500px;
    width: 95%;
    text-align: center;
    box-shadow: var(--shadow-xl);
    position: relative;
    animation: slideUp 0.4s var(--ease-spring) both;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(32px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-content h2 {
    font-weight: 900;
    font-size: 1.65rem;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    color: var(--text);
}

.modal-content input,
.modal-content textarea,
.modal-content select {
    width: 100%;
    padding: 1rem 1.25rem;
    margin: 0.5rem 0;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-weight: 600;
    background: var(--surface);
    outline: none;
    color: var(--text);
    transition: all 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
    text-align: center;
}

.modal-content select {
    color: var(--text);
}

.modal-content select:has(option[value=""]:checked) {
    color: var(--text-faint);
}

.modal-content input::placeholder,
.modal-content textarea::placeholder {
    color: var(--text-faint);
    font-weight: 400;
    font-size: 0.95rem;
    text-align: center;
}

.modal-content input:focus,
.modal-content textarea:focus,
.modal-content select:focus {
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 88, 93, 0.08);
}

.close-btn {
    position: absolute !important;
    top: 1.25rem !important;
    right: 1.25rem !important;
    z-index: 100 !important;
    line-height: 1 !important;
    font-size: 1.4rem !important;
    font-weight: 300 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 1px solid var(--border) !important;
    background: #fff !important;
    color: var(--text) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
    box-shadow: var(--shadow-xs) !important;
}
.close-btn:hover {
    background: var(--accent-hover) !important;
    color: #fff !important;
    border-color: var(--accent-hover) !important;
}
.close-btn:active { transform: scale(0.9) !important; }

.modal-submit-btn {
    width: 100%;
    padding: 1.1rem;
    margin-top: 1.25rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s var(--ease-out);
    min-height: 52px;
    box-shadow: 0 4px 16px rgba(255,88,93,0.28);
}
.modal-submit-btn:hover {
    background: var(--accent-hover);
}

/* Boost / ad btn variant */
.modal-submit-btn.ad-btn {
    font-size: 1.4rem;
    height: 54px;
    width: auto;
    margin: 0;
    background: var(--text);
    border-radius: var(--radius-lg);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.75rem;
}
.modal-submit-btn.ad-btn:hover { background: var(--accent-hover); }

/* Input group (prefix/suffix) */
.modal-input-group {
    display: flex;
    align-items: center;
    background: var(--bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    padding: 1.25rem 1.5rem;
    transition: all 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
    margin: 1rem 0;
    cursor: text;
    justify-content: center;
    gap: 0;
}
.modal-input-group:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(255, 88, 93, 0.08);
}

.modal-input-group input {
    border: none !important;
    margin: 0 !important;
    padding: 0 0.2rem !important;
    background: transparent !important;
    text-align: left;
    box-shadow: none !important;
    width: auto !important;
    min-width: 20px;
    outline: none !important;
    font-weight: 500 !important;
    font-size: 1.2rem !important;
    color: var(--text) !important;
    font-family: inherit !important;
    transform: translateY(-1px) !important;
}

.modal-input-group .prefix,
.modal-input-group .suffix {
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color 0.2s ease;
    user-select: none;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
}
.modal-input-group:focus-within .prefix,
.modal-input-group:focus-within .suffix { color: var(--text); }

/* File input */
.file-input-wrapper { position: relative; margin-top: 1rem; width: 100%; }

.file-input-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.75rem;
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-muted);
    background: var(--surface);
    min-height: 80px;
}
.file-input-label:hover {
    border-color: var(--text);
    background: #fff;
    color: var(--text);
}
.file-input-label svg { width: 28px; height: 28px; }

/* Price wrapper */
#create-price-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.25rem;
}

#create-price-input {
    width: auto !important;
    min-width: 120px;
    text-align: center !important;
    padding: 1rem 0.5rem !important;
}

/* ── Edit profile modal ──────────────────────────────────── */
#edit-profile-modal .modal-content { max-width: 440px; }

.edit-profile-avatar-wrapper {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 1.5rem;
    cursor: pointer;
}

.edit-profile-avatar-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}

.edit-profile-avatar-wrapper .overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.32);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.edit-profile-avatar-wrapper:hover .overlay { opacity: 1; }
.edit-profile-avatar-wrapper .overlay svg { color: #fff; width: 26px; height: 26px; }

/* ============================================================
   CUSTOM DIALOG
   ============================================================ */
.custom-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(72,72,72,0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.dialog-box {
    background: #fff;
    width: 90%;
    max-width: 380px;
    border-radius: var(--radius-xl);
    padding: 2.25rem 2rem;
    text-align: center;
    box-shadow: var(--shadow-xl);
    animation: slideUp 0.35s var(--ease-spring) both;
}

.dialog-title {
    font-size: 1.3rem;
    font-weight: 900;
    margin-bottom: 0.7rem;
    color: var(--text);
    letter-spacing: -0.02em;
}

.dialog-msg {
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.dialog-btns { display: flex; gap: 0.75rem; }

.dialog-btn {
    flex: 1;
    padding: 0.9rem;
    border-radius: var(--radius-pill);
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    min-height: 48px;
}

.dialog-btn.confirm { background: var(--accent); color: #fff; }
.dialog-btn.confirm:hover { background: var(--accent-hover); }
.dialog-btn.cancel  { background: var(--surface); color: var(--text); }
.dialog-btn.cancel:hover  { background: var(--accent-hover); color: #fff; }

/* ============================================================
   CHAT MODAL
   ============================================================ */
#chat-modal {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(72,72,72,0.2) !important;
}

/* ============================================================
   SKELETON / LOADERS
   ============================================================ */
.skeleton-loader {
    width: 100%;
    height: 360px;
    background: linear-gradient(90deg, #f5f5f5 25%, #ebebeb 50%, #f5f5f5 75%);
    background-size: 400% 100%;
    border-radius: var(--radius-xl);
    animation: shimmer 1.6s infinite ease-in-out;
    border: 1px solid var(--border);
}

.skeleton-card {
    background: #fff;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.skeleton-card.service-card {
    background: #fff;
    border: none;
    box-shadow: none;
    overflow: visible;
}

.skeleton-card.request-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.skeleton-img {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f5f5f5 25%, #ebebeb 50%, #f5f5f5 75%);
    background-size: 400% 100%;
    animation: shimmer 1.6s infinite ease-in-out;
}

.skeleton-content {
    padding: 2rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.request-card .skeleton-pill {
    height: 36px;
    width: 110px;
    margin-top: 0;
}

.request-seller-skeleton {
    margin-top: 4px;
    margin-bottom: 0;
}

.request-title-skeleton {
    margin-top: 14px;
    margin-bottom: 14px;
}

.request-pill-skeleton {
    margin-bottom: 14px;
}

.request-posted-skeleton {
    margin-bottom: 0;
}

.request-skeleton-about {
    width: 100%;
    margin-top: 14px;
    text-align: center;
}

.request-skeleton-about .about-label {
    margin-bottom: 0.9rem;
    text-align: center;
}

.skeleton-text {
    height: 11px;
    background: var(--surface);
    border-radius: 6px;
    width: 80%;
    animation: shimmer 1.6s infinite ease-in-out;
    background-size: 400% 100%;
    background-image: linear-gradient(90deg, #f5f5f5 25%, #ebebeb 50%, #f5f5f5 75%);
}

.skeleton-text.title { height: 18px; width: 55%; }
.skeleton-pill { height: 32px; width: 90px; background: var(--surface); border-radius: 20px; margin-top: 0.4rem; animation: shimmer 1.6s infinite ease-in-out; background-size: 400% 100%; background-image: linear-gradient(90deg, #f5f5f5 25%, #ebebeb 50%, #f5f5f5 75%); }
.skeleton-icons { animation: pulse 1.5s infinite ease-in-out; }

@keyframes shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

@keyframes pulse {
    0%, 100% { opacity: 0.55; }
    50%       { opacity: 1; }
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state-card {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 3.5rem 2rem;
    text-align: center;
    max-width: 480px;
    margin: 2rem auto;
    box-shadow: var(--shadow-xs);
    animation: slideUp 0.4s var(--ease-out) both;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.empty-state-icon { font-size: 3.5rem; margin-bottom: 0.35rem; color: var(--text-faint); display: block; }
.empty-state-title { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.empty-state-desc { color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; }

/* ============================================================
   LOADERS
   ============================================================ */
.loader {
    grid-column: 1 / -1;
    padding: 2.5rem;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.95rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.route-loader-overlay {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#profile-section.route-loading > :not(.route-loader-overlay) {
    display: none !important;
}

.btn-loading {
    position: relative;
}

.bouncing-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.bouncing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: bouncing-dot 0.9s infinite ease-in-out;
}

.bouncing-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.bouncing-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

.btn-loading .bouncing-dots {
    position: absolute;
    inset: 0;
    color: inherit;
}

.loader .bouncing-dots,
.loading-dots .bouncing-dots {
    margin-left: 0.45rem;
}

@keyframes bouncing-dot {
    0%, 80%, 100% { transform: translateY(0) scale(0.9); opacity: 0.45; }
    40% { transform: translateY(-4px) scale(1); opacity: 1; }
}

/* ============================================================
   SEARCH MODAL (overlay)
   ============================================================ */
#search-bar-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(72,72,72,0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 2500;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

#search-bar-container.show {
    display: flex;
    opacity: 1;
}

.search-modal-content {
    background: transparent;
    width: 90%;
    max-width: 760px;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    transform: translateY(24px);
    transition: transform 0.4s var(--ease-out);
    position: relative;
    text-align: center;
}

#search-bar-container.show .search-modal-content { transform: translateY(0); }

.search-modal-title {
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: #fff;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

.search-modal-close {
    position: fixed;
    top: 2rem;
    right: 2rem;
    font-size: 2rem;
    font-weight: 200;
    cursor: pointer;
    color: rgba(255,255,255,0.7);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: rgba(255,255,255,0.12);
    border-radius: 50%;
    backdrop-filter: blur(10px);
}
.search-modal-close:hover { color: #fff; background: rgba(255,255,255,0.22); transform: scale(1.1); }

.search-results-header {
    text-align: center;
    font-style: italic;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* ============================================================
   FLOATING BUTTONS
   ============================================================ */
#floating-chat-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--text);
    color: #fff;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, background 0.2s ease !important;
}
#floating-chat-btn:hover {
    background: var(--accent);
    opacity: 0.9;
}

/* ── Back to top ──────────────────────────────────────────── */
#back-to-top-btn {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: var(--text);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    z-index: 1000;
    border: 1px solid var(--border);
    transition: all 0.28s var(--ease-out);
}
#back-to-top-btn:hover { transform: translateX(-50%); background: var(--accent-hover); color: #fff; border-color: var(--accent-hover); }
#back-to-top-btn:active { transform: translateX(-50%) scale(0.9); }

/* ── Buttons: shared active micro ─────────────────────────── */
.back-btn:active,
.close-btn:active,
.dialog-btn:active,
.action-btn:active,
.manage-btn:active { opacity: 0.7; }

/* ============================================================
   FOOTER
   ============================================================ */
.minimal-footer {
    margin-top: 5rem;
    padding: 3.5rem 2rem;
    background: transparent;
    border-top: 1px solid var(--border);
}

.footer-content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.footer-links {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    transition: color 0.18s ease;
}
.footer-link:hover { color: var(--text); }

.footer-copyright {
    color: var(--text-faint);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* ============================================================
   BOTTOM NAVIGATION (Mobile)
   ============================================================ */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-top: 1px solid var(--border);
    z-index: 1000;
    padding: 0.4rem 0 env(safe-area-inset-bottom, 0.4rem);
    justify-content: space-around;
    align-items: center;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    color: var(--text-faint);
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s var(--ease-out);
    padding: 0.5rem 1rem;
    min-width: 56px;
    min-height: 52px;
    border-radius: var(--radius-md);
}

.nav-item.active { color: var(--accent); }
.nav-item:hover  { color: var(--accent-hover); }
.nav-item:active { transform: scale(0.9); }

.nav-item svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    transition: stroke 0.2s ease;
}

/* Create button: accent ring */
#nav-create {
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 50%;
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    padding: 0;
    margin: 0 0.25rem;
}
#nav-create.active, #nav-create:hover { background: var(--accent); color: #fff; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideDownFade {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes cardEnter {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.slide-down { animation: slideDownFade 0.4s var(--ease-out) forwards; }
.card-enter { animation: cardEnter 0.5s var(--ease-out) forwards; }

/* ============================================================
   SPLASH AD
   ============================================================ */
#splash-ad { display: none; }

/* ============================================================
   RECAPTCHA BADGE HIDING
   ============================================================ */
.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============================================================
   SMART APP BANNER (Android)
   ============================================================ */
#android-app-banner {
    font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}

#android-app-banner * {
    font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}

@media (max-width: 768px) {
    /* Adjust body padding when banner is visible */
    body.has-app-banner {
        padding-top: 80px !important;
    }
    
    /* Ensure banner is above everything except modals */
    #android-app-banner {
        z-index: 10000 !important;
    }
}

/* ============================================================
   MOBILE CREATE TYPE BOTTOM SHEET
   ============================================================ */
.bottom-sheet-content {
    background: #fff;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0));
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    transform: translateY(100%);
    transition: transform 0.3s var(--ease-out);
    box-shadow: var(--shadow-xl);
}

#create-type-modal.show .bottom-sheet-content {
    transform: translateY(0);
}

.bottom-sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--border-mid);
    border-radius: 2px;
    margin: 0 auto 1.5rem;
}

.create-type-option {
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
    min-height: 62px;
}

.create-type-option:hover {
    background: #fff;
    border-color: var(--accent);
    transform: translateX(4px);
}

.create-type-option:active {
    transform: scale(0.98);
}

.create-type-option svg {
    stroke: var(--accent);
    flex-shrink: 0;
}

.create-type-cancel {
    width: 100%;
    padding: 1rem;
    background: #fff;
    border: 1.5px solid var(--border-mid);
    border-radius: var(--radius-lg);
    margin-top: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-muted);
    min-height: 56px;
}

.create-type-cancel:hover {
    background: var(--surface);
    color: var(--text);
}

.create-type-cancel:active {
    transform: scale(0.98);
}

/* ============================================================
   RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 1000px) {
    .detail-wide-card { grid-template-columns: 1fr; text-align: center; gap: 1.75rem; }
    .detail-desc-part  { border: none; padding: 0; }
    .detail-gallery    { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    /* Remove top header on mobile — app uses bottom nav */
    .glass-header { display: none !important; }

    /* MOBILE FIX: Chat grid should be 1 column for full width */
    .grid-container.chat-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 0 1rem 5rem 1rem !important;
    }

    body { padding-bottom: var(--bottom-nav-h); overflow-x: hidden; width: 100vw; }
    html { overflow-x: hidden; }

    /* MOBILE FIX: Prevent horizontal overflow on all containers */
    * { max-width: 100vw; }
    main, .home-section, .category-bar, #inline-search-container { max-width: 100% !important; }
    
    /* MOBILE FIX: Search bar scaling */
    .search-input-wrapper {
        height: 62px !important;
        padding: 0 1.25rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .search-input-wrapper input {
        font-size: 1rem !important;
        width: 100% !important;
    }

    .hero-search-wrap .search-input-wrapper {
        height: 62px !important;
        padding: 0 1.25rem !important;
    }

    .hero-search-wrap .search-input-wrapper input {
        font-size: 1.1rem !important;
    }

    .bottom-nav { display: flex; }
    
    /* MOBILE FIX: Hide text labels in bottom nav, show only icons */
    .nav-item span { display: none !important; }
    .nav-item { 
        min-width: auto !important; 
        padding: 0.75rem !important;
        color: var(--text-faint) !important;
    }
    .nav-item.active { 
        color: var(--accent) !important; 
    }
    .nav-item.active svg { 
        stroke: var(--accent) !important; 
    }
    .nav-item:hover { color: var(--accent-hover) !important; }
    
    /* MOBILE FIX: Remove circle background from Create button */
    #nav-create {
        background: transparent !important;
        color: var(--text-faint) !important;
        border-radius: var(--radius-md) !important;
        width: auto !important;
        height: auto !important;
        min-width: auto !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 0.75rem !important;
    }
    #nav-create.active { color: var(--accent) !important; }
    #nav-create:hover { color: var(--accent-hover) !important; }

    main { margin: 0.5rem auto; padding: 0 1rem; }

    /* Home */
    .home-section { padding: 4rem 0.5rem 4rem; }
    .home-hero-content { padding: 0 0.5rem !important; }
    .hero-title { 
        letter-spacing: -0.03em; 
        white-space: nowrap; 
        font-size: 2.4rem !important; 
        text-align: center !important;
        width: 100% !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
    }
    .hero-quote { font-size: 1.1rem !important; }
    .home-final-cta { padding: 2.5rem 1.5rem; border-radius: var(--radius-xl); }
    .home-services-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
    
    /* MOBILE FIX: Hide reviews section on mobile to save vertical space */
    .home-testimonials { display: none !important; }
    .testimonials-row { grid-template-columns: 1fr; }

    /* Grid */
    /* MOBILE FIX: Service and Request cards show 1 per row for better visibility */
    .grid-container {
        grid-template-columns: 1fr !important;
        padding: 0 0 5rem 0 !important;
        gap: 1.25rem !important;
        align-items: center !important;
    }

    /* MOBILE FIX: Chat cards take full width with proper padding */
    body .grid-container.chat-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 0 1rem 5rem 1rem !important;
        display: grid !important;
    }

    body .card.chat-card {
        padding: 0 1.25rem !important;
        height: 82px !important;
        min-height: 82px !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body .card.chat-card .card-content {
        padding-left: 1rem !important;
    }

    /* MOBILE FIX: Cards sized properly - service/request cards have max-width, chat cards full width */
    .card:not(.chat-card) { margin: 0 auto !important; max-width: 440px !important; width: 100% !important; }

    /* Cards */
    .card-title { font-size: 1.1rem !important; line-height: 1.3 !important; }
    .seller-name-upper { font-size: 0.65rem !important; }

    /* Category bar - MOBILE FIX: Add top margin to move content away from screen top */
    .category-bar { padding: 0.75rem 0 0rem; top: 0; gap: 0.5rem !important; margin-top: 1.5rem !important; }
    .category-scroll { padding: 0.25rem 1rem !important; }
    .category-pill { font-size: 0.78rem !important; padding: 0.45rem 1rem !important; }
    
    /* MOBILE FIX: Remove gradient masks that cause white shadow on first pill */
    .category-wrapper::before,
    .category-wrapper::after { display: none !important; }

    #inline-search-container { max-width: 100%; padding: 0 1rem; }
    
    /* MOBILE FIX: Add top padding to services/requests sections */
    #services-section, #requests-section { padding-top: 1.5rem !important; }
    
    /* MOBILE FIX: Minimal spacing between categories and cards */
    .grid-wrapper { padding-top: 0rem !important; }

    /* Detail */
    .detail-title { font-size: 1.7rem !important; padding: 0 0.5rem; }
    .detail-wide-card { padding: 1.5rem 1rem; border-radius: var(--radius-lg); }
    #service-detail-section { padding: 1rem 0.5rem 5rem; }
    .detail-photo-wrapper { border-radius: var(--radius-md); }
    .detail-gallery { grid-template-columns: 1fr; gap: 0.75rem; padding: 0; }
    
    /* MOBILE FIX: Move price under details */
    .detail-action-part .payment-pill { display: none !important; }
    .mobile-price-pill { display: flex !important; }

    /* Touch targets */
    .pill-btn, .category-pill, .manage-btn, .action-btn,
    .dialog-btn, .modal-submit-btn, .social-link {
        min-height: 48px !important;
        min-width: 48px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Profile */
    #profile-section > div:nth-of-type(2) { flex-direction: column; width: 100%; }
    #profile-sort { width: 100%; }

    /* Hide desktop-only elements */
    #manage-services-tab,
    #manage-requests-tab,
    #create-service-tab,
    #create-request-tab,
    #floating-chat-btn { display: none !important; }

    .header-pill:has(#manage-services-tab),
    .header-pill:has(#create-service-tab) { display: none !important; }
    
    /* Floating chat on mobile hides — bottom nav has chats tab */
    #back-to-top-btn { bottom: calc(var(--bottom-nav-h) + 1rem); }

    /* Skeleton */
    .skeleton-loader { height: 320px; }
}

@media (max-width: 600px) {
    .grid-container { grid-template-columns: 1fr; }
    .category-wrapper { max-width: 100%; }
    .home-services-grid { grid-template-columns: repeat(3, 1fr); }
    /* MOBILE FIX: Keep hero CTAs in same row with text on one line, match search width */
    .hero-ctas { 
        flex-direction: row; 
        align-items: center; 
        gap: 0.75rem;
        width: 100%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .hero-explore-btn { 
        width: auto; 
        flex: 1; 
        min-width: 0; 
        justify-content: center; 
        padding: 0.9rem 0.75rem; 
        font-size: 0.82rem; 
        white-space: nowrap;
    }
    .modal-content { padding: 2.25rem 1.5rem; }
}

/* ============================================================
   NO-ANIM UTILITY (cancels any entrance animation)
   ============================================================ */
.no-anim {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.centered-pills {
    justify-content: center !important;
    flex-wrap: wrap;
    padding: 1rem 0;
}

.profile-post-controls {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
}

.profile-search-container {
    width: 100%;
    background: white;
    border: 1px solid rgba(72,72,72,0.10);
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(72,72,72,0.06);
}

.profile-filter-tabs {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sort-select {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(72,72,72,0.15);
    background-color: white;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    outline: none;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(72,72,72,0.04);
}

.sort-select:hover {
    border-color: rgba(72,72,72,0.3);
}

.filter-tab {
    flex: 1;
    max-width: 120px;
    padding: 0.5rem 0;
    border-radius: 999px;
    border: 1px solid rgba(72,72,72,0.15);
    background-color: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    font-family: inherit;
}

.filter-tab.active {
    background-color: #222222;
    color: white;
    border-color: #222222;
}

/* ── Service Meta & Ratings ────────────────────────────── */
.service-meta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 4px;
}

.service-price-text, .rating-val, .rating-count {
    font-family: 'Figtree', 'IBM Plex Sans Arabic', sans-serif !important;
    font-weight: 600 !important;
    font-size: 12px;
}

.service-meta-separator {
    margin: 0 5px;
    color: #222222;
    font-size: 10px;
}

.service-rating-text {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.service-rating-text svg {
    width: 12px;
    height: 12px;
    color: var(--text);
}

.rating-val {
    margin-left: 2px;
}

.rating-count {
    color: #888;
    margin-left: 3px;
    font-weight: 500 !important;
}

.profile-review-summary {
    display: inline-flex;
    align-items: center;
    background: #f5f5f5;
    padding: 2px 14px;
    border-radius: 999px;
    height: 24px;
    cursor: pointer;
    margin-top: 10px;
    border: none;
}

/* Shared avatar/member styles are defined earlier to keep geometry consistent site-wide. */

/* Stretched Link for SEO & Clickability */
.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

.card {
    position: relative;
}

.card-content a:not(.stretched-link),
.request-avatar-wrap a {
    position: relative;
    z-index: 2;
}