/* ============================================================
   Site-wide modern overlay (main_app layout)
   Aligned to live home brand:
     - Primary:   #1D4E9F  (royal blue)
     - Secondary: #79D08E  (sage green)
     - Accent:    #FF6838  (orange)
     - Heading:   #333333
     - Muted:     #808080
     - Soft blue: #EDEDFD
     - Border:    #E8EDF5
     - Surface:   #F9F9F9
     - Font:      Urbanist
     - Pills:     50px
   Targets:
     - Header (lt_header/lt_nav) cart + bell icons + login/register pills
     - Shopping cart dropdown + notification dropdown
     - Global buttons (.btn-primary, .btn-outline-*) used on inner pages
     - Form fields (inputs, selects)
     - Generic cards used on /cart, /search, /blog, /profile, etc.
     - Footer (vertx-footer) — light polish
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700&display=swap');

:root {
  --vx-primary: #1D4E9F;
  --vx-primary-hover: #163d80;
  --vx-primary-soft: #EDEDFD;
  --vx-secondary: #79D08E;
  --vx-accent: #FF6838;
  --vx-heading: #333333;
  --vx-muted: #808080;
  --vx-border: #E8EDF5;
  --vx-surface: #F9F9F9;
  --vx-shadow-sm: 0 1px 2px rgba(29, 78, 159, .05);
  --vx-shadow-md: 0 8px 24px rgba(29, 78, 159, .08);
  --vx-radius-card: 20px;
  --vx-radius-pill: 50px;
}

/* Body font — only on pages using main_app (panel has its own font override) */
body:not(.panel-page) {
  font-family: "Urbanist", "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ===========================================================
   Header — cart + bell icons
   =========================================================== */

.lt-header-icons {
  gap: 10px;
}
.lt-header-icons > .dropdown {
  position: relative;
}

.lt-header-icons .btn.btn-transparent,
.lt-header-icons .btn.dropdown-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0 !important;
  border-radius: 50% !important;
  background-color: var(--vx-primary-soft) !important;
  color: var(--vx-primary) !important;
  border: 1px solid transparent !important;
  position: relative;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.lt-header-icons .btn.btn-transparent:hover,
.lt-header-icons .btn.dropdown-toggle:hover {
  background-color: #DCE4F5 !important;
  border-color: var(--vx-primary) !important;
  transform: translateY(-1px);
}
.lt-header-icons .btn.btn-transparent[disabled],
.lt-header-icons .btn.dropdown-toggle[disabled] {
  opacity: .55;
  cursor: not-allowed;
}
.lt-header-icons .btn i,
.lt-header-icons .btn svg {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  color: var(--vx-primary) !important;
  stroke: var(--vx-primary) !important;
}
.lt-header-icons .btn.dropdown-toggle::after {
  display: none !important;
}

/* Count badges on cart and bell */
.lt-header-icons .badge-circle-primary,
.lt-header-icons .badge-circle-danger {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  line-height: 18px;
  border-radius: 999px;
  font-weight: 700;
  color: #fff !important;
  border: 2px solid #ffffff;
}
.lt-header-icons .badge-circle-primary {
  background-color: var(--vx-primary) !important;
}
.lt-header-icons .badge-circle-danger {
  background-color: var(--vx-accent) !important;
}

/* Cart & notification dropdown menus */
.lt-header-icons .dropdown-menu {
  border: 1px solid var(--vx-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--vx-shadow-md) !important;
  padding: 12px !important;
  margin-top: 10px !important;
  min-width: 320px;
}
.lt-header-icons .dropdown-menu .navbar-cart-box,
.lt-header-icons .dropdown-menu .navbar-notification-item {
  border-radius: 12px;
  padding: 10px;
  transition: background-color .15s ease;
}
.lt-header-icons .dropdown-menu .navbar-cart-box:hover,
.lt-header-icons .dropdown-menu .navbar-notification-item:hover {
  background-color: var(--vx-primary-soft);
}

/* Header user pills (Login / Get Started) — match the home page */
.ltlogin {
  border: 1px solid var(--vx-border) !important;
  border-radius: var(--vx-radius-pill) !important;
  color: var(--vx-primary) !important;
  padding: 10px 22px !important;
  font-weight: 500;
  background-color: #ffffff !important;
}
.ltlogin:hover {
  background-color: var(--vx-primary-soft) !important;
  border-color: var(--vx-primary) !important;
}
.ltregister {
  background-color: var(--vx-primary) !important;
  color: #ffffff !important;
  border-radius: var(--vx-radius-pill) !important;
  padding: 10px 22px !important;
  font-weight: 500;
  border: 1px solid var(--vx-primary) !important;
  box-shadow: 0 6px 14px rgba(29, 78, 159, .18) !important;
  transition: background-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.ltregister:hover {
  background-color: var(--vx-primary-hover) !important;
  border-color: var(--vx-primary-hover) !important;
  box-shadow: 0 10px 22px rgba(29, 78, 159, .28) !important;
  transform: translateY(-1px);
}

/* Header user avatar dropdown */
.navbar-auth-user-dropdown .navbar-user .user-name,
.navbar-auth-user-dropdown .navbar-user .text-dark-blue {
  color: var(--vx-heading) !important;
}
.navbar-auth-user-dropdown .custom-dropdown-body {
  border: 1px solid var(--vx-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--vx-shadow-md) !important;
}
.navbar-auth-user-dropdown .dropdown-user-avatar {
  background-color: var(--vx-primary-soft);
  border-color: transparent !important;
  border-radius: 14px;
}
.navbar-auth-user-dropdown .dropdown-user-avatar .text-secondary {
  color: var(--vx-heading) !important;
}

/* ===========================================================
   Global buttons (outside panel + sidebar overrides)
   =========================================================== */
body:not(.panel-page) .btn-primary {
  background-color: var(--vx-primary) !important;
  border-color: var(--vx-primary) !important;
  color: #ffffff !important;
  border-radius: var(--vx-radius-pill) !important;
  font-weight: 500;
  padding: 11px 22px;
  box-shadow: 0 6px 14px rgba(29, 78, 159, .18) !important;
}
body:not(.panel-page) .btn-primary:hover,
body:not(.panel-page) .btn-primary:focus {
  background-color: var(--vx-primary-hover) !important;
  border-color: var(--vx-primary-hover) !important;
  box-shadow: 0 10px 22px rgba(29, 78, 159, .28) !important;
}

body:not(.panel-page) .btn-outline-primary {
  border: 1px solid var(--vx-primary) !important;
  color: var(--vx-primary) !important;
  background-color: #ffffff !important;
  border-radius: var(--vx-radius-pill) !important;
  font-weight: 500;
  padding: 11px 22px;
  box-shadow: none !important;
}
body:not(.panel-page) .btn-outline-primary:hover {
  background-color: var(--vx-primary-soft) !important;
}

body:not(.panel-page) .btn-outline-warning {
  border-radius: var(--vx-radius-pill) !important;
  font-weight: 500;
  padding: 11px 22px;
  box-shadow: none !important;
}
body:not(.panel-page) .btn-outline-danger {
  border-color: var(--vx-accent) !important;
  color: var(--vx-accent) !important;
  border-radius: var(--vx-radius-pill) !important;
  font-weight: 500;
  padding: 11px 22px;
  box-shadow: none !important;
}
body:not(.panel-page) .btn-outline-danger:hover {
  background-color: var(--vx-accent) !important;
  color: #ffffff !important;
}

/* ===========================================================
   Form fields — sign-in, register, search, etc.
   =========================================================== */
body:not(.panel-page) .form-control,
body:not(.panel-page) input.form-control,
body:not(.panel-page) textarea.form-control,
body:not(.panel-page) select.form-control {
  border: 1px solid var(--vx-border);
  border-radius: 14px;
  padding: 12px 16px;
  background-color: #ffffff;
  color: var(--vx-heading);
  transition: border-color .15s ease, box-shadow .15s ease;
}
body:not(.panel-page) .form-control:focus {
  border-color: var(--vx-primary) !important;
  box-shadow: 0 0 0 4px rgba(29, 78, 159, .10) !important;
}
body:not(.panel-page) .form-control::placeholder {
  color: #B0B7C3;
}
body:not(.panel-page) label,
body:not(.panel-page) .form-label {
  color: var(--vx-heading);
  font-weight: 500;
}

/* ===========================================================
   Generic content cards on inner pages (cart, profile, blog,
   forum, contact, etc.) — pick up any .bg-white + shadow combo.
   =========================================================== */
body:not(.panel-page) main .bg-white.shadow-sm,
body:not(.panel-page) main .bg-white.shadow,
body:not(.panel-page) main .bg-white.panel-shadow {
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-card);
  box-shadow: var(--vx-shadow-sm) !important;
}

/* Blog cards */
body:not(.panel-page) .blog-card,
body:not(.panel-page) .blog-post {
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-card);
  box-shadow: var(--vx-shadow-sm);
  overflow: hidden;
}

/* Webinar / course grid cards (used on search and category pages) */
body:not(.panel-page) .webinar-card,
body:not(.panel-page) .product-card,
body:not(.panel-page) .product-list-card {
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-card);
  box-shadow: var(--vx-shadow-sm);
  transition: box-shadow .2s ease, transform .12s ease;
}
body:not(.panel-page) .webinar-card:hover,
body:not(.panel-page) .product-card:hover,
body:not(.panel-page) .product-list-card:hover {
  box-shadow: var(--vx-shadow-md);
  transform: translateY(-2px);
}

/* ===========================================================
   Headings / muted text alignment
   =========================================================== */
body:not(.panel-page) .text-secondary,
body:not(.panel-page) .text-dark-blue {
  color: var(--vx-heading) !important;
}
body:not(.panel-page) .text-gray,
body:not(.panel-page) .text-muted {
  color: var(--vx-muted) !important;
}
body:not(.panel-page) main h1,
body:not(.panel-page) main h2,
body:not(.panel-page) main h3 {
  color: var(--vx-heading);
  letter-spacing: -0.01em;
}

/* ===========================================================
   Footer touch-up (vertx-footer is the new design)
   =========================================================== */
.vertx-footer {
  border-top: 1px solid var(--vx-border);
}
.vertx-footer .footer-description,
.vertx-footer .footer-links a {
  color: var(--vx-muted) !important;
}
.vertx-footer .footer-links a:hover {
  color: var(--vx-primary) !important;
}
.vertx-footer .footer-heading {
  color: var(--vx-heading) !important;
  font-weight: 600;
}
.vertx-footer .social-icon {
  color: var(--vx-primary) !important;
  transition: transform .15s ease, color .15s ease;
}
.vertx-footer .social-icon:hover {
  color: var(--vx-primary-hover) !important;
  transform: translateY(-2px);
}
.vertx-footer .back-to-top {
  color: var(--vx-primary) !important;
}

/* ===========================================================
   Auth pages (login / register) — common wrappers
   =========================================================== */
body:not(.panel-page) .auth-container,
body:not(.panel-page) .auth-page,
body:not(.panel-page) .login-page,
body:not(.panel-page) .register-page {
  background-color: var(--vx-surface);
}
body:not(.panel-page) .auth-card,
body:not(.panel-page) .auth-box,
body:not(.panel-page) .form-card {
  background: #ffffff;
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-card);
  box-shadow: var(--vx-shadow-md);
}

/* ===========================================================
   Cart / checkout page
   =========================================================== */
body:not(.panel-page) .cart-box,
body:not(.panel-page) .cart-summary,
body:not(.panel-page) .checkout-box {
  border: 1px solid var(--vx-border) !important;
  border-radius: var(--vx-radius-card) !important;
  box-shadow: var(--vx-shadow-sm) !important;
}