/* ===== Visit Type selector (Request a Viewing form) =====
   Compact single-row segmented control — two pill buttons, icon +
   label only, no default selected (see selectVisitType()/submitViewing()
   in js/11a-viewing-public-core.js). One shared hint line below explains
   both options instead of per-card subtitles, keeping the whole control
   under ~90px tall so it never pushes the rest of the form below the
   fold. An unanswered selector gets a red outline + shake on submit. */
.vr-visit-type-row{ margin-bottom:10px; }
.vr-visit-type-options{
  display:flex;
  gap:8px;
  margin-top:6px;
}
.vr-visit-type-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:11px 8px;
  border:2px solid var(--border-color, #d9dde3);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  color:var(--navy-900, #10182b);
  white-space:nowrap;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.vr-visit-type-btn:active{ transform:scale(0.98); }
.vr-visit-type-btn i{
  font-size:14px;
  color:var(--navy-700, #1f2b47);
}
.vr-visit-type-btn.active{
  border-color:var(--gold-500, #c9a227);
  background:rgba(201,162,39,0.08);
}
.vr-visit-type-btn.active i,
.vr-visit-type-btn.active{
  color:var(--gold-600, #a8841e);
}
.vr-visit-type-hint{
  margin:6px 0 0;
  font-size:11px;
}
.vr-visit-type-row.vr-vt-error .vr-visit-type-btn{
  border-color:#c0392b;
  animation:vrVtShake .35s ease;
}
@keyframes vrVtShake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-4px); }
  75%{ transform:translateX(4px); }
}
@media (max-width:360px){
  .vr-visit-type-btn{ font-size:12px; padding:10px 4px; }
}

/* ===== Request a Viewing — compact responsive form redesign ===== */
#viewingModal .vr-modal{
  width:min(100%, 620px);
  max-width:620px;
  max-height:calc(100dvh - 24px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
#viewingModal .vr-modal-head{
  flex:none;
  padding:14px 18px 11px!important;
}
#viewingModal .vr-modal-head h3{font-size:18px!important;margin:0 0 3px!important;}
#viewingModal .vr-modal-head h3::before{height:17px;width:3px;margin-right:8px;vertical-align:-2px;}
#viewingModal .vr-modal-head p{font-size:11px;margin:0;}
#viewingModal .vr-modal-body{
  padding:12px 18px 16px;
  overflow:visible;
}
#viewingModal .vr-unit-summary{
  margin:0 0 10px;
  padding:9px 11px;
  border-radius:10px;
  line-height:1.3;
}
#viewingModal .vr-unit-summary .u-id{font-size:14px;font-weight:800;}
#viewingModal .vr-unit-summary .u-loc{font-size:10.5px;margin-top:2px;}
#viewingModal .vr-visit-type-row{margin-bottom:10px;}
.vr-section-label{
  display:flex;align-items:center;gap:6px;
  margin:0 0 6px;
  color:var(--form-navy)!important;
  font-size:10.5px;font-weight:800;letter-spacing:.55px;text-transform:uppercase;
}
.vr-section-label span{
  color:var(--form-muted);font-size:9px;font-weight:500;letter-spacing:0;text-transform:none;
}
.vr-visit-type-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;}
.vr-visit-type-option{position:relative;min-width:0;}
.vr-visit-type-btn{
  width:100%;min-height:48px;padding:9px 38px 9px 10px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  border:1.5px solid var(--form-line)!important;border-radius:10px!important;
  background:#fff!important;color:var(--form-navy)!important;
  font-size:12.5px;font-weight:800;white-space:nowrap;
}
.vr-visit-type-btn i{font-size:14px;color:var(--form-navy);}
.vr-visit-type-btn.active{border-color:var(--form-gold-strong)!important;background:#FBF6EE!important;color:var(--form-gold-strong)!important;box-shadow:0 0 0 2px rgba(185,133,66,.08);}
.vr-visit-type-btn.active i{color:var(--form-gold-strong);}
.vr-info-btn{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border:0;background:transparent;color:var(--form-muted);
  border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;
}
.vr-info-btn:hover,.vr-info-btn:focus-visible{color:var(--form-gold-strong);background:var(--form-surface);outline:none;}
.vr-visit-type-info{
  position:absolute;left:8px;right:8px;top:calc(100% + 6px);z-index:20;
  padding:8px 10px;border:1px solid var(--form-line);border-radius:9px;
  background:#fff;color:var(--form-navy);box-shadow:0 10px 24px rgba(20,38,60,.14);
  font-size:10.5px;line-height:1.35;display:none;
}
.vr-visit-type-info.open{display:block;}
.vr-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;}
#viewingModal .vr-field{margin-bottom:9px;min-width:0;}
#viewingModal .vr-field label,#viewingModal .vr-notes-row label{font-size:10px!important;margin-bottom:4px;}
#viewingModal .vr-field input,#viewingModal .vr-field .phone-field-group{min-height:40px;}
#viewingModal .vr-field input{font-size:13px;padding:8px 11px!important;}
#viewingModal .phone-field-group{min-height:40px;}
#viewingModal .phone-field-prefix{font-size:12.5px;padding:0 10px;}
#viewingModal .vr-schedule-grid{margin-top:0;}
#viewingModal .vr-notes-row{margin:0 0 9px;}
#viewingModal .vr-notes-row textarea{min-height:56px;height:56px;padding:8px 11px!important;font-size:12.5px;}
#viewingModal .vr-conflict-warning{font-size:10.5px;margin:-2px 0 8px!important;}
#viewingModal .vr-submit-btn{width:100%;min-height:46px;margin:0;font-size:13px!important;border-radius:10px!important;}
#viewingModal .vr-vt-error .vr-visit-type-btn{border-color:#c0392b!important;}
@media (max-width:640px){
  #viewingModal{padding:8px;align-items:flex-end;}
  #viewingModal .vr-modal{width:100%;max-width:none;max-height:96dvh;border-radius:16px 16px 10px 10px;}
  #viewingModal .vr-modal-body{padding:10px 12px 12px;overflow-y:auto;overscroll-behavior:contain;}
  #viewingModal .vr-modal-head{padding:12px 14px 9px!important;}
  #viewingModal .vr-modal-head h3{font-size:16px!important;}
  .vr-form-grid{grid-template-columns:1fr;gap:0;}
  #viewingModal .vr-field{margin-bottom:8px;}
  .vr-visit-type-btn{min-height:46px;font-size:12px;padding-right:34px;}
  #viewingModal .vr-notes-row textarea{min-height:52px;height:52px;}
}
@media (min-width:641px) and (max-height:760px){
  #viewingModal .vr-modal-body{padding-top:8px;padding-bottom:10px;}
  #viewingModal .vr-unit-summary{margin-bottom:7px;padding:7px 10px;}
  #viewingModal .vr-visit-type-row{margin-bottom:7px;}
  #viewingModal .vr-field{margin-bottom:6px;}
  #viewingModal .vr-notes-row{margin-bottom:7px;}
  #viewingModal .vr-notes-row textarea{min-height:46px;height:46px;}
}

/* ========================================================================
   2026 PREMIUM VIEWING FORM — BrokerHub / Al Asmakh Real Estate
   Final visual layer: compact, editorial, high-clarity, responsive.
   ======================================================================== */
#viewingModal{
  padding:12px;
  align-items:center;
}
#viewingModal .vr-modal{
  width:min(100%, 700px);
  max-width:700px;
  max-height:min(860px, calc(100dvh - 24px));
  overflow:hidden;
  border:1px solid rgba(22,45,76,.10)!important;
  border-radius:22px!important;
  box-shadow:0 30px 90px rgba(12,28,47,.24),0 4px 18px rgba(12,28,47,.08)!important;
}
#viewingModal .vr-modal-head{
  position:relative;
  padding:20px 24px 16px!important;
  border-bottom:0!important;
}
#viewingModal .vr-modal-head:after{
  content:'';
  position:absolute;
  left:24px;right:24px;bottom:0;
  height:1px;background:var(--form-line-soft);
}
#viewingModal .vr-modal-head h3{
  font-size:21px!important;
  line-height:1.15;
  letter-spacing:-.3px;
  margin:0 0 5px!important;
}
#viewingModal .vr-modal-head h3:before{
  width:4px;height:22px;margin-right:9px;
  background:var(--form-gold-strong);
}
#viewingModal .vr-modal-head p{
  margin:0!important;
  padding-left:13px;
  font-size:11.5px;
  line-height:1.4;
}
#viewingModal .modal-close{
  top:17px!important;right:20px!important;
  width:34px!important;height:34px!important;
  border:1px solid var(--form-line)!important;
  border-radius:10px!important;
  background:#fff!important;
}
#viewingModal .vr-modal-body{
  padding:16px 24px 20px;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(22,45,76,.22) transparent;
}
#viewingModal .vr-modal-body::-webkit-scrollbar{width:7px}
#viewingModal .vr-modal-body::-webkit-scrollbar-thumb{background:rgba(22,45,76,.18);border-radius:20px}
#viewingModal .vr-unit-summary{
  margin:0 0 14px!important;
  padding:11px 14px!important;
  border:1px solid var(--form-line-soft);
  border-radius:13px!important;
  background:#fbfaf7!important;
  box-shadow:0 2px 8px rgba(20,38,60,.035);
}
#viewingModal .vr-unit-summary .u-id{font-size:13px;font-weight:800;letter-spacing:.1px}
#viewingModal .vr-unit-summary .u-loc{font-size:10.5px;line-height:1.35;margin-top:2px}
#viewingModal .vr-visit-type-row{
  margin:0 0 15px!important;
  padding:13px;
  border:1px solid var(--form-line-soft);
  border-radius:15px;
  background:#fcfbf9;
}
.vr-section-label{
  margin:0 0 9px!important;
  font-size:10.5px!important;
  letter-spacing:.7px!important;
}
.vr-section-label .vr-step{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:18px;border-radius:6px;
  background:rgba(22,45,76,.07);color:var(--form-navy);
  font-size:9px;font-weight:800;letter-spacing:.3px;
}
.vr-section-label>span:last-child:not(.vr-step){
  padding:3px 7px;border-radius:999px;
  background:rgba(185,133,66,.10);color:var(--form-gold-strong)!important;
}
.vr-visit-type-options{gap:10px!important}
.vr-visit-type-option{min-width:0}
.vr-visit-type-btn{
  min-height:54px!important;
  padding:10px 42px 10px 13px!important;
  justify-content:flex-start!important;
  gap:10px!important;
  border:1px solid var(--form-line)!important;
  border-radius:12px!important;
  background:#fff!important;
  font-size:12.5px!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}
.vr-visit-type-btn:before{
  content:'';
  width:18px;height:18px;flex:0 0 18px;
  border:1.5px solid #b8c0ca;border-radius:50%;
  box-sizing:border-box;
  box-shadow:inset 0 0 0 4px #fff;
}
.vr-visit-type-btn i{font-size:15px!important;width:17px;text-align:center;opacity:.9}
.vr-visit-type-btn:hover{border-color:#aeb8c4!important;box-shadow:0 7px 20px rgba(20,38,60,.07);transform:translateY(-1px)}
.vr-visit-type-btn.active{
  border-color:var(--form-gold-strong)!important;
  background:#fbf6ee!important;
  color:var(--form-navy)!important;
  box-shadow:0 0 0 2px rgba(185,133,66,.09),0 7px 20px rgba(20,38,60,.06)!important;
}
.vr-visit-type-btn.active:before{
  border-color:var(--form-gold-strong);
  background:var(--form-gold-strong);
}
.vr-visit-type-btn.active i{color:var(--form-gold-strong)!important}
.vr-info-btn{
  right:8px!important;
  width:28px!important;height:28px!important;
  color:#8793a2!important;
  border:1px solid transparent!important;
}
.vr-info-btn:hover,.vr-info-btn:focus-visible{
  color:var(--form-navy)!important;
  background:#fff!important;
  border-color:var(--form-line)!important;
}
.vr-visit-type-info{
  left:10px!important;right:10px!important;top:calc(100% + 7px)!important;
  padding:9px 11px!important;
  border:1px solid var(--form-line)!important;
  border-radius:10px!important;
  box-shadow:0 16px 35px rgba(20,38,60,.15)!important;
  font-size:10.5px!important;
}
#viewingModal .vr-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 12px;
}
#viewingModal .vr-field{margin-bottom:11px!important}
#viewingModal .vr-field label,#viewingModal .vr-notes-row label{
  margin-bottom:5px!important;
  font-size:10px!important;
  letter-spacing:.65px!important;
}
#viewingModal .vr-field label b{color:var(--form-gold-strong);font-weight:800}
#viewingModal .vr-field input,
#viewingModal .vr-field .phone-field-group{
  min-height:44px!important;
}
#viewingModal .vr-field input{font-size:13px!important;border-radius:10px!important}
#viewingModal .phone-field-group{border-radius:10px!important}
#viewingModal .phone-field-prefix{
  min-width:57px;justify-content:center;
  background:#f5f6f8!important;
  font-size:12.5px!important;
}
#viewingModal .vr-schedule-grid{margin-top:0!important}
#viewingModal .vr-notes-row{
  margin:1px 0 12px!important;
  padding-top:2px;
}
#viewingModal .vr-notes-row label{display:flex!important;align-items:center;gap:6px;}
#viewingModal .vr-notes-counter{margin-left:auto;font-size:10px!important;letter-spacing:.3px!important;color:var(--form-text-muted,#8a8578);font-weight:600;text-transform:none!important;}
#viewingModal .vr-notes-row textarea{
  min-height:58px!important;height:58px!important;
  resize:vertical;
  border-radius:10px!important;
  font-size:12.5px!important;
}
#viewingModal .vr-conflict-warning{
  margin:-2px 0 9px!important;
  padding:8px 10px;
  border-radius:9px;
  background:#fff5f3;
}
#viewingModal .vr-submit-btn{
  position:relative;
  min-height:48px!important;
  margin:0!important;
  border:1px solid rgba(145,94,28,.22)!important;
  border-radius:12px!important;
  box-shadow:0 8px 20px rgba(145,94,28,.16)!important;
  font-size:13px!important;
  font-weight:800!important;
  letter-spacing:.05px;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
#viewingModal .vr-submit-btn:hover{transform:translateY(-1px);box-shadow:0 11px 24px rgba(145,94,28,.20)!important;filter:saturate(1.03)}
#viewingModal .vr-submit-btn:disabled{
  cursor:not-allowed!important;
  opacity:.48!important;
  filter:none!important;
  transform:none!important;
  box-shadow:none!important;
  background:#e7e9ec!important;
  border-color:#d5d9df!important;
  color:#6f7b89!important;
}
#viewingModal .vr-submit-btn.is-ready{
  opacity:1;
}
#viewingModal .vr-submit-btn i{margin-right:7px}

@media (max-width:720px){
  #viewingModal{padding:8px;align-items:center}
  #viewingModal .vr-modal{width:100%;max-width:620px;max-height:calc(100dvh - 16px);border-radius:18px!important}
  #viewingModal .vr-modal-head{padding:16px 18px 13px!important}
  #viewingModal .vr-modal-head:after{left:18px;right:18px}
  #viewingModal .vr-modal-head h3{font-size:18px!important}
  #viewingModal .vr-modal-head p{font-size:10.5px;padding-left:12px}
  #viewingModal .modal-close{right:14px!important;top:13px!important}
  #viewingModal .vr-modal-body{padding:12px 16px 16px}
  #viewingModal .vr-unit-summary{margin-bottom:10px!important;padding:9px 11px!important}
  #viewingModal .vr-visit-type-row{padding:10px;margin-bottom:11px!important}
  #viewingModal .vr-visit-type-btn{min-height:50px!important;padding-left:10px!important;font-size:11.5px!important;gap:7px!important}
  #viewingModal .vr-visit-type-btn:before{width:16px;height:16px;flex-basis:16px}
  #viewingModal .vr-visit-type-btn i{font-size:13px!important;width:15px}
  #viewingModal .vr-form-grid{grid-template-columns:1fr 1fr;gap:0 9px}
  #viewingModal .vr-field{margin-bottom:8px!important}
  #viewingModal .vr-field input,#viewingModal .vr-field .phone-field-group{min-height:42px!important}
  #viewingModal .vr-notes-row textarea{min-height:52px!important;height:52px!important}
  #viewingModal .vr-submit-btn{min-height:46px!important}
}
@media (max-width:470px){
  #viewingModal .vr-modal-head{padding:14px 14px 11px!important}
  #viewingModal .vr-modal-head:after{left:14px;right:14px}
  #viewingModal .vr-modal-head h3{font-size:17px!important}
  #viewingModal .vr-modal-body{padding:10px 12px 13px}
  #viewingModal .vr-unit-summary{display:none}
  #viewingModal .vr-visit-type-row{padding:9px;margin-bottom:9px!important}
  #viewingModal .vr-section-label{margin-bottom:7px!important}
  #viewingModal .vr-visit-type-options{gap:7px!important}
  #viewingModal .vr-visit-type-btn{min-height:47px!important;padding:8px 35px 8px 8px!important;font-size:10.5px!important}
  #viewingModal .vr-visit-type-btn:before{display:none}
  #viewingModal .vr-visit-type-btn i{font-size:12px!important}
  #viewingModal .vr-info-btn{right:5px!important}
  #viewingModal .vr-form-grid{grid-template-columns:1fr 1fr;gap:0 7px}
  #viewingModal .vr-field label,#viewingModal .vr-notes-row label{font-size:9px!important;margin-bottom:3px!important}
  #viewingModal .vr-field input{font-size:12px!important;padding:7px 9px!important}
  #viewingModal .phone-field-prefix{min-width:49px;padding:0 7px;font-size:11px!important}
  #viewingModal .vr-field input,#viewingModal .vr-field .phone-field-group{min-height:39px!important}
  #viewingModal .vr-notes-row{margin-bottom:9px!important}
  #viewingModal .vr-notes-row textarea{min-height:48px!important;height:48px!important;font-size:11.5px!important;padding:7px 9px!important}
  #viewingModal .vr-submit-btn{min-height:43px!important;font-size:12px!important}
}
@media (max-width:350px){
  #viewingModal .vr-visit-type-btn span{overflow:hidden;text-overflow:ellipsis}
  #viewingModal .vr-form-grid{grid-template-columns:1fr}
  #viewingModal .vr-schedule-grid{grid-template-columns:1fr 1fr}
}

/* ===== Final interaction layer: single-choice Visit Type ===== */
#viewingModal .vr-visit-type-btn{
  position:relative;
  cursor:pointer;
  user-select:none;
}
#viewingModal .vr-visit-type-btn input[type="radio"]{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}
#viewingModal .vr-checkbox-mark{
  width:19px;height:19px;flex:0 0 19px;
  border:1.7px solid #aeb8c4;
  border-radius:5px;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all .16s ease;
}
#viewingModal .vr-visit-type-btn.active .vr-checkbox-mark{
  border-color:var(--form-gold-strong);
  background:var(--form-gold-strong);
  box-shadow:0 0 0 2px rgba(185,133,66,.10);
}
#viewingModal .vr-visit-type-btn.active .vr-checkbox-mark:after{
  content:'✓';
  color:#fff;
  font-size:12px;
  line-height:1;
  font-weight:900;
}
#viewingModal .vr-visit-type-btn:focus-within{
  outline:3px solid rgba(185,133,66,.16);
  outline-offset:2px;
}
#viewingModal .vr-save-data{
  display:flex;
  align-items:center;
  gap:9px;
  margin:1px 0 12px;
  padding:9px 11px;
  border:1px solid var(--form-line-soft);
  border-radius:11px;
  background:#faf9f6;
  cursor:pointer;
  user-select:none;
}
#viewingModal .vr-save-data input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
#viewingModal .vr-save-check{
  width:18px;height:18px;flex:0 0 18px;
  border:1.6px solid #aeb8c4;
  border-radius:5px;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#viewingModal .vr-save-data input:checked + .vr-save-check{
  background:var(--form-navy);
  border-color:var(--form-navy);
}
#viewingModal .vr-save-data input:checked + .vr-save-check:after{
  content:'✓';color:#fff;font-size:11px;font-weight:900;
}
#viewingModal .vr-save-data input:focus-visible + .vr-save-check{
  outline:3px solid rgba(185,133,66,.18);
  outline-offset:2px;
}
#viewingModal .vr-save-data strong{
  display:block;
  color:var(--form-navy);
  font-size:10.5px;
  line-height:1.25;
}
#viewingModal .vr-save-data small{
  display:block;
  color:var(--form-muted);
  font-size:9.5px;
  line-height:1.25;
  margin-top:2px;
}
@media (max-width:470px){
  #viewingModal .vr-checkbox-mark{width:17px;height:17px;flex-basis:17px;border-radius:4px}
  #viewingModal .vr-save-data{margin-bottom:9px;padding:8px 9px}
  #viewingModal .vr-save-data strong{font-size:9.5px}
  #viewingModal .vr-save-data small{font-size:8.5px}
}

/* ===== Visit Purpose — match the simple "Save broker details" pattern ===== */
#viewingModal .vr-visit-type-options{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:0!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--form-line-soft)!important;
  border-radius:11px!important;
  background:#faf9f6!important;
  overflow:hidden!important;
}
#viewingModal .vr-visit-type-option{
  position:relative;
  min-width:0;
  display:flex;
  align-items:center;
  padding:0!important;
  background:transparent!important;
}
#viewingModal .vr-visit-type-option + .vr-visit-type-option{
  border-left:1px solid var(--form-line-soft)!important;
}
#viewingModal .vr-visit-type-btn,
#viewingModal .vr-visit-type-btn.active{
  width:100%!important;
  min-height:58px!important;
  padding:9px 42px 9px 12px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:none!important;
  transform:none!important;
  justify-content:flex-start!important;
  gap:9px!important;
  color:var(--form-navy)!important;
  font-size:11.5px!important;
  font-weight:800!important;
  text-transform:none!important;
  white-space:nowrap!important;
}
#viewingModal .vr-visit-type-btn:hover,
#viewingModal .vr-visit-type-btn:active,
#viewingModal .vr-visit-type-btn.active:hover{
  background:rgba(20,38,60,.025)!important;
  transform:none!important;
}
#viewingModal .vr-visit-type-btn i,
#viewingModal .vr-visit-type-btn.active i{
  color:var(--form-navy)!important;
  font-size:14px!important;
  flex:0 0 auto;
}
#viewingModal .vr-visit-type-btn .vr-checkbox-mark{
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  border:1.6px solid #aeb8c4!important;
  border-radius:5px!important;
  background:#fff!important;
  box-shadow:none!important;
}
#viewingModal .vr-visit-type-btn.active .vr-checkbox-mark{
  background:var(--form-navy)!important;
  border-color:var(--form-navy)!important;
  box-shadow:none!important;
}
#viewingModal .vr-visit-type-btn.active .vr-checkbox-mark:after{
  content:'✓'!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:900!important;
}
#viewingModal .vr-visit-type-btn:focus-within{
  outline:2px solid rgba(185,133,66,.18)!important;
  outline-offset:-2px!important;
}
#viewingModal .vr-info-btn{
  right:9px!important;
  width:24px!important;
  height:24px!important;
  color:var(--form-muted)!important;
}
#viewingModal .vr-info-btn:hover,
#viewingModal .vr-info-btn:focus-visible{
  color:var(--form-gold-strong)!important;
  background:transparent!important;
}
#viewingModal .vr-visit-type-info{
  left:10px!important;
  right:10px!important;
  top:calc(100% + 5px)!important;
}
@media (max-width:520px){
  #viewingModal .vr-visit-type-options{grid-template-columns:1fr!important;}
  #viewingModal .vr-visit-type-option + .vr-visit-type-option{
    border-left:0!important;
    border-top:1px solid var(--form-line-soft)!important;
  }
}
@media (max-width:360px){
  #viewingModal .vr-visit-type-btn{
    min-height:52px!important;
    padding:8px 38px 8px 10px!important;
    font-size:11px!important;
  }
}

/* ========================================================================
   COMPACT NO-SCROLL LAYOUT (final pass)
   ---------------------------------------------------------------------
   Goal: fit the whole "Request a Viewing" form inside the modal's own
   max-height with no internal scrolling on ordinary desktop/laptop
   viewports. Everything above this block still defines structure/behavior
   (colors, states, responsive breakpoints); this block only tightens the
   vertical rhythm — padding, margins, min-heights — and removes chrome
   that duplicated information shown elsewhere (the progress dots removed
   from index.html duplicated these same numbered section labels; the
   "Choose one" / "Who's asking" / "Pick date & time" sub-labels removed
   from index.html were decorative, not instructional). Loaded last, so
   these rules win the cascade over the earlier layers in this same file
   without needing higher specificity. */
#viewingModal .vr-modal-head{ padding:14px 22px 12px!important; }
#viewingModal .vr-modal-head h3{ font-size:18px!important; margin:0!important; }
#viewingModal .vr-modal-head h3:before{ height:18px!important; }
#viewingModal .vr-modal-body{ padding:12px 22px 16px!important; }
#viewingModal .vr-unit-summary{ margin:0 0 9px!important; padding:8px 12px!important; }
#viewingModal .vr-visit-type-row{ padding:8px!important; margin:0 0 9px!important; }
#viewingModal .vr-section-label{ margin:0 0 5px!important; }
#viewingModal .vr-visit-type-options{ gap:6px!important; }
#viewingModal .vr-visit-type-btn,
#viewingModal .vr-visit-type-btn.active{ min-height:40px!important; padding:7px 36px 7px 10px!important; }
#viewingModal .vr-form-grid{ gap:0 10px!important; }
#viewingModal .vr-field{ margin-bottom:7px!important; }
#viewingModal .vr-field label,
#viewingModal .vr-notes-row label{ margin-bottom:3px!important; }
#viewingModal .vr-field input,
#viewingModal .vr-field .phone-field-group{ min-height:38px!important; }
#viewingModal .vr-save-data{ margin:0 0 8px!important; padding:6px 10px!important; }
#viewingModal .vr-notes-row{ margin:0 0 8px!important; padding-top:0!important; }
#viewingModal .vr-notes-row textarea{ min-height:34px!important; height:34px!important; padding:6px 10px!important; }
#viewingModal .vr-submit-btn{ min-height:42px!important; }
#viewingModal .vr-modal{ max-height:min(600px, calc(100dvh - 16px))!important; }
#viewingModal .vr-conflict-warning{ margin:-2px 0 6px!important; padding:6px 8px!important; }
#viewingModal .vr-info-btn{ width:20px!important; height:20px!important; right:6px!important; }
@media (max-width:720px){
  #viewingModal .vr-modal{ max-height:calc(100dvh - 10px)!important; }
  #viewingModal .vr-modal-head{ padding:11px 16px 8px!important; }
  #viewingModal .vr-modal-body{ padding:8px 16px 12px!important; }
  #viewingModal .vr-unit-summary{ margin-bottom:7px!important; padding:7px 10px!important; }
  #viewingModal .vr-visit-type-row{ padding:7px!important; margin-bottom:7px!important; }
  #viewingModal .vr-visit-type-btn{ min-height:38px!important; padding:6px 30px 6px 8px!important; }
  #viewingModal .vr-field{ margin-bottom:6px!important; }
  #viewingModal .vr-field input,#viewingModal .vr-field .phone-field-group{ min-height:34px!important; }
  #viewingModal .vr-notes-row{ margin-bottom:6px!important; }
  #viewingModal .vr-notes-row textarea{ min-height:32px!important; height:32px!important; }
  #viewingModal .vr-submit-btn{ min-height:38px!important; }
}

/* ========================================================================
   INLINE FIELD VALIDATION HINTS
   ---------------------------------------------------------------------
   #req*Hint elements (index.html) sit right under each required field
   and are toggled by updateViewingFieldHints() in
   js/11a-viewing-public-core.js. Hidden/zero-height by default so a
   clean form keeps the compact layout above; only takes up space once a
   field is actually touched and invalid. */
#viewingModal .vr-field-hint{
  display:none;
  margin-top:3px;
  font-size:10px;
  line-height:1.3;
  color:#c0392b;
}
#viewingModal .vr-field-hint.show{ display:block; }
#viewingModal .vr-field input.vr-field-invalid,
#viewingModal .vr-field .phone-field-group.vr-field-invalid{
  border-color:#c0392b!important;
}
#viewingModal .vr-field .phone-field-group.vr-field-invalid:focus-within{
  box-shadow:0 0 0 3px rgba(192,57,43,.12)!important;
}

/* ========================================================================
   VISIT PURPOSE — final compact/static pass (2026-09-15)
   ---------------------------------------------------------------------
   Requested: shrink the block further, strip every hover / transform /
   transition / animation from it, and give the two options one
   consistent, balanced 2-column layout that scales smoothly with
   clamp() instead of jumping between different shapes at each
   breakpoint. Loaded last, so this wins the cascade over every earlier
   rule in this file (including the other media queries above) for
   equal-specificity selectors.
   ======================================================================== */

/* --- Smaller outer block --- */
#viewingModal .vr-visit-type-row{
  padding:clamp(6px,1.6vw,8px)!important;
  margin:0 0 clamp(7px,1.8vw,9px)!important;
}
#viewingModal .vr-visit-type-row .vr-section-label{
  margin:0 0 clamp(4px,1.2vw,5px)!important;
}

/* --- One consistent 2-column grid at every screen size --- */
#viewingModal .vr-visit-type-options{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:0!important;
}
#viewingModal .vr-visit-type-option{
  border-left:0!important;
  border-top:0!important;
}
#viewingModal .vr-visit-type-option + .vr-visit-type-option{
  border-left:1px solid var(--form-line-soft)!important;
  border-top:0!important;
}

/* --- Smaller, static buttons (no transition/transform/shadow/animation) --- */
#viewingModal .vr-visit-type-btn,
#viewingModal .vr-visit-type-btn.active{
  min-height:clamp(32px,10vw,38px)!important;
  height:auto!important;
  padding:clamp(6px,1.8vw,8px) clamp(24px,6vw,32px) clamp(6px,1.8vw,8px) clamp(7px,2vw,10px)!important;
  gap:clamp(5px,1.6vw,7px)!important;
  font-size:clamp(10px,2.6vw,11px)!important;
  line-height:1.15!important;
  white-space:normal!important;
  transition:none!important;
  animation:none!important;
  transform:none!important;
  box-shadow:none!important;
}
#viewingModal .vr-visit-type-btn span{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
#viewingModal .vr-visit-type-btn i{
  font-size:clamp(11.5px,3vw,13px)!important;
  transition:none!important;
}
#viewingModal .vr-checkbox-mark{
  width:clamp(14px,3.6vw,16px)!important;
  height:clamp(14px,3.6vw,16px)!important;
  flex:0 0 clamp(14px,3.6vw,16px)!important;
  transition:none!important;
}

/* Kill every hover / active / focus motion on this control — flat
   color-only active state, nothing that moves, glows or animates. */
#viewingModal .vr-visit-type-btn:hover,
#viewingModal .vr-visit-type-btn:focus,
#viewingModal .vr-visit-type-btn:active,
#viewingModal .vr-visit-type-btn.active:hover,
#viewingModal .vr-visit-type-btn.active:active{
  transform:none!important;
  box-shadow:none!important;
  background:transparent!important;
}
#viewingModal .vr-visit-type-btn.active,
#viewingModal .vr-visit-type-btn.active:hover{
  background:#fbf6ee!important;
}
#viewingModal .vr-visit-type-btn:focus-within{
  transition:none!important;
  outline:2px solid rgba(185,133,66,.18)!important;
  outline-offset:-2px!important;
}
#viewingModal .vr-info-btn{
  width:18px!important;
  height:18px!important;
  right:5px!important;
  transition:none!important;
}
#viewingModal .vr-info-btn:hover,
#viewingModal .vr-info-btn:focus-visible{
  transform:none!important;
  background:transparent!important;
}
#viewingModal .vr-visit-type-row.vr-vt-error .vr-visit-type-btn{
  animation:none!important;
}

@media (max-width:360px){
  #viewingModal .vr-visit-type-options{ grid-template-columns:1fr 1fr!important; }
  #viewingModal .vr-visit-type-option + .vr-visit-type-option{
    border-left:1px solid var(--form-line-soft)!important;
    border-top:0!important;
  }
  #viewingModal .vr-visit-type-btn{ padding-right:20px!important; font-size:9.5px!important; }
  #viewingModal .vr-info-btn{ width:15px!important; height:15px!important; right:3px!important; }
  #viewingModal .vr-info-btn i{ font-size:9px!important; }
}

/* ========================================================================
   REMAINING-FIELDS COUNTER — small live readout under Send Request
   ---------------------------------------------------------------------
   #vrRemainingFields (index.html) is filled/toggled by
   updateViewingRemainingCount() in js/11a-viewing-public-core.js, which
   runs off the exact same required-field set the submit button itself
   gates on. Muted single line while fields are missing; switches to a
   gold checkmark line once the form is complete. No hover state — it's
   not interactive.
   ======================================================================== */
#viewingModal .vr-remaining{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin:8px 0 0;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.15px;
  color:var(--form-muted);
  text-align:center;
}
#viewingModal .vr-remaining i{ font-size:10px; }
#viewingModal .vr-remaining.vr-remaining-done{
  color:var(--form-gold-strong);
  font-weight:800;
}
@media (max-width:470px){
  #viewingModal .vr-remaining{ margin-top:7px; font-size:10px; }
}