/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Author: Qimah
Version: 1.0.1
Description: Child theme for Hello Elementor with custom Qimah styling.
*/

/* =========================================================
   Base fixes and overrides
========================================================= */
html[dir="rtl"], body[dir="rtl"] {
  direction: rtl;
  text-align: right;
  font-family: "Tajawal", sans-serif;
}

body {
  overflow-x: hidden;
  background-color: #ffffff; /* White for regular pages */
}

/* Dark background ONLY for 404 */
body.error404 {
  background-color: #24644e54;
}

/* =========================================================
   Qimah 404 Page Styling
========================================================= */
body.error404 #qimah-404 .q404-hero {
  /* Pure starry background - no overlay */
  background-image: url("https://qimah.net/wp-content/uploads/2025/09/ChatGPT-Image-Sep-10-2025-01_23_12-AM-min.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #EAF7F2;
  margin: 0;
  padding: 0;
  position: relative;
}

body.error404 #qimah-404 .q404-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 2rem;
  margin: 0 auto;
}

body.error404 #qimah-404 .q404-title {
  font-family: "Tajawal", sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 4.5rem);
  color: #EAF7F2;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
  margin-bottom: 1.2rem;
}

body.error404 #qimah-404 .q404-sub {
  font-family: "Tajawal", sans-serif;
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: #E2F1EA;
  opacity: 0.95;
  line-height: 1.6;
  margin-bottom: 2rem;
}

body.error404 #qimah-404 .q404-btn {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  border-radius: 50px;
  background-color: #1E6649;
  color: #EAF7F2;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}

body.error404 #qimah-404 .q404-btn:hover {
  background-color: #17503a;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

/* Remove default Hello Elementor padding on error page */
body.error404 main.site-main,
body.error404 .elementor-location-content {
  padding: 0 !important;
  margin: 0 !important;
}

/* 404 responsive */
@media (max-width: 767px) {
  body.error404 #qimah-404 .q404-hero {
    min-height: 75vh;
    background-attachment: scroll;
  }
  body.error404 #qimah-404 .q404-title {
    font-size: 2.2rem;
  }
  body.error404 #qimah-404 .q404-sub {
    font-size: 1rem;
  }
  body.error404 #qimah-404 .q404-btn {
    padding: 0.8rem 1.4rem;
  }
}

/* 404 fade-in animation */
body.error404 #qimah-404 .q404-inner {
  opacity: 0;
  transform: translateY(20px);
  animation: qimahFadeIn 1s ease-out forwards;
}

@keyframes qimahFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   Qimah Design System — Global
========================================================= */
html[data-theme="dark"]{
  color-scheme: dark;
  --q-primary: #1E6649;
  --q-primary-2: #4F8A87;
  --q-green: #1E6649;
  --q-green-hover:#16533B;
  --q-text:#EAF3F0;
  --q-muted:#9CB6AF;
  --glass-tint: rgba(8,14,12,.35);
  --glass-stroke: rgba(255,255,255,.08);
  --glass-shadow: none;
}

:root{
  --q-primary:#1E6649;
  --q-primary-2:#4F8A87;
  --q-green:#1E6649;
  --q-green-hover:#16533B;
  --q-green-20:rgba(30,102,73,.2);
  --q-text:#1F302C;
  --q-muted:#5A6F6A;
  --q-success:#0a875a;
  --q-info:#2563eb;
  --q-danger:#dc2626;
  --q-rad:12px;
  --glass-tint:rgba(255,255,255,.1);
  --glass-blur:14px;
  --glass-stroke:rgba(255,255,255,.22);
  --glass-shadow:0 24px 48px rgba(0,0,0,.18);
}

@media (max-width:480px){
  :root{ --glass-blur:10px; }
}

/* =========================================================
   Glass Surface
========================================================= */
.glass-surface{
  position:relative; isolation:isolate; border-radius:28px; background:transparent !important;
  overflow:hidden; border:1px solid var(--glass-stroke);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.35);
  padding:36px 40px; max-width:1200px; margin-inline:auto;
}

.glass-surface::before{
  content:""; position:absolute; inset:0; border-radius:inherit; background:var(--glass-tint);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(120%);
  backdrop-filter:blur(var(--glass-blur)) saturate(120%); pointer-events:none; z-index:0;
}

.glass-surface.rim-glow::before{
  background:
    radial-gradient(160% 160% at 40% 0%, rgba(255,255,255,.28) 0%, transparent 62%),
    radial-gradient(100% 120% at 60% 100%, rgba(255,255,255,.12) 0%, transparent 70%),
    var(--glass-tint);
}

.glass-surface > *{ position:relative; z-index:1; }

/* =========================================================
   Header System
========================================================= */
.elementor-sticky,
.elementor-sticky--active,
.elementor-sticky--effects{ transform:none !important; }

.header-sticky{ position:relative; overflow:visible !important; z-index:100; }

.header-glass{
  position:relative; border-radius:28px; overflow:visible !important;
  background:transparent !important; isolation:isolate;
}

.header-glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:rgba(30,102,73,.5); -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(6px); pointer-events:none; z-index:0;
}

.header-glass > *,
.header-row{ position:relative; z-index:1; }

.header-row{ overflow:visible !important; z-index:200; }
.header-row *{ overflow:visible !important; }

/* Search + Cart */
.elementskit-header-search .ekit-search-icon,
.elementskit-header-search .elementskit-search-icon{
  display:inline-flex !important; opacity:1 !important; visibility:visible !important;
}

.ekit-search-fullscreen{ z-index:2147483646 !important; }

.elementor-menu-cart__overlay{ z-index:2147483646 !important; background:rgba(0,0,0,.35) !important; }

.elementor-menu-cart__main{
  position:fixed !important; top:0 !important; bottom:0 !important; height:100vh !important;
  width:380px !important; margin:0 !important; border-radius:0 !important;
  background:#fff !important; box-shadow:0 0 40px rgba(0,0,0,.25);
  z-index:2147483647 !important; opacity:0; visibility:hidden;
  transition:transform .28s ease, opacity .2s ease, visibility 0s linear .28s;
}

html[dir="rtl"] .elementor-menu-cart__main{ left:0 !important; right:auto !important; transform:translateX(-105%) !important; }
html[dir="ltr"] .elementor-menu-cart__main{ right:0 !important; left:auto !important; transform:translateX(105%) !important; }

.elementor-menu-cart__main[aria-hidden="false"],
.elementor-menu-cart--shown .elementor-menu-cart__main{
  transform:translateX(0) !important; opacity:1 !important; visibility:visible !important;
}

.elementor-menu-cart__main .widget_shopping_cart_content{ max-height:100vh; overflow:auto; }

/* =========================================================
   Hero
========================================================= */
.hero-cover img{
  display:block; width:100%; height:380px; object-fit:cover;
  border-radius:18px; box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.hero-title{ color:#163D31; margin:0 0 8px; font-weight:800; font-size:clamp(22px, 2.2vw, 28px); }
.hero-desc{ color:#2F5D50; line-height:1.5; margin:0 0 12px; max-width:52ch; }

.hero-progress .ld-progress{ height:10px; background:var(--q-green-20); border-radius:999px !important; margin:6px 0 12px; }
.hero-progress .ld-progress-bar{ background:var(--q-green); border-radius:999px !important; }
.hero-progress .ld-progress-stats,
.hero-progress .ld-progress-steps{ display:none !important; }

/* Resume button */
.hero-resume{ text-align:center; }

.hero-resume .ld-button,
.hero-resume a{
  display:inline-block; min-width:240px; padding:14px 22px; border-radius:999px;
  background:var(--q-green); color:#fff !important; font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  transition:background-color .2s ease, transform .15s ease, box-shadow .15s ease;
}

.hero-resume .ld-button:hover,
.hero-resume a:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.18); }

.hero-resume .ld-button:active,
.hero-resume a:active{ transform:translateY(0); box-shadow:0 4px 12px rgba(0,0,0,.12); }

/* =========================================================
   LearnDash layout helpers
========================================================= */
.learndash-wrapper{ display:block; width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }

.learndash-wrapper .ld-course-content{ display:flex; gap:30px; align-items:flex-start; position:relative; }
.learndash-wrapper .ld-content-area{ flex:1 1 0; min-width:0; max-width:none; }

.learndash-wrapper .ld-course-navigation{
  flex:0 0 300px; width:300px; position:sticky; top:20px;
  max-height:calc(100vh - 40px); overflow-y:auto; z-index:10; padding-bottom:20px;
}

.learndash-wrapper .ld-course-navigation.ld-course-nav-collapsed{ flex:0 0 50px; width:50px; }
.learndash-wrapper .ld-course-navigation.ld-course-nav-collapsed ~ .ld-content-area{ max-width:none; }

.learndash-wrapper .ld-content-actions{
  display:flex; justify-content:space-between; align-items:center; margin-top:30px;
  padding:20px 0; gap:15px; background:transparent; position:relative; z-index:1;
}

.learndash-wrapper .ld-content-actions > *{ flex:0 0 auto; margin:0; white-space:nowrap; }
.learndash-wrapper .ld-progress{ margin:20px 0; }

/* Videos responsive */
.learndash-wrapper .entry-content iframe,
.learndash-wrapper iframe[src*="bunny"],
.learndash-wrapper iframe[src*="bunnycdn"],
.learndash-wrapper .wp-video,
.learndash-wrapper .wp-block-video,
.learndash-wrapper video{ width:100%; max-width:100%; aspect-ratio:16/9; height:auto; display:block; }

/* =========================================================
   Topic/Lesson tweaks
========================================================= */
.learndash-wrapper .ld-topic-status .ld-breadcrumbs{ display:none !important; }

div:has(> iframe[src*="mediadelivery.net"]){ padding-top:0% !important; }

body.single-sfwd-topic #ld-focus-content iframe[src*="iframe.mediadelivery.net"]{
  position:static !important; display:block !important; width:100% !important;
  height:auto !important; aspect-ratio:16/9 !important; max-width:100% !important; margin:0 auto !important;
}

.single-sfwd-topic .site-main,
.single-sfwd-topic .content-area,
.single-sfwd-topic .site-content{ max-width:1280px; margin:0 auto; padding:0 20px; }

.single-sfwd-topic .ld-course-status,
.single-sfwd-topic .ld-status,
.single-sfwd-topic .ld-progress{ display:none; }

.single-sfwd-topic .ld-content-actions .ld-button{
  padding:14px 22px; font-size:16px; transition:all .2s ease-in-out;
}

.single-sfwd-topic .ld-content-actions .ld-button:hover{ background:#222; color:#fff; }

/* =========================================================
   Focus Mode
========================================================= */
.ld-focus .ld-focus-sidebar{
  box-shadow:none !important; position:fixed !important; top:0 !important; left:0 !important;
  height:100vh !important; width:320px !important; max-width:85vw !important;
  background:#fff !important; transform:translateX(-100%) !important;
  transition:transform .25s ease !important; z-index:10020 !important;
}

.ld-focus:not(.ld-focus-sidebar-collapsed) .ld-focus-sidebar{ transform:translateX(0) !important; }

body:has(.ld-focus:not(.ld-focus-sidebar-collapsed))::before{
  content:""; position:fixed; inset:0; background:rgba(0,0,0,.32);
  z-index:10010; pointer-events:none;
}

.ld-focus .ld-button-toggle{ position:fixed; left:12px; top:12px; z-index:10030 !important; }

.ld-focus .ld-focus-main{
  width:100% !important; max-width:1200px !important; margin:0 auto !important; padding:0 16px !important;
}

.ld-focus .entry-content iframe[src*="iframe.mediadelivery.net"]{
  display:block !important; width:100% !important; height:auto !important; aspect-ratio:16/9 !important;
}

@supports not(selector(:has(*))){ body::before{ content:none !important; } }

/* =========================================================
   Contact Buttons (iPad)
========================================================= */
@media screen and (min-width:768px) and (max-width:1366px){
  body.single-sfwd-topic .elementor-widget-contact-buttons .e-contact-buttons__chat-button-container,
  body.single-sfwd-lessons .elementor-widget-contact-buttons .e-contact-buttons__chat-button-container,
  body.learndash-focus-mode .elementor-widget-contact-buttons .e-contact-buttons__chat-button-container{
    position:fixed !important; bottom:140px !important; right:16px !important;
  }
  body.single-sfwd-topic .elementor-widget-contact-buttons .e-contact-buttons.has-v-alignment-bottom,
  body.single-sfwd-lessons .elementor-widget-contact-buttons .e-contact-buttons.has-v-alignment-bottom,
  body.learndash-focus-mode .elementor-widget-contact-buttons .e-contact-buttons.has-v-alignment-bottom{
    bottom:140px !important; right:16px !important;
  }
}

/* =========================================================
   Responsive layout helpers
========================================================= */
@media(max-width:1024px){
  .glass-surface{ padding:24px; }
  .hero-cover img{ height:300px; }
  body.single-sfwd-courses #id-hero .glass-surface.rim-glow{
    grid-template-columns:1fr; gap:20px; padding:20px;
  }
  .learndash-wrapper{ max-width:100%; }
  .learndash-wrapper .ld-course-navigation{ flex:0 0 250px; width:250px; }
}

@media(max-width:768px){
  .learndash-wrapper{ padding:0 15px; }
  .learndash-wrapper .ld-course-content{ flex-direction:column; gap:20px; }
  .learndash-wrapper .ld-content-area,
  .learndash-wrapper .ld-course-navigation{
    max-width:100%; width:100%; flex:1 1 100%; position:relative; top:auto; max-height:none;
  }
  .learndash-wrapper .ld-course-navigation{ order:2; }
  .learndash-wrapper .ld-content-area{ order:1; }
  .learndash-wrapper .ld-content-actions{ flex-direction:column; gap:10px; }
  .learndash-wrapper .ld-content-actions > *{ width:100%; text-align:center; }
  .elementor .glass-surface{ flex-direction:column; gap:20px; }
  .hero-cover img{ height:220px; }
  .hero-resume .ld-button,
  .hero-resume a{ width:100%; text-align:center; }
}

@media(max-width:480px){
  .learndash-wrapper{ padding:0 10px; }
  .learndash-wrapper .ld-course-content{ gap:15px; }
}

/* ========== Bunny player block ========== */
.qimah-bunny{ position:relative; width:100%; max-width:100%; }

.qimah-bunny .video-js,
.qimah-bunny video,
.qimah-bunny .vjs-tech{
  width:100% !important; height:auto !important; background-color:transparent !important;
  object-fit:cover; aspect-ratio:16 / 9;
}

@supports not (aspect-ratio: 16 / 9){
  .qimah-bunny{ height:0; padding-top:56.25%; }
  .qimah-bunny .video-js{ position:absolute; inset:0; }
}

@media (max-width:820px){
  .qimah-bunny .vjs-tech{ object-fit:contain; background-color:#0000; }
}

.qimah-bunny .vjs-fluid{ padding-top:0 !important; height:auto !important; }

/* ====================== Checkout polish ====================== */

/* Notices */
.woocommerce-notices-wrapper,
.woocommerce-NoticeGroup,
.woocommerce-NoticeGroup-checkout{ display:block!important; scroll-margin-top:120px; }

:is(ul.woocommerce-error,.woocommerce-info,.woocommerce-message){
  display:block!important; margin:0 0 14px; padding:12px 14px 12px 44px;
  border-left:4px solid; border-radius:var(--q-rad); position:relative; font-weight:500; background:#fff;
}

ul.woocommerce-error{ color:#7f1d1d; border-color:var(--q-danger); background:linear-gradient(135deg,#fff6f6,#fee2e2); }
.woocommerce-info{ color:#1e3a8a; border-color:var(--q-info); background:linear-gradient(135deg,#f5f9ff,#dbeafe); }
.woocommerce-message{ color:#14532d; border-color:var(--q-success); background:linear-gradient(135deg,#f0fdf4,#dcfce7); }

ul.woocommerce-error li{ margin:4px 0; list-style:none; }

ul.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before{
  position:absolute; left:14px; top:12px; font-size:18px;
}

ul.woocommerce-error::before{content:"⚠️"} 
.woocommerce-info::before{content:"ℹ️"} 
.woocommerce-message::before{content:"✅"}

/* Hide coupon blurb */
.e-coupon-box .e-description, [class*="coupon"][class*="description"]{ display:none !important; }

/* Coupon form */
.woocommerce-form-coupon, .checkout_coupon{ display:block !important; }

/* Coupon card */
.e-coupon-box, .coupon-container-grid{
  display:grid; grid-template-columns:1fr; gap:10px; margin:0 0 16px;
  background:linear-gradient(135deg,#ecfdf5,#e6f7f3);
  border:1px solid #b7e4d8; border-radius:16px; padding:14px;
}

#coupon_code{
  height:48px; border-radius:24px; border:2px solid #92d3c6; background:#fff; padding:0 16px; font-size:15px;
}

.e-coupon-box .e-apply-coupon, .coupon-container-grid .woocommerce-button{
  height:48px; border-radius:24px;
  background:linear-gradient(135deg,var(--q-primary) 0%, #047857 100%);
  color:#fff; border:0; font-weight:700; cursor:pointer; transition:.15s;
}

/* Inputs: strong borders + green focus */
.woocommerce form .form-row :is(input,input:where(:focus),select:focus,textarea:focus){
  border-color:var(--q-primary)!important;
  box-shadow:0 0 0 2px rgba(30,102,73,.18)!important; outline:0!important;
}

/* Checkout grid */
.woocommerce-checkout .col2-set{
  display:grid !important; grid-template-columns:1fr; gap:16px !important;
}

/* Order review table */
.woocommerce-checkout-review-order-table{
  width:100% !important; background:#fff !important; border:2px solid #E5E7EB !important;
  border-radius:12px !important; overflow:hidden !important; margin-bottom:30px !important;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{
  padding:14px 16px !important; border-bottom:1px solid #F3F4F6 !important; text-align:right !important;
}

.woocommerce-checkout-review-order-table thead th{
  background:#F9FAFB !important; font-weight:600 !important; color:#374151 !important;
}

.woocommerce-checkout-review-order-table .order-total{
  background:linear-gradient(135deg,#EDE9FE 0%,#DDD6FE 100%) !important;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td{
  font-size:20px !important; font-weight:700 !important; color:#7C3AED !important; padding:18px 16px !important; border:none !important;
}

/* Payment methods */
.wc_payment_methods li{
  list-style:none !important; margin:0 0 12px 0 !important; padding:0 !important;
  background:#fff !important; border:2px solid #E5E7EB !important; border-radius:20px !important; overflow:hidden !important; transition:all .2s ease !important;
}

.wc_payment_methods li:hover{ border-color:#C084FC !important; }
.wc_payment_methods li input[type="radio"]{ margin:16px !important; float:right !important; }
.wc_payment_methods li label{ padding:16px 50px 16px 16px !important; display:block !important; cursor:pointer !important; }
.wc_payment_methods li input[type="radio"]:checked ~ label{ background:#F3E8FF !important; color:#7C3AED !important; font-weight:600 !important; }
.payment_box{ background:#F9FAFB !important; }

/* Labels */
.woocommerce-checkout label{ font-weight:600 !important; color:#374151 !important; display:block !important; }

/* Guest login button */
.woocommerce-form-login .button,
.woocommerce-form-login input[type="submit"]{
  background:var(--q-green) !important; color:#fff !important; border:0 !important; border-radius:10px !important; font-weight:700 !important;
}

.woocommerce-form-login .button:disabled,
.woocommerce-form-login input[type="submit"]:disabled,
.woocommerce-form-login .button.disabled{
  background:var(--q-green) !important; color:#fff !important; opacity:.6 !important; cursor:not-allowed !important;
}

#id-hero{
  background-image: linear-gradient(180deg,#1E6649 50%,#FFFDF6 100%) !important;
  background-size: cover !important;
}

/* Qimah Next Step pill - glassy continue style */
.q-next-step{ margin:8px 0 2px; }

.q-next-link{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border:1.5px solid #dbe7e3;
  border-radius:999px; background:#ffffff; text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  font-weight:700; color:#0f3b2f;
}

.q-next-link:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.12); }

.q-next-icon{ display:inline-flex; width:22px; height:22px; border-radius:999px;
  background: #e8f5ef; color:#1E6649; align-items:center; justify-content:center; }

.q-next-k{ opacity:.75; font-weight:700; }
.q-next-title{ max-width:42ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.q-next-dot{ opacity:.5; }

.q-next-pct{
  background:#e8f5ef; padding:2px 8px; border-radius:999px;
  font-weight:700; font-size:12px; color:#1E6649;
}

/* Only inside the hero */
#id-hero .q-next-link{
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

#id-hero .q-next-title{ color:#fff; }
#id-hero .q-next-k{ color:#fff; opacity:.9; }
#id-hero .q-next-dot{ color:#fff; opacity:.6; }
#id-hero .q-next-icon{
  background: rgba(255,255,255,.2);
  color:#fff;
}

/* Apply RTL to that specific widget */
.rtl-blurb {
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: right;
}

/* Scope to Focus Mode content pane */
.ld-focus .ld-content .q-lesson-topics-wrap,
.learndash-focus .ld-content .q-lesson-topics-wrap {
  margin-top: 24px;
}

/* Title */
.q-lesson-topics-title {
  margin: 0 0 12px;
  font-weight: 700;
  color: #1E6649;
}

/* Empty state note */
.q-lesson-empty-note {
  margin-top: 12px;
  color: #868686;
  font-size: 14px;
}