/*
Theme Name: زاد كلين سيرفس
Theme URI: https://qotb.agency/
Author: وكالة قطب
Author URI: https://qotb.agency/
Description: ثيم ووردبريس لصفحة خدمة تنظيف مكيفات وخزانات المياه - زاد كلين سيرفس بجدة. تصميم كارت فلاير احترافي RTL مع إمكانية تعديل أرقام التواصل من لوحة التحكم.
Version: 1.0
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: zad-clean
Tags: rtl-language-support, one-column, custom-colors
*/

  :root{
    --navy:#0b1f3a;
    --navy-2:#122a4e;
    --navy-light:#1b3a63;
    --gold:#d4af37;
    --gold-light:#f3d878;
    --gold-dark:#a9821f;
    --blue:#1a73e8;
    --green:#25d366;
    --paper:#faf7ef;
    --text-dark:#1a1a1a;
    --text-light:#fdf6e3;
    --shadow:0 10px 30px rgba(11,31,58,0.18);
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth;}

  body{
    font-family:'Tajawal','Cairo',sans-serif;
    background:linear-gradient(180deg,#f6f2e6 0%, #eef1f6 100%);
    color:var(--text-dark);
    direction:rtl;
    overflow-x:hidden;
    padding-bottom:78px;
  }

  .container{
    max-width:520px;
    margin:0 auto;
    background:#fff;
    min-height:100vh;
    box-shadow:0 0 40px rgba(0,0,0,0.08);
    position:relative;
  }

  /* ===== HEADER فاتح ===== */
  header.top{
    background:linear-gradient(180deg,#ffffff 0%, #fbf8ef 100%);
    padding:22px 18px 16px;
    text-align:center;
    position:relative;
    border-bottom:1px solid #f0e6c8;
  }
  .logo-circle{
    width:84px;height:84px;
    border-radius:50%;
    background:linear-gradient(145deg,var(--navy) 0%, var(--navy-light) 100%);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 10px;
    border:3px solid var(--gold);
    box-shadow:0 6px 18px rgba(11,31,58,0.25);
  }
  .logo-circle svg{width:42px;height:42px;}

  .badge{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--navy);
    color:var(--gold-light);
    font-size:12px;
    font-weight:700;
    padding:5px 14px;
    border-radius:20px;
    margin-bottom:8px;
    letter-spacing:.3px;
  }
  .badge svg{width:13px;height:13px;fill:var(--gold);}

  header.top h1{
    font-family:'Cairo',sans-serif;
    font-weight:900;
    font-size:26px;
    background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-dark));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    margin-bottom:6px;
  }
  .city-tag{
    display:inline-flex;align-items:center;gap:5px;
    color:var(--navy);
    font-weight:700;
    font-size:14.5px;
    background:#f4ede0;
    padding:4px 14px;
    border-radius:16px;
  }
  .city-tag svg{width:14px;height:14px;fill:var(--navy);}

  /* wave divider */
  .wave{display:block;width:100%;line-height:0;}
  .wave svg{width:100%;height:36px;display:block;}

  /* ===== بانر ذهبي/أزرق للعروض ===== */
  .promo-banner{
    background:linear-gradient(120deg,var(--navy) 0%, var(--blue) 55%, var(--navy) 100%);
    position:relative;
    padding:22px 18px 26px;
    text-align:center;
    overflow:hidden;
  }
  .promo-banner::before{
    content:"";
    position:absolute;inset:0;
    background:radial-gradient(circle at 20% 20%, rgba(212,175,55,0.35), transparent 45%),
               radial-gradient(circle at 85% 80%, rgba(212,175,55,0.25), transparent 40%);
  }
  .promo-banner .flag{
    position:relative;z-index:1;
    display:inline-block;
    background:var(--gold);
    color:var(--navy);
    font-weight:900;
    font-size:12.5px;
    padding:4px 14px;
    border-radius:20px;
    margin-bottom:10px;
    letter-spacing:.4px;
  }
  .promo-banner h2{
    position:relative;z-index:1;
    font-family:'Cairo',sans-serif;
    color:#fff;
    font-size:20px;
    font-weight:800;
    line-height:1.6;
    margin-bottom:4px;
  }
  .promo-banner h2 span{
    color:var(--gold-light);
    font-weight:900;
  }
  .promo-banner p{
    position:relative;z-index:1;
    color:#dfe8f7;
    font-size:13.5px;
    font-weight:500;
  }

  /* ===== كروت الخدمات ===== */
  .services{
    padding:26px 16px 8px;
  }
  .section-title{
    text-align:center;
    font-family:'Cairo',sans-serif;
    font-weight:800;
    font-size:19px;
    color:var(--navy);
    margin-bottom:18px;
    position:relative;
  }
  .section-title::after{
    content:"";
    display:block;
    width:56px;height:3px;
    background:linear-gradient(90deg,var(--gold-dark),var(--gold));
    margin:8px auto 0;
    border-radius:3px;
  }

  .service-card{
    background:#fff;
    border:1px solid #eee4c8;
    border-radius:18px;
    padding:18px;
    margin-bottom:16px;
    box-shadow:0 8px 22px rgba(11,31,58,0.08);
    position:relative;
    overflow:hidden;
  }
  .service-card::before{
    content:"";
    position:absolute;
    top:0;right:0;
    width:6px;height:100%;
    background:linear-gradient(180deg,var(--gold),var(--navy));
  }
  .service-illus{
    width:100%;
    height:130px;
    border-radius:14px;
    overflow:hidden;
    margin-bottom:14px;
    box-shadow:0 4px 10px rgba(11,31,58,0.15);
  }
  .service-illus svg{width:100%;height:100%;display:block;}
  .service-top{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
  }
  .service-info h3{
    font-family:'Cairo',sans-serif;
    font-size:17px;
    font-weight:800;
    color:var(--navy);
    margin-bottom:3px;
  }
  .service-info p{
    font-size:12.5px;
    color:#666;
    font-weight:500;
  }
  .price-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#faf6e9;
    border:1px dashed var(--gold-dark);
    border-radius:12px;
    padding:10px 14px;
  }
  .price-row .label{
    font-size:13px;
    font-weight:700;
    color:var(--navy);
  }
  .price-row .price{
    font-family:'Cairo',sans-serif;
    font-weight:900;
    font-size:22px;
    color:var(--gold-dark);
  }
  .price-row .price small{
    font-size:12px;
    font-weight:700;
    color:var(--navy);
  }
  .service-note{
    margin-top:8px;
    font-size:11.5px;
    color:#a9821f;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:4px;
  }

  /* ===== المميزات ===== */
  .features{
    padding:22px 16px 8px;
  }
  .features-list{
    list-style:none;
    background:#fff;
    border-radius:16px;
    box-shadow:0 8px 22px rgba(11,31,58,0.08);
    overflow:hidden;
  }
  .features-list li{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    font-size:14px;
    font-weight:600;
    color:var(--navy);
    border-right:4px solid var(--gold);
    border-bottom:1px solid #f4f0e2;
  }
  .features-list li:last-child{border-bottom:none;}
  .features-list li svg{
    flex:0 0 auto;
    width:20px;height:20px;
    fill:var(--gold-dark);
  }

  /* ===== قسم التواصل ===== */
  .contact-section{
    margin:26px 16px 8px;
    background:linear-gradient(135deg,var(--navy) 0%, var(--navy-light) 100%);
    border-radius:20px;
    padding:26px 20px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .contact-section::before{
    content:"";
    position:absolute;inset:0;
    background:radial-gradient(circle at 90% 10%, rgba(212,175,55,0.25), transparent 40%);
  }
  .contact-section h3{
    position:relative;z-index:1;
    font-family:'Cairo',sans-serif;
    color:#fff;
    font-size:18px;
    font-weight:800;
    margin-bottom:6px;
  }
  .contact-section p{
    position:relative;z-index:1;
    color:#cdd8ea;
    font-size:12.5px;
    margin-bottom:16px;
  }
  .phone-display{
    position:relative;z-index:1;
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(212,175,55,0.4);
    color:var(--gold-light);
    font-family:'Cairo',sans-serif;
    font-weight:800;
    font-size:20px;
    direction:ltr;
    padding:10px 20px;
    border-radius:14px;
    margin-bottom:18px;
  }
  .phone-display svg{width:18px;height:18px;fill:var(--gold-light);}

  .contact-buttons{
    position:relative;z-index:1;
    display:flex;
    gap:10px;
  }
  .cbtn{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:13px 8px;
    border-radius:12px;
    font-weight:800;
    font-size:13.5px;
    text-decoration:none;
    transition:transform .15s ease;
  }
  .cbtn:active{transform:scale(0.96);}
  .cbtn svg{width:18px;height:18px;}
  .cbtn.whatsapp{background:var(--green);color:#fff;}
  .cbtn.call{background:var(--gold);color:var(--navy);}

  /* ===== زراير دائرية جانبية ===== */
  .side-buttons{
    position:fixed;
    left:14px;
    bottom:100px;
    display:flex;
    flex-direction:column;
    gap:12px;
    z-index:998;
  }
  .side-btn{
    width:52px;height:52px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 16px rgba(0,0,0,0.25);
    text-decoration:none;
    animation:pulse-side 2.4s infinite;
  }
  .side-btn svg{width:24px;height:24px;fill:#fff;}
  .side-btn.wa{background:var(--green);animation-delay:0s;}
  .side-btn.gold{background:linear-gradient(145deg,var(--gold),var(--gold-dark));animation-delay:.3s;}
  .side-btn.gold svg{fill:var(--navy);}
  .side-btn.blue{background:linear-gradient(145deg,var(--blue),#0f4fa8);animation-delay:.6s;}

  @keyframes pulse-side{
    0%{box-shadow:0 0 0 0 rgba(37,211,102,0.4);}
    70%{box-shadow:0 0 0 12px rgba(37,211,102,0);}
    100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
  }

  /* ===== شريط سفلي عائم ===== */
  .bottom-bar{
    position:fixed;
    bottom:0;left:0;right:0;
    max-width:520px;
    margin:0 auto;
    background:#fff;
    border-top:1px solid #eee;
    box-shadow:0 -6px 20px rgba(0,0,0,0.12);
    display:flex;
    z-index:999;
  }
  .bottom-bar a{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:15px 6px;
    font-weight:800;
    font-size:14.5px;
    text-decoration:none;
  }
  .bottom-bar a svg{width:20px;height:20px;}
  .bottom-bar .bar-wa{background:var(--green);color:#fff;}
  .bottom-bar .bar-call{background:var(--navy);color:var(--gold-light);}

  /* ===== توقيع ===== */
  .signature{
    text-align:center;
    padding:22px 16px 26px;
    font-size:12px;
    color:#999;
  }
  .signature a{
    color:var(--gold-dark);
    font-weight:800;
    text-decoration:none;
  }
  .signature .line{
    width:40px;height:2px;
    background:#e6d9a8;
    margin:0 auto 12px;
    border-radius:2px;
  }

  @media (max-width:360px){
    header.top h1{font-size:22px;}
    .promo-banner h2{font-size:17px;}
  }