/* ==========================================================================
   تُس تُس — إعادة تصميم صفحة الهبوط
   --------------------------------------------------------------------------
   يُحمَّل بعد main.css و tostos-brand.css، ويعيد تنسيق **بنية Blade الأصلية**
   (welcome.blade.php + layouts/landing/app.blade.php) بلا استيراد أي قالب خارجي
   وبلا تعديل بنية الأقسام. الهوية: ألوان tostos-brand.css + خط HacenLiner.

   القياسات اللونية (WCAG) المعتمَدة في القرارات أدناه:
     #cdefed على #05485d = 8.21 : 1   (نص فاتح على الشريط الداكن)
     #46b3ad على #05485d = 3.97 : 1   (عناصر رسومية/عناوين ثانوية)
     #05485d على #ffffff = 10.04 : 1  (النص الأساسي على أبيض)
   ========================================================================== */

:root {
    --tos-ink: #0d2b36;          /* نص أساسي أغمق قليلًا من الثانوي لراحة القراءة */
    --tos-muted: #5b7683;        /* نص ثانوي */
    --tos-line: #dbeceb;         /* حدود خفيفة بلون العلامة */
    --tos-surface: #ffffff;
    --tos-wash: #f4fbfa;         /* خلفية أقسام فاتحة جدًا */
    --tos-radius: 18px;
    --tos-radius-sm: 12px;
    --tos-shadow: 0 2px 4px rgba(5, 72, 93, .04), 0 12px 28px rgba(5, 72, 93, .07);
    --tos-shadow-lg: 0 4px 8px rgba(5, 72, 93, .06), 0 24px 48px rgba(5, 72, 93, .12);
    --tos-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------ أساسيات ------------------------------ */

body {
    color: var(--tos-ink);
    background: var(--tos-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* إيقاع رأسي موحّد بدل الفراغات المتفاوتة الضخمة */
.service-section,
.about-section,
.app-slider-section,
.cta-section,
.testimonial-section {
    padding-block: clamp(48px, 6vw, 88px) !important;
}

/* لا تمرير أفقي على أي مقاس */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* ------------------------ عناوين الأقسام ------------------------ */

.section-title {
    font-weight: 700;
    color: var(--tos-admin-secondary);
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    line-height: 1.35;
    margin-bottom: clamp(24px, 3vw, 44px);
    position: relative;
}

/* شرطة لونية صغيرة تحت العنوان المتوسّط — تُرسم بالمنطق لا بالاتجاه فتصلح RTL وLTR */
.service-section .section-title::after,
.testimonial-section .section-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, var(--tos-admin-accent), var(--tos-admin-primary));
}

.about-section .section-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    margin-block-start: 14px;
    margin-inline: 0 auto;
    background: linear-gradient(90deg, var(--tos-admin-accent), var(--tos-admin-primary));
}

/* --------------------------- القسم الرئيسي (Hero) --------------------------- */

.banner-section {
    position: relative;
    background:
        radial-gradient(1100px 520px at 85% -10%, rgba(70, 179, 173, .16), transparent 60%),
        linear-gradient(180deg, #f2fbfa 0%, #ffffff 78%);
    padding-block: clamp(32px, 5vw, 72px) clamp(48px, 6vw, 96px);
}

.banner-content .subtitle {
    color: var(--tos-admin-accent);
    font-weight: 600;
    letter-spacing: .02em;
    margin-bottom: .6rem;
}

.banner-content .title {
    color: var(--tos-admin-secondary);
    font-weight: 700;
    font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
    line-height: 1.28;
    margin-bottom: 1rem;
}

.banner-content .txt {
    color: var(--tos-muted);
    font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
    line-height: 1.85;
    max-width: 46ch;
}

/* أزرار المتاجر: حواف موحّدة وارتفاع بالحركة */
.app-btns { gap: 12px; margin-top: 1.75rem; }

.app-btns a,
.app-btns > * {
    border-radius: var(--tos-radius-sm) !important;
    overflow: hidden;
    transition: transform .25s var(--tos-ease), box-shadow .25s var(--tos-ease);
}

.app-btns a:hover {
    transform: translateY(-3px);
    box-shadow: var(--tos-shadow);
}

/* شبكة صور القسم الرئيسي */
.banner-thumb-wrapper img {
    border-radius: var(--tos-radius);
    box-shadow: var(--tos-shadow);
}

/* ------------------------- بطاقات الخدمات ------------------------- */

.service-section { background: var(--tos-wash); }

.service__item {
    background: var(--tos-surface);
    border: 1px solid var(--tos-line);
    border-radius: var(--tos-radius);
    padding: 28px 22px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 1px 2px rgba(5, 72, 93, .04);
    transition: transform .3s var(--tos-ease), box-shadow .3s var(--tos-ease), border-color .3s var(--tos-ease);
}

.service__item:hover {
    transform: translateY(-6px);
    border-color: var(--tos-admin-accent);
    box-shadow: var(--tos-shadow-lg);
}

.service__item-icon {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: linear-gradient(160deg, #eaf8f7, #d6efee);
    margin-bottom: 18px;
    overflow: hidden;
    flex: none;
}

.service__item-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.service__item-content .title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--tos-admin-secondary);
    margin-bottom: .4rem;
    line-height: 1.5;
}

.service__item-content .txt {
    color: var(--tos-muted);
    font-size: .875rem;
    line-height: 1.8;
}

/* زر «قراءة المزيد» — حبة مملوءة عند المرور */
.service__item-btn {
    margin-top: auto;
    padding-top: 16px;
}

.service__item-btn a,
.service__item-btn button {
    display: inline-block;
    border: 1px solid var(--tos-admin-primary);
    color: var(--tos-admin-primary);
    background: transparent;
    border-radius: 999px;
    padding: 8px 22px;
    font-size: .875rem;
    font-weight: 600;
    transition: background-color .25s var(--tos-ease), color .25s var(--tos-ease), box-shadow .25s var(--tos-ease);
}

.service__item-btn a:hover,
.service__item-btn button:hover {
    background: var(--tos-admin-primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(54, 120, 141, .28);
}

/* أسهم المنزلقة */
.slide-icon,
.owl-btn {
    width: 42px;
    height: 42px;
    display: inline-grid !important;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--tos-line);
    background: var(--tos-surface);
    color: var(--tos-admin-primary);
    transition: background-color .25s var(--tos-ease), color .25s var(--tos-ease), border-color .25s var(--tos-ease);
}

.slide-icon:hover,
.owl-btn:hover {
    background: var(--tos-admin-primary);
    border-color: var(--tos-admin-primary);
    color: #fff;
}

/* --------------------------- قسم «من نحن» --------------------------- */

.about__wrapper {
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
}

.about__wrapper-thumb .main-img img,
.about__wrapper-thumb img {
    border-radius: var(--tos-radius);
    box-shadow: var(--tos-shadow);
}

.about__wrapper-content {
    background: var(--tos-surface);
    border: 1px solid var(--tos-line);
    border-radius: var(--tos-radius);
    padding: clamp(24px, 3vw, 40px);
    box-shadow: var(--tos-shadow);
}

.about__wrapper-content .txt,
.about__wrapper-content p {
    color: var(--tos-muted);
    line-height: 1.95;
}

.tos-read-more-link,
.cmn--btn2 {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--tos-admin-primary);
    font-weight: 600;
    transition: gap .25s var(--tos-ease), color .25s var(--tos-ease);
}

.tos-read-more-link:hover,
.cmn--btn2:hover {
    color: var(--tos-admin-secondary);
    gap: .85rem;
}

/* ----------------------- قسم عرض التطبيق ----------------------- */

.app-slider-section { background: var(--tos-wash); }

.app-slider-wrapper {
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
}

.app-content {
    background: var(--tos-surface);
    border: 1px solid var(--tos-line);
    border-radius: var(--tos-radius);
    padding: clamp(24px, 3vw, 40px);
    box-shadow: var(--tos-shadow);
}

.app-content .subtitle {
    color: var(--tos-admin-secondary);
    font-weight: 700;
    font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
    line-height: 1.5;
    margin-bottom: .75rem;
}

.app-content p { color: var(--tos-muted); line-height: 1.9; }

.app-counter,
.slider-counter {
    color: var(--tos-muted);
    font-weight: 600;
    align-self: center;
}

/* ------------- شريط الدعوة للتسجيل: الركيزة الداكنة ------------- */
/* هذا القسم كان باهتًا كبقية الصفحة، فلم يكن للصفحة أي مرساة بصرية.
   جُعل بلون العلامة الداكن (تباين مقيس 8.21 للنص الفاتح عليه). */

.cta-section { background: var(--tos-surface); }

.cta-main,
.cta-wrapper {
    background: linear-gradient(135deg, #05485d 0%, #0a5f78 55%, #36788d 100%) !important;
    border-radius: clamp(16px, 2vw, 28px);
    overflow: hidden;
    position: relative;
    box-shadow: var(--tos-shadow-lg);
}

.cta-wrapper { padding: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 48px); }

.cta-wrapper::after {
    content: "";
    position: absolute;
    inset-block-start: -40%;
    inset-inline-end: -10%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(70, 179, 173, .28), transparent 65%);
    pointer-events: none;
}

.cta-wrapper .title,
.cta-wrapper .text-btn-title,
.cta-wrapper h2,
.cta-wrapper h3 {
    color: #ffffff !important;
    font-weight: 700;
    line-height: 1.4;
}

.cta-wrapper p,
.cta-wrapper .content p {
    color: var(--tos-active-text) !important;
    line-height: 1.9;
}

/* زر التسجيل: فاتح على الداكن */
.cta-wrapper .cmn--btn,
.tos-cta-register-btn {
    background: #ffffff !important;
    color: var(--tos-admin-secondary) !important;
    border: none !important;
    border-radius: 999px;
    padding: 12px 34px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    transition: transform .25s var(--tos-ease), box-shadow .25s var(--tos-ease), background-color .25s var(--tos-ease);
}

.cta-wrapper .cmn--btn:hover,
.tos-cta-register-btn:hover {
    transform: translateY(-2px);
    background: var(--tos-active-text) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
}

/* --------------------------- آراء العملاء --------------------------- */

.testimonial-section {
    background: var(--tos-wash);
    overflow: hidden;              /* يمنع قصّ/تسرّب عناصر المنزلقة على الحواف */
}

.testimonial__item,
.testimonial__item-wrapper {
    background: var(--tos-surface);
    border: 1px solid var(--tos-line);
    border-radius: var(--tos-radius);
    padding: 28px 24px;
    height: 100%;
    box-shadow: 0 1px 2px rgba(5, 72, 93, .04);
    transition: transform .3s var(--tos-ease), box-shadow .3s var(--tos-ease);
}

.testimonial__item:hover,
.testimonial__item-wrapper:hover {
    transform: translateY(-4px);
    box-shadow: var(--tos-shadow);
}

.testimonial__item-img img {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--tos-line);
}

.testimonial__item-cont .fw-bold { color: var(--tos-admin-secondary); }
.testimonial__item-cont .text--secondary { color: var(--tos-admin-accent) !important; font-size: .875rem; }
.testimonial__item-cont p { color: var(--tos-muted); line-height: 1.9; }

/* ------------------------------ الترويسة ------------------------------ */

header .navbar-bottom,
.navbar-bottom {
    border-radius: var(--tos-radius);
    box-shadow: 0 6px 24px rgba(5, 72, 93, .08);
}

header a { transition: color .2s var(--tos-ease); }

/* ------------------------------ التذييل ------------------------------ */

footer { background: var(--tos-admin-secondary); }
footer, footer p, footer a, footer li { color: var(--tos-active-text); }
footer a:hover { color: #ffffff; }
footer h6, footer h5, footer .title { color: #ffffff; }

/* حقل النشرة البريدية */
.subscribe-form input[type="email"],
footer input[type="email"] {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 12px 20px;
}

/* ------------------------------ تجاوب ------------------------------ */

@media (max-width: 991.98px) {
    .banner-wrapper { flex-direction: column; }
    .banner-content { text-align: center; width: 100%; }
    .banner-content .txt { max-width: none; margin-inline: auto; }
    .app-btns { justify-content: center; }

    /* main.css يعطي .banner-thumb عرضًا صفريًا مع flex-grow:1 (يعتمد على التمدّد
       الأفقي داخل صفّ). عند التكديس عموديًا يصير flex-grow على المحور الرأسي
       فينهار العرض إلى صفر وتختفي شبكة الصور تاركة فراغًا طويلًا. */
    .banner-thumb {
        width: 100% !important;
        max-width: 100% !important;
        flex-grow: 0 !important;
    }

    .about__wrapper,
    .app-slider-wrapper { flex-direction: column; }
    .about__wrapper > *,
    .app-slider-wrapper > * { width: 100%; }
}

@media (max-width: 575.98px) {
    .service__item { padding: 22px 16px 20px; }
    .service__item-icon { width: 76px; height: 76px; }
    .cta-wrapper { text-align: center; }
    .cta-wrapper::after { display: none; }
}

/* --------------------- احترام تقليل الحركة --------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .service__item:hover,
    .testimonial__item:hover,
    .app-btns a:hover { transform: none; }
}

/* ==========================================================================
   طبقة رفع الأولوية
   --------------------------------------------------------------------------
   main.css و tostos-brand.css يستخدمان !important وسلاسل `html body ...`،
   فلا تكفي المحدِّدات البسيطة أعلاه. ما يلي يعيد فرض قرارات التصميم فقط
   حيث ثبت بالفحص الحيّ أنها كانت مهزومة — لا تعميم بلا سبب.
   ========================================================================== */

/* --- بطاقات الخدمات: السطح والحدّ والظل كانت تُهزم --- */
html body .service-section .service__item {
    background: var(--tos-surface) !important;
    border: 1px solid var(--tos-line) !important;
    box-shadow: 0 1px 2px rgba(5, 72, 93, .05) !important;
}

html body .service-section .service__item:hover {
    border-color: var(--tos-admin-accent) !important;
    box-shadow: var(--tos-shadow-lg) !important;
}

/* --- شريط الدعوة: ::before في main.css كان يغطّي التدرّج بلون فاتح --- */
html body .cta-section .cta-wrapper::before {
    background: transparent !important;
    opacity: 0 !important;
}

html body .cta-section .cta-wrapper,
html body .cta-section .cta-main {
    background: linear-gradient(135deg, #05485d 0%, #0a5f78 55%, #36788d 100%) !important;
    box-shadow: var(--tos-shadow-lg) !important;
}

/* النص داخل الشريط الداكن — main.css كان يفرض #115c73 عبر `.cta-wrapper .content .title` */
html body .cta-section .cta-wrapper .content,
html body .cta-section .cta-wrapper .content *,
html body .cta-section .cta-wrapper .content .title {
    color: #ffffff !important;
}

html body .cta-section .cta-wrapper .content p,
html body .cta-section .cta-wrapper .content span {
    color: var(--tos-active-text) !important;
}

/* زر التسجيل: أبيض على الداكن (tostos-brand.css كان يفرض لون العلامة على العلامة) */
html body .cta-section .cta-wrapper a.tos-cta-register-btn,
html body .cta-section .cta-wrapper a.cmn--btn {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--tos-admin-secondary) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18) !important;
}

html body .cta-section .cta-wrapper a.tos-cta-register-btn *,
html body .cta-section .cta-wrapper a.cmn--btn * {
    color: var(--tos-admin-secondary) !important;
}

html body .cta-section .cta-wrapper a.tos-cta-register-btn:hover,
html body .cta-section .cta-wrapper a.tos-cta-register-btn:focus,
html body .cta-section .cta-wrapper a.cmn--btn:hover,
html body .cta-section .cta-wrapper a.cmn--btn:focus {
    background: var(--tos-active-text) !important;
    border-color: var(--tos-active-text) !important;
    color: var(--tos-admin-secondary) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .24) !important;
}

html body .cta-section .cta-wrapper a.tos-cta-register-btn:hover *,
html body .cta-section .cta-wrapper a.cmn--btn:hover * {
    color: var(--tos-admin-secondary) !important;
}

/* --- بطاقات آراء العملاء --- */
html body .testimonial-section .testimonial__item,
html body .testimonial-section .testimonial__item-wrapper {
    background: var(--tos-surface) !important;
    border: 1px solid var(--tos-line) !important;
}

/* زر التسجيل ظلّ مهزومًا بتساوي الأولوية مع tostos-brand.css؛ [class] يرفع الوزن بأمان
   (لا يغيّر ما يُطابَق، يزيد وزنه فقط) فيحسم الأمر بلا !important إضافي. */
html body section.cta-section div.cta-wrapper a.tos-cta-register-btn[class],
html body section.cta-section div.cta-wrapper a.cmn--btn[class] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #ffffff !important;
    color: var(--tos-admin-secondary) !important;
}

html body section.cta-section div.cta-wrapper a.tos-cta-register-btn[class]:hover,
html body section.cta-section div.cta-wrapper a.cmn--btn[class]:hover {
    background: var(--tos-active-text) !important;
    background-color: var(--tos-active-text) !important;
    border-color: var(--tos-active-text) !important;
    color: var(--tos-admin-secondary) !important;
}