/*
 * Rabet: modern look for the public landing page (resources/views/home.blade.php).
 * Loaded after the vendor's style.css; it only restyles existing markup, so every
 * form, setting and text stays editable from the panel. Brand colours still come from
 * the panel (--primary-color, --secondary-color, --secondary-color1).
 * To switch it off, remove its <link> from resources/views/layouts/home_page/include.blade.php.
 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root {
    --r-ink: #0f2e44;
    --r-muted: #5c6f7f;
    --r-surface: #f5f8fa;
    --r-line: rgba(15, 46, 68, 0.08);
    --r-radius: 20px;
    --r-radius-lg: 28px;
    --r-shadow: 0 10px 30px rgba(15, 46, 68, 0.07);
    --r-shadow-lg: 0 24px 60px rgba(15, 46, 68, 0.14);
    --r-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color1) 100%);
    --r-hero: linear-gradient(135deg, #0d2738 0%, var(--secondary-color) 55%, #1b6670 100%);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
    background: #fff;
    color: var(--r-ink);
    -webkit-font-smoothing: antialiased;
}
body, button, input, textarea, select, label, p, a, li, h1, h2, h3, h4, h5, h6,
span:not([class*="fa-"]), .commonTitle, .commonDesc, .commonText {
    font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif !important;
}
::selection { background: rgba(86, 204, 153, 0.3); }
.commonMT { margin-top: 96px; }
@media (max-width: 767px) { .commonMT { margin-top: 64px; } }

/* ---------- Buttons ---------- */
.commonBtn {
    background: var(--r-gradient) !important;
    border-radius: 999px !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
    box-shadow: 0 10px 24px rgba(56, 163, 165, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}
.commonBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(56, 163, 165, 0.38);
    filter: saturate(1.1);
}

/* ---------- Navbar ---------- */
.navbar {
    background: rgba(255, 255, 255, 0.85) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 var(--r-line);
}
.navbar .navbarWrapper { height: 78px; }
.navbar .navLogo img.logo { max-height: 46px; width: auto; }
.navbar .listItems a,
.navbar .listItems .dropdown-toggle {
    color: var(--r-ink) !important;
    font-weight: 500;
    font-size: 15.5px;
    transition: color 0.2s;
    background: transparent !important;
    border: none !important;
}
.navbar .listItems a:hover { color: var(--secondary-color1) !important; }
.navbar .loginBtnsWrapper { gap: 10px; }
.navbar .loginBtnsWrapper .commonBtn { margin-top: 0; padding: 10px 22px !important; }
.navbar .commonBtn.redirect-login {
    background: transparent !important;
    color: var(--secondary-color) !important;
    border: 1.5px solid rgba(33, 86, 121, 0.22) !important;
    box-shadow: none;
}
.navbar .commonBtn.redirect-login:hover { border-color: var(--secondary-color) !important; }
.dropdown-menu {
    border: 1px solid var(--r-line);
    border-radius: 14px;
    box-shadow: var(--r-shadow-lg);
    padding: 8px;
}
.dropdown-menu hr { margin: 4px 0; opacity: 0.08; }
.dropdown-item { border-radius: 10px; padding: 8px 14px; }

/* ---------- Hero ---------- */
.heroSection { background: #fff !important; padding: 0 !important; }
.heroSection .linesBg { background: none !important; }
.heroSection .colorBg {
    position: relative;
    overflow: hidden;
    padding: 90px 0 140px;
    background:
        radial-gradient(900px 520px at 88% -8%, rgba(86, 204, 153, 0.35), transparent 60%),
        radial-gradient(700px 420px at -5% 105%, rgba(56, 163, 165, 0.40), transparent 60%),
        var(--r-hero) !important;
}
/* soft dotted pattern */
.heroSection .colorBg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    pointer-events: none;
}
/* wave into the next section */
.heroSection .colorBg::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 80px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path fill='%23ffffff' d='M0,48 C240,96 480,0 720,24 C960,48 1200,96 1440,40 L1440,80 L0,80 Z'/></svg>") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
.heroSection .container { position: relative; z-index: 1; }
.heroSection .flex_column_start { gap: 14px; padding-top: 10px; }
.heroSection .commonTitle {
    color: #fff !important;
    font-size: clamp(32px, 4vw, 54px) !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}
.heroSection .commonDesc {
    display: inline-block;
    color: #c9f5e3 !important;
    font-size: clamp(18px, 1.7vw, 23px) !important;
    font-weight: 600 !important;
}
.heroSection .commonText {
    color: rgba(255, 255, 255, 0.84) !important;
    font-size: 17px !important;
    line-height: 2 !important;
    max-width: 580px;
}
.heroSection .flex_column_start .commonBtn {
    background: #fff !important;
    color: var(--secondary-color) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    padding: 14px 34px !important;
    font-size: 17px !important;
}
.heroSection .heroImg { padding: 10px; }
.heroSection .heroImg > img {
    width: 100%;
    border-radius: var(--r-radius-lg);
    box-shadow: 0 34px 70px rgba(0, 0, 0, 0.35);
    animation: rabetFloat 7s ease-in-out infinite;
}
.heroSection .topRated.card,
.heroSection .textWrapper {
    background: rgba(255, 255, 255, 0.96) !important;
    border: none !important;
    border-radius: 18px !important;
    box-shadow: var(--r-shadow-lg) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.heroSection .topRated.card {
    flex-direction: row !important;
    max-width: 320px;
    left: 0 !important;
    bottom: 36px !important;
    padding: 12px 16px !important;
}
.heroSection .topRated.card img { width: 46px; height: 46px; border-radius: 12px; }
.heroSection .topRated.card div:first-child { flex: 0 0 auto; }
.heroSection .textWrapper { max-width: 340px; padding: 14px 18px !important; }
.heroSection .textWrapper span,
.heroSection .topRated.card span {
    color: var(--r-ink) !important;
    font-weight: 600;
    font-size: 15px !important;
    line-height: 1.7 !important;
}
@keyframes rabetFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
    .heroSection .heroImg > img { animation: none; }
}
@media (max-width: 991px) {
    .heroSection .colorBg { padding: 56px 0 110px; text-align: center; }
    .heroSection .flex_column_start { align-items: center; }
    .heroSection .heroImgWrapper { margin-top: 36px; }
}

/* ---------- Section titles ---------- */
.sectionTitle { margin-bottom: 40px; }
.sectionTitle > span,
.sectionTitle .title,
.sectionTitle .greenText {
    color: var(--r-ink) !important;
    font-size: clamp(26px, 3vw, 38px) !important;
    font-weight: 700 !important;
    text-align: center;
}
.sectionTitle .greenText { color: var(--secondary-color1) !important; font-size: 15px !important; letter-spacing: 0.5px; }
.sectionTitle::after { display: none !important; }
.sectionTitle::before {
    width: 64px !important;
    height: 5px !important;
    border-radius: 99px !important;
    background: var(--r-gradient) !important;
}

/* ---------- Features grid ---------- */
.features .cardWrapper { row-gap: 22px; }
.features .cardWrapper .card {
    background: #fff;
    border: 1px solid var(--r-line) !important;
    border-radius: var(--r-radius) !important;
    box-shadow: var(--r-shadow) !important;
    padding: 20px 22px !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.features .cardWrapper .card:hover {
    transform: translateY(-6px);
    box-shadow: var(--r-shadow-lg) !important;
    border-color: rgba(86, 204, 153, 0.45) !important;
}
.features .cardWrapper .card img {
    width: 62px;
    height: 62px;
    padding: 13px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(86, 204, 153, 0.16), rgba(56, 163, 165, 0.16));
}
.features .cardWrapper .card span { font-weight: 600; color: var(--r-ink); font-size: 17px; }
.features .view-more-feature { display: block; margin: 26px auto 0; }

/* ---------- Feature sections (school panel / teacher panel / apps) ---------- */
[class*="left-section-"],
.right-feature-section { position: relative; }
.right-feature-section { background: var(--r-surface); padding: 70px 0; }
.tabsMainWrapper .title,
.contentWrapper .title { color: var(--r-ink) !important; font-weight: 700 !important; }
.tabsWrapper .tabs .tab,
.tabsWrapper .tab {
    border-radius: 16px !important;
    border: 1px solid transparent;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
/* Arabic must wrap between words, never inside them */
.tabsWrapper .tab,
.tabsWrapper .tab * {
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
}
.tabsWrapper .tab:hover,
.tabsWrapper .tab.active {
    background: #fff !important;
    border-color: var(--r-line);
    box-shadow: var(--r-shadow);
}
.contentWrapper img,
.content-container img {
    border-radius: var(--r-radius-lg) !important;
    box-shadow: var(--r-shadow-lg);
}

/* ---------- Why us ---------- */
.whyBest .whyBestTextWrapper { gap: 14px; }
.whyBest .whyBestPara { color: var(--r-muted) !important; line-height: 2; font-size: 17px; }
.whyBest .listWrapper span { font-weight: 500; }
.whyBest .listWrapper i,
.whyBest .listWrapper .fa-circle-check { color: var(--primary-color) !important; }
.whyBest img { border-radius: var(--r-radius-lg); }

/* ---------- Pricing ---------- */
.pricing {
    background:
        radial-gradient(700px 380px at 100% 0%, rgba(86, 204, 153, 0.10), transparent 60%),
        var(--r-surface) !important;
    padding: 80px 0 !important;
}
.pricing .pricingBox {
    background: #fff;
    border: 1px solid var(--r-line) !important;
    border-radius: 24px !important;
    box-shadow: var(--r-shadow) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.pricing .pricingBox:hover { transform: translateY(-6px); box-shadow: var(--r-shadow-lg) !important; }
.pricing .pricingBox.premium {
    border: 2px solid transparent !important;
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--r-gradient) border-box !important;
    box-shadow: 0 24px 60px rgba(56, 163, 165, 0.22) !important;
}
.pricing .badge {
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-weight: 600 !important;
}
.pricing .pricingBtn,
.pricing .pricingBox .commonBtn { width: 100%; }
.pricing .pricingBtn {
    background: #fff !important;
    color: var(--secondary-color) !important;
    border: 1.5px solid rgba(33, 86, 121, 0.25) !important;
    font-weight: 600;
    transition: all 0.2s ease !important;
}
.pricing .pricingBox:hover .pricingBtn,
.pricing .premium .pricingBtn {
    background: var(--r-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 10px 24px rgba(56, 163, 165, 0.30);
}

/* ---------- Custom package banner ---------- */
.customPack .wrapper {
    background: var(--r-hero) !important;
    border-radius: var(--r-radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--r-shadow-lg);
}
.customPack .row { background: transparent !important; opacity: 1 !important; padding: 40px !important; }
.customPack .commonBtn { background: #fff !important; color: var(--secondary-color) !important; }

/* ---------- FAQ ---------- */
.faqs .accordion-item {
    border: 1px solid var(--r-line) !important;
    border-radius: 16px !important;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: var(--r-shadow);
}
.faqs .accordion-button { font-weight: 600; }
.faqs .accordion-button:not(.collapsed) { background: rgba(86, 204, 153, 0.10); color: var(--r-ink); box-shadow: none; }

/* ---------- Contact ---------- */
.getInTouch { background: var(--r-surface) !important; padding: 80px 0 110px !important; }
.getInTouch .infoWrapper {
    border-radius: var(--r-radius) !important;
    box-shadow: var(--r-shadow) !important;
    border: 1px solid var(--r-line);
    transition: transform 0.25s ease;
}
.getInTouch .infoWrapper:hover { transform: translateY(-4px); }
.getInTouch .infoWrapper .icon {
    background: var(--r-gradient) !important;
    color: #fff !important;
    border-radius: 16px !important;
}
.getInTouch .infoWrapper .icon i { color: #fff !important; }
.getInTouch input:not([type="submit"]),
.getInTouch textarea {
    border: 1px solid rgba(15, 46, 68, 0.14) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    background: #fff !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.getInTouch input:not([type="submit"]):focus,
.getInTouch textarea:focus {
    outline: none;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(86, 204, 153, 0.18) !important;
}

.getInTouch input[type="submit"].commonBtn { width: 100%; padding: 14px 28px !important; font-size: 17px !important; }

/* ---------- Get the app ---------- */
.ourApp .wrapper,
.ourApp > .row {
    background:
        radial-gradient(600px 300px at 100% 0%, rgba(86, 204, 153, 0.18), transparent 60%),
        linear-gradient(135deg, #eef8f4 0%, #e8f2f7 100%);
    border-radius: var(--r-radius-lg);
    padding: 40px 30px;
}
.ourApp .ourAppImg img { border-radius: var(--r-radius-lg); box-shadow: var(--r-shadow-lg); }
.ourApp .storeImgs img { transition: transform 0.2s; }
.ourApp .storeImgs img:hover { transform: translateY(-3px); }

/* ---------- Footer ---------- */
footer {
    background:
        radial-gradient(800px 360px at 0% 0%, rgba(86, 204, 153, 0.16), transparent 60%),
        linear-gradient(135deg, #0d2738 0%, var(--secondary-color) 100%) !important;
    color: rgba(255, 255, 255, 0.78);
    padding: 64px 0 30px !important;
}
footer .logo { filter: brightness(0) invert(1); max-height: 48px; width: auto; }
footer .title { color: #fff !important; font-weight: 700 !important; }
footer a,
footer span,
footer p,
footer .commonDesc { color: rgba(255, 255, 255, 0.78) !important; }
footer a:hover { color: #fff !important; }
footer .iconsWrapper a,
footer .iconsWrapper i { color: #fff !important; }
footer .copyright { border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 24px; padding-top: 22px; }

/* ---------- Modals (school registration) ---------- */
.modal-backdrop.show { opacity: .6; }
.modal-content .form-control,
.modal-content .form-select { border-radius: 12px !important; }

.formModal .modal-dialog { max-width: 1080px; }
.formModal .modal-content {
    background: #fff !important;
    border: none !important;
    border-radius: 28px !important;
    padding: 0 !important;
    margin: 0;
    overflow: hidden;
    align-items: stretch !important;
    box-shadow: 0 40px 90px rgba(5, 20, 32, 0.45);
}
.formModal .modal-content > [class*="col-"] { padding: 0; }

/* side panel (left in RTL) */
.formModal .rabetSide {
    order: 2;
    position: relative;
    color: #fff;
    background:
        radial-gradient(420px 320px at 100% 0%, rgba(86, 204, 153, 0.35), transparent 60%),
        radial-gradient(380px 300px at 0% 100%, rgba(56, 163, 165, 0.45), transparent 60%),
        linear-gradient(160deg, #0d2738 0%, var(--secondary-color) 60%, #1b6670 100%);
}
.formModal .rabetSide::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}
.formModal .rabetSideInner { position: relative; padding: 44px 36px; display: flex; flex-direction: column; gap: 18px; }
.formModal .rabetSideLogo { max-height: 46px; width: auto; align-self: flex-start; filter: brightness(0) invert(1); }
.formModal .rabetSideKicker {
    align-self: flex-start;
    margin-top: 28px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(86, 204, 153, 0.18);
    color: #9ff0cc;
    font-size: 14px;
    font-weight: 600;
}
.formModal .rabetSideTitle { color: #fff; font-size: 26px; line-height: 1.6; font-weight: 700; margin: 0; }
.formModal .rabetSideList { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 14px; }
.formModal .rabetSideList li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.88); }
.formModal .rabetSideList i { color: var(--primary-color); font-size: 18px; margin-top: 5px; }

/* form side */
.formModal .rightSide { border-radius: 0 !important; padding: 34px 40px 36px !important; background: #fff; }
.formModal .modal-header { border: none !important; padding: 0 0 6px !important; align-items: center; }
.formModal .modal-title { color: var(--r-ink) !important; font-size: 28px !important; font-weight: 700 !important; }
.formModal .btn-close {
    width: 40px;
    height: 40px;
    margin: 0 !important;
    border-radius: 50%;
    background-color: var(--r-surface);
    background-size: 12px;
    opacity: 1;
    transition: background-color 0.2s;
}
.formModal .btn-close:hover { background-color: #e6eef2; }
.formModal .modal-body { padding: 0 !important; }
.formModal .rightSide .headingWrapper { margin-top: 10px; }
.formModal .rightSide .headingWrapper span {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(86, 204, 153, 0.14);
    color: #1f8a5c !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}
.formModal .rightSide .headingWrapper span::before,
.formModal .rightSide .headingWrapper span::after { display: none !important; }
.formModal .rightSide .formWrapper { margin-top: 18px !important; }
.formModal .rightSide .formWrapper .row { gap: 16px 0 !important; }
.formModal .rightSide .formWrapper .inputWrapper { gap: 8px !important; }
.formModal .rightSide .formWrapper .inputWrapper label {
    color: var(--r-ink) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}
.formModal .rightSide .formWrapper .inputWrapper input:not(.custom-select-search-input):not([type="radio"]):not([type="checkbox"]),
.formModal .rightSide .formWrapper .inputWrapper select,
.formModal .rightSide .formWrapper .inputWrapper textarea {
    height: 52px;
    border: 1.5px solid rgba(15, 46, 68, 0.14) !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    background: #fff;
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.formModal .rightSide .formWrapper .inputWrapper textarea { height: auto; padding: 12px 16px !important; }
.formModal .rightSide .formWrapper .inputWrapper input:not(.custom-select-search-input):focus,
.formModal .rightSide .formWrapper .inputWrapper select:focus,
.formModal .rightSide .formWrapper .inputWrapper textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(86, 204, 153, 0.18) !important;
    outline: none;
}
.formModal .rightSide .formWrapper .inputWrapper input::placeholder { color: #93a3ae !important; }

/* phone: country code joined to the number (RTL: code on the right) */
.formModal .rightSide .formWrapper .inputWrapper .input-group { direction: rtl; }
.formModal .rightSide .formWrapper .inputWrapper .input-group .custom-select-wrapper .custom-select-trigger {
    height: 52px !important;
    min-width: 118px;
    border: 1.5px solid rgba(15, 46, 68, 0.14) !important;
    border-radius: 0 12px 12px 0 !important;
    background: var(--r-surface) !important;
    font-weight: 600;
    direction: ltr;
}
.formModal .rightSide .formWrapper .inputWrapper .input-group > input.form-control {
    border-radius: 12px 0 0 12px !important;
    margin-right: -1.5px !important;
}
[dir="ltr"] .formModal .rightSide .formWrapper .inputWrapper .input-group { direction: ltr; }
[dir="ltr"] .formModal .rightSide .formWrapper .inputWrapper .input-group .custom-select-wrapper .custom-select-trigger { border-radius: 12px 0 0 12px !important; }
[dir="ltr"] .formModal .rightSide .formWrapper .inputWrapper .input-group > input.form-control { border-radius: 0 12px 12px 0 !important; margin-right: 0 !important; margin-left: -1.5px !important; }

/* submit */
.formModal .adminFormWrapper { margin-top: 8px !important; }
.formModal .modalfooter { display: block !important; }
.formModal .modalfooter > .inputWrapper:empty { display: none; }
.formModal .modalfooter .commonBtn {
    width: 100%;
    height: 54px;
    margin-top: 14px;
    border-radius: 14px !important;
    font-size: 17px !important;
}

@media (max-width: 991px) {
    .formModal .modal-dialog { margin: 12px auto; }
}
@media (max-width: 575px) {
    .formModal .modal-dialog { margin: 8px; }
    .formModal .modal-content { border-radius: 22px !important; }
    .formModal .rightSide { padding: 24px 20px 26px !important; }
    .formModal .modal-title { font-size: 22px !important; }
}