/* ==========================================================================
   brandseducation.css — custom overrides for brandseducation.com (theme 33) ONLY.
   Created 2026-09-28.

   Loaded on EVERY brandseducation page, as the LAST stylesheet in <head>:
     - home / udemy_theme pages: udemy_theme/layouts/app.blade.php (after styles.css)
     - all other pages:          theme_page/layouts/app.blade.php (after header.css,
                                  inside the theme_select_id == 33 guard)
   No other tenant loads this file. Cache-busted by file mtime, so edits show
   immediately. Theme colour tokens: var(--purple) #497e9f, var(--purple-dark)
   #3a657f, var(--purple-tint) #edf2f5 (tokens.css on home/explore; on other
   pages use the hex values).

   Add your custom CSS below.
   ========================================================================== */

/* ==========================================================================
   Brand colour only: #497e9f everywhere, no teal / mint / green. Per Arshad 2026-09-30.
   ==========================================================================
   Where the teal came from (found by scanning every rule that applies on the Home page
   and 11 inner pages): the legacy sheets every inner page loads (master.css,
   materialize.min.css) plus the theme's own mint announcement bar, badge, "updated"
   text and the partner block on Home. Nothing is edited in those shared files (other
   tenants use them); they are overridden here, and this file loads only for theme 33.
   Tints (tracks, light hovers) use #497e9f with transparency.

   1. Focused buttons. master.css: `button:focus { background-color:#2ab7a9 !important }`
      (+ the same in materialize). This is the teal circle behind the drawer's X: the
      drawer focuses its close button when it opens. Kept ABOVE the `.sk-head button`
      rule below so the header's own buttons stay transparent (same specificity, later
      rule wins). :where() keeps it to the inner pages (body.themeclass33) at zero
      extra specificity. */
:where(body.themeclass33) button:focus { background-color: #497e9f !important; }

/* 2. Legacy classes on inner pages (master.css). */
:where(body.themeclass33) .coursingMaincard .course-card-header { background-color: #497e9f; }
:where(body.themeclass33) .coursingMaincard .course-tag-course { color: #497e9f; }
:where(body.themeclass33) .stm_lms_courses__single--info_preview a:hover { background-color: #497e9f; }
:where(body.themeclass33) ul.mainBreadcrumb li a { color: #497e9f !important; }  /* master: #90c0c5 !important */

/* 3. Materialize teal (#26a69a family), same selectors, colour swapped. */
:where(body.themeclass33) .collection .collection-item.active {background-color:#497e9f; }
:where(body.themeclass33) .collection a.collection-item {color:#497e9f; }
:where(body.themeclass33) .secondary-content {color:#497e9f; }
:where(body.themeclass33) span.badge.new {background-color:#497e9f; }
:where(body.themeclass33) .progress {background-color:rgba(73,126,159,.35); }
:where(body.themeclass33) .progress .determinate {background-color:#497e9f; }
:where(body.themeclass33) .progress .indeterminate {background-color:#497e9f; }
:where(body.themeclass33) .btn-large:hover,
:where(body.themeclass33) .btn:hover {background-color:#497e9f; }
:where(body.themeclass33) .btn-floating {background-color:#497e9f; }
:where(body.themeclass33) .dropdown-content li>a,
:where(body.themeclass33) .dropdown-content li>span {color:#497e9f; }
:where(body.themeclass33) select:focus {outline:1px solid rgba(73,126,159,.4); }
:where(body.themeclass33) input[type=date]:focus:not([readonly]),
:where(body.themeclass33) input[type=datetime-local]:focus:not([readonly]),
:where(body.themeclass33) input[type=email]:focus:not([readonly]),
:where(body.themeclass33) input[type=number]:focus:not([readonly]),
:where(body.themeclass33) input[type=password]:focus:not([readonly]),
:where(body.themeclass33) input[type=search]:focus:not([readonly]),
:where(body.themeclass33) input[type=tel]:focus:not([readonly]),
:where(body.themeclass33) input[type=text]:focus:not([readonly]),
:where(body.themeclass33) input[type=time]:focus:not([readonly]),
:where(body.themeclass33) input[type=url]:focus:not([readonly]),
:where(body.themeclass33) textarea.materialize-textarea:focus:not([readonly]) {border-bottom:1px solid #497e9f; box-shadow:0 1px 0 0 #497e9f; }
:where(body.themeclass33) input[type=date]:focus:not([readonly])+label,
:where(body.themeclass33) input[type=datetime-local]:focus:not([readonly])+label,
:where(body.themeclass33) input[type=email]:focus:not([readonly])+label,
:where(body.themeclass33) input[type=number]:focus:not([readonly])+label,
:where(body.themeclass33) input[type=password]:focus:not([readonly])+label,
:where(body.themeclass33) input[type=search]:focus:not([readonly])+label,
:where(body.themeclass33) input[type=tel]:focus:not([readonly])+label,
:where(body.themeclass33) input[type=text]:focus:not([readonly])+label,
:where(body.themeclass33) input[type=time]:focus:not([readonly])+label,
:where(body.themeclass33) input[type=url]:focus:not([readonly])+label,
:where(body.themeclass33) textarea.materialize-textarea:focus:not([readonly])+label {color:#497e9f; }
:where(body.themeclass33) .input-field .prefix.active {color:#497e9f; }
:where(body.themeclass33) [type=radio]:checked+label:after {border:2px solid #497e9f; background-color:#497e9f; }
:where(body.themeclass33) [type=radio].with-gap:checked+label:before {border:2px solid #497e9f; }
:where(body.themeclass33) [type=radio].with-gap:checked+label:after {border:2px solid #497e9f; background-color:#497e9f; }
:where(body.themeclass33) [type=checkbox]:checked+label:before {border-right:2px solid #497e9f; border-bottom:2px solid #497e9f; }
:where(body.themeclass33) [type=checkbox]:indeterminate+label:before {border-right:2px solid #497e9f; }
:where(body.themeclass33) [type=checkbox].filled-in:checked+label:after {border:2px solid #497e9f; background-color:#497e9f; }
:where(body.themeclass33) .switch label input[type=checkbox]:checked+.lever {background-color:rgba(73,126,159,.5); }
:where(body.themeclass33) .switch label input[type=checkbox]:checked+.lever:after {background-color:#497e9f; }
:where(body.themeclass33) input[type=checkbox]:checked:not(:disabled)~.lever:active:after {box-shadow:0 1px 3px 1px rgba(0,0,0,.4),0 0 0 15px rgba(73,126,159,.1); }
:where(body.themeclass33) input[type=range]+.thumb {background-color:#497e9f; }
:where(body.themeclass33) input[type=range]+.thumb .value {color:#497e9f; }
:where(body.themeclass33) input[type=range]::-webkit-slider-thumb {background-color:#497e9f; }
:where(body.themeclass33) input[type=range]::-moz-range-thumb {background:#497e9f; }
:where(body.themeclass33) input[type=range]::-ms-thumb {background:#497e9f; }
:where(body.themeclass33) .spinner-layer {border-color:#497e9f; }
:where(body.themeclass33) .picker__date-display {background-color:#497e9f; }
:where(body.themeclass33) .picker__nav--next:hover,
:where(body.themeclass33) .picker__nav--prev:hover {background:rgba(73,126,159,.3); }
:where(body.themeclass33) .picker__weekday-display {background-color:#497e9f; }
:where(body.themeclass33) .picker__day.picker__day--today {color:#497e9f; }
:where(body.themeclass33) .picker--focused .picker__day--selected,
:where(body.themeclass33) .picker__day--selected,
:where(body.themeclass33) .picker__day--selected:hover {background-color:#497e9f; }
:where(body.themeclass33) .picker--focused .picker__day--selected.picker__day--outfocus,
:where(body.themeclass33) .picker__day--selected.picker__day--outfocus,
:where(body.themeclass33) .picker__day--selected:hover.picker__day--outfocus {background-color:rgba(73,126,159,.3); }
:where(body.themeclass33) .picker__close,
:where(body.themeclass33) .picker__today {color:#497e9f; }
:where(body.themeclass33) button.picker__clear:focus,
:where(body.themeclass33) button.picker__close:focus,
:where(body.themeclass33) button.picker__today:focus {background-color:rgba(73,126,159,.3); }
.announce, .sk-head .announce { background: #497e9f; color: #fff; }
.announce__timer, .sk-head .announce__timer { background: rgba(255, 255, 255, .18); }
.announce__close:hover { background: rgba(255, 255, 255, .18); }
.badge:where(:not(.badge--premium)) { background: #497e9f; color: #fff; }
.pop-updated { color: #497e9f; }
.partner { background: #497e9f; }
.link--white:hover { color: #fff; text-decoration: underline; }
.sk-head button:where(:not(.sk-mnav__close)) {
  background: none !important;
  font-weight: 500 !important;   
  font-size: 15px;
}
body button.tbnRemoveing { background: #497e9f; color: #fff; }
body button.tbnRemoveing:hover,
body button.tbnRemoveing:focus-visible { background: #3a657f; color: #fff; }
button#exploreMenuBtn { font-weight: 600 !important; }
html[dir="rtl"] body,
html[lang="ar"] body { font-weight: 500 !important; }
.hero .hero__img { min-height: 240px; object-fit: cover; object-position: 75% center; }
body { font-weight: 400; }
.lang-menu__list .lang-menu__link span { font-weight: 700; }
body.be-theme.be-tutor-page .tutor-page {
  --bt-primary: #497e9f; --bt-primary-hover: #3a657f; --bt-ring: rgba(73, 126, 159, .18);
  --bt-border: #D5D7E0; --bt-text: #1F1F2B; --bt-muted: #6B7280; --bt-error: #D93025;
  background: #F6F6F7; padding: 48px 16px 64px; font-family: Inter, Poppins, "Noto Sans Arabic", sans-serif;
}
body.be-theme.be-tutor-page .tutor-page__inner {
  max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 56px; align-items: center; justify-content: center;
}
body.be-theme.be-tutor-page .tutor-page__media img { display: block; width: 100%; max-height: 640px; object-fit: cover; border-radius: 14px; }

body.be-theme.be-tutor-page .tutor-card {
  background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(17, 24, 39, .08);
  padding: 40px 54px; color: var(--bt-text); box-sizing: border-box; width: 100%;
}
body.be-theme.be-tutor-page .tutor-card__logo { display: flex; justify-content: center; margin: 0 0 14px; }
body.be-theme.be-tutor-page .tutor-card__logo img { display: block; height: 56px; width: auto; max-width: 220px; object-fit: contain; }
body.be-theme.be-tutor-page .tutor-card__tagline { margin: 0 0 6px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--bt-muted); }
body.be-theme.be-tutor-page .tutor-card__title { margin: 0; text-align: center; font-size: 25px !important; line-height: 1.3 !important; font-weight: 700 !important; color: var(--bt-text); }
body.be-theme.be-tutor-page .tutor-card__sub { margin: 6px 0 28px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--bt-muted); }

body.be-theme.be-tutor-page .tutor-card .be-field { position: relative; margin: 0 0 16px; padding: 0; }
body.be-theme.be-tutor-page .tutor-card .be-field input.form-control {
  display: block; width: 100% !important; height: 46px !important; margin: 0 !important; box-sizing: border-box !important;
  padding: 0 44px !important; border: 1px solid var(--bt-border) !important; border-radius: 6px !important;
  background: #fff !important; box-shadow: none !important; outline: none;
  font-family: inherit; font-size: 15px !important; line-height: 1.4; color: var(--bt-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.be-theme.be-tutor-page .tutor-card .be-field input.form-control::placeholder { color: #949AA4 !important; opacity: 1; }
body.be-theme.be-tutor-page .tutor-card .be-field input.form-control:focus {
  border: 1px solid var(--bt-primary) !important; box-shadow: 0 0 0 3px var(--bt-ring) !important;
}
body.be-theme.be-tutor-page .tutor-card .be-ico {
  position: absolute; top: 14px; inset-inline-start: 14px; width: 18px; height: 18px; line-height: 0;
  color: var(--bt-muted); pointer-events: none; z-index: 1;
}
body.be-theme.be-tutor-page .tutor-card .be-ico svg { width: 18px; height: 18px; }
body.be-theme.be-tutor-page .tutor-card .be-field:focus-within .be-ico { color: var(--bt-primary); }
body.be-theme.be-tutor-page .tutor-card .be-eye {
  position: absolute; top: 5px; inset-inline-end: 6px; width: 36px; height: 36px; margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent !important; border: 0 !important; border-radius: 6px; box-shadow: none;
  color: var(--bt-muted); cursor: pointer; line-height: 0;
}
body.be-theme.be-tutor-page .tutor-card .be-eye:hover { color: var(--bt-text); }
body.be-theme.be-tutor-page .tutor-card .be-eye:focus-visible { outline: 2px solid var(--bt-primary); outline-offset: 1px; }
body.be-theme.be-tutor-page .tutor-card .be-eye svg { width: 18px; height: 18px; }
/* Errors: red border + 12px message under the field (server-side, old() kept). */
body.be-theme.be-tutor-page .tutor-card .be-field.has-error input.form-control { border-color: var(--bt-error) !important; }
body.be-theme.be-tutor-page .tutor-card .be-field.has-error input.form-control:focus { box-shadow: 0 0 0 3px rgba(217, 48, 37, .15) !important; }
body.be-theme.be-tutor-page .tutor-card .be-error {
  display: block; position: static !important; float: none !important; clear: both; width: auto !important;  /* master.css floats label.error */
  margin: -10px 0 14px !important; padding: 0;
  font-size: 12px !important; line-height: 1.4; color: var(--bt-error) !important; text-align: start; transform: none !important;
}
body.be-theme.be-tutor-page .tutor-card .be-error:empty { display: none; }
body.be-theme.be-tutor-page .tutor-card .be-captcha { margin: 4px 0 18px; }
body.be-theme.be-tutor-page .tutor-card .be-captcha .be-error { margin: 6px 0 0 !important; }

body.be-theme.be-tutor-page .tutor-card .be-btn {
  display: block; width: 100%; height: 48px; margin: 4px 0 0; padding: 0 16px;
  background: var(--bt-primary) !important; border: 0 !important; border-radius: 6px; box-shadow: none !important;
  color: #fff !important; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 48px;
  text-transform: none; letter-spacing: normal; cursor: pointer; transition: background-color .15s ease;
}
body.be-theme.be-tutor-page .tutor-card .be-btn:hover { background: var(--bt-primary-hover) !important; }
body.be-theme.be-tutor-page .tutor-card .be-btn:focus-visible { outline: 2px solid var(--bt-text); outline-offset: 2px; }

body.be-theme.be-tutor-page .tutor-card__login { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--bt-muted); }
body.be-theme.be-tutor-page .tutor-card__login a { color: var(--bt-primary) !important; font-weight: 600; text-decoration: none; }
body.be-theme.be-tutor-page .tutor-card__login a:hover { text-decoration: underline; }
body.be-theme.be-tutor-page .tutor-card__legal { margin: 14px 0 0; text-align: center; font-size: 12px; line-height: 1.6; color: var(--bt-muted); }
body.be-theme.be-tutor-page .tutor-card__legal a { color: var(--bt-primary) !important; text-decoration: none; }

@media (max-width: 900px) {
  body.be-theme.be-tutor-page .tutor-page { padding: 24px 16px 48px; }
  body.be-theme.be-tutor-page .tutor-page__inner { grid-template-columns: minmax(0, 1fr); }
  body.be-theme.be-tutor-page .tutor-page__media { display: none; }
  body.be-theme.be-tutor-page .tutor-card { padding: 32px 20px; max-width: 560px; margin: 0 auto; }
}


/* ===== BE THEME: brand colour #497e9f replaces default blue (added 2026-10-01) =====
   Part A: auto-generated from master.css / master_new.css / master_find.css / custom_chatbox.css
   (every rule there using #2d8ae8 #039be5 #3f8ae8 #4285f4 #2196f3 #007bff #1a73e8), scoped to body.be-theme.
   Part B (below) is the curated set; it comes last so it wins on equal specificity. */
body.be-theme{--be-primary:#497e9f;--be-primary-dark:#3b6a87;--be-primary-tint:rgba(73,126,159,.12);}
body.be-theme .login-inter
{background-color:var(--be-primary)!important;}
body.be-theme .wf-btn
{background-color:var(--be-primary)!important;}
body.be-theme .main_studOne ul.tabs li a.active
{color:var(--be-primary)!important;}
body.be-theme .vtn_msg
{background:var(--be-primary)!important;border:1px solid var(--be-primary)!important;}
body.be-theme .vx_man center a
{color:var(--be-primary)!important;}
body.be-theme a.btn.btn-primary.pull-right.unique
{background:var(--be-primary)!important;border-color:var(--be-primary)!important;}
body.be-theme .lecturescls
{background:var(--be-primary)!important;}
body.be-theme button.plyBtn
{background:var(--be-primary)!important;}
body.be-theme .BtnCls
{background:var(--be-primary)!important;}
body.be-theme div#GameContainer a.checkurlcls.active_cls
{color:var(--be-primary)!important;}
body.be-theme .pendding_attending_cls a + a.waves-effect.waves-light.btn
{background:var(--be-primary)!important;}
body.be-theme .clPass ~ button.wwaves-effect.waves-light.btn
{background:var(--be-primary)!important;}
body.be-theme .acceptModalCls button
{background-color:var(--be-primary)!important;}
body.be-theme .acceptModalCls .modal-footer a.modal-action.modal-close.waves-effect.waves-green.btn-flat
{background-color:var(--be-primary)!important;}
body.be-theme #changepassfrm button.waves-effect.waves-green.btn
{background:var(--be-primary)!important;}
body.be-theme .bc_class
{background:var(--be-primary)!important;}
body.be-theme .col.s12.pendding_attending_cls a
{background:var(--be-primary)!important;}
body.be-theme .ser_fomi button.butExp
{background:var(--be-primary)!important;}
body.be-theme .btn_morei a
{background-color:var(--be-primary)!important;}
body.be-theme .iconWp i.fa
{color:var(--be-primary)!important;}
body.be-theme .iconxbi_menu i.fa
{color:var(--be-primary)!important;}
body.be-theme .bxi_wrko .iconxbi_menu
{color:var(--be-primary)!important;}
body.be-theme ul.listIcoin li i
{color:var(--be-primary)!important;}
body.be-theme .parentStudent .tall_box .inner .web_font_container .icon
{background:var(--be-primary)!important;}
body.be-theme .boxgrid .cover .icon
{background:var(--be-primary)!important;}
body.be-theme .tall_box.box.boxgrid.slidedown:hover .inner
{background:var(--be-primary)!important;}
body.be-theme .tall_box.box.boxgrid.slidedown:hover  .row.cell_title_bar
{background:var(--be-primary)!important;}
body.be-theme .toplif.active > a
{color:var(--be-primary)!important;}
body.be-theme .boxiBlackb
{background:var(--be-primary)!important;}
body.be-theme button.muiButtonBase-root
{background:var(--be-primary)!important;}
body.be-theme ul.listAvbTon li a:hover
{background:var(--be-primary)!important;}
body.be-theme .bxohelpLeft .collapsible-header.active_menu_help_page
{background:var(--be-primary)!important;}
body.be-theme .bxohelpLeft .collapsible-header:hover
{background:var(--be-primary)!important;}
body.be-theme input#book_code
{border:2px solid var(--be-primary)!important;}
body.be-theme .rig_tx a.add_cart
{background:var(--be-primary)!important;border:1px solid var(--be-primary)!important;}
body.be-theme a.buy_no:hover
{background:var(--be-primary)!important;border:1px solid var(--be-primary)!important;}
body.be-theme .noUi-horizontal .noUi-handle
{background-color:var(--be-primary)!important;}
body.be-theme .noUi-connect
{background:var(--be-primary)!important;}
body.be-theme span.totalTutors
{background:var(--be-primary)!important;}
body.be-theme .find_tutor_cont_on:hover
{border:1px solid var(--be-primary)!important;}
body.be-theme .sec_bott a.book_lesson
{background:var(--be-primary)!important;}
body.be-theme a.book_message
{border:1px solid var(--be-primary)!important;color:var(--be-primary)!important;}
body.be-theme span.tital_spanrr .main-txte
{border-bottom:3px solid var(--be-primary)!important;}
body.be-theme span.five_tital_spanrr .main-txte
{border-bottom:3px solid var(--be-primary)!important;}
body.be-theme .tutor_profile_Section_r_three span.but_ful a
{background:var(--be-primary)!important;}
body.be-theme span.but_ful1 a
{color:var(--be-primary)!important;}
body.be-theme span.but_ful1 a:hover
{background:var(--be-primary)!important;border:1px solid var(--be-primary)!important;}
body.be-theme button#myBtn
{background:var(--be-primary)!important;border:1px solid var(--be-primary)!important;}
body.be-theme .modal-content1
{border:3px solid var(--be-primary)!important;}
body.be-theme button.udlite-btn
{background:var(--be-primary)!important;}
body.be-theme button.btn.btn-primary
{background-color:var(--be-primary)!important;}
body.be-theme .cart_one3 a:hover
{color:var(--be-primary)!important;}
body.be-theme .dropdown-content_three a:hover
{background:var(--be-primary)!important;}
body.be-theme span.cart_num
{background:var(--be-primary)!important;}
body.be-theme button.btn-login
{background-color:var(--be-primary)!important;}
body.be-theme .sign-up-text
{color:var(--be-primary)!important;}
body.be-theme .crt-ac
{background-color:var(--be-primary)!important;}
body.be-theme .materialert.info
{background-color:var(--be-primary)!important;}
body.be-theme .header-slider .owl-theme .owl-nav [class*=owl-]
{background:var(--be-primary)!important;}
body.be-theme button.btn.btn-primary-log
{background-color:var(--be-primary)!important;}
body.be-theme .sign-today
{background:var(--be-primary)!important;border:2px solid var(--be-primary)!important;}
body.be-theme .login-today
{border:2px solid var(--be-primary)!important;}
body.be-theme .header-btn a
{color:var(--be-primary)!important;}
body.be-theme .book_lesson-confirm
{background:var(--be-primary)!important;}
body.be-theme div#loginModal
{border:0px solid var(--be-primary)!important;}
body.be-theme div#signupModal
{border:0px solid var(--be-primary)!important;}
body.be-theme .mg-t-10 .btn
{background-color:var(--be-primary)!important;}
body.be-theme .video-container p
{color:var(--be-primary)!important;}
body.be-theme div#cirruculumtable_paginate a:hover
{background-color:var(--be-primary)!important;border:1px solid var(--be-primary)!important;}
body.be-theme div#manucartList
{border:3px solid var(--be-primary)!important;}
body.be-theme div#manucartList a
{background-color:var(--be-primary)!important;}
body.be-theme .main_studOne .tabs .tab a:hover
{color:var(--be-primary)!important;border-bottom:1px solid var(--be-primary)!important;}
body.be-theme .tutor_profile_Section_l_four ul.tabs li a.active
{border-bottom:2px solid var(--be-primary)!important;}
body.be-theme .tutor_profile_Section_l_five span.five_tital_spanrr .main-txte
{border-bottom:2px solid var(--be-primary)!important;}
body.be-theme .tutor_profile_Section_l_four ul.tabs li a:hover
{border-bottom:2px solid var(--be-primary)!important;}
body.be-theme .find_tutor_fou .ShortBio___1gIDW a
{color:var(--be-primary)!important;}
body.be-theme span.courseHR b
{color:var(--be-primary)!important;}
body.be-theme .pagi_naviOne .pagination li.active
{background-color:var(--be-primary)!important;border-color:var(--be-primary)!important;}
body.be-theme a.waves-effect.waves-light.btn.social.google:hover
{color:var(--be-primary)!important;border:1px solid var(--be-primary)!important;}
body.be-theme a.bo-sent
{background-color:var(--be-primary)!important;}
body.be-theme .main_fti nav .nav-wrapper a.breadcrumb
{color:var(--be-primary)!important;}
body.be-theme .main_fti .breadcrumb:before
{color:var(--be-primary)!important;}
body.be-theme .leftingShort a
{color:var(--be-primary)!important;}
body.be-theme .main_fti a
{color:var(--be-primary)!important;}
body.be-theme .peginiMnin ul.pagination li.active
{background:var(--be-primary)!important;}
body.be-theme .peginiMnin ul.pagination li a:hover
{background:var(--be-primary)!important;}
body.be-theme .bixiSerching button
{background:var(--be-primary)!important;}
body.be-theme .privwgroupClass .modal-footer.f-btn .btn
{background:var(--be-primary)!important;}
body.be-theme div#groupclassModal
{border:0px solid var(--be-primary)!important;}
body.be-theme .exploCenter .owl-nav button
{background:var(--be-primary)!important;}
body.be-theme .exploCenter .owl-theme .owl-nav [class*=owl-]:hover
{background:var(--be-primary)!important;}
body.be-theme .autBoxim span
{color:var(--be-primary)!important;}
body.be-theme .ntb_cart a.heading_font
{background:var(--be-primary)!important;}
body.be-theme ul.lidiMnin li a
{color:var(--be-primary)!important;}
body.be-theme a.btn_expli.bcbgroun
{background:var(--be-primary)!important;}
body.be-theme .mainCheckuoti .col.s8 .panel-default.credit-card-box button.btn.btn-primary.btn-lg.btn-block
{background:var(--be-primary)!important;}
body.be-theme .bdPricingBold
{color:var(--be-primary)!important;}
body.be-theme button.tbnRemoveing
{background:var(--be-primary)!important;}
body.be-theme .find_tutor_cont .paginationCls ul li.page-item.active
{border-color:var(--be-primary)!important;}
body.be-theme .pagination.box-page ul.pagination li.page-item.active
{border-color:var(--be-primary)!important;background:var(--be-primary)!important;}
body.be-theme .btnConTime.avtive
{background:var(--be-primary)!important;}
body.be-theme .timeSlot a.btn.tooltipped.confirmScheduleActive
{background:var(--be-primary)!important;}
body.be-theme .detlRight .ntb_cart a.heading_font
{background:var(--be-primary)!important;}
body.be-theme span.but_ful a
{background:var(--be-primary)!important;}
body.be-theme .bxilfetitut span.star-rate1
{color:var(--be-primary)!important;}
body.be-theme ul.lstiverify li a svg
{fill:var(--be-primary)!important;}
body.be-theme .xbiPromo a
{color:var(--be-primary)!important;}
body.be-theme .xbiPromo a:hover
{background:var(--be-primary)!important;}
body.be-theme h5.frriHed svg
{fill:var(--be-primary)!important;}
body.be-theme .mainCheckuoti .col.s8 .panel-default.credit-card-box button.btn.btn-primary.btn-lg.btn-block.hyperpay
{border:2px solid var(--be-primary)!important;color:var(--be-primary)!important;}
body.be-theme .xbiInstrucFirst a
{color:var(--be-primary)!important;}
html body.be-theme .vvdiosss
{border:0px solid var(--be-primary)!important;}
body.be-theme .enrolled_link
{background:var(--be-primary)!important;}
body.be-theme h4.valuHeading
{color:var(--be-primary)!important;}
body.be-theme .chilPaybtn a
{background-color:var(--be-primary)!important;}
body.be-theme a.btnSubcrip
{background-color:var(--be-primary)!important;}
body.be-theme .bxiYearplan:hover
{border:5px solid var(--be-primary)!important;}
body.be-theme .mmenuu #navbarimobile a.active
{border-bottom:2px solid var(--be-primary)!important;}
body.be-theme .support-form.support-formMain form button.btn.waves-effect.waves-light
{background:var(--be-primary)!important;}
body.be-theme .booknaim_shop .product-button .btn.btn-primary
{background:var(--be-primary)!important;}
body.be-theme .social-buttons a
{color:var(--be-primary)!important;border:3px solid var(--be-primary)!important;}
body.be-theme .social-buttons a:hover
{background:var(--be-primary)!important;}
body.be-theme #buttoning
{background-color:var(--be-primary)!important;}
body.be-theme .vtbatical ul.tabs li a.active,
body.be-theme .vtbatical ul.tabs li a:hover
{background:var(--be-primary)!important;}
body.be-theme .addingtoCart button
{background:var(--be-primary)!important;}
body.be-theme .bxiRelated_products .row .col.s3 .product-inner .add-to-cart-button
{background:var(--be-primary)!important;}
body.be-theme .bcastoUniman h4
{background:var(--be-primary)!important;}
body.be-theme .bookProductList ul
{border-top:1px solid var(--be-primary)!important;}
body.be-theme .bookProductList .nbOfBooks span
{color:var(--be-primary)!important;}
body.be-theme .bcastoUniman
{border:1px solid var(--be-primary)!important;}
body.be-theme .sliSeraching
{border:2px solid var(--be-primary)!important;}
body.be-theme button.bntinblue
{background:var(--be-primary)!important;}
body.be-theme .uniFirsting
{border-right:2px solid var(--be-primary)!important;}
body.be-theme .uniSeconding
{border-right:2px solid var(--be-primary)!important;}
body.be-theme h5.cmiclTect
{border-bottom:1px solid var(--be-primary)!important;}
body.be-theme .logsingup
{border:0px solid var(--be-primary)!important;}
body.be-theme .xbionstepFir form .page .field button
{background:var(--be-primary)!important;}
body.be-theme #videoPreviewContainer a.waves-effect.waves-light.btn
{background:var(--be-primary)!important;}
body.be-theme .xbionstepFir .avatar-upload .avatar-edit input + label
{background:var(--be-primary)!important;border:1px solid var(--be-primary)!important;}
body.be-theme ul.lisicoteji li a:hover
{color:var(--be-primary)!important;}
body.be-theme .shopcontRight ul.pagination li.page-item.active,
body.be-theme .shopcontRight ul.pagination li a:hover
{background:var(--be-primary)!important;}
body.be-theme .slidHediCont
{color:var(--be-primary)!important;}
body.be-theme .slidHediCont a
{color:var(--be-primary)!important;}
body.be-theme .btnTextRead
{background:var(--be-primary)!important;border:1px solid var(--be-primary)!important;}
body.be-theme .btnTextBook
{background:var(--be-primary)!important;border:1px solid var(--be-primary)!important;}
body.be-theme .btnTextBook:hover,
body.be-theme .btnTextRead:hover
{border:1px solid var(--be-primary)!important;color:var(--be-primary)!important;}
body.be-theme .Contsubmit input
{background:var(--be-primary)!important;border:2px solid var(--be-primary)!important;}
body.be-theme .bxicontMediOne:hover span i.fa
{color:var(--be-primary)!important;}
body.be-theme .serchProductList .product-button a
{background:var(--be-primary)!important;}
body.be-theme .shopShort a
{background:var(--be-primary)!important;border:2px solid var(--be-primary)!important;}
body.be-theme .fieldinToAccording .collapsible-body button.next
{background:var(--be-primary)!important;}
body.be-theme .childSelecMid button.submit
{background-color:var(--be-primary)!important;}
body.be-theme .selChilding label span
{color:var(--be-primary)!important;}
body.be-theme .img-container.fly-to-basket a.container-link
{background:var(--be-primary)!important;}
body.be-theme .diploMidAbout h4
{color:var(--be-primary)!important;}
body.be-theme button.btn.btnAppSub
{background:var(--be-primary)!important;}
body.be-theme button.btn.btnProgram
{background:var(--be-primary)!important;}
body.be-theme ul.lisiObjcting li:after
{color:var(--be-primary)!important;}
body.be-theme .txtifromi button
{background:var(--be-primary)!important;}
body.be-theme .txtifromi .btn.btn-primary
{background:var(--be-primary)!important;}
body.be-theme a.ntbViewCal
{background:var(--be-primary)!important;}
body.be-theme .paginationCls.pageCls ul.pagination li a:hover
{color:var(--be-primary)!important;}
body.be-theme .slibxoin .owl-carousel.owl-theme.owl-loaded.owl-drag .owl-nav button
{background:var(--be-primary)!important;}
body.be-theme .maininTwo.boxiCrouping ul.pagination li.page-item.active
{background:var(--be-primary)!important;}
body.be-theme ul.lisBlogMenu li a:hover
{border-bottom:4px solid var(--be-primary)!important;}
body.be-theme .cta-interlinking__content .btn
{background:var(--be-primary)!important;}
body.be-theme .tutors-carousel__footer .btn.btn--large
{background:var(--be-primary)!important;}
body.be-theme .tababhaTheme ul.tabs li a.active
{background:var(--be-primary)!important;}
body.be-theme .pagination.commonPagton ul.pagination li.page-item.active
{background-color:var(--be-primary)!important;}
body.be-theme .pagination.commonPagton ul.pagination li.page-item a:hover
{color:var(--be-primary)!important;}
body.be-theme .thxSubMisn:before
{border-bottom:400px solid var(--be-primary)!important;}
body.be-theme .thnkLeft .social-links a
{border:1px solid var(--be-primary)!important;}
body.be-theme .inbithaqTheme .owl-theme .owl-nav [class*="owl-"]:hover
{background:var(--be-primary)!important;}
body.be-theme span.uplNwimg a
{background:var(--be-primary)!important;}
body.be-theme .acmBox a.btn.btn-theme.btn-light.btn-more
{background:var(--be-primary)!important;}
body.be-theme .category-card .fa
{color:var(--be-primary)!important;}
body.be-theme .payCanlMainBox .text-section .btn
{background-color:var(--be-primary)!important;}
body.be-theme .dayName
{border-top:4px solid var(--be-primary)!important;}
body.be-theme .dayName.active p.dayDate
{background-color:var(--be-primary)!important;}
body.be-theme .timeSlot a.btn.tooltipped
{color:var(--be-primary)!important;}
body.be-theme .timeSlot a.btn.tooltipped:hover
{border:1px solid var(--be-primary)!important;}
body.be-theme .viewScheduleButton
{color:var(--be-primary)!important;border:1px solid var(--be-primary)!important;}
body.be-theme li.select2-results__option.select2-results__option--selectable.select2-results__option--selected
{background:var(--be-primary)!important;}
body.be-theme button.mainibottomThreeButton
{background-color:var(--be-primary)!important;}
body.be-theme button.mainibottomThreeButton:focus
{background:var(--be-primary)!important;}
body.be-theme #messageBoxModal button
{background:var(--be-primary)!important;}
body.be-theme .chatwidgetsBoxCls span.namecls
{color:var(--be-primary)!important;}
@media only screen and (max-width: 767px){
body.be-theme .tutor_profile_Section_r_three span.but_ful a
{background:var(--be-primary)!important;}
body.be-theme .main_responsive span.but_ful1 a
{color:var(--be-primary)!important;}
body.be-theme .search-inline button[type="submit"]
{background:var(--be-primary)!important;}
body.be-theme .search-inline button[type="button"]
{background:var(--be-primary)!important;}
body.be-theme a.clr_all
{color:var(--be-primary)!important;}
body.be-theme #myModali .modal-footer button.btn.btn-default
{background:var(--be-primary)!important;}
body.be-theme #myModali [type="checkbox"]:checked+span:not(.lever):before
{border-right:2px solid var(--be-primary)!important;border-bottom:2px solid var(--be-primary)!important;}
}
@media only screen and (max-width: 600px){
body.be-theme .sliSeraching.innerPgi .uniSeconding
{border-top:2px solid var(--be-primary)!important;}
body.be-theme .sliSeraching.innerPgi .uniTherding
{border-top:2px solid var(--be-primary)!important;}
}

/* ----- Part B: curated overrides ----- */
body.be-theme{--be-primary:#497e9f;--be-primary-dark:#3b6a87;--be-primary-tint:rgba(73,126,159,.12);}

/* Global links (low specificity so existing custom link colours still win) */
:where(body.be-theme) a{color:var(--be-primary);}
body.be-theme .dropdown-content li>a, body.be-theme .dropdown-content li>span{color:var(--be-primary);}

/* Solid buttons / CTAs */
body.be-theme .enrolled_link,
body.be-theme .ntb_cart a.heading_font,
body.be-theme .detlRight .ntb_cart a.heading_font,
body.be-theme button.btn.btn-primary,
body.be-theme .btn.btn-primary,
body.be-theme button.btn-login,
body.be-theme button.btn.btn-primary-log,
body.be-theme #btnLogin, body.be-theme #btnSignup, body.be-theme #btnSignupaf,
body.be-theme #btnforgotpassword, body.be-theme #otpVerficationLoginBtn,
body.be-theme button.tbnRemoveing,
body.be-theme .login-inter, body.be-theme .wf-btn,
body.be-theme span.but_ful a,
body.be-theme .rig_tx a.add_cart,
body.be-theme .addingtoCart button,
body.be-theme a.btnSubcrip, body.be-theme .chilPaybtn a,
body.be-theme .Contsubmit input,
body.be-theme .bixiSerching button,
body.be-theme .search-inline button,
body.be-theme .sec_bott a.book_lesson, body.be-theme .book_lesson-confirm,
body.be-theme button.btn.btnAppSub, body.be-theme button.btn.btnProgram,
body.be-theme .sign-today, body.be-theme #buttoning, body.be-theme button#myBtn,
body.be-theme span.cart_num, body.be-theme span.totalTutors,
body.be-theme li.wishBtni a,
body.be-theme .exploCenter .owl-nav button
{background-color:var(--be-primary)!important;border-color:var(--be-primary)!important;color:#fff!important;}

/* Hover states */
body.be-theme .enrolled_link:hover,
body.be-theme .ntb_cart a.heading_font:hover,
body.be-theme .btn.btn-primary:hover,
body.be-theme button.btn-login:hover,
body.be-theme span.but_ful a:hover,
body.be-theme span.but_ful1 a:hover,
body.be-theme .social-buttons a:hover,
body.be-theme a.buy_no:hover,
body.be-theme .xbiPromo a:hover,
body.be-theme li.wishBtni a:hover,
body.be-theme .peginiMnin ul.pagination li a:hover,
body.be-theme div#cirruculumtable_paginate a:hover
{background-color:var(--be-primary-dark)!important;border-color:var(--be-primary-dark)!important;color:#fff!important;}

/* Text-coloured items */
body.be-theme i.fa.fa-share,
body.be-theme .sign-up-text, body.be-theme .header-btn a,
body.be-theme .xbiInstrucFirst a, body.be-theme .xbiPromo a,
body.be-theme .main_fti a,
body.be-theme .main_fti nav .nav-wrapper a.breadcrumb,
body.be-theme .main_fti .breadcrumb::before,
body.be-theme span.but_ful1 a, body.be-theme .social-buttons a,
body.be-theme .main_studOne ul.tabs li a.active,
body.be-theme .main_studOne .tabs .tab a:hover,
body.be-theme .slidHediCont, body.be-theme .slidHediCont a,
body.be-theme h4.valuHeading, body.be-theme span.courseHR b,
body.be-theme .video-container p, body.be-theme .cart_one3 a:hover,
body.be-theme .bxicontMediOne:hover span i.fa,
body.be-theme ul.lisBlogMenu li a:hover, body.be-theme ul.lisicoteji li a:hover,
body.be-theme a.book_message, body.be-theme .toplif.active>a, body.be-theme .toplif.activeo>a,
body.be-theme .timeSlot a.btn.tooltipped, body.be-theme .viewScheduleButton
{color:var(--be-primary)!important;}

/* Borders / underlines */
body.be-theme div#loginModal, body.be-theme div#loginModaling,
body.be-theme div#signupModal, body.be-theme div#signupaffiliateModal,
body.be-theme div#groupclassModal, body.be-theme div#modallessononline,
body.be-theme .modal-content1, body.be-theme .logsingup, body.be-theme .login-today,
body.be-theme .vvdiosss,
body.be-theme span.tital_spanrr .main-txte, body.be-theme span.five_tital_spanrr .main-txte,
body.be-theme .tutor_profile_Section_l_four ul.tabs li a.active,
body.be-theme .tutor_profile_Section_l_four ul.tabs li a:hover,
body.be-theme .mmenuu #navbari a.active, body.be-theme .mmenuu #navbarimobile a.active,
body.be-theme .dayName, body.be-theme .viewScheduleButton,
body.be-theme .timeSlot a.btn.tooltipped:hover, body.be-theme input#book_code,
body.be-theme .find_tutor_cont_on:hover, body.be-theme .bxiYearplan:hover
{border-color:var(--be-primary)!important;}
body.be-theme .tabs .indicator{background-color:var(--be-primary)!important;}

/* Pagination / active states */
body.be-theme .pagination.box-page ul.pagination li.page-item.active,
body.be-theme .pagi_naviOne .pagination li.active,
body.be-theme .peginiMnin ul.pagination li.active,
body.be-theme .shopcontRight ul.pagination li.page-item.active,
body.be-theme .dayName.active p.dayDate,
body.be-theme .btnConTime.avtive,
body.be-theme .timeSlot a.btn.tooltipped.confirmScheduleActive,
body.be-theme .vtbatical ul.tabs li a.active,
body.be-theme .bxohelpLeft .collapsible-header.active_menu_help_page,
body.be-theme .noUi-connect, body.be-theme .noUi-horizontal .noUi-handle,
body.be-theme li.select2-results__option--selected
{background-color:var(--be-primary)!important;border-color:var(--be-primary)!important;color:#fff!important;}
/* Keep the number inside active pagination items white (the <a> carries its own colour) */
body.be-theme .pagination li.active a,
body.be-theme .pagination li.active span,
body.be-theme .pagination li.page-item.active .page-link
{background-color:transparent;color:#fff!important;}

/* Materialize form controls */
body.be-theme [type="checkbox"]:checked+label::before,
body.be-theme [type="checkbox"]:checked+span:not(.lever)::before
{border-right-color:var(--be-primary)!important;border-bottom-color:var(--be-primary)!important;}
body.be-theme [type="checkbox"]:indeterminate+label::before{border-right-color:var(--be-primary)!important;}
body.be-theme input:focus:not([readonly]), body.be-theme textarea:focus:not([readonly])
{border-bottom-color:var(--be-primary)!important;box-shadow:0 1px 0 0 var(--be-primary)!important;}
body.be-theme input:focus:not([readonly])+label, body.be-theme textarea:focus:not([readonly])+label
{color:var(--be-primary)!important;}

/* Header search icon */
body.be-theme .headSrchAll .search-wrapper.active .input-holder .search-icon,
body.be-theme .headSrchAll .search-wrapper .input-holder .search-icon span::after
{border-color:var(--be-primary)!important;}
body.be-theme .headSrchAll .search-wrapper .input-holder .search-icon span::before,
body.be-theme .headSrchAll .search-wrapper .close::before,
body.be-theme .headSrchAll .search-wrapper .close::after
{background-color:var(--be-primary)!important;}


.cp-register .f-btn .btn-login.borderOnly:hover {
    background: #497e9f !important;
}



/* ===== END BE THEME ===== */

/* ===== CP-CATEGORIES (2026-10-14, ARSHAD-8) — "Program Categories" on the home page =====
   Between the hero and the partners (udemy_theme/home_page.blade.php). Arabic / RTL.
   Rows are 4 / 5 / 3 cards; 2 columns at <=1024px, 1 column at <=560px. Own class names
   (cp-categories__row…) instead of a generic .row, so no grid framework can touch them. */
.cp-categories{
  --be-primary:#497E9F; --be-primary-dark:#3A6683; --be-light:#B6CBD9;
  --be-text:#2B2B3C; --be-muted:#6A6F73; --be-pink:#E5536F;
  --be-bg:#F4F8FB; --be-card:#FFFFFF; --be-border:#E3ECF2;
  --tint-blue:rgba(73,126,159,.14); --tint-gold:rgba(240,169,46,.16); --tint-pink:rgba(229,83,111,.12);
  position:relative; background:linear-gradient(180deg,var(--be-bg) 0%,#fff 100%);
  padding:56px 16px 64px; overflow:hidden;
  font-family:Inter,Poppins,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--be-text);
}
.cp-categories *,.cp-categories *::before,.cp-categories *::after{box-sizing:border-box}
.cp-categories::before,.cp-categories::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:var(--tint-blue);filter:blur(40px);z-index:0;pointer-events:none}
.cp-categories::before{top:-80px;right:-80px}
.cp-categories::after{bottom:-100px;left:-80px;background:var(--tint-pink)}
.cp-categories__inner{position:relative;z-index:1;max-width:1200px;margin:0 auto}
.cp-categories__head{text-align:center;margin:0 0 32px}
.cp-categories__eyebrow{display:inline-block;font-size:13px;font-weight:600;line-height:1.4;color:var(--be-primary);background:var(--tint-blue);padding:6px 14px;border-radius:999px;margin:0 0 12px}
.cp-categories__title{font-size:24px;font-weight:700;line-height:1.35;color:var(--be-primary);margin:0}
.cp-categories__sub{margin:8px 0 0;color:var(--be-muted);font-size:15px;line-height:1.6}
.cp-categories__rows{display:flex;flex-direction:column;gap:16px}
.cp-categories__row{display:grid;gap:16px;margin:0}
.cp-categories__row--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cp-categories__row--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.cp-categories__row--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cp-cat{display:flex;align-items:center;gap:14px;background:var(--be-card);border:1px solid var(--be-border);border-radius:16px;padding:18px;text-decoration:none;color:var(--be-text);box-shadow:0 4px 14px rgba(28,29,40,.04);transition:transform .25s,box-shadow .25s,border-color .25s;min-height:96px}
.cp-cat:hover,.cp-cat:focus-visible{transform:translateY(-4px);border-color:var(--be-light);box-shadow:0 12px 28px rgba(73,126,159,.16);color:var(--be-text);text-decoration:none}
.cp-cat__icon{flex:0 0 58px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:var(--be-primary);background:var(--tint-blue)}
.cp-cat--gold .cp-cat__icon{background:var(--tint-gold);color:#B97A10}
.cp-cat--pink .cp-cat__icon{background:var(--tint-pink);color:var(--be-pink)}
.cp-cat__icon svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cp-cat__label{flex:1;min-width:0;font-size:16px;font-weight:700;line-height:1.45}
.cp-cat__arrow{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--be-bg);display:grid;place-items:center;color:var(--be-text);transition:background .25s,color .25s}
.cp-cat__arrow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cp-cat:hover .cp-cat__arrow,.cp-cat:focus-visible .cp-cat__arrow{background:var(--be-primary);color:#fff}
.cp-categories__row--5 .cp-cat{padding:16px 14px;gap:10px}
.cp-categories__row--5 .cp-cat__icon{flex-basis:50px;width:50px;height:50px}
.cp-categories__row--5 .cp-cat__label{font-size:15px}
.cp-categories__cta{text-align:center;margin-top:36px}
.cp-categories .cp-btn{display:inline-flex;align-items:center;gap:10px;background:var(--be-primary);color:#fff;text-decoration:none;font-weight:600;font-size:15px;line-height:1.4;padding:14px 34px;border-radius:999px;box-shadow:0 8px 20px rgba(73,126,159,.3);transition:background .25s,transform .25s}
.cp-categories .cp-btn:hover,.cp-categories .cp-btn:focus-visible{background:var(--be-primary-dark);color:#fff;transform:translateY(-2px);text-decoration:none}
.cp-categories .cp-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1024px){
  .cp-categories__row--4,.cp-categories__row--5,.cp-categories__row--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .cp-categories__row--4,.cp-categories__row--5,.cp-categories__row--3{grid-template-columns:minmax(0,1fr)}
  .cp-cat{min-height:80px;padding:14px}
  .cp-cat__icon{flex-basis:50px;width:50px;height:50px}
  .cp-categories__title{font-size:21px}
}
/* English (LTR): same layout mirrored by dir="ltr" (icon left, arrow right); arrows point right. */
.cp-categories[dir="ltr"] .cp-cat__arrow svg,.cp-categories[dir="ltr"] .cp-btn svg{transform:scaleX(-1)}
.cp-categories[dir="ltr"] .cp-categories__title{letter-spacing:-.2px}
/* ===== END CP-CATEGORIES ===== */

/* ARSHAD-16 (2026-10-14): homepage hero card mirrors in Arabic (RTL). styles.css pins it with
   left:72px and has no RTL rule, so on [dir=rtl] the card sat on the left. Desktop only: below 900px
   the card is static (stacked under the image) in both directions. */
@media (min-width: 901px) {
  html[dir="rtl"] .hero__card { left: auto; right: 72px; text-align: right; }
}

/* AMIT-228 part 2 (2026-10-15): the Our Programs tiles come from the category admin, so one even grid
   (4 / 3 / 2 / 1 columns) replaces the fixed 4-5-3 rows (.cp-categories__row--N stay for nothing). */
.cp-categories__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.cp-categories__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.cp-categories__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cp-categories__grid{grid-template-columns:minmax(0,1fr)}}

/* ARSHAD-19 (2026-10-17): course/diploma sidebar card - the payment logos (Apple Pay, mada,
   Mastercard, STC Pay, Visa, Tamara, Tabby) are white PNGs on the white card, so they were
   invisible. Images untouched; each link gets a brand-teal tile behind it. */
.pricing-box ul.uviq-payment-methods{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}
.pricing-box ul.uviq-payment-methods > li{width:auto;height:auto;margin:0;padding:0;background:none}
.pricing-box ul.uviq-payment-methods > li > a{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:36px;min-width:96px;padding:8px 14px;border-radius:10px;background-color:#4E6B6B}
.pricing-box ul.uviq-payment-methods > li > a > img{max-height:22px;height:auto;width:auto;max-width:100%;opacity:1;filter:none}

/* ARSHAD-19b (2026-10-17): same card - "Register Now" was white text on a white button (invisible).
   Brand teal like the price bar and payment tiles; slightly darker on hover/focus. */
.pricing-box a.btn.register-btn{background-color:#4E6B6B !important;color:#fff !important}
.pricing-box a.btn.register-btn:hover,.pricing-box a.btn.register-btn:focus{background-color:#3D5656 !important;color:#fff !important}

/* ===== KW-WHEEL (2026-10-17, ARSHAD-20) - /karimwrama-wheel on brandseducation =====
   The shared karimwrama view is built for a full-screen kids site (html/body 100% high, wheel
   pulled up with a negative margin, characters pinned to the bottom), so here the wheel slid
   under the header and the footer rode over the game. Original design kept as is; only placed in
   the page flow: header first, the sky section grows tall enough for the whole wheel, footer
   after it. Phones keep the original letter grid. Scoped to this page on theme 33. */
html:has(body.be-theme .sppinMain.wheel){height:auto}
body.be-theme:has(.sppinMain.wheel){display:flex;flex-direction:column;min-height:100vh;height:auto}
body.be-theme:has(.sppinMain.wheel) > #app{flex:1 0 auto;display:flex;flex-direction:column;height:auto}
body.be-theme:has(.sppinMain.wheel) .sk-head{position:relative;z-index:100}
body.be-theme:has(.sppinMain.wheel) main.py-4{flex:1 0 auto;height:auto;padding:0}
body.be-theme:has(.sppinMain.wheel) .newThemeChild,body.be-theme:has(.sppinMain.wheel) .mainDivi{float:none;width:100%;height:auto}
body.be-theme:has(.sppinMain.wheel) .sk-foot{position:relative;margin-top:0}
body.be-theme:has(.sppinMain.wheel) .mainBgTwo{position:relative;height:auto !important;min-height:calc(100vh - 110px);padding:40px 0 160px;box-sizing:border-box;overflow:hidden}
body.be-theme:has(.sppinMain.wheel) .mainBgTwo .sppinMain.wheel{margin-top:0}
@media (max-width:800px){body.be-theme:has(.sppinMain.wheel) .mainBgTwo{min-height:0;padding:24px 0 0}}
/* ===== END KW-WHEEL ===== */

/* ARSHAD-20c (2026-10-17): same page - the plans popup (#popupBox) opened under the sticky header
   (header z-index 100, popup none), so its top was cut off, and on phones the two plan cards were
   squeezed side by side. Popup above the header, scrolls when taller than the screen; cards stack
   on phones. */
body.be-theme:has(.sppinMain.wheel) #popupBox.popup{z-index:10000;overflow-y:auto;align-items:safe center;justify-content:center;padding:24px 16px;box-sizing:border-box}
body.be-theme:has(.sppinMain.wheel) #popupBox .popup-content{position:relative;width:800px;max-width:100%;margin:auto;padding:16px;box-sizing:border-box}
body.be-theme:has(.sppinMain.wheel) #popupBox .popup-content .close{position:absolute;top:8px;inset-inline-end:12px;float:none;font-size:26px;line-height:1;z-index:2}
@media (max-width:600px){
  body.be-theme:has(.sppinMain.wheel) #popupBox .popup-content{padding:40px 12px 12px}
  body.be-theme:has(.sppinMain.wheel) #popupBox .popup-content > .row{display:flex;flex-direction:column;align-items:center;gap:16px;margin:0}
  body.be-theme:has(.sppinMain.wheel) #popupBox .popup-content > .row > .col.s2{display:none}
  body.be-theme:has(.sppinMain.wheel) #popupBox .popup-content > .row > .col.s4{width:100%;max-width:280px;margin:0;float:none;padding:0}
}

/* ===== BE-CAROUSEL (2026-10-17, ARSHAD-21) - every .carousel on brandseducation =====
   Works with js/be-carousel.js (arrows, dots, mouse drag, RTL) and js/bx-marquee.js
   (marquee on wider screens only; phones get the native swipe slider). Card design is
   unchanged: these rules only add swipe/drag behaviour, mobile arrows, dots and the
   78% mobile card width. */
.carousel__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.carousel__track.is-dragging a { pointer-events: none; }
.carousel__track img { -webkit-user-drag: none; pointer-events: none; }
/* Marquee rows are moved by the animation, not by scrolling: let the page scroll
   vertically and hand horizontal drags to be-carousel.js. */
.carousel--marquee .carousel__track { touch-action: pan-y; }

.carousel__arrow.is-disabled { opacity: .35; cursor: default; }
/* Nothing to scroll (all cards fit): no arrows, no dots. */
.carousel--static .carousel__arrow,
.carousel--static .carousel__dots { display: none; }

.carousel__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  margin-top: 12px;
}
.carousel__dot {
  border: 0;
  background: none;
  padding: 6px 3px;
  line-height: 0;
  cursor: pointer;
}
.carousel__dot::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #D6D3E3;
  transition: width .25s ease, background-color .25s ease;
}
.carousel__dot.is-active::before { width: 22px; background: var(--purple); }
.carousel__dot:focus-visible { outline: 2px solid var(--purple); outline-offset: 1px; border-radius: 6px; }

@media (max-width: 768px) {
  .carousel__arrow {
    display: flex;
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
  .carousel__arrow--prev { left: 4px; }
  .carousel__arrow--next { right: 4px; }
  [dir="rtl"] .carousel__arrow--prev { left: auto; right: 4px; }
  [dir="rtl"] .carousel__arrow--next { right: auto; left: 4px; }
  .course-card { flex-basis: 78%; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel__dot::before { transition: none; }
}
/* ===== END BE-CAROUSEL ===== */

/* ===== CP-DL CHIPS (2026-10-17, ARSHAD-23) - /diploma-programs/{category}/{sub?} =====
   View: udemy_theme/diploma_list.blade.php (AMIT-237, its own inline styles untouched).
   The chip bar is a <nav>, and Materialize gives every nav a fixed height/line-height
   (56-64px) plus its pink background, so a second row of chips slid under the cards.
   Here: auto height, wrapped and centred chips in a white panel, fixed-height chips,
   the card grid, the back link, and on phones one sideways-scrolling row with an end
   fade (be-diploma-detail.js scrolls the active chip into view). RTL via logical props. */
body.be-theme .cp-dl nav.cp-dl__chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: auto;
  height: auto !important;
  min-height: 0;
  line-height: normal !important;
  margin: 0 0 24px;
  padding: 14px;
  background: #fff !important;
  border: 1px solid #E2E8EF;
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(30, 50, 80, .06) !important;
  color: inherit;
  box-sizing: border-box;
}
body.be-theme .cp-dl nav.cp-dl__chips a.cp-dl__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 40px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid #E2E8EF;
  border-radius: 999px;
  background: #fff;
  color: #2A2F45 !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1 !important;
  white-space: nowrap;
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
body.be-theme .cp-dl nav.cp-dl__chips a.cp-dl__chip:hover,
body.be-theme .cp-dl nav.cp-dl__chips a.cp-dl__chip:focus-visible {
  border-color: #497E9F;
  color: #497E9F !important;
  background: #fff;
}
body.be-theme .cp-dl nav.cp-dl__chips a.cp-dl__chip.is-on,
body.be-theme .cp-dl nav.cp-dl__chips a.cp-dl__chip.is-on:hover {
  background: #497E9F;
  border-color: #497E9F;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(73, 126, 159, .3);
}
body.be-theme .cp-dl nav.cp-dl__chips a.cp-dl__chip:focus-visible { outline: 2px solid #497E9F; outline-offset: 2px; }

/* course cards */
body.be-theme .cp-dl .cp-dl__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body.be-theme .cp-dl .cp-dl__card {
  padding: 18px;
  background: #fff;
  border: 1px solid #E2E8EF;
  border-radius: 16px;
  box-shadow: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
body.be-theme .cp-dl .cp-dl__card:hover,
body.be-theme .cp-dl .cp-dl__card:focus-visible {
  transform: translateY(-2px);
  border-color: #E2E8EF;
  box-shadow: 0 10px 24px rgba(30, 50, 80, .10);
}
body.be-theme .cp-dl .cp-dl__ic { flex: 0 0 46px; width: 46px; height: 46px; }

/* back link */
body.be-theme .cp-dl .cp-dl__back { margin-top: 28px; text-align: center; }
body.be-theme .cp-dl .cp-dl__back a { display: inline-flex; align-items: center; gap: 8px; color: #497E9F; font-weight: 700; text-decoration: none; }
body.be-theme .cp-dl .cp-dl__back a::before { content: "\2190"; font-size: 1.1em; line-height: 1; }
body.be-theme .cp-dl[dir="rtl"] .cp-dl__back a::before { content: "\2192"; }
body.be-theme .cp-dl .cp-dl__back a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  body.be-theme .cp-dl .cp-dl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body.be-theme .cp-dl .cp-dl__grid { grid-template-columns: minmax(0, 1fr); }
  body.be-theme .cp-dl nav.cp-dl__chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
  }
  body.be-theme .cp-dl nav.cp-dl__chips::-webkit-scrollbar { display: none; }
  body.be-theme .cp-dl nav.cp-dl__chips a.cp-dl__chip { height: 36px; padding: 0 14px; font-size: 13px; }
  /* end-edge fade: a sticky flex item that stays at the visible end while scrolling */
  body.be-theme .cp-dl nav.cp-dl__chips::after {
    content: "";
    position: sticky;
    inset-inline-end: -10px;
    flex: 0 0 44px;
    align-self: stretch;
    margin-inline-start: -44px;
    margin-block: -10px;
    margin-inline-end: -10px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 75%);
    pointer-events: none;
    transition: opacity .2s ease;
  }
  body.be-theme .cp-dl[dir="rtl"] nav.cp-dl__chips::after { background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff 75%); }
  body.be-theme .cp-dl nav.cp-dl__chips.is-end::after,
  body.be-theme .cp-dl nav.cp-dl__chips.is-fit::after { opacity: 0; }
}
/* ===== END CP-DL CHIPS ===== */

/* ===== RTL-AUTO (2026-10-17, ARSHAD-24) - empty "auto" fields on Arabic pages =====
   partials/rtl-inputs gives name / message / title ... fields dir="auto" (and data-cp-dir="auto") only when
   the page is rtl. An empty dir="auto" field resolves to ltr, so its placeholder (and any Latin text) sat on
   the LEFT while every other field is on the right; arabic_comn.css right-aligns the ltr fields but not
   these. data-cp-dir="auto" only exists on rtl pages, so no language check is needed. Header search excluded. */
:is(input, textarea)[data-cp-dir="auto"]:not([type="search"]) { text-align: right !important; }
:is(input, textarea)[data-cp-dir="auto"]:not([type="search"])::placeholder { direction: rtl; text-align: right !important; }
/* ===== END RTL-AUTO ===== */

/* ARSHAD-28 (2026-10-17): /karimwrama-wheel - letters at the bottom of the wheel (ا ب ت ث ج ن ه و ي at 1280px)
   could not be clicked: the bottom layer .botmImg (characters + arrow box, absolute, full width) lies over the
   wheel's lower rim and caught the clicks. The layer and its boxes now let clicks through; only the arrow links
   take them. Stacking order is unchanged on purpose: raising the wheel would paint it over Kareem and Rama
   (they overlap the wheel's edge by 35-180px depending on width). Same for the phone arrow row. */
body.be-theme:has(.sppinMain.wheel) .botmImg,
body.be-theme:has(.sppinMain.wheel) .botmImg .btnNexPre,
body.be-theme:has(.sppinMain.wheel) .botmImg .mainKareem,
body.be-theme:has(.sppinMain.wheel) .botmImg .mainRama,
body.be-theme:has(.sppinMain.wheel) .btnNexPre.formobilingo,
body.be-theme:has(.sppinMain.wheel) .btnNexPre ul.btnList { pointer-events: none !important; }
body.be-theme:has(.sppinMain.wheel) .btnNexPre a,
body.be-theme:has(.sppinMain.wheel) .btnNexPre button,
body.be-theme:has(.sppinMain.wheel) .btnNexPre li { pointer-events: auto !important; }
body.be-theme:has(.sppinMain.wheel) .harfComn,
body.be-theme:has(.sppinMain.wheel) .harfComn a { cursor: pointer; touch-action: manipulation; }

/* ARSHAD-29 (2026-10-17): /karimwrama-wheel plans popup on tablets and phones. From 601px to 900px the two plan
   cards kept the desktop one-third column (~200px), so "Monthly Plan" was cut off and "Subscribe Now!" was
   clipped. Now: two readable cards side by side (250-300px each) that wrap to one per row when there is no room,
   titles wrap instead of being cut, a fitted pill button, shorter artwork, and the close button as a white
   circle clear of the "Up to" badges. Card design and colours unchanged. */
@media (max-width: 900px) {
  body.be-theme:has(.sppinMain.wheel) #popupBox.popup .popup-content { width: 100%; max-width: 680px; padding: 56px 16px 20px; }
  body.be-theme:has(.sppinMain.wheel) #popupBox.popup .popup-content .close {
    top: 10px; inset-inline-end: 10px; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); z-index: 5;
  }
  body.be-theme:has(.sppinMain.wheel) #popupBox.popup .popup-content > .row { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 20px; margin: 0; }
  body.be-theme:has(.sppinMain.wheel) #popupBox.popup .popup-content > .row::after { display: none; }
  body.be-theme:has(.sppinMain.wheel) #popupBox.popup .popup-content > .row > .col.s2 { display: none; }
  body.be-theme:has(.sppinMain.wheel) #popupBox.popup .popup-content > .row > .col.s4 { float: none; flex: 1 1 250px; width: auto; max-width: 300px; margin: 0; padding: 0; min-height: 0; }
  body.be-theme:has(.sppinMain.wheel) #popupBox.popup .bxiYearplan { height: 100%; margin: 0; padding: 28px 20px 24px; box-sizing: border-box; text-align: center; }
  body.be-theme:has(.sppinMain.wheel) #popupBox.popup .bxiYearplanImg img { display: block; width: auto; max-width: 100%; max-height: 180px; margin: 0 auto; }
  body.be-theme:has(.sppinMain.wheel) #popupBox.popup .bxiYearplan h4 { font-size: 26px; line-height: 1.25; white-space: normal; overflow: visible; }
  body.be-theme:has(.sppinMain.wheel) #popupBox.popup .bxiYearplan .briprise p { font-size: 24px; }
  body.be-theme:has(.sppinMain.wheel) #popupBox.popup .bxiYearplan .btnSubcrip {
    display: inline-flex; align-items: center; justify-content: center;
    width: auto; min-width: 170px; padding: 12px 24px;
    font-size: 17px; line-height: 1.2; white-space: nowrap; border-radius: 999px;
  }
}
@media (max-width: 600px) {
  body.be-theme:has(.sppinMain.wheel) #popupBox.popup .popup-content > .row { flex-direction: column; align-items: center; }
  body.be-theme:has(.sppinMain.wheel) #popupBox.popup .popup-content > .row > .col.s4 { flex: 0 0 auto; width: 100%; max-width: 300px; }
}

/* ===== ARSHAD-38 (2026-10-21) - course checkout: COMPLETE CHECKOUT text centred =====
   theme_page/course_checkout.blade.php (shared by every institute) renders the
   button as .btn.btn-primary.btn-lg.btn-block#collapse-2; on brandseducation the
   label sat on the left. Scoped to theme 33 through body.be-theme; works whether
   the theme renders the button as a block or as a flex box. */
body.be-theme #collapse-2.btn {
  text-align: center !important;
  justify-content: center !important;
}

/* ===== ARSHAD-39 (2026-10-21) - course page bottom price bar, phones + tablets =====
   theme_page course detail: master.css (<=1080px) turns .detlRightingTwo into a
   fixed dark strip with a 28px price, floats and a square button. Here: a white
   bar with a soft top shadow, the price block at the start (sale price bold, list
   price struck through under it) and a rounded brand button at the end, 46px tall.
   Scoped to the page's own bar (.mainiCentri) - the header carries a second, empty
   .detlRightingTwo. Logical properties, so Arabic mirrors. */
@media (max-width: 1080px) {
  body.be-theme .mainiCentri .detlRightingTwo {
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; box-sizing: border-box;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -6px 20px rgba(15, 23, 42, .08);
    z-index: 60 !important;
    display: flex !important; align-items: center; gap: 16px;
  }
  /* tablets show the course title + rating at the start of the bar; phones hide
     it (master.css), and then the price block + button take the whole row */
  body.be-theme .mainiCentri .detlRightingTwo .bx_prisOne {
    flex: 1 1 auto; min-width: 0; margin: 0 !important; padding: 0 !important; float: none !important;
  }
  body.be-theme .mainiCentri .detlRightingTwo .bx_prisOne h4.bx_prismain {
    margin: 0 0 2px !important; padding: 0 !important;
    font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important;
    color: #1c1d1f !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.be-theme .mainiCentri .detlRightingTwo .bx_prisOne .clp-lead,
  body.be-theme .mainiCentri .detlRightingTwo .bx_prisOne .clp-lead * {
    font-size: 12px !important; color: #6a6f73 !important; line-height: 1.4 !important;
  }
  body.be-theme .mainiCentri .detlRightingTwo .bx_prisOne .clp-lead .fa { color: #f4b400 !important; }
  body.be-theme .mainiCentri .detlRightingTwo .btniAddBy {
    display: block !important; float: none !important;
    flex: 0 0 auto; width: auto !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important;
    text-align: start !important;
  }
  /* master.css hides the title block at 600px and below */
  @media (max-width: 600px) {
    body.be-theme .mainiCentri .detlRightingTwo .btniAddBy { flex: 1 1 auto; }
  }
  body.be-theme .mainiCentri .detlRightingTwo .bx_prisTwo {
    display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; margin: 0 !important; padding: 0 !important; float: none !important;
  }
  body.be-theme .mainiCentri .detlRightingTwo .mobileviewprice {
    display: block !important; flex: 0 1 auto;
    min-width: 0; margin: 0 !important; padding: 0 !important; float: none !important;
    line-height: 1.2; white-space: nowrap;
  }
  body.be-theme .mainiCentri .detlRightingTwo .mobileviewprice .bx_prismain,
  body.be-theme .mainiCentri .detlRightingTwo .mobileviewprice .bx_prisDisc {
    display: inline !important; margin: 0 !important; padding: 0 !important;
    font-size: 20px !important; font-weight: 700 !important; line-height: 1.2 !important;
    color: #1c1d1f !important; white-space: nowrap; background: none !important;
  }
  body.be-theme .mainiCentri .detlRightingTwo .mobileviewprice .sale_price_ing {
    display: block !important; margin: 2px 0 0 !important; padding: 0 !important;
    font-size: 13px !important; font-weight: 400 !important; line-height: 1.3 !important;
    color: #6a6f73 !important; text-decoration: line-through; white-space: nowrap;
  }
  body.be-theme .mainiCentri .detlRightingTwo .rig_tx {
    display: block !important; float: none !important; flex: 0 0 auto;
    width: auto !important; margin: 0 !important; padding: 0 !important;
  }
  /* The page toggles its two buttons with inline display:none ("Add To Cart"
     until the course is in the cart, then "Go to cart"), so restyle without
     forcing a display on the hidden one - only one button shows at a time. */
  body.be-theme .mainiCentri .detlRightingTwo .rig_tx a.enrolled_link:not([style*="none"]) {
    display: inline-flex !important;
  }
  body.be-theme .mainiCentri .detlRightingTwo .rig_tx a.enrolled_link {
    align-items: center; justify-content: center;
    height: 46px !important; min-width: 140px; margin: 0 !important; padding: 0 22px !important;
    border: 0 !important; border-radius: 10px !important; box-shadow: none !important;
    background: #4f7f9c !important; color: #fff !important;
    font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important;
    text-decoration: none; white-space: nowrap; box-sizing: border-box;
    transition: background-color .15s ease;
  }
  body.be-theme .mainiCentri .detlRightingTwo .rig_tx a.enrolled_link:hover,
  body.be-theme .mainiCentri .detlRightingTwo .rig_tx a.enrolled_link:focus-visible {
    background: #3f6a84 !important; color: #fff !important;
  }
}

/* ===== ARSHAD-40 (2026-10-21) - Arabic explore page (/explore/coursecategory) right-to-left =====
   arabic_comn.css (shared by every institute) has .exploCenter { direction: ltr !important },
   which kept the course grid (.cp-grid) and the carousel wrappers left-to-right on the
   Arabic site: first card top-left. Overridden here for theme 33 Arabic only (this file
   loads after arabic_comn.css); the shared file is not touched. The Owl carousels are
   owl-rtl already, so they now sit in a matching rtl parent. The CTA chevron points
   left. The card's "i" and type tag are NOT moved: English has them top-left /
   bottom-right and Arabic already shows them top-right / bottom-left (mirrored). */
html[lang="ar"] body.be-theme .exploCenter { direction: rtl !important; }
/* (ARSHAD-84: the old scaleX(-1) flip of the CTA arrow was removed; the chevron is drawn by the ARSHAD-77/84 rule) */

/* ---------- ARSHAD-44 (2026-10-21): header course search on Arabic pages ----------
   #skSearchInput has dir="auto" (+ data-cp-dir="auto") so typed English stays LTR; while it is empty
   the browser resolves it to LTR and the placeholder "ابحث عن دورة" sat on the far left, away from the
   search icon on the right. Arabic is marked by dir="rtl" on <html> (public pages) or on a wrapper div
   (tutor/student layouts), so match any rtl ancestor. English pages have none and are unchanged. */
[dir="rtl"] form.search #skSearchInput,
form.search:dir(rtl) #skSearchInput { text-align: right !important; }
[dir="rtl"] form.search #skSearchInput:placeholder-shown,
form.search:dir(rtl) #skSearchInput:placeholder-shown { direction: rtl; }
[dir="rtl"] form.search #skSearchInput::placeholder,
form.search:dir(rtl) #skSearchInput::placeholder { text-align: right !important; }
[dir="rtl"] form.search #skSearchDrop,
form.search:dir(rtl) #skSearchDrop { direction: rtl; text-align: right; }

/* ===== ARSHAD-49 (2026-10-21) - SweetAlert2 popups on brandseducation public pages (body.be-theme) =====
   The "Course Added to cart!" dialog (swal.fire: success icon, a "Go to cart" link in the html, confirm
   "Continue browsing") gets a modern card: soft backdrop, 20px radius, smaller green check, bold title,
   "Go to cart" as the main solid button and "Continue browsing" as a quiet outline button under it.
   Only the cart link (a[href*="cart-list"]) is turned into a button, so other popups' html is untouched. */
body.be-theme .swal2-container.swal2-backdrop-show { background: rgba(15, 23, 42, .45) !important; backdrop-filter: blur(2px); }
body.be-theme .swal2-popup {
  --sw-primary: #4f7f9c; --sw-primary-hover: #3f6a84; --sw-primary-soft: #eef4f8;
  --sw-ok: #16a34a; --sw-text: #1f2937; --sw-muted: #6b7280; --sw-line: #e5e7eb;
  width: 400px !important; max-width: calc(100vw - 32px) !important;
  padding: 30px 28px 24px !important; border-radius: 20px !important; background: #fff !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .22) !important; font-family: inherit !important; color: var(--sw-text);
}
/* success icon: 60px, green ring + check (the masking pieces stay white = the card) */
body.be-theme .swal2-popup .swal2-icon { font-size: 12px !important; margin: 4px auto 18px !important; }
body.be-theme .swal2-popup .swal2-icon.swal2-success { border-color: rgba(22, 163, 74, .25) !important; color: var(--sw-ok) !important; }
body.be-theme .swal2-popup .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(22, 163, 74, .25) !important; }
body.be-theme .swal2-popup .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--sw-ok) !important; }
/* title */
body.be-theme .swal2-popup .swal2-title {
  margin: 0 !important; padding: 0 !important; font-size: 22px !important; font-weight: 700 !important;
  line-height: 1.35 !important; color: var(--sw-text) !important; letter-spacing: 0;
}
body.be-theme .swal2-popup .swal2-html-container {
  margin: 8px 0 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--sw-muted) !important;
}
/* "Go to cart" -> main button */
body.be-theme .swal2-popup .swal2-html-container:has(a[href*="cart-list"]) { margin-top: 22px !important; }
body.be-theme .swal2-popup .swal2-html-container a[href*="cart-list"] {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; box-sizing: border-box;
  border-radius: 10px; background: var(--sw-primary); color: #fff !important; text-decoration: none !important;
  font-size: 15px; font-weight: 700; line-height: 1; transition: background-color .15s ease, box-shadow .15s ease;
}
body.be-theme .swal2-popup .swal2-html-container a[href*="cart-list"]::after { content: "\2192"; font-weight: 400; transition: transform .15s ease; }
[dir="rtl"] body.be-theme .swal2-popup .swal2-html-container a[href*="cart-list"]::after,
body.be-theme .swal2-popup .swal2-html-container a[href*="cart-list"]:dir(rtl)::after { content: "\2190"; }
body.be-theme .swal2-popup .swal2-html-container a[href*="cart-list"]:hover { background: var(--sw-primary-hover); }
body.be-theme .swal2-popup .swal2-html-container a[href*="cart-list"]:hover::after { transform: translateX(3px); }
[dir="rtl"] body.be-theme .swal2-popup .swal2-html-container a[href*="cart-list"]:hover::after { transform: translateX(-3px); }
body.be-theme .swal2-popup .swal2-html-container a[href*="cart-list"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(79, 127, 156, .3); }
/* actions */
body.be-theme .swal2-popup .swal2-actions { width: 100% !important; margin: 18px 0 0 !important; padding: 0 !important; gap: 10px; }
body.be-theme .swal2-popup .swal2-actions .swal2-styled {
  margin: 0 !important; height: 46px; padding: 0 20px !important; border-radius: 10px !important;
  font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; box-shadow: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.be-theme .swal2-popup .swal2-actions .swal2-styled.swal2-confirm { background: var(--sw-primary) !important; border: 1.5px solid var(--sw-primary) !important; color: #fff !important; }
body.be-theme .swal2-popup .swal2-actions .swal2-styled.swal2-confirm:hover { background: var(--sw-primary-hover) !important; border-color: var(--sw-primary-hover) !important; }
/* swal2 autofocuses the confirm button: ring only for keyboard focus */
body.be-theme .swal2-popup .swal2-actions .swal2-styled:focus { outline: none !important; box-shadow: none !important; }
body.be-theme .swal2-popup .swal2-actions .swal2-styled:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(79, 127, 156, .3) !important; }
/* in the cart dialog the confirm ("Continue browsing") is the secondary action: full-width quiet outline */
body.be-theme .swal2-popup:has(.swal2-html-container a[href*="cart-list"]) .swal2-actions { margin-top: 10px !important; }
body.be-theme .swal2-popup:has(.swal2-html-container a[href*="cart-list"]) .swal2-actions .swal2-styled.swal2-confirm {
  width: 100% !important; background: #fff !important; border-color: var(--sw-line) !important; color: var(--sw-text) !important;
}
body.be-theme .swal2-popup:has(.swal2-html-container a[href*="cart-list"]) .swal2-actions .swal2-styled.swal2-confirm:hover {
  background: var(--sw-primary-soft) !important; border-color: var(--sw-primary) !important; color: var(--sw-primary) !important;
}
@media (max-width: 480px) {
  body.be-theme .swal2-popup { padding: 26px 20px 20px !important; border-radius: 18px !important; }
  body.be-theme .swal2-popup .swal2-title { font-size: 20px !important; }
}
/* ===== END ARSHAD-49 ===== */

/* ===== ARSHAD-64 (2026-10-23) - Arabic: category bar "more" (⋮) menu mirrored to the far LEFT =====
   master.css floats li.lstdoti.dropComnLang right, arabic_comn.css floats every ul.listCateTopgri link right and
   header.css pins .dropComnLang .dropdown-content to right:0 (Materialize also writes left:-156px inline), so in
   Arabic the ⋮ sat at the right end beside the category label and its menu dropped over the "فئات" search row.
   Here (brandseducation, Arabic only - arabic_comn.css is shared by every institute): ⋮ floats left and its menu is
   anchored to the toggle's left edge, opening toward the page. top / min-width / border / font-size untouched. */
html[lang="ar"] body.be-theme ul.listCateTopgri li.lstdoti.dropComnLang,
[dir="rtl"] body.be-theme ul.listCateTopgri li.lstdoti.dropComnLang { float: left !important; }
html[lang="ar"] body.be-theme ul.listCateTopgri li.lstdoti.dropComnLang a.dropdown-button,
[dir="rtl"] body.be-theme ul.listCateTopgri li.lstdoti.dropComnLang a.dropdown-button { float: left !important; }
html[lang="ar"] body.be-theme li.lstdoti.dropComnLang ul#dropdownlangoino.dropdown-content,
[dir="rtl"] body.be-theme li.lstdoti.dropComnLang ul#dropdownlangoino.dropdown-content {
  left: 0 !important; right: auto !important; text-align: right;
}
/* ===== END ARSHAD-64 ===== */

/* ===== ARSHAD-65 (2026-10-23) - course tabs (Most popular / New / Beginner favorites) need a gap, LTR + RTL =====
   No rule ever spaced them: the gap seen in English was only Materialize's 80px min-width slack around short labels;
   the Arabic labels are wider than 80px, so the tabs touched. Margins between the <li>s (not padding on the <a>), so
   the first tab stays flush with the heading edge and the .indicator still spans only the label. margin-inline-start
   flips by itself in RTL. Here, not in master.css: that sheet is shared by every institute. */
body.be-theme .manitcbi ul.tabs li.tab { width: auto; min-width: 0; }
body.be-theme .manitcbi ul.tabs li.tab + li.tab { margin-inline-start: 32px; }
@media (max-width: 767px) {
  body.be-theme .manitcbi ul.tabs li.tab + li.tab { margin-inline-start: 16px; }
}
/* ===== END ARSHAD-65 ===== */

/* ===== AMIT-323 (2026-10-23): category page topic carousel (/online/courses/<cat>) - the round arrows sat on the
   first and last cards; the carousel gets side room and the arrows sit in it. >=768px only (mobile swipes). ===== */
@media (min-width: 768px) {
  body.be-theme .bxTeachAcad .vxominoing #demos { padding: 0 56px; }
  body.be-theme .bxTeachAcad .vxominoing .owl-nav button.owl-prev { left: -56px !important; right: auto !important; }
  body.be-theme .bxTeachAcad .vxominoing .owl-nav button.owl-next { right: -56px !important; left: auto !important; }
}
/* ===== END AMIT-323 ===== */

/* ===== ARSHAD-75 (2026-10-23) - Arabic: the "View course" arrow on EVERY course card =====
   .cp-card__cta prints › in a span; in an rtl line the browser mirrors it to ‹. ARSHAD-40 flipped it back
   only inside .exploCenter, so cards outside that block (e.g. the self-paced grid) still showed ‹.
   Same flip for all of them; English unchanged. */
/* (ARSHAD-84: scaleX(-1) flip removed; see the ARSHAD-77/84 chevron rule below) */
/* ===== END ARSHAD-75 ===== */

/* ARSHAD-77 (2026-10-23): /explore/coursecategory course tab strip (.cp-toptabs, explore.css) showed a small
   vertical scrollbar at its end (EN + AR). The tabs' margin-bottom:-1px gives 1px of vertical overflow, and
   explore.css's own scrollbar-width:none loses to master.css `div { scrollbar-width: thin !important }`
   (in Chrome scrollbar-width also disables ::-webkit-scrollbar). Horizontal swipe on small screens is kept. */
body.be-theme .cp-explore .cp-toptabs {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}
body.be-theme .cp-explore .cp-toptabs::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ARSHAD-77 (2026-10-23): "View course / عرض الدورة" arrow on every course card (.cp-card__cta). In Arabic the
   "›" glyph is bidi-mirrored to "‹" and the scaleX(-1) flip above was not reliable (and sat low and small), so
   the glyph is hidden there and a CSS chevron is drawn in its place. ARSHAD-84: it points LEFT (the RTL "forward"). It uses currentColor, so it
   follows the link colour and its hover. English (LTR) keeps the normal "›". */
html[lang="ar"] body.be-theme .cp-card__cta span,
html[lang="ar"] body.be-theme .exploCenter .cp-card__cta span,
[dir="rtl"] body.be-theme .cp-card__cta span,
body.be-theme[dir="rtl"] .cp-card__cta span {
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-top: 2px solid currentColor !important;
  border-right: 2px solid currentColor !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  transform: rotate(-135deg) !important;   /* points LEFT */
  margin-inline-start: 6px !important;
  flex: none !important;
  align-self: center !important;
}

/* ===== ARSHAD-85 (2026-10-23) - course listing pages (/online/courses/*): pagination redesign, slider hover
   popup no longer clipped, popup restyled without the broken arrow. CSS only. ===== */

/* 1) Pagination: one rounded bar; the <li> no longer paints a square (Materialize + the older active-li rule) */
body div.pagination.box-page { display:flex !important; justify-content:center; background:none !important;
  border:0 !important; box-shadow:none !important; padding:0 !important; margin:32px 0 48px !important; }
body .box-page ul.pagination { display:flex !important; align-items:center; gap:6px !important; margin:0 auto !important;
  padding:6px !important; width:fit-content; height:auto !important; background:#fff !important;
  border:1px solid #E6ECF1 !important; border-radius:999px !important;
  box-shadow:0 1px 2px rgba(15,42,61,.04), 0 8px 24px rgba(15,42,61,.07) !important; }
body.be-theme .pagination.box-page ul.pagination li.page-item,
body.be-theme .pagination.box-page ul.pagination li.page-item.active {
  display:block !important; margin:0 !important; padding:0 !important; float:none !important; width:auto !important;
  height:auto !important; border:0 !important; background:none !important; background-color:transparent !important; }
body .box-page ul.pagination .page-link { display:inline-flex !important; align-items:center; justify-content:center;
  box-sizing:border-box !important; min-width:40px !important; height:40px !important; padding:0 12px !important;
  margin:0 !important; border:0 !important; border-radius:999px !important; background:transparent !important;
  color:#334155 !important; font-size:15px !important; font-weight:600 !important; line-height:1 !important;
  box-shadow:none !important; float:none !important; transition:background-color .15s,color .15s; }
body .box-page ul.pagination a.page-link:hover { background:#EEF4F8 !important; color:#3B6A87 !important; }
body .box-page ul.pagination li.active .page-link { background:#497E9F !important; color:#fff !important;
  box-shadow:0 4px 12px rgba(73,126,159,.35) !important; }
body .box-page ul.pagination li.disabled .page-link { color:#CBD5E1 !important; cursor:not-allowed; }
/* prev / next: the « » glyph is hidden and a CSS chevron drawn (first li = previous, last li = next) */
body .box-page ul.pagination li:first-child .page-link,
body .box-page ul.pagination li:last-child .page-link { font-size:0 !important; width:40px !important; padding:0 !important;
  border:1px solid #E6ECF1 !important; }
body .box-page ul.pagination li:first-child .page-link::before,
body .box-page ul.pagination li:last-child .page-link::before { content:""; display:block; width:8px; height:8px;
  border-top:2px solid currentColor; border-right:2px solid currentColor; }
body .box-page ul.pagination li:first-child .page-link::before { transform:rotate(-135deg); margin-left:3px; }
body .box-page ul.pagination li:last-child  .page-link::before { transform:rotate(45deg);  margin-right:3px; }
/* Arabic: the pager is dir=rtl, previous sits on the right and points right, next points left */
html[lang="ar"] body .box-page ul.pagination li:first-child .page-link::before { transform:rotate(45deg); margin:0 3px 0 0; }
html[lang="ar"] body .box-page ul.pagination li:last-child  .page-link::before { transform:rotate(-135deg); margin:0 0 0 3px; }

/* 2) Hover popup cut off in sliders: only carousels holding the hover cards (.hoverDiv) */
.owl-carousel:has(.hoverDiv) .owl-stage-outer { overflow: visible !important; }
.owl-carousel:has(.hoverDiv) .owl-item { transition: opacity .25s; }
.owl-carousel:has(.hoverDiv) .owl-item:not(.active) { opacity:0 !important; visibility:hidden !important; pointer-events:none; }
.owl-carousel:has(.hoverDiv) .owl-item:hover { z-index:50 !important; position:relative; }
.owl-carousel:has(.hoverDiv) .stm_lms_courses__single__inner { overflow: visible !important; }
.owl-carousel:has(.hoverDiv) .stm_lms_courses__single--image { border-radius:16px 16px 0 0; overflow:hidden; }
body { overflow-x: clip; }   /* edge popups must not cause a horizontal scrollbar */
/* body's clip is propagated to the viewport as 'hidden', which still let the page be scrolled sideways (RTL
   sliders reached 1500px off-screen); clip the listing section itself so the extra width never exists */
body .mainiBoixi:has(.owl-carousel .hoverDiv) { overflow-x: clip !important; overflow-y: visible !important; }

/* 3) Popup as a clean card; the old double-border triangle (::before/::after, placed by many master.css media
   queries) is removed - there is a ~20px gap between card and popup, so no pointer is needed */
body .stm_lms_courses__single .stm_lms_courses__single--info {
  border:1px solid #E6ECF1 !important; border-radius:16px !important; padding:18px 18px 16px !important;
  box-shadow:0 2px 4px rgba(15,42,61,.06), 0 20px 44px rgba(15,42,61,.18) !important; }
body .stm_lms_courses__single .stm_lms_courses__single--info::before,
body .stm_lms_courses__single .stm_lms_courses__single--info::after { display:none !important; }
/* the template prints an empty first chip before "All Levels / Subtitles" */
body .stm_lms_courses__single .stm_lms_courses__single--info span:empty { display:none !important; }
/* ===== END ARSHAD-85 ===== */

/* ===== ARSHAD-92 (2026-10-26): header "Explore Categories" dropdown rows (#exploreMenuPanel) =====
   Hover tint #F7F7F8 was barely visible on white. Rows are now 56px rounded pills (14px radius, 4px apart) with
   a light brand-blue hover (#EEF4F8), blue label, icon tile and a chevron that nudges forward. The id selector +
   !important beat `.sk-head * { padding:0; margin:0 }`, `.sk-head a { color:inherit }` and the global a:hover on
   the inner pages. Light mode only: the panels' dark mode keeps its own rules (brand-header.css). The
   "Explore All Categories" button below the list is not touched. */
body:not(.dark_mode) #exploreMenuPanel .explore-menu__item { margin: 0 0 4px !important; padding: 0 !important; }
body:not(.dark_mode) #exploreMenuPanel .explore-menu__item:last-child { margin-bottom: 0 !important; }
/* Materialize `nav ul li:hover { background-color: rgba(0,0,0,.1) }` painted the square <li> behind the rounded row,
   so grey square corners showed around the hover pill: the item never gets a background of its own. */
#exploreMenuPanel .explore-menu__item,
#exploreMenuPanel .explore-menu__item:hover,
#exploreMenuPanel .explore-menu__item:focus-within { background: transparent !important; background-color: transparent !important; border-radius: 14px; }
body:not(.dark_mode) #exploreMenuPanel a.explore-menu__row {
  display: flex !important; align-items: center !important; gap: 14px !important;
  min-height: 56px !important; height: auto !important; padding: 8px 12px !important; margin: 0 !important;
  border-radius: 14px !important; background: transparent !important; color: #1C1D1F !important;
  text-decoration: none !important; outline: none;
  transition: background-color .15s ease, color .15s ease;
}
body:not(.dark_mode) #exploreMenuPanel a.explore-menu__row:hover,
body:not(.dark_mode) #exploreMenuPanel a.explore-menu__row:focus-visible { background: #EEF4F8 !important; color: #3B6A87 !important; }
body:not(.dark_mode) #exploreMenuPanel a.explore-menu__row:focus-visible { box-shadow: inset 0 0 0 2px #497E9F !important; }
body:not(.dark_mode) #exploreMenuPanel .explore-menu__label { color: inherit !important; }
/* icon: 38px soft-grey tile, white with a small shadow on hover, icon in brand blue */
body:not(.dark_mode) #exploreMenuPanel .explore-menu__icon {
  flex: 0 0 38px !important; width: 38px !important; height: 38px !important; margin: 0 !important;
  border-radius: 10px !important; background: #F1F4F7 !important; color: #1C1D1F !important;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
body:not(.dark_mode) #exploreMenuPanel .explore-menu__icon svg { width: 20px !important; height: 20px !important; }
body:not(.dark_mode) #exploreMenuPanel a.explore-menu__row:hover .explore-menu__icon,
body:not(.dark_mode) #exploreMenuPanel a.explore-menu__row:focus-visible .explore-menu__icon {
  background: #fff !important; color: #497E9F !important; box-shadow: 0 2px 6px rgba(15, 42, 61, .10) !important;
}
/* chevron: grey, then blue and 3px forward on hover (the glyph mirrors itself in Arabic, so it moves left there) */
body:not(.dark_mode) #exploreMenuPanel .explore-menu__chev { color: #9AA5B1 !important; transition: color .15s ease, transform .15s ease; }
body:not(.dark_mode) #exploreMenuPanel a.explore-menu__row:hover .explore-menu__chev,
body:not(.dark_mode) #exploreMenuPanel a.explore-menu__row:focus-visible .explore-menu__chev { color: #3B6A87 !important; transform: translateX(3px); }
html[lang="ar"] body:not(.dark_mode) #exploreMenuPanel a.explore-menu__row:hover .explore-menu__chev,
html[lang="ar"] body:not(.dark_mode) #exploreMenuPanel a.explore-menu__row:focus-visible .explore-menu__chev { transform: translateX(-3px); }
@media (prefers-reduced-motion: reduce) {
  body:not(.dark_mode) #exploreMenuPanel a.explore-menu__row,
  body:not(.dark_mode) #exploreMenuPanel .explore-menu__icon,
  body:not(.dark_mode) #exploreMenuPanel .explore-menu__chev { transition: none; }
}
/* ===== END ARSHAD-92 ===== */

/* ===== ARSHAD-93 (2026-10-26): /explore/coursecategory - the results column is never shorter than the screen,
   so a short / empty / "Loading..." result cannot pull the footer up into view after a filter click
   (the scroll fix itself is in category_filtercourse_page.blade.php). ===== */
.cp-explore .row > .col.s9 { min-height: calc(100vh - 40px); }
@media (max-width: 767.98px) { .cp-explore .row > .col.s9 { min-height: 70vh; } }
/* ===== END ARSHAD-93 ===== */