/* ====================================================================
   استایل «هورآسا» برای کارت خدمات و کارت تجربه مشتری
   دو بلوک زیر را داخل <style> فایل base.html بچسبانید (راهنما بالای هر بلوک).
   همه‌ی رنگ‌ها از متغیرهای تم (--primary، --text-dark، ...) می‌آیند.
   ==================================================================== */


/* ────────────────────────────────────────────────────────────────────
   بلوک ۱) کارت خدمات
   محل چسباندن: بعد از بلوک «شیشه‌ای» (بعد از body.cards-glass ... { }) و قبل از «پزشکان»
   ──────────────────────────────────────────────────────────────────── */

/* ---------- هورآسا: کپسولی با تصویر گرد ---------- */
.services-grid:has(.service-card.style-horasa){ grid-template-columns:repeat(2,1fr); gap:18px 28px; }
.service-card.style-horasa{
    display:grid; grid-template-columns:76px 1fr auto;
    grid-template-areas:"img title link" "img desc link" "img price link";
    align-items:center; column-gap:16px; row-gap:0;
    padding:8px 8px 8px 20px; overflow:visible; border:none; box-shadow:none;
    background:color-mix(in srgb, var(--primary-pale) 70%, transparent);
    border-radius:28px 80px 80px 28px;
}
.service-card.style-horasa:hover{
    transform:none; box-shadow:none;
    background:color-mix(in srgb, var(--primary-lighter) 45%, transparent);
}
.service-card.style-horasa .service-img{
    grid-area:img; width:76px; height:76px; aspect-ratio:1; border-radius:50%;
    border:3px solid var(--white); box-shadow:var(--shadow-xs);
}
.service-card.style-horasa .service-img::after{ display:none; }
.service-card.style-horasa .service-img .no-img svg{ width:28px; height:28px; }
.service-card.style-horasa:hover .service-img img{ transform:none; }
.service-card.style-horasa .service-duration-tag{ display:none; }
/* بدنه و فوتر کارت «باز» می‌شوند تا عنوان/توضیح/قیمت/فلش در گرید کارت بنشینند */
.service-card.style-horasa .service-body,
.service-card.style-horasa .service-footer{ display:contents; }
.service-card.style-horasa .service-body h3{
    grid-area:title; font-size:16px; line-height:1.7; margin:0; color:var(--primary-dark);
}
.service-card.style-horasa .service-body .desc{
    grid-area:desc; flex:none; font-size:13px; line-height:1.7; color:var(--text-light);
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.service-card.style-horasa .service-price{ grid-area:price; font-size:13px; color:var(--primary); }
.service-card.style-horasa .service-price small{ font-size:11.5px; }
/* فقط دایره‌ی فلش؛ متن لینک مخفی می‌شود (font-size:0) و آیکون می‌ماند */
.service-card.style-horasa .service-link{
    grid-area:link; width:34px; height:34px; border:1.2px solid var(--primary); border-radius:50%;
    justify-content:center; gap:0; font-size:0; color:var(--primary);
}
.service-card.style-horasa .service-link svg{ width:16px; height:16px; }
@media (max-width:980px){
    .services-grid:has(.service-card.style-horasa){ grid-template-columns:1fr; }
}


/* ────────────────────────────────────────────────────────────────────
   بلوک ۲) کارت تجربه مشتری
   محل چسباندن: بعد از آخرین استایل نظرات (.t-card.style-compact ... { }) 
   ──────────────────────────────────────────────────────────────────── */

/* ---------- هورآسا: نقل‌قول درشت، متن پررنگ، آواتار گرد سمت چپ ---------- */
.testimonials-section.style-horasa{ background:var(--bg-light); }
.testimonials-section.style-horasa .section-head h2{ color:var(--text-dark); }
.testimonials-section.style-horasa .section-head p{ color:var(--text-light); }
.testimonials-section.style-horasa .eyebrow{ background:none; color:var(--primary); }

.t-grid:has(.t-card.style-horasa){ grid-template-columns:repeat(2,1fr); gap:28px; }
.t-card.style-horasa{
    flex:none; position:relative; display:flex; flex-direction:column;
    padding:34px 36px 28px; border:none; box-shadow:none;
    background:color-mix(in srgb, var(--bg-card) 55%, transparent);
    border-radius:32px 90px 32px 32px;
    backdrop-filter:none; -webkit-backdrop-filter:none;
}
.t-card.style-horasa:hover{
    transform:none; border:none;
    background:color-mix(in srgb, var(--bg-card) 80%, transparent);
}
.t-card.style-horasa .t-quote{ color:var(--primary-dark); margin-bottom:6px; }
.t-card.style-horasa .t-quote svg{ width:40px; height:40px; }
.t-card.style-horasa .t-stars{ display:none; }   /* برای نمایش ستاره‌ها این خط را حذف کنید */
.t-card.style-horasa .t-text{
    flex:1; min-height:auto; margin-bottom:24px;
    color:var(--text-dark); font-size:16px; font-weight:500; line-height:2.3;
}
.t-card.style-horasa .t-person{
    flex-direction:row-reverse; width:fit-content; margin-right:auto; gap:14px; text-align:right;
}
.t-card.style-horasa .t-person img,
.t-card.style-horasa .t-avatar-fallback{
    width:60px; height:60px; border:3px solid var(--white); box-shadow:var(--shadow-sm);
}
.t-card.style-horasa .t-avatar-fallback{ background:var(--primary-pale); color:var(--primary-dark); font-size:22px; font-weight:700; }
.t-card.style-horasa .t-person b{ color:var(--primary-dark); font-size:15px; }
.t-card.style-horasa .t-person div span{ color:var(--text-light); font-size:12.5px; }
@media (max-width:980px){
    .t-grid:has(.t-card.style-horasa){ grid-template-columns:1fr; }
}



/* ────────────────────────────────────────────────────────────────────
   بلوک ۳) کارت گالری قبل/بعد
   محل چسباندن: بعد از آخرین استایل گالری (.ba-card.style-carousel ... { }) 
   و قبل از کامنت «===== نظرات مشتریان =====» (حدود خط ۹۹۰ در base.html)
   ──────────────────────────────────────────────────────────────────── */

/* ---------- هورآسا: دو قاب ارگانیک، فلش وسط و برچسب کپسولی ---------- */
.ba-card.style-horasa{
    overflow:visible; border:none; box-shadow:none; padding:18px 18px 22px;
    background:color-mix(in srgb, var(--primary-pale) 70%, transparent);
    border-radius:36px 90px 36px 36px;
}
.ba-card.style-horasa:hover{
    transform:none; box-shadow:none;
    background:color-mix(in srgb, var(--primary-lighter) 40%, transparent);
}
.ba-card.style-horasa .ba-horasa{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ba-card.style-horasa .ba-h-item{ position:relative; margin:0; }
.ba-card.style-horasa .ba-h-img{
    position:relative; z-index:1; aspect-ratio:4/5; overflow:hidden; background:linear-gradient(135deg,var(--primary-pale),var(--primary-lighter));
    border:3px solid var(--white); box-shadow:var(--shadow-xs);
    border-radius:60% 40% 50% 50% / 45% 50% 50% 55%;
}
.ba-card.style-horasa .ba-h-after .ba-h-img{ border-radius:40% 60% 50% 50% / 50% 45% 55% 50%; }
.ba-card.style-horasa .ba-h-img img{ width:100%; height:100%; object-fit:cover; display:block; }
/* خط نازک دور قاب «بعد» */
.ba-card.style-horasa .ba-h-after::before{
    content:""; position:absolute; z-index:0; inset:-7px 7px 18px -7px;
    border:1px solid var(--primary-light); border-radius:40% 60% 50% 50% / 50% 45% 55% 50%;
}
.ba-card.style-horasa .ba-h-tag{
    position:relative; z-index:2; display:block; width:fit-content; margin:-14px auto 0;
    padding:5px 18px; border-radius:var(--radius-pill); font-size:12px; font-weight:700;
    background:var(--white); color:var(--primary-dark); box-shadow:var(--shadow-sm);
}
.ba-card.style-horasa .ba-h-after .ba-h-tag{ background:var(--primary); color:#fff; }
.ba-card.style-horasa .ba-h-arrow{
    position:absolute; z-index:3; top:42%; left:50%; transform:translate(-50%,-50%);
    width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
    background:var(--white); color:var(--primary); border:1.2px solid var(--primary); box-shadow:var(--shadow-sm);
}
.ba-card.style-horasa .ba-h-arrow svg{ width:16px; height:16px; }
.ba-card.style-horasa .ba-info{ padding:16px 6px 0; text-align:center; }
.ba-card.style-horasa .ba-info h3{ color:var(--primary-dark); }