/* Real Estate ERP Software in Saudi Arabia (industry_real_estate_ksa.html).
   Shares the components of industry_real_estate_uae.css; this file swaps the palette to
   Saudi green + gold and adds the ZATCA invoice, installment plan and Vision 2030 blocks. */

.rksa {
    --ru-ink: #0f2a22;
    --ru: #0e7a4d;
    --ru-2: #19a067;
    --ru-soft: #e7f5ee;
    --ru-soft-2: #f4faf7;
    --ru-line: #dcebe3;
    --ru-muted: #5a6d65;
    --ru-grad: linear-gradient(120deg, #1fae70 0%, #0e7a4d 100%);
    --rx-ink: #0f2a22;
    --rx: #0e7a4d;
    --rx-2: #19a067;
    --rx-muted: #5a6d65;
    --rx-line: #dcebe3;
    --rx-soft: #e7f5ee;
}
.rex-hero.rksa {
    background:
        radial-gradient(45% 55% at 85% 20%, rgba(25, 160, 103, .16) 0%, transparent 65%),
        radial-gradient(35% 45% at 5% 95%, rgba(224, 189, 99, .16) 0%, transparent 65%),
        linear-gradient(180deg, #f3faf6 0%, #fbfdfc 100%);
}
.rksa .rex-grad { background: linear-gradient(120deg, #1fae70 0%, #0e7a4d 60%, #095c3a 100%); -webkit-background-clip: text; background-clip: text; }

.tk-answer {
    --qa-accent: #0e7a4d; --qa-accent-soft: rgba(14, 122, 77, .07); --qa-accent-line: rgba(14, 122, 77, .22);
    --qa-grad: linear-gradient(120deg, #e0bd63 0%, #c19a3d 100%);
    --qa-ink: #0f2a22; --qa-muted: #5a6d65;
}

.rksa .ruae-card--lead, .rksa .ruae-cta-card {
    background:
        radial-gradient(70% 60% at 100% 0%, rgba(224, 189, 99, .22) 0%, transparent 60%),
        linear-gradient(160deg, #0f4d33 0%, #0a3525 100%);
    box-shadow: 0 1.8rem 3.2rem -1.8rem rgba(10, 53, 37, .7);
}
.rksa .ruae-card--lead p, .rksa .ruae-cta-card { color: #c9e3d6; }
.rksa .ruae-mod-grid li:hover { border-color: #bfe0cf; }

/* hero: ZATCA tax invoice */
.rksa-inv-body { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .6rem; align-items: center; }
.rksa-qr {
    width: 3rem; height: 3rem; padding: .2rem; border-radius: .35rem; background: #fff;
    border: 1px solid var(--ru-line); fill: var(--ru-ink);
}
.rksa-qr rect { animation: rksaQr .5s calc(.4s + (var(--d, 0) * 1ms)) both; }
.rksa-inv-lines { margin: 0; display: grid; gap: .2rem; }
.rksa-inv-lines div { display: flex; justify-content: space-between; gap: .4rem; font-size: .6rem; }
.rksa-inv-lines dt { font-weight: 600; color: var(--ru-muted); }
.rksa-inv-lines dd { margin: 0; font-weight: 700; white-space: nowrap; }
.rksa-inv-lines .tot { padding-top: .25rem; border-top: 1px dashed var(--ru-line); }
.rksa-inv-lines .tot dt, .rksa-inv-lines .tot dd { color: var(--ru-ink); font-weight: 800; font-size: .66rem; }
.rksa-steps { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; }
.rksa-steps li {
    display: flex; align-items: center; justify-content: center; gap: .2rem; padding: .28rem .2rem;
    border-radius: 2rem; font-size: .5rem; font-weight: 800; text-align: center; line-height: 1.15;
    color: var(--ru-muted); background: var(--ru-soft-2); border: 1px solid var(--ru-line);
}
.rksa-steps li i { font-size: .65rem; opacity: 0; }
.rksa-steps li:nth-child(1) { animation: rksaStep1 9s .8s infinite; }
.rksa-steps li:nth-child(2) { animation: rksaStep2 9s .8s infinite; }
.rksa-steps li:nth-child(3) { animation: rksaStep3 9s .8s infinite; }
.rksa-steps li:nth-child(1) i { animation: rksaTick1 9s .8s infinite; }
.rksa-steps li:nth-child(2) i { animation: rksaTick2 9s .8s infinite; }
.rksa-steps li:nth-child(3) i { animation: rksaTick3 9s .8s infinite; }

/* hero: off-plan installment plan */
.rksa-plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.rksa-plan-list li {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .35rem;
    padding: .32rem .4rem; border-radius: .5rem; background: var(--ru-soft-2);
}
.rksa-plan-list .m { font-size: .56rem; font-weight: 700; color: var(--ru-muted); white-space: nowrap; }
.rksa-plan-list .amt { font-size: .6rem; font-weight: 700; white-space: nowrap; }
.rksa-plan-list .st {
    position: relative; width: 3.1rem; height: 1.05rem; display: flex; align-items: center; justify-content: center;
    border-radius: 2rem; font-size: .52rem; font-weight: 800;
}
.rksa-plan-list .paid .st { color: #0e7a4d; background: #dff3e8; }
.rksa-plan-list .next .st { color: var(--ru-muted); background: #eef2f0; }
.rksa-plan-list .flip .st > span {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 2rem;
}
.rksa-plan-list .flip .due { color: #8a6d1f; background: #fbf1d7; }
.rksa-plan-list .flip .ok { color: #0e7a4d; background: #dff3e8; opacity: 0; animation: rksaPaid 9s 1s infinite; }
.rksa-plan-bar i { width: 40%; background: var(--ru-grad); animation: rksaPlanBar 9s 1s infinite; }

.rksa-visual .ruae-ring .val { stroke-dasharray: 91 100; }
.rksa-visual .ruae-dash-mid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.rksa-visual .ruae-float-vat .ic { font-size: 1.15rem; }

/* Vision 2030 */
.rksa-vision-card {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem 3.5rem; align-items: center;
    padding: 2.4rem 2.6rem; border-radius: 1.4rem; background: #fff; border: 1px solid var(--ru-line);
    box-shadow: 0 1.4rem 2.8rem -2.2rem rgba(10, 53, 37, .45);
}
.rksa-vision-card h2 { margin: 1rem 0 .8rem; color: var(--ru-ink); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.2; }
.rksa-vision-card p { margin: 0; color: var(--ru-muted); line-height: 1.7; }
.ruae-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1.1rem; font-weight: 700; color: var(--ru); }
.ruae-link:hover { color: var(--ru-ink); }
.rksa-related { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.rksa-related a {
    display: flex; align-items: center; gap: .85rem; padding: .95rem 1.05rem; border-radius: 1rem;
    background: var(--ru-soft-2); border: 1px solid var(--ru-line); color: var(--ru-muted); font-size: .85rem;
    transition: transform .2s ease, border-color .2s ease;
}
.rksa-related a:hover { transform: translateY(-2px); border-color: #bfe0cf; color: var(--ru-muted); }
.rksa-related i {
    flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: .75rem;
    font-size: 1.2rem; color: #fff; background: var(--ru-grad);
}
.rksa-related b { display: block; color: var(--ru-ink); font-size: .95rem; }

@keyframes rksaQr { from { opacity: 0; } }
@keyframes rksaStep1 { 0%, 6% { color: var(--ru-muted); background: var(--ru-soft-2); } 10%, 92% { color: #0e7a4d; background: #dff3e8; } 100% { color: var(--ru-muted); background: var(--ru-soft-2); } }
@keyframes rksaStep2 { 0%, 30% { color: var(--ru-muted); background: var(--ru-soft-2); } 34%, 92% { color: #0e7a4d; background: #dff3e8; } 100% { color: var(--ru-muted); background: var(--ru-soft-2); } }
@keyframes rksaStep3 { 0%, 54% { color: var(--ru-muted); background: var(--ru-soft-2); } 58%, 92% { color: #fff; background: #0e7a4d; } 100% { color: var(--ru-muted); background: var(--ru-soft-2); } }
@keyframes rksaTick1 { 0%, 6% { opacity: 0; } 10%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rksaTick2 { 0%, 30% { opacity: 0; } 34%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rksaTick3 { 0%, 54% { opacity: 0; } 58%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rksaPaid { 0%, 45% { opacity: 0; } 50%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes rksaPlanBar { 0%, 45% { width: 40%; } 50%, 90% { width: 70%; } 96%, 100% { width: 40%; } }

@media (max-width: 991.98px) {
    .rksa-vision-card { grid-template-columns: minmax(0, 1fr); padding: 2rem; }
}
@media (max-width: 575.98px) {
    .rksa-vision-card { padding: 1.5rem 1.3rem; }
    .rksa-inv { display: none; }
    .rksa-visual .ruae-dash-mid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .rksa-qr rect, .rksa-steps li, .rksa-steps li i, .rksa-plan-list .flip .ok, .rksa-plan-bar i { animation: none; }
    .rksa-steps li { color: #0e7a4d; background: #dff3e8; }
    .rksa-steps li i { opacity: 1; }
    .rksa-related a { transition: none; }
}