/* ============================================================
   COMPONENTS.CSS — reusable cards, sections, and UI patterns
   shared by two or more pages: buttons, hero, stats, about
   teaser, service/branch/offer/testimonial/FAQ cards, the
   Direct Plus panel, the bento grid, the process steps, the
   final CTA, page-hero/breadcrumb, forms, and terms list.
   ============================================================ */

/* ===== BUTTONS ===== */
.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:999px; font-weight:700; font-size:15px; font-family:var(--sans); transition:all .3s var(--ease); white-space:nowrap;}
.btn-primary{background:#006f86; color:#fff;}
.btn-primary:hover{background:#1ebd5a; transform:translateY(-2px); box-shadow:0 10px 24px rgba(37,211,102,.35);}
.btn-outline{border:2px solid var(--teal); color:var(--teal); background:transparent;}
.btn-outline:hover{background:var(--teal); color:#fff;}
.btn-outline-light{border:2px solid rgba(255,255,255,.55); color:#fff; background:transparent;}
.btn-outline-light:hover{background:#fff; color:var(--teal);}
.btn-gold{background:var(--gold); color:#fff;}
.btn-gold:hover{background:#a07f33; transform:translateY(-2px);}
.btn svg{width:18px; height:18px; flex-shrink:0;}
.btn-sm{padding:10px 20px; font-size:13px;}

/* ===== HERO =====
   --hero-bg-image is set per page (assets/css/pages/*.css) so this single
   rule serves every page's hero without duplicating the gradient overlay. */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden;
  background-color:var(--teal-deep);
  background-image:
    linear-gradient(170deg, rgba(6,46,48,.78) 0%, rgba(10,79,82,.62) 40%, rgba(3,22,24,.85) 100%),
    var(--hero-bg-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding-top:var(--header-h);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px, transparent 1px, transparent 6px);
}
.hero .container{position:relative; z-index:2; padding-top:60px; padding-bottom:60px;}
.hero-content{max-width:680px;}
.hero .eyebrow{color:#3fbc96;}
.hero .eyebrow::before{background:#3fbc96;}
.hero h1 .title-highlight{color:#3fbc96;}
.hero h1{color:#fff; font-size:clamp(38px,6vw,68px); margin-bottom:20px;}
.hero p.lead{color:rgba(255,255,255,.85); font-size:18px; max-width:560px; margin-bottom:34px;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px;}

.hero-trust{display:flex; gap:32px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.18); padding-top:28px;}
.hero-trust .item{display:flex; align-items:center; gap:12px;}
.hero-trust .item .num{font-family:var(--serif); font-size:28px; color:var(--gold-light); font-weight:700;}
.hero-trust .item .label{font-size:13px; color:rgba(255,255,255,.78); line-height:1.3; max-width:140px;}

/* ===== PAGE HERO (shorter variant of .hero, used by inner pages) ===== */
.hero-page{min-height:62vh;}
.hero-page .container{padding-top:40; padding-bottom:64px;}
.hero-subtitle{font-family:var(--serif); font-size:clamp(18px,2.4vw,22px); color:var(--gold-light); font-weight:600; margin-bottom:16px;}

/* ===== BREADCRUMB ===== */
.breadcrumb{display:flex; align-items:center; gap:10px; margin-bottom:22px; font-size:13.5px; font-weight:600;}
.breadcrumb a{color:rgba(255,255,255,.75); transition:color .2s;}
.breadcrumb a:hover{color:var(--gold-light);}
.breadcrumb .sep{color:rgba(255,255,255,.4);}
.breadcrumb .current{color:#fff;}

/* ===== STATS STRIP ===== */
.stats{background:var(--teal-deep); padding:48px 0;}
.stats .container{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
.stats .stat .num{font-family:var(--serif); font-size:clamp(32px,4vw,48px); color:var(--gold-light); font-weight:700;}
.stats .stat .label{color:rgba(255,255,255,.75); font-size:14px; font-weight:600; margin-top:6px;}
@media(max-width:768px){.stats .container{grid-template-columns:repeat(2,1fr);}}

/* ===== ABOUT-STYLE TEASER (text + image grid) ===== */
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center;}
.about-grid img{border-radius:var(--radius); width:100%; height:480px; object-fit:cover; box-shadow:0 24px 60px rgba(10,79,82,.18);}
.about-grid h2{font-size:clamp(28px,4vw,40px); margin-bottom:18px;}
.about-grid p{margin-bottom:18px; font-size:16px;}
.about-quote{
  border-left:3px solid var(--gold); padding-left:20px; margin:24px 0;
  font-family:var(--serif); font-size:19px; color:var(--teal); font-style:italic; line-height:1.5;
}
.about-links{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px;}
.about-links a{
  font-weight:700; font-size:14px; color:var(--teal); border:1.5px solid var(--line);
  border-radius:999px; padding:10px 20px; transition:all .25s;
}
.about-links a:hover{border-color:var(--gold); color:var(--gold); background:var(--ivory);}
@media(max-width:900px){.about-grid{grid-template-columns:1fr; gap:32px;} .about-grid img{height:320px; order:-1;}}

/* ===== SERVICE CARDS ===== */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.service-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 24px; transition:all .35s var(--ease); display:flex; flex-direction:column; gap:14px;
}
.service-card:hover{transform:translateY(-8px); box-shadow:0 20px 48px rgba(10,79,82,.14); border-color:transparent;}
.service-card .icon{
  width:54px; height:54px; border-radius:14px; background:var(--ivory);
  display:flex; align-items:center; justify-content:center; transition:.35s;
}
.service-card .icon svg{width:26px; height:26px; stroke:var(--teal);}
.service-card:hover .icon{background:var(--teal);}
.service-card:hover .icon svg{stroke:#fff;}
.service-card h3{font-size:19px; font-family:var(--sans); font-weight:800; color:var(--charcoal);}
.service-card p{font-size:14px; margin:0; flex:1;}
.service-card a{font-size:13px; font-weight:800; color:var(--teal); display:inline-flex; align-items:center; gap:6px; letter-spacing:.04em; text-transform:uppercase;}
.service-card a svg{width:14px; height:14px;}
@media(max-width:1100px){.services-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:700px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.services-grid{grid-template-columns:1fr;}}

/* ===== SERVICE CARD — image header, tagline, and Learn More + WhatsApp row =====
   Used by the homepage services slider (index.php) and the services
   listing grid (services.php), so a service card looks identical
   regardless of which page is showing it. */
.service-card-image{
  width:calc(100% + 48px); margin:-30px -24px 4px; height:160px;
  object-fit:cover; border-radius:var(--radius) var(--radius) 0 0; display:block;
}
.service-card .service-tagline{flex:0 0 auto; font-size:13px; font-weight:700; color:var(--gold); margin-top:-8px;}
/* Learn More + WhatsApp button share one row at the bottom of the card.
   Flexbox row-reversal in RTL naturally mirrors this (Learn More moves
   to the right, the WhatsApp button to the left) with no extra CSS. */
.service-card-actions{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.service-whatsapp-btn{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:var(--wa); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(37,211,102,.4);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.service-whatsapp-btn svg{width:20px; height:20px;}
.service-whatsapp-btn:hover{transform:scale(1.12); box-shadow:0 8px 22px rgba(37,211,102,.55);}

/* ===== DIRECT PLUS / FEATURED PANEL ===== */
.plus-panel{
  background:var(--teal); border-radius:28px; padding:64px; position:relative; overflow:hidden;
  display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center;
}
.plus-panel::before{
  content:""; position:absolute; inset:0; opacity:.08; pointer-events:none;
  background-image:radial-gradient(circle at 85% 15%, var(--gold) 0, transparent 45%);
}
.plus-left{position:relative; z-index:1;}
.plus-left .eyebrow{color:var(--gold-light);}
.plus-left .eyebrow::before{background:var(--gold-light);}
.plus-left h2{color:#fff; font-size:clamp(28px,4vw,42px); margin-bottom:16px;}
.plus-left p{color:rgba(255,255,255,.78); margin-bottom:28px;}
.plus-promise{
  border:1px solid rgba(255,255,255,.25); border-radius:16px; padding:24px;
  background:rgba(255,255,255,.06); margin-bottom:28px;
}
.plus-promise span{display:block; font-family:var(--serif); font-size:22px; color:var(--gold-light); font-weight:600; line-height:1.4;}
.plus-list{display:grid; grid-template-columns:1fr 1fr; gap:14px; position:relative; z-index:1;}
.plus-item{
  display:flex; align-items:flex-start; gap:12px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:14px 16px; transition:.3s;
}
.plus-item:hover{background:rgba(255,255,255,.12); border-color:var(--gold-light);}
.plus-item .check{
  width:22px; height:22px; border-radius:50%; background:var(--gold); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.plus-item .check svg{width:12px; height:12px; stroke:#fff; stroke-width:3;}
.plus-item span{color:#fff; font-size:13.5px; font-weight:600; line-height:1.4;}
@media(max-width:980px){.plus-panel{grid-template-columns:1fr; padding:40px 28px; border-radius:20px;} .plus-list{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.plus-list{grid-template-columns:1fr;}}

/* ===== BENTO CARDS (why-choose-us / benefits / values) ===== */
.bento{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.bento .card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px 26px;
  transition:.35s var(--ease);
}
.bento .card:hover{box-shadow:0 18px 44px rgba(10,79,82,.12); transform:translateY(-6px); border-color:transparent;}
.bento .card .num{font-family:var(--serif); font-size:34px; color:var(--gold); font-weight:700; margin-bottom:14px;}
.bento .card h3{font-size:18px; font-family:var(--sans); font-weight:800; color:var(--charcoal); margin-bottom:10px;}
.bento .card p{font-size:14px; margin:0;}
@media(max-width:1000px){.bento{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.bento{grid-template-columns:1fr;}}

/* ===== PROCESS STEPS ===== */
.process{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;}
.process::before{content:""; position:absolute; top:28px; left:8%; right:8%; height:2px; background:var(--line); z-index:0;}
.process .step{position:relative; z-index:1; text-align:center; padding:0 18px;}
.process .step .circle{
  width:56px; height:56px; border-radius:50%; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:20px;
  margin:0 auto 20px;
}
.process .step h3{font-size:17px; font-family:var(--sans); font-weight:800; color:var(--charcoal); margin-bottom:8px;}
.process .step p{font-size:13.5px; margin:0;}
@media(max-width:900px){.process{grid-template-columns:1fr 1fr; gap:36px 0;} .process::before{display:none;}}
@media(max-width:520px){.process{grid-template-columns:1fr;}}

/* ===== OFFER CARDS ===== */
.offers-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.offer-card{
  position:relative; border-radius:var(--radius); overflow:hidden; background:var(--teal-deep);
  min-height:320px; display:flex; flex-direction:column; justify-content:flex-end; padding:28px;
  background-image:linear-gradient(180deg, rgba(6,51,53,.15) 0%, rgba(6,51,53,.92) 100%), var(--img);
  background-size:cover; background-position:center; transition:.4s var(--ease);
}
.offer-card:hover{transform:translateY(-6px); box-shadow:0 24px 50px rgba(10,79,82,.25);}
.offer-badge{
  position:absolute; top:20px; left:20px; background:var(--orange); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 14px; border-radius:999px;
}
.offer-card h3{color:#fff; font-size:22px; margin-bottom:8px;}
.offer-card p{color:rgba(255,255,255,.8); font-size:14px; margin-bottom:18px;}
.offer-card a{font-size:13px; font-weight:800; color:var(--gold-light); display:inline-flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:.05em;}
@media(max-width:900px){.offers-grid{grid-template-columns:1fr;}}

/* ===== PRODUCT TILES (homepage's compact icon+text product teaser) ===== */
.products-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.product-tile{
  display:flex; align-items:center; gap:24px; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:32px; transition:.3s;
}
.product-tile:hover{border-color:var(--gold); box-shadow:0 14px 36px rgba(184,147,63,.12);}
.product-tile .icon{width:64px; height:64px; border-radius:16px; background:var(--ivory); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.product-tile .icon svg{width:30px; height:30px; stroke:var(--teal);}
.product-tile h3{font-size:20px; font-family:var(--sans); font-weight:800; color:var(--charcoal); margin-bottom:6px;}
.product-tile p{font-size:14px; margin:0 0 10px;}
.product-tile a{font-size:13px; font-weight:800; color:#ffffff; text-transform:uppercase; letter-spacing:.05em;}
@media(max-width:700px){.products-grid{grid-template-columns:1fr;} .product-tile{flex-direction:column; text-align:center;}}

/* ===== BRANCH TABS / CARDS (base — extended per-page where needed) ===== */
.branch-tabs{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:36px;}
.branch-tabs button{
  font-family:var(--sans); font-weight:700; font-size:14px; padding:10px 22px; border-radius:999px;
  border:1.5px solid var(--line); background:#fff; color:var(--charcoal); cursor:pointer; transition:.25s;
}
.branch-tabs button.active, .branch-tabs button:hover{background:var(--teal); color:#fff; border-color:var(--teal);}
.branch-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.branch-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; transition:.3s;}
.branch-card:hover{box-shadow:0 16px 40px rgba(10,79,82,.1); transform:translateY(-4px);}
.branch-card .tag{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); background:var(--ivory); padding:5px 12px; border-radius:999px; margin-bottom:14px;}
.branch-card h3{font-size:19px; font-family:var(--sans); font-weight:800; color:var(--charcoal); margin-bottom:8px;}
.branch-card p{font-size:13.5px; margin:0 0 4px; display:flex; align-items:flex-start; gap:8px;}
.branch-card p svg{width:15px; height:15px; flex-shrink:0; margin-top:2px; stroke:var(--teal);}
.branch-actions{display:flex; gap:10px; margin-top:18px;}
@media(max-width:1000px){.branch-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.branch-grid{grid-template-columns:1fr;}}

/* ===== TESTIMONIALS ===== */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.testi-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:30px; display:flex; flex-direction:column; gap:16px;}
.testi-card .stars{color:var(--gold); font-size:16px; letter-spacing:2px;}
.testi-card p{font-family:var(--serif); font-style:italic; font-size:17px; color:var(--charcoal); line-height:1.6; margin:0; flex:1;}
.testi-card .who{display:flex; align-items:center; gap:12px;}
.testi-card .avatar{width:44px; height:44px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-family:var(--sans);}
.testi-card .who strong{display:block; font-size:14px;}
.testi-card .who span{font-size:12.5px; color:var(--gray);}
.sample-tag{font-size:11px; color:var(--gray); font-style:italic;}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr;}}

/* ===== FAQ / ACCORDION ===== */
.faq-list{max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:14px;}
.faq-item{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff;}
.faq-item summary{
  list-style:none; cursor:pointer; padding:20px 24px; font-weight:800; font-size:15.5px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--charcoal);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .plus{width:24px; height:24px; border-radius:50%; background:var(--ivory); display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative;}
.faq-item summary .plus::before, .faq-item summary .plus::after{content:""; position:absolute; background:var(--teal); transition:.3s;}
.faq-item summary .plus::before{width:10px; height:2px;}
.faq-item summary .plus::after{width:2px; height:10px;}
.faq-item[open] summary .plus::after{transform:rotate(90deg); opacity:0;}
.faq-item .faq-body{padding:0 24px 22px; font-size:14.5px; color:var(--gray); line-height:1.7;}

/* ===== DETAIL BLOCKS (used inside FAQ-style accordions for richer info) ===== */
.detail-block{margin-bottom:16px;}
.detail-block:last-child{margin-bottom:0;}
.detail-block h4{font-family:var(--sans); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--teal); margin-bottom:6px;}
.detail-block ul{display:flex; flex-direction:column; gap:4px;}
.detail-block li{font-size:14.5px; color:var(--gray); line-height:1.6;}
.detail-block p{font-size:14.5px; color:var(--gray); line-height:1.6; margin:0;}

/* ===== INCLUDED-SERVICES CHECKLIST (packages / product features) ===== */
.package-included{display:flex; flex-direction:column; gap:8px; margin:4px 0 0;}
.package-included li{display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:var(--gray); line-height:1.4;}
.package-included li svg{width:14px; height:14px; flex-shrink:0; margin-top:3px; stroke:var(--teal-bright);}

/* ===== NUMBERED TERMS LIST ===== */
.terms-list{display:flex; flex-direction:column; gap:20px; max-width:840px; margin:0 auto;}
.terms-item{display:flex; gap:18px;}
.terms-item .num{flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--ivory); color:var(--gold); font-family:var(--serif); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center;}
.terms-item h4{font-size:15.5px; font-family:var(--sans); font-weight:800; color:var(--charcoal); margin-bottom:4px;}
.terms-item p{font-size:14px; margin:0;}

/* ===== FORM (contact / offers / products enquiry forms) ===== */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.form-group{display:flex; flex-direction:column; gap:8px;}
.form-group.full{grid-column:1 / -1;}
.form-group label{font-size:13.5px; font-weight:700; color:var(--charcoal);}
.form-group .required{color:var(--orange); margin-left:3px;}
.form-group input, .form-group select, .form-group textarea{
  font-family:var(--sans); font-size:15px; color:var(--charcoal); background:#fff;
  border:1.5px solid var(--line); border-radius:10px; padding:13px 16px; transition:border-color .25s, box-shadow .25s; width:100%;
}
.form-group textarea{resize:vertical; min-height:140px;}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none; border-color:var(--teal-bright); box-shadow:0 0 0 3px rgba(14,122,126,.12);
}
form.was-validated :invalid{border-color:var(--orange);}
.form-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px;}
.form-message{display:none; align-items:flex-start; gap:10px; padding:16px 18px; border-radius:12px; font-size:14px; font-weight:600; margin-bottom:24px;}
.form-message.show{display:flex;}
.form-message.success{background:rgba(14,122,126,.08); color:var(--teal); border:1px solid rgba(14,122,126,.25);}
.form-message.error{background:rgba(242,120,75,.08); color:#b6502a; border:1px solid rgba(242,120,75,.3);}
@media(max-width:700px){.form-grid{grid-template-columns:1fr;}}

/* ===== FINAL CTA ===== */
.final-cta{
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
  border-radius:28px; padding:72px 56px; text-align:center; position:relative; overflow:hidden;
}
.final-cta::before{content:""; position:absolute; inset:0; opacity:.1; background-image:radial-gradient(circle at 15% 85%, var(--gold) 0, transparent 50%);}
.final-cta h2{color:#fff; font-size:clamp(28px,5vw,46px); margin-bottom:14px; position:relative; z-index:1;}
.final-cta p{color:rgba(255,255,255,.8); font-size:17px; max-width:560px; margin:0 auto 32px; position:relative; z-index:1;}
.final-cta .ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1;}
@media(max-width:600px){.final-cta{padding:48px 24px; border-radius:20px;}}

/* ===== ARABIC / RTL ===== */
html[dir="rtl"] .about-quote, html[dir="rtl"] .testi-card p, html[dir="rtl"] .plus-promise span{font-family:var(--sans-ar), var(--sans); font-style:normal;}
html[dir="rtl"] .about-quote{border-left:none; border-right:3px solid var(--gold); padding-left:0; padding-right:20px;}
html[dir="rtl"] .form-group .required{margin-left:0; margin-right:3px;}
html[dir="rtl"] .terms-item .num{order:2;}