/*
Theme Name: El Basha Cast Iron
Theme URI: https://albasha-castiron.com
Author: El Basha
Description: قالب خفيف بالعربي يعرض بنر ومنتجات (شبكة عمودين) مع زر واتساب للطلب.
Version: 1.0.0
Text Domain: el-basha
*/

/* reset بسيط وخط افتراضي */
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;direction:rtl}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
header.site-header{background:#111;color:#fff}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.site-brand{font-weight:800;font-size:20px}
.site-nav a{padding:8px 10px;display:inline-block}
footer.site-footer{background:#111;color:#fff;padding:24px 0;margin-top:40px}
footer .copyright{text-align:center;font-size:14px;opacity:.85}
.hero{padding:24px 0;background:#f7f7f7}
.hero .slider{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:12px}
.hero .slider .main{aspect-ratio:16/9;background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero .slider .thumb{aspect-ratio:1/1;background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero img{width:100%;height:100%;object-fit:contain}
/* زر واتساب ثابت */
.whatsapp-fab{position:fixed;bottom:20px;left:20px;background:#25D366;color:#fff;border-radius:50%;width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.2);z-index:999}
@media (max-width:768px){.hero .slider{grid-template-columns:1fr}}


/* Hero slider */
.hero-slider{position:relative;overflow:hidden;border:1px solid #e5e5e5;border-radius:10px}
.hero-slider .slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.hero-slider .slide.active{opacity:1;position:relative}
.hero-slider img{max-width:100%;max-height:100%;width:auto;height:100%}

/* Products */
.section-title{margin:24px 0 16px;font-size:22px;font-weight:800;text-align:right}
.products-grid{display:grid;gap:16px}
.products-grid.two-cols{grid-template-columns:repeat(2,1fr)}
@media(max-width:720px){.products-grid.two-cols{grid-template-columns:1fr}}
.product-card{box-sizing:border-box;border:1px solid #e8e8e8;border-radius:10px;overflow:hidden;background:#fff}
.product-card .thumb img{width:100%;display:block}
.product-card .info{padding:12px}
.product-card .name{margin:0 0 6px;font-size:18px}
.product-card .price{font-weight:700;margin-bottom:10px}
.product-card .actions{display:flex;gap:8px;flex-wrap:wrap}
.product-card .btn{padding:10px 12px;border:1px solid #111;border-radius:8px;display:inline-block}
.product-card .add-cart{background:#111;color:#fff;border-color:#111}
.product-card .order-now{background:#fff;color:#111}


/* three columns support */
.products-grid.three-cols{grid-template-columns:repeat(3,1fr)}
@media(max-width:1024px){.products-grid.three-cols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.products-grid.three-cols{grid-template-columns:1fr}}

/* product description */
.product-card .desc{font-size:14px;color:#666;margin-bottom:8px}


/* Fixed hero frame to avoid layout shift when images change */
.hero { padding: 24px 0; background:#f7f7f7; }
.hero .container{ padding:0; }

/* Use an aspect-ratio based frame, with a max-height for large screens.
   This keeps the slider area the same size even if images differ. */
.hero-slider{
  position:relative;
  overflow:hidden;
  width:100%;
  aspect-ratio: 4 / 3; /* taller frame for mobile (4:3) */
  max-height:700px;     /* larger max height for big screens */
  border:1px solid #e5e5e5;
  border-radius:10px;
  background:#efefef; /* neutral background while image loads */
}

/* Each slide fills the frame */
.hero-slider .slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .6s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Active slide visible */
.hero-slider .slide.active{ opacity:1; position:relative; }

/* Make images cover the frame without stretching layout */
.hero-slider img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:100%;
  object-fit:contain; /* show whole image inside the frame without cropping */
  display:block;
  margin:auto;
}

/* If you prefer the whole image visible (no crop), use object-fit:contain instead */
/* .hero-slider img{ object-fit:contain; background:#efefef; } */

.product-card .thumb{height:220px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.product-card .thumb img{max-width:100%;max-height:100%;object-fit:contain}
.depth{font-size:14px;color:#444;margin-bottom:6px}

#cart-icon{position:fixed;top:10px;right:10px;background:#fff;padding:8px;border:1px solid #ccc;cursor:pointer;z-index:1000}
#cart-popup{position:fixed;top:50px;right:10px;width:300px;background:#fff;border:1px solid #ccc;padding:10px;z-index:1000}
#cart-popup .cart-popup-content h2{margin-top:0;font-size:18px}
#cart-popup ul{list-style:none;padding:0;max-height:200px;overflow-y:auto}
#cart-popup button{margin:5px 2px;padding:8px 12px;cursor:pointer}

/* Added background watermark */
body {
  background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/bg-basha.png');
  background-repeat: repeat;
  background-size: 120px;
  background-attachment: fixed;
}


/* Off-Canvas Cart Sidebar */
#cart-sidebar {
  position: fixed;
  top: 0;
  right: -400px;
  width: 350px;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 5px rgba(0,0,0,0.3);
  transition: right 0.3s ease-in-out;
  z-index: 9999;
  padding: 20px;
  overflow-y: auto;
}
#cart-sidebar.open { right: 0; }
#cart-sidebar h3 { margin-top:0; }
#cart-sidebar ul { list-style:none; padding:0; }
#cart-sidebar ul li { padding:5px 0; border-bottom:1px solid #ddd; }
#cart-sidebar .close-btn {
  display:block;
  text-align:right;
  cursor:pointer;
  font-size:18px;
  margin-bottom:10px;
}
#cart-sidebar .checkout-btn {
  display:block;
  background:#28a745;
  color:#fff;
  padding:10px;
  text-align:center;
  margin-top:15px;
  text-decoration:none;
}


/* Adjusted Off-Canvas Cart: width 300px, height 70%, centered vertically */
#cart-sidebar {
  top: 15% !important;
  width: 300px !important;
  height: 70% !important;
  border-radius: 10px 0 0 10px;
}


/* v43.4 background wallpaper */
body {
  background: url('pattern-gold-bg.png') no-repeat center center fixed;
  background-size: cover;
}


/* v46 background wallpaper */
body {background: url('pattern-gold-bg.png') no-repeat center center fixed; background-size: cover;}

/* تعديل مكان السلة */
.cart {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 9999;
}

/* إخفاء رسالة السلة فارغة */
.empty-cart {
  display: none !important;
}