/* ==========================================================================
   Luft Conditioning — "Book a Service Slot" widget styles
   Uses the same CSS variables defined in assets/css/style.css (:root)
   so it auto-matches the site's colors, fonts & radius.
   ========================================================================== */

.tool-section--tight{ padding:80px 0;background: #3498db}

/* ---------------- Card shell: dark side panel + form panel ---------------- */
.bk-card{
  display:flex;
  align-items:stretch;
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:0 12px 34px rgba(16,51,86,.14);
}

/* ---------------- Left brand/visual panel ---------------- */
.bk-side{
  flex:0 0 36%;
  background:linear-gradient(155deg, var(--color-primary), #0a2338);
  color:#fff;
  padding:32px 28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.bk-side-icon{ font-size:2.1rem; margin-bottom:14px; color:#fff; opacity:.92; }
.bk-side h3{ color:#fff; font-family:var(--font-display); font-size:1.45rem; font-weight:700; margin-bottom:10px; line-height:1.25; }
.bk-side p{ color:rgba(255,255,255,.82); font-size:.88rem; margin-bottom:20px; }
.bk-side-trust div{
  font-size:.82rem; color:rgba(255,255,255,.92);
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.bk-side-trust i{ width:16px; text-align:center; opacity:.9; }

/* ---------------- Right form panel ---------------- */
.bk-form-wrap{ flex:1; padding:26px 30px;}

.bk-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 16px;
}
.bk-field{ display:flex; flex-direction:column; }
.bk-field--full{ grid-column:1 / -1; }

.bk-field label{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.78rem;
  color:var(--color-ink);
  margin-bottom:4px;
}
.bk-field .form-control,
.bk-field .form-select{
  border:1.5px solid var(--color-line);
  border-radius:var(--radius-sm);
  padding:8px 12px;
  font-size:.88rem;
  font-family:var(--font-body);
}
.bk-field .form-control:focus,
.bk-field .form-select:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(16,51,86,.12);
  outline:none;
}

/* ---------------- Time-slot pills ---------------- */
.slot-grid{ display:flex; gap:8px; flex-wrap:wrap; }
.slot-grid input{ display:none; }
.slot-grid label{
  display:flex; align-items:center; gap:6px;
  padding:7px 14px; margin:0;
  border:1.5px solid var(--color-line);
  border-radius:20px;
  font-size:.8rem;
  cursor:pointer;
  transition:.2s ease;
}
.slot-grid label:hover{ border-color:var(--color-primary); }
.slot-grid input:checked + label{
  background:var(--color-primary);
  color:#fff;
  border-color:var(--color-primary);
}

/* ---------------- Submit button ---------------- */
.bk-submit{
  margin-top:4px;
  justify-content:center;
  padding:11px 0;
  font-size:.92rem;
  border-radius:var(--radius-sm);
}

/* ---------------- Result / confirmation box ---------------- */
.bk-result{
  margin-top:14px;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  background:var(--color-bg);
  border:1px dashed var(--color-line);
  display:none;
}
.bk-result.is-visible{ display:block; background: #dfffe5;}
.bk-result.is-visible p{color: #000;font-size: 14px;font-weight: 600;}

.btn-brand2 {
    background: #4ba75c;
    color: #fff;
    border: none;
    padding: 12px 12px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: background .2s ease, transform .2s ease;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}


/* ---------------- Responsive ---------------- */
@media (max-width:767px){
  .bk-card{ flex-direction:column; }
  .bk-side{ flex:none; width:100%; padding:24px; }
  .bk-form-wrap{ padding:22px; }
  .bk-grid{ grid-template-columns:1fr; gap:10px; }
}