/* ============================================================
   Therepair — Premium Futuristic 3D Repair & Technology
   لایه طراحی سه‌بعدی (روی app.css) — بدون وابستگی خارجی
   ============================================================ */

:root {
    --c-midnight: #081322;
    --c-deepblue: #0b1b2b;
    --c-blue-700: #102a43;
    --c-electric: #1e6fff;
    --c-neon: #37e1ff;
    --c-titanium: #c8d2dc;
    --c-graphite: #151a21;
    --c-amber: #ffb020;
    --c-white: #ffffff;

    --grad-hero: radial-gradient(1200px 600px at 80% -10%, rgba(30,111,255,.28), transparent 55%),
                 radial-gradient(900px 500px at 10% 110%, rgba(55,225,255,.16), transparent 55%),
                 linear-gradient(160deg, #0b1b2b 0%, #081322 55%, #0a1727 100%);
    --glow-electric: 0 0 0 1px rgba(55,225,255,.25), 0 12px 40px -12px rgba(30,111,255,.45);
    --shadow-card: 0 24px 60px -24px rgba(3,10,20,.55), 0 4px 14px rgba(3,10,20,.18);
}

body {
    background: var(--c-deepblue);
    color: #e8eef5;
}

/* ---------- پس‌زمینه و شبکه نقاط ---------- */
body.public-body::before {
    content: "";
    position: fixed; inset: 0;
    background-image: radial-gradient(rgba(55,225,255,.10) 1px, transparent 1px);
    background-size: 34px 34px;
    pointer-events: none;
    z-index: 0;
    opacity: .5;
}

/* ---------- پس‌زمینه WebGL ---------- */
.webgl-bg {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
    display: block;
}
@supports not (background: -webkit-canvas(0)) {
    .webgl-bg { display: none; }
}

/* ---------- حباب‌های شناور ثلاث‌بعدی ---------- */
.hero-bubbles { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; }
.hero-bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.22), rgba(55,225,255,.05) 55%, transparent 72%);
    border: 1px solid rgba(255,255,255,.10);
    transform: translateZ(60px);
    animation: bubbleFloat 9s ease-in-out infinite;
    opacity: .7;
}
@keyframes bubbleFloat {
    0%, 100% { transform: translate3d(0, 0, 60px); }
    50% { transform: translate3d(10px, -26px, 90px); }
}

/* ---------- Hero سه‌بعدی ---------- */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--grad-hero);
    perspective: 1400px;
}
.hero .hero-pattern {
    background:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 70%);
}
.hero-copy { transform: translateZ(40px); }
.hero-visual { transform: translateZ(80px); }
.hero-device { filter: drop-shadow(0 30px 50px rgba(0,0,0,.45)); }
.hero-chip {
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(55,225,255,.25);
    box-shadow: var(--glow-electric);
}
.hero h1 {
    background: linear-gradient(100deg, #ffffff 20%, #7fdfff 55%, #37e1ff 85%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero .eyebrow {
    display: inline-flex; align-items: center; gap: .45em;
    color: var(--c-neon);
    border: 1px solid rgba(55,225,255,.35);
    background: rgba(55,225,255,.08);
    border-radius: 999px; padding: .35em 1em; font-weight: 700; font-size: .85rem;
}
.hero-note { border-inline-start: 3px solid rgba(255,176,32,.7); }

/* ---------- کارت‌ها و عمق ---------- */
.service-card, .step-card, .info-card, .portfolio-card, .testimonial-card, .trust-item, .contact-card, .coverage-card, .sidebar-card {
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(8px);
}
.service-card:hover, .portfolio-card:hover, .testimonial-card:hover {
    border-color: rgba(55,225,255,.45);
    box-shadow: var(--glow-electric), var(--shadow-card);
    transform: translateY(-6px);
}
.service-icon {
    box-shadow: inset 0 0 0 1px rgba(55,225,255,.25), 0 8px 24px -8px rgba(30,111,255,.55);
}

/* ---------- تیلت سه‌بعدی (افزایش یافته) ---------- */
.tilt-3d { transition: transform .18s ease, box-shadow .25s ease; will-change: transform; }

/* ---------- انیمیشن ورود بخش‌ها ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- دکمه‌ها ---------- */
.btn-primary {
    background: linear-gradient(135deg, var(--c-electric), #1455c4);
    box-shadow: 0 14px 30px -12px rgba(30,111,255,.7), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(30,111,255,.85), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-accent {
    background: linear-gradient(135deg, var(--c-amber), #f59e0b);
    color: #1a1205;
    box-shadow: 0 14px 30px -12px rgba(255,176,32,.6);
}
.btn-outline, .btn-ghost, .btn-light-outline { border-color: rgba(255,255,255,.22); }

/* ---------- نوار اطمینان ---------- */
.trust-strip {
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
    border-block: 1px solid rgba(255,255,255,.06);
}

/* ---------- بخش‌های خاکستری/شفاف ---------- */
.section-soft, .coverage-section, .process-section { background: rgba(255,255,255,.02); }
.section-heading .eyebrow { color: var(--c-neon); }

/* ---------- برچسب برندها ---------- */
.brand-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.brand-chip {
    padding: .5em 1.1em; border-radius: 999px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
    color: var(--c-titanium); font-weight: 600; font-size: .9rem;
    transition: border-color .2s ease, transform .2s ease;
}
.brand-chip:hover { border-color: rgba(55,225,255,.5); transform: translateY(-2px); }

/* ---------- نمونه‌کارها ---------- */
.portfolio-card { overflow: hidden; border-radius: 18px; }
.portfolio-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(255,255,255,.08); }
.portfolio-compare.single { grid-template-columns: 1fr; }
.portfolio-side { margin: 0; position: relative; }
.portfolio-side img { width: 100%; height: 190px; object-fit: cover; display: block; }
.portfolio-label {
    position: absolute; top: 10px; inset-inline-start: 10px;
    background: rgba(8,19,34,.8); color: #fff; font-size: .72rem; font-weight: 700;
    padding: .2em .7em; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
}
.portfolio-label.is-after { background: rgba(22,101,52,.9); border-color: rgba(74,222,128,.5); }
.portfolio-body { padding: 1.1rem 1.2rem 1.3rem; }
.portfolio-meta { color: var(--c-titanium); font-size: .85rem; }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; }
.portfolio-filter { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-block-end: 1.6rem; }

/* ---------- نظرات ---------- */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.3rem; }
.testimonial-card { padding: 1.4rem; border-radius: 18px; }
.testimonial-card blockquote { margin: .8rem 0; font-size: .98rem; line-height: 2; }
.testimonial-card figcaption { display: flex; flex-direction: column; gap: .15rem; }
.testimonial-stars { display: flex; gap: .15rem; }
.star-icon { color: rgba(255,255,255,.25); }
.star-icon.is-on { color: var(--c-amber); }

/* ---------- صف/آمار اضافه ---------- */
.stat-chip { color: #cfe7ff; }

/* ---------- گفتگوی شناور ارتباط سریع ---------- */
.floating-contacts {
    position: fixed; inset-inline-end: 18px; bottom: 20px;
    display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
    z-index: 120;
}
.floating-group { display: flex; flex-direction: column; gap: .5rem; }
.floating-btn {
    width: 48px; height: 48px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(30,111,255,.9), rgba(20,85,196,.9));
    color: #fff; border: 1px solid rgba(55,225,255,.4);
    box-shadow: 0 10px 26px -8px rgba(30,111,255,.8);
    transition: transform .2s ease, box-shadow .2s ease;
}
.floating-btn:hover { transform: translateY(-3px) scale(1.05); }
.floating-btn.wa { background: linear-gradient(135deg, #25d366, #128c7e); }
.floating-btn.tg { background: linear-gradient(135deg, #2aabee, #168acb); }
.floating-btn.bl { background: linear-gradient(135deg, #1e9bff, #0f6fc7); }
.floating-btn.et { background: linear-gradient(135deg, #6b4fd8, #4a35a8); }
.floating-btn.rb { background: linear-gradient(135deg, #b83280, #8a215f); }
.floating-call { background: linear-gradient(135deg, var(--c-amber), #f59e0b); color: #1a1205; }
.floating-sms { background: linear-gradient(135deg, #10b981, #047857); }
.floating-top { opacity: .85; }
@media (max-width: 760px) {
    .floating-contacts { inset-inline-end: 12px; bottom: 70px; }
    .floating-btn { width: 42px; height: 42px; }
}

/* ---------- رسید چاپی ---------- */
.receipt-print { display: none; }
@media print {
    .no-print, .site-header, .site-footer, .mobile-cta, .floating-contacts, .utility-bar { display: none !important; }
    #receipt-print { display: block; }
    .print-area { display: block; }
    body { background: #fff !important; color: #111 !important; }
    .print-table { width: 100%; border-collapse: collapse; }
    .print-table th, .print-table td { border: 1px solid #bbb; padding: 6px 10px; text-align: right; }
}
.print-area { display: none; }
.admin-body .print-area { display: block; margin-block-end: 1rem; padding: 1rem; background: #fff; color: #111; border-radius: 10px; }
.admin-body .print-area .print-table th { background: #f1f5f9; }
.admin-body .print-area h3 { margin: 0 0 .6rem; }