/*
Theme Name: Shaaban Academy
Theme URI: https://shaabanacademy.com
Description: Custom theme for Shaaban Academy - Life Coaching
Author: Shaaban Ahmed
Version: 1.1
Text Domain: shaaban-academy
*/

/* ===== GOOGLE FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');

/* ===== VARIABLES ===== */
:root {
  --rose: #e8726a;
  --rose2: #f4a09a;
  --gold: #c9a06e;
  --gold2: #e8c48a;
  --bg: #07050a;
  --bg2: #0d0a12;
  --bg3: #131018;
  --text: #f5f0fa;
  --muted: #8a7a9a;
  --border: rgba(255,255,255,0.06);
  --border-rose: rgba(232,114,106,0.2);
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ===== BASE ===== */
body {
  font-family: 'Tajawal', sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  direction: rtl !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.7 !important;
}

/* ===== NOISE TEXTURE ===== */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: overlay;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Tajawal', sans-serif !important;
  color: var(--text) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

p { font-family: 'Tajawal', sans-serif !important; color: var(--muted) !important; }
a { font-family: 'Tajawal', sans-serif !important; color: var(--rose2) !important; text-decoration: none !important; transition: color 0.2s !important; }
a:hover { color: var(--rose) !important; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 4px !important; }
::-webkit-scrollbar-track { background: var(--bg) !important; }
::-webkit-scrollbar-thumb { background: var(--rose) !important; border-radius: 2px !important; }
::selection { background: rgba(232,114,106,0.3) !important; color: white !important; }

/* ===== HEADER ===== */
header, .site-header, #masthead {
  background: rgba(7,5,10,0.95) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(20px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  padding: 16px 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.site-title, .site-title a {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  color: var(--gold2) !important;
  text-decoration: none !important;
}

.site-description { color: var(--muted) !important; font-size: 13px !important; }

/* NAV MENU */
.nav-menu, .wp-block-navigation, nav ul {
  display: flex !important;
  gap: 32px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
}

.nav-menu li a, .wp-block-navigation a, nav ul li a {
  font-size: 14px !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  transition: color 0.2s !important;
  padding: 4px 0 !important;
}

.nav-menu li a:hover, .wp-block-navigation a:hover { color: var(--text) !important; }
.nav-menu li.current-menu-item a { color: var(--rose2) !important; }

/* ===== MAIN CONTENT ===== */
.site-content, #content, main, .wp-site-blocks {
  background: var(--bg) !important;
  min-height: 80vh !important;
}

.entry-content { color: var(--text) !important; }

/* ===== FOOTER ===== */
footer, .site-footer, #colophon {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  padding: 24px 60px !important;
  color: rgba(255,255,255,0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

footer p, .site-footer p { color: rgba(255,255,255,0.15) !important; font-size: 13px !important; }
footer a, .site-footer a { color: rgba(255,255,255,0.25) !important; }
footer a:hover, .site-footer a:hover { color: var(--rose2) !important; }

/* ===== BUTTONS ===== */
.wp-block-button__link, button, input[type="submit"], input[type="button"], .button, .btn {
  font-family: 'Tajawal', sans-serif !important;
  background: var(--rose) !important;
  color: white !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 28px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
  box-shadow: 0 4px 20px rgba(232,114,106,0.25) !important;
}

.wp-block-button__link:hover, button:hover, input[type="submit"]:hover {
  background: #d4635b !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(232,114,106,0.35) !important;
}

/* ===== INPUTS ===== */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], input[type="tel"],
textarea, select {
  font-family: 'Tajawal', sans-serif !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  padding: 14px 16px !important;
  width: 100% !important;
  outline: none !important;
  transition: all 0.3s !important;
  direction: rtl !important;
}

input:focus, textarea:focus, select:focus {
  border-color: rgba(232,114,106,0.4) !important;
  background: rgba(232,114,106,0.04) !important;
  box-shadow: 0 0 0 3px rgba(232,114,106,0.08) !important;
}

input::placeholder, textarea::placeholder { color: var(--muted) !important; opacity: 0.5 !important; }

label {
  font-family: 'Tajawal', sans-serif !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: block !important;
  margin-bottom: 8px !important;
}

/* ===== WOOCOMMERCE GLOBAL ===== */
.woocommerce, .woocommerce-page {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Tajawal', sans-serif !important;
}

/* ===== SHOP PAGE — FIX PRODUCTS ===== */
.woocommerce-page .site-main,
.woocommerce .site-main {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 60px 40px !important;
}

/* Hide sidebar only — NOT products */
.woocommerce-page .widget-area { display: none !important; }
#secondary { display: none !important; }

/* Hide widgets but NOT shop content */
.widget_pages, .widget_archive, .widget_categories, .widget_search {
  display: none !important;
}

/* Products grid — explicit show */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  float: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce ul.products li.product {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: border-color 0.3s, transform 0.3s !important;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--border-rose) !important;
  transform: translateY(-4px) !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--text) !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 800 !important;
}

.woocommerce ul.products li.product .price {
  color: var(--rose) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

.woocommerce h1.page-title {
  font-size: 36px !important;
  font-weight: 900 !important;
  color: var(--text) !important;
  text-align: center !important;
  margin-bottom: 40px !important;
}

.woocommerce-ordering select {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  padding: 8px 14px !important;
  width: auto !important;
}

/* ===== FORMS ===== */
.woocommerce-form-login, .woocommerce-form-register {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 40px !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.woocommerce-form-login::before, .woocommerce-form-register::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--rose), var(--gold2), transparent) !important;
}

/* ===== MY ACCOUNT ===== */
body.woocommerce-account { background: var(--bg) !important; color: var(--text) !important; }

.woocommerce-MyAccount-navigation {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 16px !important;
}

.woocommerce-MyAccount-navigation ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }

.woocommerce-MyAccount-navigation li a {
  color: var(--muted) !important;
  font-size: 14px !important;
  display: block !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  transition: all 0.2s !important;
  font-weight: 600 !important;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
  background: rgba(232,114,106,0.08) !important;
  color: var(--rose2) !important;
}

.woocommerce-MyAccount-content {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  color: var(--text) !important;
}

/* ===== CART PAGE ===== */
body.woocommerce-cart .woocommerce {
  max-width: 1100px !important;
  margin: 60px auto !important;
  padding: 0 40px !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 32px !important;
  align-items: flex-start !important;
}

.woocommerce-cart-form {
  flex: 1 !important;
  min-width: 0 !important;
  float: none !important;
  width: auto !important;
  order: 1 !important;
}

body.woocommerce-cart .cart-collaterals {
  width: 360px !important;
  flex-shrink: 0 !important;
  float: none !important;
  margin-top: 0 !important;
  order: 2 !important;
  position: sticky !important;
  top: 80px !important;
}

.woocommerce-cart-form table.shop_table {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

.woocommerce-cart-form table.shop_table th {
  background: rgba(255,255,255,0.04) !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--border) !important;
}

.woocommerce-cart-form table.shop_table td {
  padding: 20px !important;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: middle !important;
  color: var(--text) !important;
}

.woocommerce-cart-form .product-thumbnail img {
  width: 72px !important; height: 72px !important;
  object-fit: cover !important; border-radius: 10px !important;
}

.woocommerce-cart-form td.product-name a { color: var(--text) !important; font-weight: 700 !important; }
.woocommerce-cart-form td.product-price,
.woocommerce-cart-form td.product-subtotal { color: var(--rose) !important; font-weight: 800 !important; }

.woocommerce-cart-form .quantity input.qty {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important; color: var(--text) !important;
  padding: 8px 12px !important; width: 65px !important; text-align: center !important;
}

.woocommerce-cart-form a.remove {
  color: var(--muted) !important; font-size: 20px !important;
  width: 28px !important; height: 28px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 50% !important; transition: all 0.2s !important; background: transparent !important;
}

.woocommerce-cart-form a.remove:hover { color: white !important; background: rgba(232,114,106,0.2) !important; }
.woocommerce-cart-form .actions [name="update_cart"] { display: none !important; }

.woocommerce-cart .coupon { display: flex !important; gap: 8px !important; }
.woocommerce-cart .coupon input { border-radius: 10px !important; flex: 1 !important; }
.woocommerce-cart .coupon .button {
  background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important; color: var(--text) !important;
  padding: 10px 16px !important; width: auto !important; box-shadow: none !important;
}

.cart_totals {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important; padding: 28px !important;
  position: relative !important; overflow: hidden !important;
}

.cart_totals::before {
  content: '' !important; position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important;
  background: linear-gradient(90deg, var(--rose), var(--gold2), transparent) !important;
}

.cart_totals h2 { font-size: 20px !important; font-weight: 800 !important; color: var(--text) !important; margin-bottom: 20px !important; }
.cart_totals table { background: transparent !important; border: none !important; width: 100% !important; }
.cart_totals table th, .cart_totals table td {
  color: var(--text) !important; border-bottom: 1px solid var(--border) !important;
  padding: 14px 0 !important; font-size: 14px !important;
}
.cart_totals .order-total td, .cart_totals .order-total th { border-bottom: none !important; }
.cart_totals .order-total .amount { color: var(--rose) !important; font-size: 26px !important; font-weight: 900 !important; }

.wc-proceed-to-checkout .checkout-button {
  background: var(--rose) !important; border-radius: 12px !important;
  font-weight: 800 !important; font-size: 16px !important; padding: 16px !important;
  width: 100% !important; text-align: center !important; display: block !important;
  color: white !important; margin-top: 16px !important; transition: all 0.3s !important;
}

.wc-proceed-to-checkout .checkout-button:hover { background: #d4635b !important; transform: translateY(-2px) !important; }

/* ===== CHECKOUT ===== */
body.woocommerce-checkout { background: var(--bg) !important; color: var(--text) !important; }
.woocommerce-checkout input, .woocommerce-checkout select, .woocommerce-checkout textarea {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important; color: var(--text) !important;
}
.woocommerce-checkout label { color: var(--muted) !important; }

/* ===== WOO NOTICES ===== */
.woocommerce-message { background: rgba(74,222,128,0.06) !important; border: 1px solid rgba(74,222,128,0.2) !important; border-radius: 10px !important; color: #4ade80 !important; padding: 14px 20px !important; }
.woocommerce-error { background: rgba(239,68,68,0.06) !important; border: 1px solid rgba(239,68,68,0.2) !important; border-radius: 10px !important; color: #fca5a5 !important; list-style: none !important; padding: 14px 20px !important; }

/* ===== ORDER RECEIVED ===== */
body.woocommerce-order-received { background: var(--bg) !important; color: var(--text) !important; }
.woocommerce-order-received h2, .woocommerce-order-received p { color: var(--text) !important; }

/* ===== TUTOR LMS ===== */
.tutor-dashboard, .tutor-course, .tutor-wrap {
  background: var(--bg) !important; color: var(--text) !important;
}
.tutor-dashboard-nav li a { color: var(--muted) !important; border-radius: 8px !important; }
.tutor-dashboard-nav li.active a, .tutor-dashboard-nav li a:hover {
  background: rgba(232,114,106,0.08) !important; color: var(--rose2) !important;
}
.tutor-course-progress-bar .tutor-progress-bar { background: var(--rose) !important; border-radius: 100px !important; }

/* ===== HAMBURGER MENU — DESKTOP ===== */
.shaaban-menu-toggle { display: none !important; }

/* ===== MOBILE ===== */
@media (max-width: 768px) {

  html, body { width: 100% !important; overflow-x: hidden !important; }

  header, .site-header, #masthead {
    padding: 12px 16px !important;
    position: sticky !important;
    top: 0 !important; z-index: 9999 !important;
  }

  /* Show hamburger */
  .shaaban-menu-toggle {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    background: rgba(232,114,106,0.12) !important;
    border: 1px solid rgba(232,114,106,0.3) !important;
    border-radius: 10px !important;
    width: 42px !important; height: 42px !important;
    padding: 10px !important;
    align-items: center !important; justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .shaaban-menu-toggle span {
    display: block !important;
    width: 20px !important; height: 2px !important;
    background: var(--rose2) !important;
    border-radius: 99px !important;
    transition: all 0.3s !important;
  }

  .shaaban-menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  .shaaban-menu-toggle.is-open span:nth-child(2) { opacity: 0 !important; }
  .shaaban-menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

  /* Hide desktop nav */
  .nav-menu, .wp-block-navigation, nav ul, .shaaban-mobile-nav {
    display: none !important;
  }

  /* Mobile dropdown menu */
  .shaaban-mobile-nav.is-open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 64px !important; right: 0 !important; left: 0 !important;
    background: rgba(13,10,18,0.98) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 20px !important;
    gap: 10px !important;
    backdrop-filter: blur(20px) !important;
    z-index: 9998 !important;
  }

  .shaaban-mobile-nav.is-open a {
    display: block !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.03) !important;
    color: var(--text) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border: 1px solid var(--border) !important;
  }

  .shaaban-mobile-nav.is-open a:hover {
    background: rgba(232,114,106,0.08) !important;
    color: var(--rose2) !important;
    border-color: var(--border-rose) !important;
  }

  /* Content */
  main, .site-main, .site-content, .entry-content,
  .woocommerce-page .site-main, .woocommerce .site-main {
    width: 100% !important; max-width: 100% !important;
    padding: 32px 18px !important; margin: 0 auto !important;
  }

  /* Products mobile */
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Cart mobile */
  body.woocommerce-cart .woocommerce {
    flex-direction: column !important;
    padding: 0 18px !important;
  }

  body.woocommerce-cart .cart-collaterals {
    width: 100% !important; position: static !important;
  }
	

  /* Buttons mobile */
  .btn-primary, .checkout-button { width: 100% !important; text-align: center !important; }

  /* Floating icons mobile */
  #shaaban-cart {
    bottom: 18px !important; left: 18px !important;
    top: auto !important; z-index: 99999 !important;
  }

  #shaaban-login {
    bottom: 18px !important; right: 18px !important;
    top: auto !important; left: auto !important; z-index: 99999 !important;
  }
	
	

  /* Footer mobile */
  footer, .site-footer, #colophon {
    flex-direction: column !important;
    text-align: center !important;
    padding: 24px 18px !important;
  }
}

}