:root {
    --brand-primary: #1E6F5C;
    --brand-primary-dark: #14503F;
    --brand-accent: #F2A65A;
}

html, body {
    font-family: 'Cairo', sans-serif;
    scroll-behavior: smooth;
}

.text-primary { color: var(--brand-primary) !important; }
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
}
.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-outline-primary:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.bg-primary { background-color: var(--brand-primary) !important; }

.bg-gradient-primary {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
}

.step-number {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--brand-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.5rem;
}

.hero-card { border: 1px solid rgba(0,0,0,.05); }

/* ===== Custom promo video player ===== */
.video-player {
    position: relative;
    max-width: 280px;
    margin: 0 auto;
    overflow: hidden;
    background: #000;
    cursor: pointer;
    direction: ltr; /* keep the timeline left-to-right */
}

.promo-video {
    width: 100%;
    display: block;
    background: #000;
}

.video-player button {
    border: 0;
    padding: 0;
    color: #fff;
    cursor: pointer;
}

.video-player svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.vp-play,
.vp-mute,
.vp-progress {
    position: absolute;
    transition: opacity .25s ease;
}

.vp-play {
    top: 50%;
    left: 50%;
    width: 68px;
    height: 68px;
    margin: -34px 0 0 -34px;
    padding: 20px !important;
    border-radius: 50%;
    background: rgba(30, 111, 92, 0.8);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}
.vp-play:hover { background: rgba(30, 111, 92, 0.95); }
.vp-play .vp-icon-play { transform: translateX(2px); }

.vp-mute {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    padding: 7px !important;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
}

.vp-progress {
    left: 0;
    right: 0;
    bottom: 0;
    height: 14px; /* generous hit area around the thin visible track */
    display: flex;
    align-items: flex-end;
    touch-action: none;
}
.vp-progress::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 4px;
    background: rgba(255, 255, 255, .3);
}
.vp-progress-fill {
    position: relative;
    height: 4px;
    width: 0;
    background: var(--brand-primary);
}
.vp-progress:hover::before,
.vp-progress:hover .vp-progress-fill { height: 6px; }

.vp-icon-pause,
.vp-icon-muted,
.video-player.is-playing .vp-icon-play,
.video-player.is-muted .vp-icon-sound { display: none; }
.video-player.is-playing .vp-icon-pause,
.video-player.is-muted .vp-icon-muted { display: block; }

/* Controls are hidden unless the player is "active" (hovered / touched / focused).
   The big play button also stays visible whenever the video is not playing. */
.vp-mute,
.vp-progress,
.video-player.is-playing .vp-play { opacity: 0; pointer-events: none; }
.video-player.is-active .vp-mute,
.video-player.is-active .vp-progress,
.video-player.is-active .vp-play { opacity: 1; pointer-events: auto; }
.video-player.is-playing:not(.is-active) { cursor: none; }

.video-player button:focus-visible,
.vp-progress:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

@media (max-width: 767.98px) {
    main { padding-bottom: 4.5rem; }
}

.accordion-button:not(.collapsed) {
    color: var(--brand-primary-dark);
    background-color: rgba(30, 111, 92, 0.08);
}

.form-label { font-weight: 600; }

.alert-pre {
    white-space: pre-line;
}

.spinner-border-sm-inline {
    width: 1rem;
    height: 1rem;
    border-width: .15em;
}

/* ===== لمسات بصرية: انيميشن ظهور تدريجي + تفاعل بسيط عند المرور ===== */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s ease-out, transform .5s ease-out;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

.border.rounded-4, .border.rounded-3 {
    transition: transform .2s ease, box-shadow .2s ease;
}
.border.rounded-4:hover, .border.rounded-3:hover {
    transform: translateY(-4px);
    box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.08);
}

@keyframes nsh-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.hero-card img {
    animation: nsh-float 5s ease-in-out infinite;
}

/* احترام من يفضّل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero-card img { animation: none; }
    .border.rounded-4:hover, .border.rounded-3:hover { transform: none; }
}

/* ===== معالج الخطوات (نموذج اطلب مدرس) ===== */
.form-step {
    animation: nsh-step-in .35s ease-out;
}
@keyframes nsh-step-in {
    from { opacity: 0; transform: translateX(8px); }
    to { opacity: 1; transform: none; }
}
[dir="rtl"] .form-step {
    animation-name: nsh-step-in-rtl;
}
@keyframes nsh-step-in-rtl {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: none; }
}