/* /assets/css/linkodoleh.css — صفحه‌ی لینک‌الدوله (v1.0.0) */

.ld-page {
    --ld-navy: #0d2a53;
    --ld-blue: #173e75;
    --ld-gold: #c9a24d;
    --ld-gold-soft: #e9d49a;
    --ld-cream: #fbf4e4;
    --ld-ruby: #b9152a;
    --ld-ink: #152235;
    --ld-muted: #5b6678;
    display: flex;
    flex-direction: column;
    gap: 34px;
    padding-bottom: 20px;
    color: var(--ld-ink);
}
.ld-page *, .ld-page *::before, .ld-page *::after { box-sizing: border-box; }

/* ---------- عنوان بخش‌ها ---------- */
.ld-h2 {
    position: relative;
    margin: 0 0 22px;
    padding-bottom: 14px;
    text-align: center;
    color: var(--ld-navy);
    font-size: clamp(1.35rem, 2.6vw, 1.8rem);
    font-weight: 900;
    line-height: 1.6;
}
.ld-h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 86px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, transparent, var(--ld-gold), transparent);
    transform: translateX(-50%);
}
.ld-h2-light { color: #fff; }

/* ---------- دکمه‌ها ---------- */
.ld-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 26px;
    border: 2px solid transparent;
    border-radius: 14px;
    font-weight: 800;
    font-size: .98rem;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ld-btn:hover { transform: translateY(-2px); }
.ld-btn-primary {
    background: linear-gradient(135deg, #df263c, var(--ld-ruby));
    border-color: #f2c76e;
    color: #fff;
    box-shadow: 0 14px 28px rgba(185, 21, 42, .28);
}
.ld-btn-primary:hover { color: #fff; box-shadow: 0 18px 34px rgba(185, 21, 42, .36); }
.ld-btn-ghost {
    border-color: rgba(13, 42, 83, .25);
    background: rgba(255, 255, 255, .6);
    color: var(--ld-navy);
}
.ld-btn-ghost:hover { border-color: var(--ld-navy); color: var(--ld-navy); background: #fff; }

/* ---------- هیرو ---------- */
.ld-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 20px;
    padding: 46px 48px 40px;
    border: 1px solid #ecdcb5;
    border-radius: 32px;
    background:
        radial-gradient(760px 380px at 12% 0%, rgba(201, 162, 77, .26), transparent 62%),
        radial-gradient(620px 360px at 100% 100%, rgba(23, 62, 117, .11), transparent 62%),
        linear-gradient(135deg, #fffaf0, var(--ld-cream) 55%, #f6ecd5);
    box-shadow: 0 30px 80px rgba(120, 86, 20, .13);
    overflow: hidden;
    isolation: isolate;
}
/* نقش لوزی‌های طلایی که به سمت متن محو می‌شود */
.ld-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .75;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 4l24 24-24 24L4 28z' fill='none' stroke='%23c9a24d' stroke-opacity='.26' stroke-width='1'/%3E%3Ccircle cx='28' cy='28' r='3' fill='%23c9a24d' fill-opacity='.22'/%3E%3C/svg%3E");
    -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 72%);
            mask-image: linear-gradient(to right, #000 0%, transparent 72%);
}

.ld-hero-copy { position: relative; }

.ld-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 6px 14px;
    border: 1px solid #e4cf9b;
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    color: #6a4d0f;
    font-size: .82rem;
    font-weight: 700;
}
.ld-name {
    margin: 0 0 10px;
    font-size: clamp(2.7rem, 6.2vw, 4.8rem);
    font-weight: 900;
    line-height: 1.2;
    color: var(--ld-navy);
    background: linear-gradient(90deg, var(--ld-navy) 0%, var(--ld-blue) 52%, #7a1f33 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ld-slogan {
    margin: 0 0 14px;
    padding-inline-start: 14px;
    border-inline-start: 4px solid var(--ld-gold);
    color: #7a1f33;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-weight: 800;
    line-height: 1.9;
}
.ld-lead {
    max-width: 560px;
    margin: 0 0 22px;
    color: var(--ld-muted);
    font-size: .98rem;
    line-height: 2.05;
}
.ld-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }

.ld-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ld-chips li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border: 1px solid #e4cf9b;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: #5a4413;
    font-size: .82rem;
    font-weight: 700;
}
.ld-chips li span { color: #168566; font-weight: 900; }

/* ---------- شخصیت ---------- */
.ld-hero-art {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 440px;
}
.ld-medallion {
    position: absolute;
    bottom: 3%;
    left: 50%;
    width: min(88%, 420px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 32%, #2f64ad 0%, #173e75 46%, #0d2a53 100%);
    box-shadow:
        inset 0 0 0 7px rgba(201, 162, 77, .95),
        inset 0 0 0 12px rgba(13, 42, 83, .95),
        0 34px 60px rgba(13, 42, 83, .32);
    transform: translateX(-50%);
}
.ld-mascot {
    position: relative;
    z-index: 1;
    display: block;
    width: min(100%, 430px);
    height: auto;
    filter: drop-shadow(0 24px 22px rgba(13, 42, 83, .38));
    animation: ld-float 6s ease-in-out infinite;
}
@keyframes ld-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

.ld-speech {
    position: absolute;
    z-index: 2;
    top: 4%;
    inset-inline-end: 0;
    max-width: 190px;
    padding: 10px 14px;
    border: 2px solid var(--ld-gold);
    border-radius: 18px;
    background: #fff;
    color: var(--ld-navy);
    font-size: .86rem;
    font-weight: 800;
    line-height: 1.8;
    box-shadow: 0 12px 26px rgba(13, 42, 83, .16);
    animation: ld-pop .5s .6s both cubic-bezier(.3, 1.5, .5, 1);
}
.ld-speech::after {
    content: "";
    position: absolute;
    right: 28px;
    bottom: -9px;
    width: 14px;
    height: 14px;
    border-right: 2px solid var(--ld-gold);
    border-bottom: 2px solid var(--ld-gold);
    background: #fff;
    transform: rotate(45deg);
}
@keyframes ld-pop {
    from { opacity: 0; transform: scale(.7) translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- آمار ---------- */
.ld-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}
.ld-stat {
    padding: 18px 14px;
    border: 1px solid #ece4d2;
    border-radius: 20px;
    background: #fff;
    text-align: center;
    box-shadow: 0 10px 26px rgba(13, 42, 83, .06);
}
.ld-stat b { display: block; color: var(--ld-navy); font-size: 1.7rem; font-weight: 900; line-height: 1.5; }
.ld-stat span { color: var(--ld-muted); font-size: .86rem; }

/* ---------- مراحل ---------- */
.ld-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ld-step {
    position: relative;
    padding: 26px 22px 22px;
    border: 1px solid #ece4d2;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(13, 42, 83, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}
.ld-step:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(13, 42, 83, .11); }
.ld-step-no {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f2d98f, var(--ld-gold));
    color: var(--ld-navy);
    font-size: 1.3rem;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(201, 162, 77, .4);
}
.ld-step h3 { margin: 0 0 6px; color: var(--ld-navy); font-size: 1.08rem; font-weight: 800; }
.ld-step p { margin: 0; color: var(--ld-muted); font-size: .92rem; line-height: 1.95; }

/* ---------- بخش مشاوره ---------- */
.ld-consult {
    position: relative;
    padding: 42px 28px 36px;
    border-radius: 32px;
    background:
        radial-gradient(520px 260px at 90% 0%, rgba(201, 162, 77, .25), transparent 65%),
        linear-gradient(135deg, var(--ld-navy), var(--ld-blue));
    box-shadow: 0 30px 70px rgba(13, 42, 83, .28);
    scroll-margin-top: 90px;
    overflow: hidden;
    overflow: clip; /* بر خلاف hidden کادر اسکرول نمی‌سازد؛ برای چسبیدن نوار «افزودن به سبد» لازم است */
    isolation: isolate;
}
/* main.app-main در قالب سایت overflow:hidden دارد و جلوی sticky را می‌گیرد؛ فقط برای همین صفحه */
.app-main:has(.ld-page) { overflow: clip; }
.ld-consult::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 4l24 24-24 24L4 28z' fill='none' stroke='%23e9d49a' stroke-opacity='.16' stroke-width='1'/%3E%3C/svg%3E");
}
.ld-consult-head { max-width: 680px; margin: 0 auto 6px; text-align: center; }
.ld-consult-head p { margin: 0 0 18px; color: #cfdcf0; font-size: .95rem; line-height: 2; }
.ld-consult-body { max-width: 860px; margin: 0 auto; }

.ld-off {
    padding: 30px 22px;
    border-radius: 22px;
    background: #fff;
    color: var(--ld-ink);
    text-align: center;
}
.ld-off p { margin: 8px 0 16px; line-height: 2; }
.ld-off-emoji { font-size: 2.6rem; }

/* ---------- سؤال‌های متداول ---------- */
.ld-faq-list { display: grid; gap: 10px; max-width: 860px; margin: 0 auto; }
.ld-q {
    border: 1px solid #ece4d2;
    border-radius: 16px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ld-q[open] { border-color: var(--ld-gold); box-shadow: 0 12px 28px rgba(201, 162, 77, .16); }
.ld-q summary {
    position: relative;
    display: block;
    padding: 15px 18px 15px 50px;
    color: var(--ld-navy);
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}
.ld-q summary::-webkit-details-marker { display: none; }
.ld-q summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    left: 16px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ld-cream);
    color: #8a6a1c;
    font-size: 1.2rem;
    line-height: 1;
    transform: translateY(-50%);
}
.ld-q[open] summary::after { content: "−"; background: var(--ld-gold); color: #fff; }
.ld-q p { margin: 0; padding: 0 18px 16px; color: var(--ld-muted); font-size: .94rem; line-height: 2.05; }
.ld-q summary:focus-visible { outline: 2px solid var(--ld-gold); outline-offset: 2px; border-radius: 16px; }

/* ---------- لینک‌های پایین ---------- */
.ld-more { text-align: center; }
.ld-more p { margin: 0 0 10px; color: var(--ld-muted); }
.ld-more-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ld-more-links a {
    padding: 8px 18px;
    border: 1px solid #e4cf9b;
    border-radius: 999px;
    background: #fff;
    color: var(--ld-navy);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}
.ld-more-links a:hover { background: var(--ld-cream); transform: translateY(-2px); color: var(--ld-navy); }

/* ---------- ریسپانسیو ---------- */
@media (max-width: 991.98px) {
    .ld-hero { grid-template-columns: 1fr; padding: 28px 22px 30px; gap: 6px; }
    .ld-hero-art { order: -1; min-height: 330px; }
    .ld-mascot { width: min(78%, 310px); }
    .ld-medallion { width: min(82%, 300px); }
    .ld-speech { top: 2%; max-width: 160px; font-size: .8rem; }
    .ld-steps-grid { grid-template-columns: 1fr; }
    .ld-consult { padding: 30px 14px 22px; border-radius: 26px; }
}
@media (max-width: 575.98px) {
    .ld-page { gap: 26px; }
    .ld-hero { border-radius: 26px; }
    .ld-cta .ld-btn { width: 100%; }
    .ld-hero-art { min-height: 290px; }
}
/* روی موبایل، ویجت شناور «تماس فوری» روی فیلدها و دکمه‌های چت می‌افتاد؛ در این صفحه مخفی است */
@media (max-width: 991.98px) {
    body.route-linkodoleh .floating-support,
    body.route-linkodoleh .floating-support-open { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .ld-mascot, .ld-speech { animation: none; }
    .ld-btn, .ld-step, .ld-q, .ld-more-links a { transition: none; }
}