/* ═══════════════════════════════════════════════════════════
   homepage-new.css — إعادة تصميم الرئيسية (مقتبس من مزاد قطر)
   يعتمد على design tokens الموجودة في app.css (--color-primary,
   --font-ar/en, --radius-*, --space-*) فمينفعش يشتغل من غيره.
   ═══════════════════════════════════════════════════════════ */

/* ── ثيمات الأقسام (Pink / Blue / Amber) ──────────────────── */
:root{
    --hp-pink:        var(--color-primary, #c6268a);
    --hp-pink-dark:   var(--color-primary-dark, #9e1d6e);
    --hp-pink-bg:     #fdf1f8;

    --hp-blue:        #1565c0;
    --hp-blue-dark:   #0d47a1;
    --hp-blue-bg:     #eef5fd;

    --hp-amber:       #b8860b;
    --hp-amber-dark:  #8a6508;
    --hp-amber-bg:    #fbf6e8;
}

/* ═══════════════════════════════════════════════════════════
   1) CAROUSEL
   ═══════════════════════════════════════════════════════════ */
.hp-carousel{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin:var(--space-md) 0;
    box-shadow:0 4px 20px rgba(0,0,0,.08)}
.hp-carousel-track{display:flex;transition:transform .5s ease}
.hp-slide{flex:0 0 100%;min-height:220px;display:flex;align-items:center;justify-content:space-between;
    padding:2rem 2.5rem;gap:1.5rem;text-decoration:none;color:#fff;flex-wrap:wrap}
.hp-slide-1{background:linear-gradient(120deg,var(--hp-pink) 0%,var(--hp-pink-dark) 100%)}
.hp-slide-2{background:linear-gradient(120deg,#2c3e50 0%,#4a5f78 100%)}
.hp-slide-3{background:linear-gradient(120deg,var(--hp-blue) 0%,var(--hp-blue-dark) 100%)}
.hp-slide-icon{font-size:3.5rem;opacity:.35}
.hp-slide-text{flex:1;min-width:200px}
.hp-slide-title{font-size:clamp(1.1rem,3vw,1.6rem);font-weight:700;margin-bottom:.4rem}
.hp-slide-desc{font-size:.85rem;opacity:.9}
.hp-slide-cta{background:#fff;color:var(--hp-pink-dark);padding:9px 22px;border-radius:var(--radius-full);
    font-size:.85rem;font-weight:700;white-space:nowrap}
.hp-slide-soon{opacity:.6;pointer-events:none}
.hp-slide-soon .hp-slide-cta{background:rgba(255,255,255,.25);color:#fff}

.hp-carousel-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:2}
.hp-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);border:none;cursor:pointer;padding:0}
.hp-dot.active{background:#fff;width:22px;border-radius:99px;transition:width .2s}

/* ═══════════════════════════════════════════════════════════
   2) SECTION SHELL (مشترك بين الضيافة/عمالة منزلية/مميزة)
   ═══════════════════════════════════════════════════════════ */
.hp-section{padding:2rem 0}
.hp-section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}
.hp-section-title{font-size:1.2rem;font-weight:800;margin:0 0 .3rem}
.hp-section-desc{font-size:.85rem;color:var(--color-text-secondary,#6c757d);margin:0}
.hp-section-cta{font-size:.82rem;font-weight:700;text-decoration:none;white-space:nowrap;padding:8px 18px;border-radius:var(--radius-full)}

.hp-theme-pink .hp-section-title{color:var(--hp-pink-dark)}
.hp-theme-pink .hp-section-cta{background:var(--hp-pink);color:#fff}
.hp-theme-blue{background:var(--hp-blue-bg)}
.hp-theme-blue .hp-section-title{color:var(--hp-blue-dark)}
.hp-theme-blue .hp-section-cta{background:var(--hp-blue);color:#fff}
.hp-theme-amber{background:var(--hp-amber-bg)}
.hp-theme-amber .hp-section-title{color:var(--hp-amber-dark)}
.hp-theme-amber .hp-section-cta{background:var(--hp-amber);color:#fff}

/* ── Tabs ── */
.hp-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:1rem;scrollbar-width:none}
.hp-tabs::-webkit-scrollbar{display:none}
.hp-tab{flex:0 0 auto;padding:6px 16px;border-radius:var(--radius-full);border:1px solid rgba(0,0,0,.12);
    background:#fff;font-size:.8rem;font-weight:600;color:var(--color-text-secondary,#6c757d);cursor:pointer;white-space:nowrap}
.hp-theme-pink  .hp-tab.active{background:var(--hp-pink);border-color:var(--hp-pink);color:#fff}
.hp-theme-blue  .hp-tab.active{background:var(--hp-blue);border-color:var(--hp-blue);color:#fff}

/* ── Gold ad bar ── */
.hp-gold-bar{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid rgba(0,0,0,.08);
    border-radius:var(--radius-md);padding:.8rem 1rem;margin-bottom:1.25rem;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.hp-gold-bar img{width:64px;height:64px;object-fit:cover;border-radius:var(--radius-sm);flex-shrink:0}
.hp-gold-badge{display:inline-block;font-size:.65rem;font-weight:700;background:#ffd700;color:#7a5c00;
    padding:2px 8px;border-radius:99px;margin-bottom:3px}
.hp-gold-title{font-size:.88rem;font-weight:700;color:var(--color-text-primary,#222)}
.hp-gold-cta{margin-inline-start:auto;background:#25d366;color:#fff;padding:7px 16px;border-radius:var(--radius-full);
    font-size:.78rem;font-weight:700;text-decoration:none;white-space:nowrap;flex-shrink:0}

/* ── Grid مشترك للـ 6 كاردز ── */
.hp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.hp-grid.hp-grid-loading{opacity:.4;pointer-events:none;transition:opacity .15s}

/* ═══════════════════════════════════════════════════════════
   3) كارت عاملة التنظيف (مُعاد استخدامه من render_cleaner_grid_card
      — نفس الكلاسات المستخدمة في /cleaners و category.php)
   ═══════════════════════════════════════════════════════════ */
.cc-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;overflow:hidden;transition:box-shadow .15s,transform .15s}
.cc-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.1);transform:translateY(-2px)}
.cc-card-link{display:block;text-decoration:none;color:inherit}
.cc-office-link{display:flex;align-items:center;gap:5px;font-size:.68rem;color:var(--color-text-secondary,#6c757d);text-decoration:none;padding:.5rem .8rem;border-top:1px solid rgba(0,0,0,.06)}
.cc-office-link:hover{color:var(--hp-pink)}
.cc-img{position:relative;padding-top:104%;background:#e9ecef}
.cc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cc-letter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.2rem;font-weight:700;color:#fff;background:#2980b9}
.cc-status{position:absolute;top:7px;inset-inline-start:7px;font-size:.66rem;font-weight:600;padding:2px 8px;border-radius:99px;color:#fff}
.cc-status.st-available{background:#27ae60}
.cc-status.st-busy{background:#e67e22}
.cc-status.st-off{background:#95a5a6}
.cc-body{padding:.7rem .8rem .8rem}
.cc-name{font-size:.92rem;font-weight:700}
.cc-role{font-size:.76rem;color:var(--color-text-secondary,#6c757d);margin-top:1px}
.cc-town{font-size:.72rem;color:var(--color-text-secondary,#6c757d);margin-top:3px}
.cc-rate{font-size:.8rem;color:var(--hp-pink);font-weight:700;margin-top:5px}
.cc-foot{margin-top:6px}
.cc-badge{display:inline-block;font-size:.68rem;font-weight:600;padding:2px 8px;border-radius:99px}
.cc-badge.cc-rating{background:#fff5cc;color:#946c00}
.cc-badge.cc-bookings{background:#e3f2fd;color:#1565c0}
.cc-badge.cc-new{background:#e8f8ef;color:#1e8449}

/* ═══════════════════════════════════════════════════════════
   4) كارت عامل منزلي (Manpower) — أفاتار + اسم + جنسية بدل السعر
   ═══════════════════════════════════════════════════════════ */
.wk-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;overflow:hidden;
    transition:box-shadow .15s,transform .15s}
.wk-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.1);transform:translateY(-2px)}
.wk-card-link{display:block;text-decoration:none;color:inherit}
.wk-img{position:relative;padding-top:104%;background:#e9ecef}
.wk-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wk-letter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.2rem;font-weight:700;color:#fff;background:var(--hp-blue)}
.wk-flag{position:absolute;top:7px;inset-inline-start:7px;width:22px;height:16px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.wk-body{padding:.7rem .8rem .8rem}
.wk-name{font-size:.92rem;font-weight:700}
.wk-nat{font-size:.76rem;color:var(--color-text-secondary,#6c757d);margin-top:1px}
.wk-role{font-size:.72rem;color:var(--color-text-secondary,#6c757d);margin-top:2px}
.wk-office-link{display:flex;align-items:center;gap:5px;font-size:.68rem;color:var(--color-text-secondary,#6c757d);
    text-decoration:none;padding:.5rem .8rem;border-top:1px solid rgba(0,0,0,.06)}
.wk-office-link:hover{color:var(--hp-blue)}
.wk-contact-btn{display:block;text-align:center;margin:0 .8rem .7rem;padding:7px;border-radius:8px;
    background:#25d366;color:#fff;font-size:.76rem;font-weight:700;text-decoration:none}

/* ═══════════════════════════════════════════════════════════
   5) المنطقة 4 — باقي الأقسام (Cards Grid + tags)
   ═══════════════════════════════════════════════════════════ */
.hp-cats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hp-cat-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--radius-md);
    padding:1.1rem;transition:box-shadow .15s,transform .15s}
.hp-cat-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-2px)}
.hp-cat-card-link{display:block;text-decoration:none;color:inherit}
.hp-cat-card-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.hp-cat-icon{width:38px;height:38px;border-radius:10px;object-fit:cover;flex-shrink:0}
.hp-cat-title{font-size:.95rem;font-weight:700}
.hp-cat-tags{display:flex;flex-wrap:wrap;gap:5px}
.hp-cat-tag{font-size:.68rem;color:var(--color-text-secondary,#6c757d);background:#f4f4f6;
    padding:3px 9px;border-radius:99px;text-decoration:none}
.hp-cat-tag:hover{background:var(--hp-pink);color:#fff}

/* ═══════════════════════════════════════════════════════════
   6) إعلانات مميزة (Amber) — إعادة استخدام render_ad_card_pro
      الموجودة أصلاً (نفس كلاسات .il-card من category.php)
   ═══════════════════════════════════════════════════════════ */
.hp-featured-more{display:block;text-align:center;margin-top:1.25rem;padding:11px;border-radius:var(--radius-md);
    background:var(--hp-amber);color:#fff;font-weight:700;font-size:.85rem;text-decoration:none}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px){
    .hp-grid{grid-template-columns:repeat(4,1fr)}
    .hp-cats-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 768px){
    .hp-slide{padding:1.5rem;min-height:170px}
    .hp-slide-icon{font-size:2.4rem}
    .hp-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .hp-cats-grid{grid-template-columns:repeat(2,1fr)}
    .hp-tabs{flex-wrap:nowrap}
    .hp-gold-bar{flex-wrap:wrap}
    .hp-gold-cta{margin-inline-start:0;width:100%;text-align:center}
}