/* ============================================================
   Custom styles shared across new-web pages
   ============================================================ */

/* Hero blue gradient (category, course, etc.) */
.hero-blue .rbt-banner-image,
.rbt-breadcrumb-default.hero-blue .breadcrumb-inner img {
    background: linear-gradient(135deg, #93c5fd 0%, #bfdbfe 50%, #dbeafe 100%) !important;
    background-image: linear-gradient(135deg, #93c5fd 0%, #bfdbfe 50%, #dbeafe 100%) !important;
}
.hero-blue .rbt-banner-image::after {
    background: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 100%) !important;
}
/* Reduce hero height */
.hero-blue {
    padding: 40px 0 60px !important;
}
.hero-blue .rbt-banner-content-top {
    min-height: 0 !important;
    padding: 30px 0 40px !important;
}
/* Breadcrumb-style hero blue (course page) */
.rbt-breadcrumb-default.hero-blue {
    background: linear-gradient(135deg, #93c5fd 0%, #bfdbfe 50%, #dbeafe 100%) !important;
    padding: 40px 0 60px !important;
}
.rbt-breadcrumb-default.hero-blue .breadcrumb-inner {
    background: linear-gradient(135deg, #93c5fd 0%, #bfdbfe 50%, #dbeafe 100%) !important;
}
.rbt-breadcrumb-default.hero-blue .breadcrumb-inner img {
    opacity: 0;
}

/* Global: override btn-gradient to blue gradient */
.rbt-btn.btn-gradient {
    background-image: linear-gradient(to right, #2563eb, #60a5fa, #60a5fa, #2563eb) !important;
}
.rbt-btn.btn-gradient:hover {
    background-image: linear-gradient(to right, #2563eb, #60a5fa, #60a5fa, #2563eb) !important;
}

/* ── Uniform form controls (inputs, selects, textareas) ── */
.form-control,
.form-select {
    height: 46px !important;
    min-height: 46px !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    border-radius: 6px !important;
}
.form-control::placeholder {
    font-size: 15px !important;
    color: #999 !important;
}
textarea.form-control {
    height: auto !important;
    min-height: 80px !important;
}

/* Hero image white frame */
.hero-image-frame {
    border: 8px solid #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    padding: 0;
    box-sizing: border-box;
}

/* Homepage Explore Cities: div-based links (no list, no dots) */
.home-cities-links {
    padding: 0;
    margin: 0;
}
.home-cities-links__item {
    margin-top: 0.5rem;
}
.home-cities-links__item:first-child {
    margin-top: 0;
}
.home-cities-links__item a {
    color: var(--color-body, #6b7280);
    text-decoration: none;
    display: inline-block;
}
.home-cities-links__item a:hover {
    color: var(--color-primary, #2563eb);
}

/* ── Navbar: scrollable Categories (and other) dropdown when too long ── */

/* 1) Default (hidden) state — keep visibility/opacity for hiding, kill clip */
.rbt-header .mainmenu-nav .mainmenu li.has-dropdown > .submenu {
    max-height: 400px !important;

    /* مهم جدًا */
    overflow-y: scroll !important;   /* scroll وليس auto */
    overflow-x: hidden !important;

    scroll-behavior: smooth !important;
    clip: unset !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;

    transition: opacity 0.25s ease, visibility 0s 0.25s !important;

    /* Firefox */
    scrollbar-width: thin !important;
    scrollbar-color: var(--color-primary, #2563eb) rgba(0, 0, 0, 0.08) !important;
}

/* Chrome / Edge / Safari */
.rbt-header .mainmenu-nav .mainmenu li.has-dropdown > .submenu::-webkit-scrollbar {
    width: 8px;
}

.rbt-header .mainmenu-nav .mainmenu li.has-dropdown > .submenu::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.06);
}

.rbt-header .mainmenu-nav .mainmenu li.has-dropdown > .submenu::-webkit-scrollbar-thumb {
    background-color: var(--color-primary, #2563eb);
    border-radius: 8px;
}


/* 2) Visible (hover) state — show and ensure no clip blocks the scroll */
.rbt-header .mainmenu-nav .mainmenu li.has-dropdown:hover > .submenu {
    max-height: 400px !important;
    overflow-y: auto !important;
    clip: unset !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: opacity 0.25s ease !important;
}

/* 3) Thin scrollbar with colored thumb — Webkit / Blink (Chrome, Safari, Edge) */
.rbt-header .mainmenu-nav .mainmenu li.has-dropdown > .submenu::-webkit-scrollbar {
    width: 5px;
}
.rbt-header .mainmenu-nav .mainmenu li.has-dropdown > .submenu::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 10px;
}
.rbt-header .mainmenu-nav .mainmenu li.has-dropdown > .submenu::-webkit-scrollbar-thumb {
    background: var(--color-primary, #2563eb);
    border-radius: 10px;
    transition: background 0.2s ease;
}
.rbt-header .mainmenu-nav .mainmenu li.has-dropdown > .submenu::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary, #1d4ed8);
}

/* 4) Mobile popup menu: scrollable dropdown */
.popup-mobile-menu .mainmenu .has-dropdown > .submenu {
    max-height: 50vh !important;
    overflow-y: auto !important;
    scroll-behavior: smooth !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--color-primary, #2563eb) rgba(0, 0, 0, 0.06) !important;
}
.popup-mobile-menu .mainmenu .has-dropdown > .submenu::-webkit-scrollbar {
    width: 5px;
}
.popup-mobile-menu .mainmenu .has-dropdown > .submenu::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 10px;
}
.popup-mobile-menu .mainmenu .has-dropdown > .submenu::-webkit-scrollbar-thumb {
    background: var(--color-primary, #2563eb);
    border-radius: 10px;
}
.popup-mobile-menu .mainmenu .has-dropdown > .submenu::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary, #1d4ed8);
}

/* 5) Accessibility — focus-visible ring on scrollable containers */
.rbt-header .mainmenu-nav .mainmenu li.has-dropdown > .submenu:focus-visible,
.popup-mobile-menu .mainmenu .has-dropdown > .submenu:focus-visible {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 2px;
}