/* ============================================================
   ORANGI PUBLIC DESIGN FOUNDATION — PUBLIC_WEB_MODERNIZATION_V1
   Scope: body.orangi-public ONLY (the unauthenticated new_frontend
   shell). Never applied to the student/teacher/admin dashboards.
   Loaded last in head so it wins the cascade over style.css/custom.css.
   ============================================================ */

/* ---------- 1. Tokens (mapped from the student design system) ---------- */
body.orangi-public {
    --op-primary: #4a2561;        /* Orangi brand purple (footer/site identity) */
    --op-primary-strong: #3a1d4d;
    --op-accent: #f24227;         /* Orangi flame accent already used on home */
    --op-accent-soft: #fff1ee;
    --op-bg: #f6f7fb;
    --op-surface: #ffffff;
    --op-border: #e2e8f0;
    --op-ink: #0f172a;
    --op-ink-2: #334155;
    --op-muted: #64748b;
    --op-radius: 14px;
    --op-radius-sm: 10px;
    --op-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06);
    --op-font: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}

/* ---------- 2. Typography ---------- */
body.orangi-public,
body.orangi-public h1, body.orangi-public h2, body.orangi-public h3,
body.orangi-public h4, body.orangi-public h5, body.orangi-public h6,
body.orangi-public .btn, body.orangi-public input, body.orangi-public select,
body.orangi-public textarea, body.orangi-public .navbar-nav {
    font-family: var(--op-font);
}
body.orangi-public { color: var(--op-ink-2); }
body.orangi-public h1, body.orangi-public h2, body.orangi-public h3,
body.orangi-public h4, body.orangi-public h5 { color: var(--op-ink); font-weight: 700; }

/* Responsive type scale: headings must never dominate a phone screen */
@media (max-width: 767px) {
    body.orangi-public h1, body.orangi-public .display-4, body.orangi-public .display-5 { font-size: 1.55rem !important; }
    body.orangi-public h2 { font-size: 1.3rem !important; }
    body.orangi-public h3 { font-size: 1.1rem !important; }
    body.orangi-public .lead { font-size: .95rem !important; }
}

/* ---------- 3. Kill the legacy pre-loader cost (goo SVG overlay) ---------- */
body.orangi-public .pre-loader { display: none !important; }

/* ---------- 4. Bootstrap-5 utility shims (markup uses BS5 classes on a BS4 build) ---------- */
body.orangi-public .g-4 > [class*='col'] { padding: 12px; }
body.orangi-public .rg-4 { row-gap: 1.5rem; }
body.orangi-public .py-6 { padding-top: 4rem; padding-bottom: 4rem; }
@media (max-width: 767px) { body.orangi-public .py-6 { padding-top: 2.25rem; padding-bottom: 2.25rem; } }
body.orangi-public .fw-bold { font-weight: 700 !important; }
body.orangi-public .fw-semibold { font-weight: 600 !important; }
body.orangi-public .text-decoration-none { text-decoration: none !important; }
/* logical-margin shims (LTR uses ms/me literally; flip under RTL) */
body.orangi-public .ms-1 { margin-inline-start: .25rem !important; }
body.orangi-public .ms-2 { margin-inline-start: .5rem !important; }
body.orangi-public .ms-3 { margin-inline-start: 1rem !important; }
body.orangi-public .me-1 { margin-inline-end: .25rem !important; }
body.orangi-public .me-2 { margin-inline-end: .5rem !important; }
body.orangi-public .me-3 { margin-inline-end: 1rem !important; }
body.orangi-public .display-5 { font-size: 2.2rem; font-weight: 700; line-height: 1.25; }

/* ---------- 5. Buttons ---------- */
body.orangi-public .btn { border-radius: 999px; font-weight: 600; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
body.orangi-public .btn:focus-visible { outline: 3px solid rgba(74, 37, 97, .35); outline-offset: 2px; }
body.orangi-public .btn-primary {
    background: var(--op-primary); border-color: var(--op-primary);
}
body.orangi-public .btn-primary:hover, body.orangi-public .btn-primary:focus {
    background: var(--op-primary-strong); border-color: var(--op-primary-strong);
}
body.orangi-public .register-btn { background: var(--op-accent); border-color: var(--op-accent); }
body.orangi-public .register-btn:hover { background: #d63a20; border-color: #d63a20; }
/* comfortable touch targets on touch layouts */
@media (max-width: 991px) {
    body.orangi-public .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    body.orangi-public .navbar-toggler { min-width: 44px; min-height: 44px; }
}

/* ---------- 6. Cards ---------- */
body.orangi-public .card {
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius);
    box-shadow: var(--op-shadow);
}
body.orangi-public .card .card-body { color: var(--op-ink-2); }
body.orangi-public .service-card { transition: transform .18s ease, box-shadow .18s ease; }
body.orangi-public .service-card:hover { transform: translateY(-3px); }

/* ---------- 7. Forms ---------- */
body.orangi-public .form-control, body.orangi-public .custom-select {
    border-radius: var(--op-radius-sm);
    border-color: var(--op-border);
    min-height: 44px;
    font-family: var(--op-font);
}
body.orangi-public .form-control:focus, body.orangi-public .custom-select:focus {
    border-color: var(--op-primary);
    box-shadow: 0 0 0 3px rgba(74, 37, 97, .15);
}
body.orangi-public label { font-weight: 600; color: var(--op-ink-2); }

/* ---------- 8. Layout hygiene ---------- */
/* clip, not hide: real overflow must stay measurable in QA */
body.orangi-public { overflow-x: clip; }
@supports not (overflow-x: clip) { body.orangi-public { overflow-x: hidden; } }
body.orangi-public img { max-width: 100%; height: auto; }
body.orangi-public .container, body.orangi-public .container-fluid { min-width: 0; }

/* ---------- 9. Accessibility ---------- */
body.orangi-public a:focus-visible,
body.orangi-public button:focus-visible,
body.orangi-public [tabindex]:focus-visible {
    outline: 3px solid rgba(242, 66, 39, .5);
    outline-offset: 2px;
    border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
    body.orangi-public *, body.orangi-public *::before, body.orangi-public *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- 10. Section rhythm on mobile (audit: 3.5 screens for 3 sections) ---------- */
@media (max-width: 767px) {
    body.orangi-public section { padding-top: 1.75rem; padding-bottom: 1.75rem; }
    body.orangi-public .h-about-section .overlay-text h2 { font-size: 1.15rem !important; padding: 0 12px; }
}

/* ============================================================
   PUBLIC-WEB-2 — header, mobile menu, footer
   ============================================================ */

/* language switch */
body.orangi-public .op-lang-btn {
    display: inline-flex; align-items: center; gap: 6px;
    color: #fff; text-decoration: none; font-weight: 600;
    padding: 8px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, .12);
}
body.orangi-public .op-lang-btn:hover { background: rgba(255, 255, 255, .22); color: #fff; }
body.orangi-public .op-lang .dropdown-menu { min-width: 140px; }
body.orangi-public .op-lang-mobile .nav-link { display: flex; align-items: center; gap: 8px; }

/* mobile collapse menu: clean readable panel, 44px rows */
@media (max-width: 1199px) {
    body.orangi-public .main-header .navbar-collapse {
        background: var(--op-surface);
        border-radius: var(--op-radius);
        box-shadow: var(--op-shadow);
        margin-top: 8px;
        padding: 8px;
    }
    body.orangi-public .main-header .navbar-collapse .nav-link {
        display: flex; align-items: center;
        min-height: 44px;
        color: var(--op-ink-2) !important;
        border-radius: var(--op-radius-sm);
        padding-inline: 12px;
        font-weight: 600;
    }
    body.orangi-public .main-header .navbar-collapse .nav-link.active,
    body.orangi-public .main-header .navbar-collapse .nav-link:hover {
        background: var(--op-accent-soft);
        color: var(--op-accent) !important;
    }
    body.orangi-public .main-header .header-actions { display: none !important; }
}

/* footer polish: consistent rhythm, readable links, tap targets */
body.orangi-public .modern-footer { background: var(--op-primary); }
body.orangi-public .modern-footer .footer-heading { color: #fff; font-weight: 700; font-size: 1rem; margin-bottom: 14px; }
body.orangi-public .modern-footer .footer-links { list-style: none; padding: 0; margin: 0; }
body.orangi-public .modern-footer .footer-links a {
    display: inline-flex; align-items: center; min-height: 36px;
    color: rgba(255, 255, 255, .75); text-decoration: none;
}
body.orangi-public .modern-footer .footer-links a:hover { color: #fff; }
body.orangi-public .modern-footer .social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255, 255, 255, .12); color: #fff; margin-inline-end: 8px;
}
body.orangi-public .modern-footer .social-link:hover { background: var(--op-accent); color: #fff; }
body.orangi-public .modern-footer .footer-logo { max-height: 52px; width: auto; }
@media (max-width: 767px) {
    body.orangi-public .modern-footer { text-align: center; }
    body.orangi-public .modern-footer .footer-form { max-width: 420px; margin: 0 auto; }
    body.orangi-public .modern-footer .contact-info li { justify-content: center; }
    body.orangi-public .modern-footer .social-links { display: flex; justify-content: center; }
}

/* ============================================================
   PUBLIC-WEB-3 — homepage
   ============================================================ */

/* hero slider: bounded height, no multi-screen hero on mobile */
body.orangi-public .h-main-slider .item img,
body.orangi-public .h-main-slider .main-img {
    width: 100%; object-fit: cover;
    max-height: 72vh;
}
@media (max-width: 767px) {
    body.orangi-public .h-main-slider .item img,
    body.orangi-public .h-main-slider .main-img { max-height: 46vh; }
}

/* about band: keep the overlay readable and compact */
body.orangi-public .h-about-section .overlay-text { padding: 12px; }
body.orangi-public .h-about-section .overlay-text .new-image { max-height: 56px; width: auto; }

/* services: compact card rhythm, consistent height */
body.orangi-public .services-section .service-card .card-body { padding: 20px !important; }
body.orangi-public .services-section .service-icon-wrapper img { width: 40px; height: 40px; }
@media (max-width: 767px) {
    body.orangi-public .services-section .our-services-row > [class*='col'] { padding: 8px 12px; }
}

/* subscriptions band: readable on the purple background, compact on mobile */
body.orangi-public .subscription-section h2,
body.orangi-public .subscription-section .lead { color: #fff; }
body.orangi-public .subscription-section .card { overflow: hidden; }
@media (max-width: 767px) {
    body.orangi-public .subscription-section .card img { max-height: 140px; object-fit: contain; }
}

/* media cards: fixed aspect so images can't stretch a full screen */
body.orangi-public .media-section img.w-100 { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--op-radius); }

/* ============================================================
   PUBLIC-WEB-4 — subscription / package / course cards
   (CSS-only: Livewire purchase markup and contracts untouched)
   ============================================================ */

/* product card grid density: package cards read 1-up mobile, 2-up tablet, 3-up desktop
   (columns come from the existing bootstrap cols; this fixes the card internals) */
body.orangi-public .package-card {
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius);
    background: var(--op-surface);
    box-shadow: var(--op-shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.orangi-public .package-card:hover { transform: translateY(-3px); }
body.orangi-public .package-card.selected { border-color: var(--op-primary); box-shadow: 0 0 0 3px rgba(74, 37, 97, .18); }

body.orangi-public .subscription-card .card-header.bg-gradient {
    background: linear-gradient(135deg, var(--op-primary) 0%, #6c3c8c 100%) !important;
}
body.orangi-public .hover-lift { transition: transform .18s ease, box-shadow .18s ease; }
body.orangi-public .hover-lift:hover { transform: translateY(-3px); }

/* consistent internal rhythm + no giant blank cards on phones */
@media (max-width: 767px) {
    body.orangi-public .package-card .card-body,
    body.orangi-public .subscription-card .card-body { padding: 16px !important; }
    body.orangi-public .card-title { font-size: 1.05rem; }
}

/* subscriptions tab pills: readable inactive state + 44px targets */
body.orangi-public .nav-pills .nav-link {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    font-weight: 600;
    color: var(--op-ink-2);
    border: 1px solid var(--op-border);
    background: var(--op-surface);
}
body.orangi-public .nav-pills .nav-link.active {
    background: var(--op-primary);
    border-color: var(--op-primary);
    color: #fff;
}
@media (max-width: 575px) {
    body.orangi-public .nav-pills.nav-fill { flex-wrap: wrap; }
    body.orangi-public .nav-pills .nav-link { font-size: .85rem; }
}

/* filter panel */
body.orangi-public .subsc-details-filter-sec .filter-title { font-size: 1rem; font-weight: 700; }
body.orangi-public .level-item {
    display: inline-flex; align-items: center;
    min-height: 40px; padding: 4px 14px;
    border-radius: 999px; border: 1px solid var(--op-border);
    cursor: pointer; background: var(--op-surface);
}
body.orangi-public .level-item.active {
    background: var(--op-accent-soft); border-color: var(--op-accent); color: var(--op-accent);
}

/* price emphasis inside any product card */
body.orangi-public .package-card .price,
body.orangi-public .subscription-card .price { color: var(--op-primary); font-weight: 700; }

/* ============================================================
   PUBLIC-WEB-5 — auth entry (login / register / choose-type modals)
   Form actions, fields and validation contracts untouched.
   ============================================================ */
body.orangi-public .modal-content { border: 0; border-radius: var(--op-radius); overflow: hidden; }
body.orangi-public .modal .modal-header.bg-gradient-primary,
body.orangi-public .modal .bg-gradient-primary {
    background: linear-gradient(135deg, var(--op-primary) 0%, #6c3c8c 100%) !important;
}
body.orangi-public .modal .form-control { margin-bottom: 2px; }
body.orangi-public .modal .invalid-feedback { font-size: .8rem; }
body.orangi-public .modal .btn-block { min-height: 46px; }
/* register-type chooser: card targets with clear affordance */
body.orangi-public #chooseRegisterTypeModal .card,
body.orangi-public #chooseRegisterTypeModal a.text-decoration-none > div {
    transition: transform .15s ease, box-shadow .15s ease;
}
body.orangi-public #chooseRegisterTypeModal .card:hover { transform: translateY(-2px); }
/* full-width comfortable modals on phones */
@media (max-width: 575px) {
    body.orangi-public .modal-dialog { margin: 8px; }
    body.orangi-public .modal-body { padding: 16px !important; }
}

/* ============================================================
   PUBLIC-WEB-6 — remaining content pages (media / blog / article /
   CMS pages / quizzes / recorded lessons / teachers / cart / checkout)
   ============================================================ */

/* readable long-form content (CMS pages, articles, legal) */
body.orangi-public .body-content .page-content,
body.orangi-public .body-content article {
    max-width: 860px; margin-inline: auto;
    line-height: 1.8; font-size: 1rem;
}
body.orangi-public .body-content .page-content img { border-radius: var(--op-radius); }

/* generic list/grid pages: consistent section headers */
body.orangi-public .sec-header-1 h2 { font-weight: 700; }

/* tables (cart/checkout summaries) never break the viewport */
body.orangi-public .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.orangi-public .body-content table { max-width: 100%; }

/* generic empty state */
body.orangi-public .op-empty,
body.orangi-public .empty-page {
    text-align: center; padding: 48px 16px; color: var(--op-muted);
}
body.orangi-public .op-empty i { font-size: 2rem; margin-bottom: 10px; color: var(--op-faint, #94a3b8); }

/* video/media embeds keep ratio */
body.orangi-public .body-content iframe,
body.orangi-public .body-content video { max-width: 100%; border-radius: var(--op-radius); }

/* checkout/cart: comfortable summary cards on phones */
@media (max-width: 767px) {
    body.orangi-public .body-content .cart-item,
    body.orangi-public .body-content .checkout-summary { padding: 12px; }
}

/* PUBLIC-WEB-7 QA fix: hero/about overlay text must stay readable over photos */
body.orangi-public .h-about-section .overlay-text h2,
body.orangi-public .h-about-section .overlay-text .responsive-heading {
    color: #fff !important;
    text-shadow: 0 2px 14px rgba(15, 23, 42, .75);
}