/* ===================================================
   FLORIFT — Custom CSS
=================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=El+Messiri:wght@400;700&display=swap');

body, p, a, span, button, input, li { font-family: 'Cairo', sans-serif !important; }
h1, h2, h3, h4, .florift-hero-copy h1 { font-family: 'El Messiri', 'Cairo', sans-serif !important; font-weight: 700; }
h1 { letter-spacing: -0.5px; }
h2 { letter-spacing: -0.3px; }

/* ══ ديسكتوب ══ */
@media (min-width: 992px) {
  header, .header, .main-header, .top-navbar, .site-header, .navbar, .nav-wrapper,
  .header-wrapper, .store-header, .s-header, .s-search, .search-wrapper, .search-bar,
  .search-input-wrapper, footer, .s-footer, .store-footer, .main-footer { display: none !important; }
  #florift-mobile-home { display: none !important; }
  .product, .product-item, .s-product-card, .s-product-card-entry, .product-entry, .product-block, .store-product {
    background: linear-gradient(180deg, #fff, #fffafa) !important; border: 1px solid rgba(107,31,43,.08) !important;
    border-radius: 28px !important; overflow: hidden !important; box-shadow: 0 12px 24px rgba(0,0,0,.04) !important; transition: .3s ease !important;
  }
  .product:hover, .product-item:hover, .s-product-card:hover, .s-product-card-entry:hover,
  .product-entry:hover, .product-block:hover, .store-product:hover { transform: translateY(-8px) !important; box-shadow: 0 24px 42px rgba(107,31,43,.14) !important; }
  .product img, .product-item img, .s-product-card img, .s-product-card-entry img, .product-entry img, .product-block img, .store-product img { border-radius: 18px !important; }
  .price, .product-price, .s-product-card-price, .sale-price, .price-wrapper { color: #4e141d !important; font-weight: 800 !important; font-size: 1.4rem !important; }
  .btn--add-to-cart, .add-to-cart, .s-button-btn, button[class*="cart"] {
    background: linear-gradient(135deg, #6b1f2b, #4e141d) !important; color: #fff !important;
    border: none !important; border-radius: 999px !important; font-weight: 800 !important; box-shadow: 0 12px 30px rgba(107,31,43,.15) !important;
  }
}

/* ══ تابلت ══ */
@media (min-width: 768px) and (max-width: 991.98px) {
  #florift-desktop-home, #florift-desktop-step-2, #florift-desktop-step-4,
  #florift-desktop-step-5, #florift-desktop-footer, #florift-whatsapp-btn,
  #florift-mobile-home { display: none !important; }
  header, .header, .main-header, .top-navbar, .site-header, .navbar, .nav-wrapper,
  .header-wrapper, .store-header, .s-header, .s-search, .search-wrapper, .search-bar,
  footer, .s-footer, .store-footer, .main-footer { display: block !important; visibility: visible !important; opacity: 1 !important; }
  .product, .s-product-card, .product-item { border-radius: 20px !important; overflow: hidden; }
}

/* ══ جوال ══ */
@media (max-width: 767.98px) {

  body { padding: 0 !important; margin: 0 !important; }

  #florift-desktop-home, #florift-desktop-step-2, #florift-desktop-step-4,
  #florift-desktop-step-5, #florift-desktop-footer, #florift-whatsapp-btn { display: none !important; }

  header, .header, .main-header, .top-navbar, .site-header, .navbar, .nav-wrapper,
  .header-wrapper, .store-header, .s-header, .s-search, .search-wrapper, .search-bar,
  .search-input-wrapper, footer, .s-footer, .store-footer, .main-footer {
    display: none !important; visibility: hidden !important; pointer-events: none !important;
  }

  .product, .s-product-card { border-radius: 16px !important; overflow: hidden; }
  .product img { border-radius: 16px 16px 0 0; }
  .btn, .s-button { border-radius: 999px !important; font-weight: 700; }
  h1, h2, h3 { line-height: 1.3; }
  .container, .main-content { padding: 0 12px !important; }

  #florift-mobile-home {
    direction: rtl; font-family: 'Cairo', sans-serif; width: 100%; max-width: 430px;
    margin: 0 auto; color: #1d1114; background: #f9f4f1; min-height: 100vh; padding-bottom: 80px;
  }
  #florift-mobile-home * { box-sizing: border-box; }
  #florift-mobile-home a { text-decoration: none; color: inherit; }

  .fm-status { height: 4px; background: linear-gradient(90deg, #6b1f2b, #c9a96e, #6b1f2b); }

  .fm-header {
    background: radial-gradient(circle at top right, rgba(255,255,255,.12), transparent 28%), linear-gradient(145deg, #6b1f2b 0%, #431019 100%);
    padding: 16px 18px 28px; position: relative; overflow: hidden;
  }
  .fm-header::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:26px; background:#f9f4f1; border-radius:26px 26px 0 0; }
  .fm-head-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; position:relative; z-index:1; }
  .fm-brand-wrap { display:flex; align-items:center; gap:10px; }
  .fm-brand-mark { width:44px; height:44px; border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.08)); border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:20px; }
  .fm-brand { line-height:1.1; }
  .fm-brand .ar { display:block; font-size:1.3rem; font-weight:900; color:#fff; }
  .fm-brand .en { display:block; font-size:.78rem; color:rgba(255,255,255,.65); letter-spacing:1.8px; text-transform:uppercase; }
  .fm-header-actions { display:flex; gap:8px; }
  .fm-icon-btn { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:16px; color:#fff; position:relative; text-decoration:none; }
  .fm-icon-btn.has-badge::after { content:''; position:absolute; top:-2px; left:-2px; width:12px; height:12px; border-radius:50%; background:#c9a96e; border:2px solid #6b1f2b; }

  .fm-search { position:relative; z-index:1; display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:999px; background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.2); cursor:pointer; }
  .fm-search-ico { font-size:15px; opacity:.8; }
  .fm-search-text { color:rgba(255,255,255,.7); font-size:.92rem; }

  .fm-greeting { padding:24px 18px 10px; }
  .fm-mini { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid #edd0d7; font-size:.74rem; font-weight:700; color:#6b1f2b; margin-bottom:12px; }
  .fm-title { font-size:1.65rem; line-height:1.25; font-weight:900; color:#1d1114; margin:0 0 8px; font-family:'El Messiri','Cairo',sans-serif; }
  .fm-title span { color:#6b1f2b; }
  .fm-desc { color:#82646d; font-size:.9rem; line-height:1.8; margin:0; }

  .fm-offer { margin:14px 18px 0; padding:14px; border-radius:20px; border:1.4px solid #ebd9b6; background:linear-gradient(135deg,#fff9ee,#fff2d8); display:flex; align-items:center; gap:10px; }
  .fm-offer-icon { width:42px; height:42px; border-radius:13px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; flex:0 0 auto; }
  .fm-offer-body { flex:1; min-width:0; }
  .fm-offer-body strong { display:block; font-size:.86rem; font-weight:900; color:#8a5d00; margin-bottom:2px; }
  .fm-offer-body span { display:block; font-size:.76rem; color:#9b731f; line-height:1.5; }
  .fm-offer-btn { background:#6b1f2b; color:#fff; padding:9px 14px; border-radius:12px; font-size:.78rem; font-weight:800; white-space:nowrap; flex:0 0 auto; text-decoration:none; }

  .fm-cats { display:flex; gap:10px; padding:16px 18px 0; overflow-x:auto; scrollbar-width:none; }
  .fm-cats::-webkit-scrollbar { display:none; }
  .fm-cat { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; padding:12px 14px; border-radius:18px; background:#fff; border:1.5px solid #eadbdd; min-width:72px; transition:.2s ease; }
  .fm-cat.active { background:#6b1f2b; border-color:#6b1f2b; }
  .fm-cat.active .fm-cat-ico, .fm-cat.active .fm-cat-label { color:#fff; }
  .fm-cat-ico { font-size:20px; line-height:1; }
  .fm-cat-label { font-size:.72rem; font-weight:700; color:#4e141d; white-space:nowrap; }

  .fm-hero { margin:16px 18px 0; border-radius:24px; overflow:hidden; position:relative; height:240px; box-shadow:0 12px 30px rgba(107,31,43,.14); }
  .fm-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .6s ease; }
  .fm-slide::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(43,26,30,.72)); }
  .fm-slide.active { opacity:1; }
  .fm-hero-content { position:absolute; bottom:18px; right:18px; left:18px; z-index:2; color:#fff; }
  .fm-hero-content h2 { margin:0 0 6px; font-size:1.35rem; line-height:1.2; font-family:'El Messiri','Cairo',sans-serif; font-weight:700; }
  .fm-hero-content p { margin:0 0 12px; font-size:.82rem; color:rgba(255,255,255,.85); line-height:1.6; }
  .fm-hero-cta { display:inline-block; background:#fff; color:#6b1f2b; padding:9px 18px; border-radius:999px; font-weight:800; font-size:.84rem; text-decoration:none; }
  .fm-dots { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:3; }
  .fm-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.45); transition:.3s; }
  .fm-dot.active { background:#fff; width:18px; border-radius:3px; }

  .fm-trust { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 18px 0; }
  .fm-trust-box { background:#fff; border:1px solid #eadbdd; border-radius:18px; padding:14px 10px; text-align:center; }
  .fm-trust-ico { font-size:22px; margin-bottom:6px; }
  .fm-trust-box strong { display:block; font-size:.78rem; color:#2b1a1e; font-weight:800; margin-bottom:2px; }
  .fm-trust-box span { font-size:.7rem; color:#7a5a60; }

  .fm-products-section { margin:14px 18px 0; }
  .fm-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .fm-section-title { font-size:.92rem; font-weight:800; color:#2b1a1e; }
  .fm-section-link { font-size:.78rem; font-weight:700; color:#6b1f2b; text-decoration:none; border-bottom:1px solid #eadbdd; padding-bottom:1px; }
  .fm-products-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .fm-product-card { background:#fff; border:1px solid #eadbdd; border-radius:18px; overflow:hidden; text-decoration:none; color:#2b1a1e; display:block; transition:.2s ease; }
  .fm-product-card:active { transform:scale(.98); }
  .fm-product-img { width:100%; aspect-ratio:1/1; overflow:hidden; background:#f9f4f1; display:flex; align-items:center; justify-content:center; }
  .fm-product-img img { width:100%; height:100%; object-fit:cover; display:block; }
  .fm-product-img-placeholder { font-size:2.5rem; }
  .fm-product-info { padding:10px 12px 12px; }
  .fm-product-name { font-size:.82rem; font-weight:700; color:#2b1a1e; line-height:1.4; margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .fm-product-price { font-size:.86rem; font-weight:800; color:#6b1f2b; }

  .fm-contact-card { margin:16px 18px 0; background:linear-gradient(145deg,#6b1f2b 0%,#431019 100%); border-radius:24px; padding:22px 18px 18px; color:#fff; position:relative; overflow:hidden; box-sizing:border-box; }
  .fm-contact-card::before { content:''; position:absolute; top:-40px; left:-40px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.05); }
  .fm-contact-tag { display:inline-block; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:5px 12px; font-size:.72rem; font-weight:700; margin-bottom:12px; color:#fff; }
  .fm-contact-title { font-size:1.5rem; font-weight:900; line-height:1.2; margin:0 0 8px; font-family:'El Messiri','Cairo',sans-serif; color:#fff; }
  .fm-contact-desc { font-size:.84rem; color:rgba(255,255,255,.78); line-height:1.7; margin:0 0 16px; }
  .fm-contact-btns { display:grid; grid-template-columns:1fr 1fr; gap:10px; box-sizing:border-box; }
  .fm-cbtn { display:flex; align-items:center; justify-content:center; padding:12px 10px; border-radius:14px; font-weight:800; font-size:.86rem; text-decoration:none; text-align:center; box-sizing:border-box; }
  .fm-cbtn-wa { background:#25D366; color:#fff; }
  .fm-cbtn-outline { background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.22); color:#fff; }
  .fm-contact-pills { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; box-sizing:border-box; }
  .fm-cpill { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:14px; padding:10px 8px; text-align:center; font-size:.72rem; line-height:1.5; color:rgba(255,255,255,.9); box-sizing:border-box; }
  .fm-cpill span { display:block; font-size:18px; margin-bottom:4px; }

  .fm-store-links { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 18px 0; box-sizing:border-box; }
  .fm-slink { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #eadbdd; border-radius:16px; padding:14px; text-decoration:none; color:#2b1a1e; font-weight:700; font-size:.86rem; box-sizing:border-box; }
  .fm-slink:active { background:#fdf1f4; }
  .fm-slink-ico { font-size:20px; flex:0 0 auto; }
  .fm-slink-label { color:#2b1a1e; font-weight:700; }

  .fm-payments { margin:14px 18px 0; background:#fff; border:1px solid #eadbdd; border-radius:18px; padding:16px; box-sizing:border-box; }
  .fm-payments-title { font-size:.82rem; font-weight:800; color:#4e141d; margin-bottom:12px; text-align:center; }
  .fm-payments-row { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
  .fm-pay-badge { background:#f7f0f2; border:1px solid #eadbdd; border-radius:10px; padding:7px 14px; font-size:.78rem; font-weight:700; color:#4e141d; }

  /* ── Bottom Nav ثابت في كل الصفحات ── */
  #florift-mobile-bottomnav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(255,255,255,.97);
    border-top: 1px solid #eadbdd;
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    height: 64px;
    z-index: 9999;
    padding: 0 8px;
    max-width: 430px;
    margin: 0 auto;
  }

  .fm-nav-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none; color:#999; padding:6px 0; }
  .fm-nav-item.active { color:#6b1f2b; }
  .fm-nav-ico { font-size:20px; line-height:1; }
  .fm-nav-label { font-size:.64rem; font-weight:700; font-family:'Cairo',sans-serif; }
  .fm-nav-center { flex:0 0 64px; display:flex; align-items:center; justify-content:center; }
  .fm-nav-center-btn { width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,#6b1f2b,#4e141d); display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 8px 20px rgba(107,31,43,.3); text-decoration:none; margin-top:-18px; }
}