/*! Dubai Home Fix — shared form & panel components
 *  Panels, form controls and sidebar cards are used by the booking flow,
 *  the contact page and any future template, so they load site-wide rather
 *  than living inside booking.css.
 */
/* =========================================================
   7. BOOKING BODY LAYOUT
   ========================================================= */
.booking{background:var(--white);padding:44px 0 var(--sec-y);}
.booking-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--grid-gap);align-items:start;}

.panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-xs);padding:34px 34px 38px;
}
.panel-head{margin-bottom:26px;}
.panel-head h2{font-size:22px;margin-bottom:6px;}
.panel-head p{font-size:14.5px;color:var(--muted);}

/* ---- Step actions ---- */
.step-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:32px;}
.step-actions.is-center{justify-content:center;}

/* =========================================================
   9. FORM CONTROLS  (steps 1 & 2)
   ========================================================= */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;}
.field{display:flex;flex-direction:column;}
.field.is-full{grid-column:1/-1;}
.field label{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.field label .req{color:var(--red);margin-left:2px;}
.field label .opt{color:var(--muted);font-weight:600;}
.control{position:relative;display:flex;align-items:center;}
.control > .lead-ic{
  position:absolute;left:16px;width:18px;height:18px;color:var(--muted);pointer-events:none;
}
.control > .trail-ic{
  position:absolute;right:16px;width:18px;height:18px;color:var(--muted);pointer-events:none;
}
.input,.select,.textarea{
  width:100%;font:inherit;font-size:14.5px;font-weight:500;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r);
  height:56px;padding:0 18px;transition:border-color var(--t),box-shadow var(--t);
}
.control .lead-ic ~ .input,.control .lead-ic ~ .select{padding-left:46px;}
.control .trail-ic ~ .input{padding-right:46px;}
.select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,#667085 50%),linear-gradient(135deg,#667085 50%,transparent 50%);
  background-position:calc(100% - 21px) 25px,calc(100% - 16px) 25px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.input::placeholder{color:#98A2B3;}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(22,104,227,.12);}
.input.has-error,.select.has-error{border-color:var(--red);box-shadow:0 0 0 4px rgba(220,38,38,.10);}

/* Phone group: country code + number */
.phone-group{display:flex;gap:10px;}
.phone-code{position:relative;flex:none;width:118px;}
.phone-code .select{padding-left:44px;font-weight:600;}
.phone-code .lead-ic{left:14px;}
.phone-group .control{flex:1;}

/* Info callout */
.note{
  display:flex;gap:12px;background:var(--tint);border-radius:var(--r);
  padding:18px 20px;margin-top:26px;
}
.note svg{width:18px;height:18px;color:var(--blue);margin-top:3px;}
.note b{display:block;font-size:14px;font-weight:800;color:var(--blue);margin-bottom:4px;}
.note p{font-size:13.5px;line-height:1.6;color:var(--body);}

/* =========================================================
   12. SIDEBAR
   ========================================================= */
.sidebar{position:sticky;top:104px;display:grid;gap:24px;}
.side-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-xs);padding:26px 26px 24px;
}
.side-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;}
.side-head h2{font-size:19px;}
.side-edit{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--blue);}
.side-edit svg{width:15px;height:15px;}

.sum-service{display:flex;align-items:center;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--line-soft);}
.sum-service img{width:88px;height:74px;object-fit:cover;object-position:center;border-radius:12px;background:var(--tint-2);}
.sum-service b{display:block;font-size:15px;font-weight:800;color:var(--ink);line-height:1.35;margin-bottom:6px;}
.sum-service button{font-size:13.5px;font-weight:700;color:var(--blue);}
.sum-service button:hover{text-decoration:underline;}

.sum-list li{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 0;border-bottom:1px solid var(--line-soft);
}
.sum-list li:last-child{border-bottom:0;padding-bottom:4px;}
.sum-key{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--body);}
.sum-key svg{width:17px;height:17px;color:var(--blue);}
.sum-val{font-size:13.5px;font-weight:700;color:var(--muted);text-align:right;}
.sum-val.is-set{color:var(--ink);}

.secure-card{background:var(--tint);border-radius:var(--r);padding:22px;display:flex;gap:14px;}
.secure-card > svg{width:30px;height:30px;color:var(--blue);flex:none;}
.secure-card b{display:block;font-size:15px;font-weight:800;color:var(--ink);margin-bottom:5px;}
.secure-card p{font-size:13px;line-height:1.6;color:var(--body);}

.help-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-xs);padding:26px;}
.help-card h2{font-size:18px;margin-bottom:8px;}
.help-card p{font-size:13.5px;line-height:1.6;color:var(--muted);margin-bottom:16px;}
.help-line{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--blue);margin-bottom:10px;}
.help-line:last-child{margin-bottom:0;}
.help-line svg{width:17px;height:17px;color:var(--blue);}
.help-line.is-muted{color:var(--body);font-weight:500;}

/* Peace of mind card (step 4) */
.pom-card{
  background:linear-gradient(150deg,var(--blue) 0%,var(--blue-deep) 100%);
  border-radius:var(--r-md);padding:30px 28px;color:#fff;position:relative;overflow:hidden;
  box-shadow:var(--sh-md);
}
.pom-card h2{font-size:19px;color:#fff;margin-bottom:20px;}
.pom-card li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;margin-bottom:13px;}
.pom-card li:last-child{margin-bottom:0;}
.pom-card li svg{width:16px;height:16px;stroke-width:3;}
.pom-shield{position:absolute;right:18px;top:50%;transform:translateY(-50%);opacity:.22;}
.pom-shield svg{width:120px;height:120px;stroke-width:1.2;}



/* =========================================================
   CONTACT PAGE ADJUSTMENTS
   ========================================================= */
.contact-layout .panel{padding:36px 34px 40px;}
.contact-layout .form-grid{gap:22px 24px;}
.contact-layout .textarea{min-height:170px;}
.contact-layout .step-actions{margin-top:28px;}

/* A textarea needs its own height rules — the shared .input sets a fixed one. */
.textarea{
  width:100%;font:inherit;font-size:14.5px;font-weight:500;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r);
  height:auto;min-height:150px;padding:16px 18px;line-height:1.7;resize:vertical;
  transition:border-color var(--t),box-shadow var(--t);
}
.textarea::placeholder{color:#98A2B3;}
.textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(22,104,227,.12);}

@media (max-width:768px){
  .contact-layout .panel{padding:26px 20px 30px;}
}