/* =========================
   RESET
========================= */

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

html,
body{
  width:100%;
  margin:0;
  padding:0;
}

body{

  font-family:
  Tahoma,
  Arial,
  sans-serif;

  direction:rtl;

  background:#f5f7fa;

  color:#222;

}

.footer{
  margin-top:0;
}


/* =========================
   INDEX PAGE
========================= */

.index-page{

  overflow-x:hidden;

}

/* =========================
   CONTAINER
========================= */

.index-page .container{

  width:90%;

  max-width:360px;

  margin:18px auto;

  text-align:center;

}

/* =========================
   GOLD LINE
========================= */

.gold-line{

  width:120px;

  height:1px;

  background:#d4b16a;

  margin:0 auto 20px;

  position:relative;

}

.gold-line::after{

  content:"";

  width:10px;

  height:10px;

  background:#d4b16a;

  position:absolute;

  top:-4px;

  left:50%;

  transform:
  translateX(-50%)
  rotate(45deg);

}

/* =========================
   TITLES
========================= */

.main-title{

  font-size:19px;

  font-weight:900;

  color:#08352f;

  margin-bottom:4px;

}

.main-subtitle{

  font-size:14px;

  font-weight:700;

  color:#c8a75b;

}

.hero-text{

  margin-top:14px;

  margin-bottom:28px;

  color:#777;

  font-size:11px;

  position:relative;

}

.hero-text::before,
.hero-text::after{

  content:"";

  width:40px;

  height:1px;

  background:#d4b16a;

  position:absolute;

  top:50%;

}

.hero-text::before{

  right:0;

}

.hero-text::after{

  left:0;

}

/* =========================
   HERO CARD
========================= */

.hero-card{

  background:#fff;

  border-radius:24px;

  padding:14px 12px 16px;

  box-shadow:
  0 8px 24px rgba(0,0,0,0.07);

  position:relative;

}

/* =========================
   ICON
========================= */

.hero-icon{

  width:52px;

  height:52px;

  border-radius:50%;

  background:
  linear-gradient(
  135deg,
  #0c4d44,
  #08352f
  );

  border:4px solid #d4b16a;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:19px;

  margin:
  -40px auto 12px;

  box-shadow:
  0 6px 18px rgba(0,0,0,0.12);

}

/* =========================
   HERO TEXT
========================= */

.hero-card h2{

  color:#08352f;

  font-size:16px;

  margin-bottom:10px;

}

.hero-desc{

  color:#666;

  font-size:11px;

  margin-bottom:0;

}

/* =========================
   TIME BOX
========================= */

.time-box{

  display:inline-flex;

  align-items:center;

  gap:6px;

  background:#f3f4f5;

  padding:6px 10px;

  border-radius:30px;

  margin:16px 0;

  font-size:9px;

  color:#444;

}

/* =========================
   INPUT
========================= */

.index-page input{

  width:100%;

  height:40px;

  border:none;

  border-radius:14px;

  background:#f7f8fa;

  border:1.5px solid #d8dee6;

  padding:0 14px;

  font-size:13px;

  outline:none;

  transition:0.25s;

}

.index-page input:focus{

  border-color:#0c4d44;

  background:#fff;

}

/* =========================
   BUTTON
========================= */

.index-page button{

  width:100%;

  height:42px;

  border:none;

  border-radius:14px;

  margin-top:14px;

  background:
  linear-gradient(
  135deg,
  #08352f,
  #0f6b5d
  );

  color:#fff;

  font-size:14px;

  font-weight:700;

  cursor:pointer;

  transition:0.25s;

  box-shadow:
  0 8px 18px rgba(8,53,47,0.18);

}

.index-page button:hover{

  transform:translateY(-2px);

}

/* =========================
   FEATURES
========================= */

.index-page .features{

  background:#fff;

  border-radius:18px;

  padding:8px 4px;

  margin-top:14px;

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:2px;

  box-shadow:
  0 5px 16px rgba(0,0,0,0.04);

}

/* =========================
   FEATURE BOX
========================= */

.feature-box{

  text-align:center;

}

.feature-icon{

  width:30px;

  height:30px;

  border-radius:50%;

  background:#f6f3eb;

  display:flex;

  align-items:center;

  justify-content:center;

  margin:auto;

  font-size:13px;

}

.feature-box h4{

  margin-top:7px;

  margin-bottom:2px;

  color:#08352f;

  font-size:9px;

}

.feature-box p{

  color:#777;

  font-size:7px;

  line-height:1.4;

}


/* =========================
   MOBILE
========================= */

@media (max-width:480px){

  .hero-text::before,
  .hero-text::after{

    display:none;

  }

}




/* =========================
   OPTIONS PAGE
========================= */

.options-page{

  background:
  linear-gradient(
  180deg,
  #f7f8fa,
  #eef2f5
  );

  font-family:
  Tahoma,
  Arial,
  sans-serif;

  direction:rtl;

  overflow-x:hidden;

}

/* =========================
   CONTAINER
========================= */

.options-page .container{

  width:90%;

  max-width:360px;

  margin:18px auto 0;

  text-align:center;

}


/* =========================
   LOGO
========================= */

.hero-logo{

  margin-top:18px;

}

.hero-logo h1{

  color:#08352f;

  font-size:20px;

  font-weight:900;

  margin-bottom:4px;

}

.hero-logo p{

  color:#c8a75b;

  font-size:13px;

  font-weight:700;

}

/* =========================
   HERO TITLE
========================= */

.hero-title{

  margin-top:18px;

  margin-bottom:18px;

}

.hero-title h2{

  color:#08352f;

  font-size:18px;

  margin-bottom:6px;

}

.hero-title span{

  color:#777;

  font-size:10px;

}

/* =========================
   OPTIONS GRID
========================= */

.options{

  display:grid;

  grid-template-columns:
  repeat(2,1fr);

  gap:10px;

  justify-items:center;

}

/* =========================
   CARD
========================= */

.card{

  width:100%;

  max-width:145px;

  background:#fff;

  border-radius:18px;

  padding:14px 10px;

  box-shadow:
  0 6px 18px rgba(0,0,0,0.05);

  cursor:pointer;

  transition:0.25s;

  border:1px solid #ececec;

}

.card:hover{

  transform:translateY(-3px);

}

/* =========================
   CENTER CARD
========================= */

.center-card{

  grid-column:auto;

  max-width:145px;

}

/* =========================
   CARD ICON
========================= */

.card-icon{

  width:34px;

  height:34px;

  border-radius:50%;

  background:
  linear-gradient(
  135deg,
  #0c4d44,
  #145c52
  );

  display:flex;

  align-items:center;

  justify-content:center;

  margin:auto;

  font-size:15px;

  color:#fff;

}

/* =========================
   CARD TITLE
========================= */

.card h3{

  color:#08352f;

  font-size:12px;

  margin-top:10px;

  margin-bottom:6px;

}

/* =========================
   LINE
========================= */

.line{

  width:40px;

  height:1px;

  background:#d9b56d;

  margin:auto;

  position:relative;

}

.line::after{

  content:"";

  width:5px;

  height:5px;

  border-radius:50%;

  background:#d9b56d;

  position:absolute;

  top:-2px;

  left:50%;

  transform:translateX(-50%);

}

/* =========================
   CARD TEXT
========================= */

.card p{

  color:#777;

  font-size:8px;

  line-height:1.7;

  margin-top:7px;

}

/* =========================
   FEATURES
========================= */

.options-page .features{

  background:#fff;

  border-radius:18px;

  padding:8px 4px;

  margin-top:16px;

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:4px;

  box-shadow:
  0 5px 16px rgba(0,0,0,0.04);

}

/* =========================
   FEATURE BOX
========================= */

.feature-box{

  text-align:center;

}

.feature-icon{

  width:30px;

  height:30px;

  border-radius:50%;

  background:#f6f3eb;

  display:flex;

  align-items:center;

  justify-content:center;

  margin:auto;

  font-size:13px;

}

.feature-box h4{

  margin-top:7px;

  margin-bottom:2px;

  color:#08352f;

  font-size:9px;

}

.feature-box p{

  color:#777;

  font-size:7px;

  line-height:1.5;

}


/* =========================
   LOADING SCREEN
========================= */

#loadingScreen{

  font-family:Tahoma;
}



/* =========================
   CONTRACT PAGE
========================= */

.contract-page{

  background:#f5f7fa;

  font-family:
  Tahoma,
  Arial,
  sans-serif;

  direction:rtl;

  overflow-x:hidden;

}

/* =========================
   CONTAINER
========================= */

.contract-page .container{

  width:92%;

  max-width:420px;

  margin:20px auto;

}

/* =========================
   BACK BUTTON
========================= */

.back-btn{

  position:fixed;

  top:14px;

  right:14px;

  width:auto !important;

  min-width:auto !important;

  height:42px;

  padding:0 14px;

  border:none;

  border-radius:14px;

  background:
  linear-gradient(
  135deg,
  #0c4d44,
  #16a085
  );

  color:#fff;

  font-size:12px;

  font-weight:700;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:6px;

  cursor:pointer;

  z-index:9999;

  box-shadow:
  0 6px 16px rgba(0,0,0,0.12);

}

/* يبعد العنوان عن الزر */
.contract-page .container{

  padding-top:70px;

}

/* =========================
   CONTRACT TITLES
========================= */

.contract-page h2,
.contract-page h3{

  text-align:center;

  width:100%;

}

.contract-page h2{

  font-size:26px;

  margin-top:10px;

  margin-bottom:10px;

}

.contract-page h3{

  font-size:20px;

  margin-top:0;

  margin-bottom:24px;

}

/* =========================
   SECTION
========================= */

.section,
.card-section{

  background:#fff;

  border-radius:20px;

  padding:14px;

  margin-bottom:14px;

  border:1px solid #e3e7eb;

  box-shadow:
  0 4px 12px rgba(0,0,0,0.03);

}

/* =========================
   STATUS
========================= */

.section-status{

  float:left;

  font-size:10px;

  font-weight:normal;

  color:#777;

}

/* =========================
   LABEL
========================= */

.contract-page label{

  display:block;

  font-size:12px;

  color:#444;

  margin-bottom:6px;

  margin-top:8px;

  font-weight:700;

}

/* =========================
   INPUTS
========================= */

.contract-page input,
.contract-page select{

  width:100%;

  height:36px;

  border-radius:12px;

  border:1px solid #d9dee5;

  background:#fff;

  padding:0 10px;

  font-size:11px;

  outline:none;

  margin-bottom:8px;

  transition:0.2s;

}

.contract-page input:focus,
.contract-page select:focus{

  border-color:#16a085;

}

/* =========================
   DOUBLE ROW
========================= */

.double-row{

  display:flex;

  gap:10px;

}

.double-row input,
.double-row select{

  width:100%;

}

/* =========================
   CONTRACT ROW
========================= */

.contract-row{

  display:flex;

  gap:10px;

}

.contract-row > div{

  width:100%;

}

/* =========================
   OWNER ACTIONS
========================= */

.owner-actions{

  display:flex;

  flex-wrap:wrap;

  gap:12px;

  margin-bottom:10px;

}

.owner-actions span{

  font-size:11px;

  color:#16a085;

  cursor:pointer;

  font-weight:700;

}

/* =========================
   NOTE
========================= */

.note-text{

  color:#777;

  font-size:10px;

  line-height:1.7;

  margin-bottom:12px;

}

/* =========================
   PERSON / COMPANY
========================= */

.person,
.company{

  background:#f8fafc;

  border-radius:14px;

  padding:12px;

  margin-top:10px;

}

/* =========================
   TOP ROW
========================= */

.person .top-row,
.company .top-row{

  display:grid;

  grid-template-columns:
  1fr 1fr;

  gap:10px;

}

/* =========================
   UNITS
========================= */

.unit-row{

  display:grid;

  grid-template-columns:
  1fr 1fr;

  gap:10px;

}

.unit-box{

  margin-bottom:14px;

}

.unit-box::before{

  content:"الوحدة";

  display:block;

  color:#888;

  font-size:11px;

  margin-bottom:6px;

}

.unit-box span{

  display:inline-block;

  background:#ffeaea;

  color:#e74c3c;

  padding:4px 8px;

  border-radius:8px;

  font-size:10px;

  margin-bottom:8px;

  cursor:pointer;

}

/* =========================
   BUTTONS
========================= */

.contract-page button{

  width:100%;

  height:44px;

  border:none;

  border-radius:14px;

  background:
  linear-gradient(
  135deg,
  #0c4d44,
  #16a085
  );

  color:#fff;

  font-size:13px;

  font-weight:700;

  cursor:pointer;

  margin-top:10px;

  transition:0.2s;

  box-shadow:
  0 6px 16px rgba(0,0,0,0.08);

}

.contract-page button:hover{

  transform:translateY(-2px);

}

/* =========================
   ADD UNIT BUTTON
========================= */

button[onclick*="addUnit"]{

  background:
  linear-gradient(
  135deg,
  #2563eb,
  #3b82f6
  );

}

/* =========================
   WHATSAPP BUTTON
========================= */

button[onclick*="sendWhatsApp"]{

  background:
  linear-gradient(
  135deg,
  #16a34a,
  #22c55e
  );

}

/* =========================
   HR
========================= */

.card-section hr{

  border:none;

  height:1px;

  background:#e5e7eb;

  margin:18px 0;

}


/* =========================
   MOBILE
========================= */

@media (max-width:480px){

  .double-row,
  .contract-row{

    gap:8px;

  }

}




/* =========================
   MANAGEMENT PAGE
========================= */

.management-page{

  background:#f5f7fa;

  font-family:
  Tahoma,
  Arial,
  sans-serif;

  direction:rtl;

  overflow-x:hidden;

}

/* =========================
   CONTAINER
========================= */

.management-page .container{

  width:92%;

  max-width:420px;

  margin:20px auto;

  padding-top:85px;

}

/* =========================
   TITLE
========================= */

.management-page h2{

  text-align:center;

  color:#08352f;

  font-size:25px;

  margin-bottom:20px;

}

/* =========================
   SECTION
========================= */

.management-page .section{

  background:#fff;

  border-radius:22px;

  padding:16px;

  border:1px solid #e5e7eb;

  box-shadow:
  0 5px 14px rgba(0,0,0,0.04);

}

/* =========================
   ROWS
========================= */

.management-row{

  display:grid;

  grid-template-columns:
  1fr 1fr;

  gap:10px;

  margin-bottom:10px;

}

/* =========================
   LABELS
========================= */

.management-page label{

  display:block;

  font-size:12px;

  font-weight:700;

  color:#444;

  margin-bottom:6px;

  line-height:1.6;

}

/* =========================
   INPUTS
========================= */

.management-page input,
.management-page select{

  width:100%;

  height:38px;

  border-radius:12px;

  border:1px solid #d9dee5;

  background:#fff;

  padding:0 10px;

  font-size:11px;

  outline:none;

  transition:0.2s;

}

.management-page input:focus,
.management-page select:focus{

  border-color:#16a085;

}

/* =========================
   SERVICES GRID
========================= */

.services-grid{

  display:grid;

  grid-template-columns:
  repeat(2,1fr);

  gap:10px;

  margin-top:10px;

  margin-bottom:14px;

}

/* =========================
   SERVICE CARD
========================= */

.service-card{

  background:#f8fafc;

  border:1px solid #e5e7eb;

  border-radius:14px;

  padding:10px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  cursor:pointer;

  font-size:11px;

  font-weight:700;

  color:#333;

}

.service-card input{

  width:16px;

  height:16px;

  margin:0;

}

/* =========================
   TEXTAREA
========================= */

.management-page textarea{

  width:100%;

  min-height:110px;

  border-radius:14px;

  border:1px solid #d9dee5;

  padding:12px;

  font-size:12px;

  resize:vertical;

  outline:none;

  font-family:Tahoma;

}

/* =========================
   NOTE
========================= */

.management-note{

  text-align:center;

  color:#666;

  font-size:11px;

  line-height:1.8;

  margin:18px auto;

  width:90%;

}

/* =========================
   SEND BUTTON
========================= */

.management-send-btn{

  width:92%;

  max-width:420px;

  margin:0 auto 24px;

  height:46px;

  border:none;

  border-radius:16px;

  background:
  linear-gradient(
  135deg,
  #16a34a,
  #22c55e
  );

  color:#fff;

  font-size:13px;

  font-weight:700;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  cursor:pointer;

  box-shadow:
  0 8px 18px rgba(34,197,94,0.22);

}

.management-send-btn span{

  font-size:17px;

}





/* =========================
   GLOBAL FOOTER
========================= */

.footer{

  background:#fff;

  margin-top:12px;

  border-radius:28px 28px 0 0;

  padding:12px 14px;

  box-shadow:
  0 -5px 18px rgba(0,0,0,0.04);

}

/* =========================
   FOOTER TOP
========================= */

.footer-top{

  display:grid;

  grid-template-columns:
  1fr 1fr;

  gap:14px;

  margin-bottom:16px;

}

/* =========================
   FOOTER BOX
========================= */

.footer-box h4{

  margin:0 0 6px;

  color:#16a085;

  font-size:13px;

}

.footer-box p{

  margin:0;

  color:#666;

  font-size:10px;

  line-height:1.8;

}

.footer-box a{

  color:#555;

  text-decoration:none;

  font-size:11px;

  font-weight:700;

}

/* =========================
   FOOTER LOGOS
========================= */

.footer-logos{

  display:flex;

  justify-content:center;

  gap:8px;

  margin:10px 0;

}

.footer-logos img{

  width:22px;

  border-radius:6px;

}

/* =========================
   PRIVACY NOTE
========================= */

.privacy-note{

  text-align:center;

  color:#777;

  font-size:10px;

  margin-top:10px;

  line-height:1.8;

}

/* =========================
   COPYRIGHT
========================= */

.footer-copy{

  text-align:center;

  color:#999;

  font-size:8px;

  line-height:1.8;

}







/* =========================
   REVIEW PAGE
========================= */

.review-page{

  background:#f5f7fa;

  direction:rtl;

  font-family:
  Tahoma,
  Arial,
  sans-serif;

  overflow-x:hidden;

}

/* =========================
   CONTAINER
========================= */

.review-page .container{

  width:90%;

  max-width:360px;

  margin:16px auto;

  padding-top:78px;

}

/* =========================
   LOGO
========================= */

.review-logo{

  text-align:center;

  margin-bottom:14px;

}

.review-logo h1{

  color:#08352f;

  font-size:20px;

  margin-bottom:3px;

}

.review-logo p{

  color:#d4b16a;

  font-size:11px;

  font-weight:700;

}

/* =========================
   HERO
========================= */

.review-hero{

  background:#fff;

  border-radius:22px;

  padding:14px 12px;

  margin-bottom:14px;

  box-shadow:
  0 5px 16px rgba(0,0,0,0.04);

  text-align:center;

}

/* =========================
   BADGE
========================= */

.review-badge{

  display:inline-block;

  background:#0c4d44;

  color:#fff;

  padding:5px 11px;

  border-radius:30px;

  font-size:9px;

  margin-bottom:12px;

}

/* =========================
   TITLES
========================= */

.review-hero h2{

  color:#08352f;

  font-size:17px;

  line-height:1.6;

  margin-bottom:4px;

}

.review-hero h3{

  color:#d4b16a;

  font-size:14px;

  margin-bottom:12px;

}

.review-hero p{

  color:#666;

  font-size:10px;

  line-height:2;

}

/* =========================
   HERO ICON
========================= */

.review-icon{

  width:62px;

  height:62px;

  margin:14px auto 0;

  border-radius:50%;

  background:
  linear-gradient(
  135deg,
  #0c4d44,
  #16a085
  );

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:28px;

  color:#fff;

}

/* =========================
   FEATURES
========================= */

.review-features{

  background:#fff;

  border-radius:20px;

  padding:14px;

  margin-bottom:14px;

}

.review-features h4{

  text-align:center;

  color:#08352f;

  font-size:15px;

  margin-bottom:14px;

}

/* =========================
   FEATURES GRID
========================= */

.features-grid{

  display:grid;

  grid-template-columns:
  repeat(2,1fr);

  gap:10px;

}

/* =========================
   FEATURE CARD
========================= */

.feature-card{

  background:#f8fafc;

  border-radius:16px;

  padding:12px 10px;

  text-align:center;

}

.feature-card .feature-icon{

  width:34px;

  height:34px;

  border-radius:50%;

  background:#fff;

  margin:auto auto 8px;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:16px;

}

.feature-card h5{

  color:#08352f;

  font-size:11px;

  margin-bottom:5px;

}

.feature-card p{

  color:#666;

  font-size:8px;

  line-height:1.9;

}


/* =========================
   REVIEW BOX
========================= */

.review-box{

  background:#fff;

  border-radius:20px;

  padding:14px;

  margin-bottom:14px;

}

.review-box h4{

  color:#08352f;

  font-size:15px;

  margin-bottom:14px;

  text-align:center;

}

/* =========================
   INPUTS
========================= */

.review-box input,
.review-box select,
.review-box textarea{

  width:100%;

  border:1px solid #d9dee5;

  border-radius:12px;

  background:#fff;

  padding:10px;

  font-size:11px;

  margin-bottom:10px;

  outline:none;

}

.review-box input,
.review-box select{

  height:38px;

}

.review-box textarea{

  min-height:80px;

  resize:none;

}

/* =========================
   NOTE
========================= */

.review-note{

  color:#777;

  font-size:9px;

  line-height:1.9;

  text-align:center;

}

/* =========================
   STEPS
========================= */

.steps-box{

  background:#fff;

  border-radius:20px;

  padding:14px;

  margin-bottom:16px;

}

.steps-box h4{

  text-align:center;

  color:#08352f;

  font-size:15px;

  margin-bottom:16px;

}

/* =========================
   STEP
========================= */

.step{

  display:flex;

  gap:10px;

  margin-bottom:14px;

}

.step-number{

  min-width:28px;

  height:28px;

  border-radius:50%;

  background:#d4b16a;

  color:#fff;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:11px;

  font-weight:700;

}

.step h5{

  color:#08352f;

  font-size:11px;

  margin-bottom:4px;

}

.step p{

  color:#666;

  font-size:9px;

  line-height:1.8;

}

/* =========================
   PRICE BOX
========================= */

.price-box{

  background:#fff8ee;

  border:1px solid #f1d49a;

  border-radius:16px;

  padding:12px;

  text-align:center;

  margin-top:10px;

}

.price-box h5{

  color:#c58b16;

  font-size:12px;

  margin-bottom:6px;

}

.price-box p{

  color:#666;

  font-size:9px;

  line-height:1.8;

}

/* =========================
   SEND
========================= */

.review-send{

  background:#fff;

  border-radius:20px;

  padding:16px 14px;

  text-align:center;

  margin-bottom:18px;

}

.review-send h4{

  color:#08352f;

  font-size:18px;

  margin-bottom:8px;

}

.review-send p{

  color:#666;

  font-size:9px;

  line-height:1.9;

  margin-bottom:14px;

}

/* =========================
   BUTTON
========================= */

.review-send button{

  width:100%;

  height:42px;

  border:none;

  border-radius:14px;

  background:
  linear-gradient(
  135deg,
  #16a34a,
  #22c55e
  );

  color:#fff;

  font-size:12px;

  font-weight:700;

  cursor:pointer;

  box-shadow:
  0 6px 16px rgba(34,197,94,0.18);

}