/* Student booking wizard — IN Budapest brand */
body.page-book{ background:#F6F6F6; }
body.page-book .menu{ margin-bottom:36px; }        /* anchor the steps bar to the nav */
.bk-wrap{ max-width:1180px; margin:0 auto 90px; padding:0 20px; }
.bk-h{ color:#49B948; }

/* main.css forces `border-radius:0 !important` on all form controls — restore rounding for the wizard */
.bk-wrap .bk-input, .bk-wrap textarea.bk-input{ border-radius:10px !important; }
.bk-wrap .bk-btn{ border-radius:100px !important; }
.bk-wrap .bk-book-btn{ border-radius:100px !important; }
.bk-wrap .bk1-continue{ border-radius:10px !important; }
.bk-wrap .bk1-select{ border-radius:10px !important; }
.bk-wrap .bk1 .bk-opt input{ border-radius:50% !important; }
/* ...but NOT the underline fields in step 3 — those are flat by design, and a
   10px radius on the date/citizenship inputs left a stray curve on the edges */
.bk-wrap input[type=date]:not(.bk-f-input), .bk-wrap select:not(.bk-f-input),
.bk-wrap .bk-select{ border-radius:10px !important; }
.bk-wrap .bk-f-input{ border-radius:0 !important; }
.bk-wrap .bk-dd-toggle{ border-radius:10px !important; }
.bk-wrap .bk-book-btn2{ border-radius:100px !important; }

/* ---- Step 1: two-column (Figma 3522:3383) ---- */
.bk1{ display:flex; gap:96px; align-items:flex-start; justify-content:center; }
.bk1-left{ width:466px; max-width:100%; display:flex; flex-direction:column; gap:52px; }
.bk1-group{ display:flex; flex-direction:column; gap:22px; }   /* heading+note tight to its control */
.bk1-sec{ display:flex; flex-direction:column; gap:18px; }
.bk1-h{ font-size:26px; font-weight:600; color:#282828; margin:0; }
.bk1-note{ font-size:16px; color:rgba(40,40,40,.8); margin:0; line-height:1.55; }
.bk1-opts{ display:flex; flex-direction:column; gap:16px; }
.bk1 .bk-opt{ background:#fff; border:1.5px solid #EAEAEA; border-radius:10px; margin:0;
  padding:15px 22px; gap:14px; font-size:16px; color:#282828; box-shadow:none;
  justify-content:flex-start; transition:border-color .15s, background-color .15s; }
.bk1 .bk-opt:hover{ border-color:#BEE3BD; background:#FBFDFB; }
.bk1 .bk-opt.sel{ border-color:#49B948; background:#F2FAF2; }
.bk1 .bk-opt input{ -webkit-appearance:none; appearance:none; width:20px; height:20px; margin:0;
  border:1.5px solid #CBCBCB; border-radius:50%; flex-shrink:0; position:relative; cursor:pointer; transition:border-color .15s; }
.bk1 .bk-opt input:checked{ border-color:#49B948; }
.bk1 .bk-opt input:checked::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:#49B948; }
.bk1-select{ width:100%; background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="9" viewBox="0 0 14 9" fill="none"><path d="M1 1l6 6 6-6" stroke="%23282828" stroke-width="2"/></svg>') no-repeat right 22px center;
  -webkit-appearance:none; appearance:none; border:1.5px solid #EAEAEA; border-radius:10px;
  padding:15px 22px; font-size:16px; color:#282828; box-shadow:none; cursor:pointer; transition:border-color .15s; }
.bk1-select:hover{ border-color:#D6D6D6; }
.bk1-select:focus{ outline:none; border-color:#49B948; }
.bk1-continue{ background:#49B948; color:#fff; border:none; border-radius:10px; width:240px;
  padding:14px 10px; font-size:16px; font-weight:500; cursor:pointer; margin-top:2px; transition:background .15s; }
.bk1-continue:hover{ background:#3A9438; }
/* custom "number of guests" dropdown — matches the date selections */
.bk-dd{ position:relative; }
.bk-dd-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1.5px solid #EAEAEA; border-radius:10px; padding:15px 22px;
  font-size:16px; color:#282828; cursor:pointer; text-align:left; font-family:inherit; transition:border-color .15s; }
.bk-dd-toggle:hover{ border-color:#D6D6D6; }
.bk-dd.open .bk-dd-toggle{ border-color:#49B948; }
.bk-dd-label.bk-dd-empty{ color:#8A8A8A; }
.bk-dd-caret{ width:14px; height:9px; flex-shrink:0; margin-left:12px; transition:transform .15s;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="9" viewBox="0 0 14 9" fill="none"><path d="M1 1l6 6 6-6" stroke="%23282828" stroke-width="2"/></svg>') no-repeat center / contain; }
.bk-dd.open .bk-dd-caret{ transform:rotate(180deg); }
.bk-dd-menu{ position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:60;
  background:#fff; border:1.5px solid #EAEAEA; border-radius:10px; padding:8px;
  box-shadow:0 14px 36px rgba(0,0,0,.12); display:none; }
.bk-dd.open .bk-dd-menu{ display:block; }
.bk-dd-opt{ display:flex; align-items:center; gap:14px; padding:13px 16px; border-radius:8px;
  font-size:16px; color:#282828; cursor:pointer; transition:background-color .12s; }
.bk-dd-opt:hover{ background:#FBFDFB; }
.bk-dd-opt.sel{ background:#F2FAF2; }
.bk-dd-radio{ width:20px; height:20px; border:1.5px solid #CBCBCB; border-radius:50%; flex-shrink:0; position:relative; }
.bk-dd-opt.sel .bk-dd-radio{ border-color:#49B948; }
.bk-dd-opt.sel .bk-dd-radio::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:#49B948; }

.bk1-right{ width:564px; max-width:100%; flex-shrink:0; }
.bk1-right img{ width:100%; height:393px; object-fit:cover; border-radius:16px; display:block; }
@media (max-width:980px){
  .bk1{ flex-direction:column-reverse; gap:32px; }
  .bk1-left,.bk1-right{ width:100%; }
  .bk1-right img{ height:240px; }
}

/* progress steps (Figma 3522:3400) */
.bk-steps{ display:flex; justify-content:space-between; gap:16px; margin-bottom:64px; }
.bk-step{
  flex:1 1 0; max-width:270px; text-align:center; white-space:nowrap;
  border:1px solid #A6A6A6; border-radius:60px; background:#F6F6F6;
  padding:15px 20px; font-size:14px; color:#282828; font-weight:400;
}
.bk-step.active{ background:#282828; color:#fff; border-color:#282828; }
@media (max-width:760px){
  .bk-steps{ flex-wrap:wrap; }
  .bk-step{ flex:1 1 calc(50% - 8px); max-width:none; white-space:normal; }
}

/* layout */
.bk-panel{ display:none; }
.bk-panel.active{ display:block; }
.bk-layout{ display:flex; gap:30px; align-items:flex-start; }
.bk-main{ flex:1; min-width:0; }
.bk-side{ width:360px; flex-shrink:0; }
@media (max-width:900px){ .bk-layout{ flex-direction:column; } .bk-side{ width:100%; } }

.bk-card{ background:#fff; border:1px solid #ECECEC; border-radius:16px; padding:30px; box-shadow:0 1px 5px rgba(0,0,0,.04); margin-bottom:24px; }
/* 6px here was starving every card heading of breathing room — and it beat
   .bk3-h's own margin on specificity, so the step-3 headings sat on top of
   their first row of fields. */
.bk-card h3{ font-size:24px; font-weight:600; color:#282828; margin-bottom:26px; }
/* a heading immediately followed by explanatory text keeps them as a pair */
.bk-card h3 + .bk-note{ margin-top:-14px; }
.bk-note{ color:rgba(40,40,40,.7); font-size:15px; margin-bottom:24px; line-height:1.55; }
.bk-label{ font-weight:600; color:#282828; margin:22px 0 14px; font-size:18px; }

/* period radio cards */
.bk-opt{ display:flex; align-items:center; gap:14px; border:1px solid #E4E3E3; border-radius:12px;
  padding:18px 22px; margin-bottom:14px; cursor:pointer; transition:.15s; font-size:17px; color:#282828; }
.bk-opt:hover{ border-color:#49B948; }
.bk-opt.sel{ border-color:#49B948; box-shadow:0 0 0 2px rgba(73,185,72,.18); }
.bk-opt input{ accent-color:#49B948; width:18px; height:18px; }
.bk-opt .sub{ color:#575558; font-size:14px; }

.bk-select{ width:100%; max-width:420px; padding:15px 18px; border:1px solid #E4E3E3; border-radius:12px; font-size:16px; background:#fff; }

/* Step 2 — apartment cards grouped by section (Figma 2672:6099/6180/6259) */
.bk-step2-head{ display:flex; flex-direction:column; gap:8px; margin-bottom:26px; }
.bk-sec-h{ font-size:20px; font-weight:600; color:#282828; margin:34px 0 20px; }
#types > .bk-sec-h:first-child{ margin-top:0; }
.bk-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .bk-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .bk-grid{ grid-template-columns:1fr; } }

/* Step 2 cards reuse the site's .apartment-type-card design, in a responsive grid */
.bk-typewrap{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:30px; align-items:start; }
.bk-typewrap .apartment-type-card{ width:100%; float:none; }
.bk-ac{ background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 1px 5px rgba(0,0,0,.06); display:flex; flex-direction:column; }
.bk-ac-img{ position:relative; aspect-ratio:360/247; width:100%; background:#EFEFEF; }
.bk-ac-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.bk-ac-body{ display:flex; justify-content:space-between; gap:12px; padding:18px 20px 24px; }
.bk-ac-info{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.bk-ac-title{ font-size:16px; color:#111; letter-spacing:-0.32px; line-height:1.3; min-height:2.6em; }
.bk-ac-rows{ display:flex; flex-direction:column; gap:8px; }
.bk-ac-row{ display:flex; align-items:center; gap:7px; color:#575558; font-size:12px; letter-spacing:-0.24px; }
.bk-ac-row svg{ flex-shrink:0; }
.bk-ac-side{ display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; flex-shrink:0; }
.bk-ac-i{ background:none; border:none; cursor:pointer; padding:2px; line-height:0; opacity:.7; }
.bk-ac-i:hover{ opacity:1; }
.bk-book-btn2{ background:transparent; border:1.5px solid #49B948; color:#49B948; border-radius:100px;
  padding:9px 20px; font-size:12px; font-weight:500; cursor:pointer; white-space:nowrap; transition:.15s; }
.bk-book-btn2:hover{ background:#49B948; color:#fff; }
.bk-book-btn2:disabled{ opacity:.5; cursor:not-allowed; }

/* apartment type cards (step 2, legacy) */
.bk-type{ display:flex; gap:26px; padding:26px 0; border-bottom:1px solid #ECECEC; align-items:center; }
.bk-type:last-child{ border-bottom:none; }
.bk-type-img{ width:270px; height:190px; border-radius:14px; object-fit:cover; flex-shrink:0; background:#F6F6F6; }
.bk-type-body{ flex:1; min-width:0; }
.bk-type-body h4{ font-size:22px; font-weight:600; color:#282828; margin-bottom:2px; }
.bk-price{ font-size:18px; color:#575558; margin-bottom:10px; }
.bk-price b{ color:#282828; }
.bk-type-desc{ color:rgba(40,40,40,.75); font-size:15px; line-height:1.5; margin-bottom:14px; }
.bk-tag{ display:inline-block; font-size:13px; color:#3A9438; background:#EAF7EA; border-radius:100px; padding:4px 12px; margin-bottom:12px; }

/* packages */
.bk-pkg{ border:1px solid #E4E3E3; border-radius:14px; padding:24px; margin-bottom:18px; }
.bk-pkg.sel{ border-color:#49B948; box-shadow:0 0 0 2px rgba(73,185,72,.15); }
.bk-pkg-head{ display:flex; justify-content:space-between; align-items:baseline; }
.bk-pkg-head h4{ font-size:19px; font-weight:600; margin:0; }
.bk-pkg-price{ font-size:24px; font-weight:600; color:#282828; }
.bk-pkg ul{ list-style:none; padding:0; margin:14px 0; }
.bk-pkg li{ font-size:14px; color:rgba(40,40,40,.8); padding:4px 0 4px 24px; position:relative; }
.bk-pkg li:before{ content:"✓"; color:#49B948; position:absolute; left:0; font-weight:600; }
.bk-pkg .one-time{ color:#3A9438; font-weight:500; font-size:14px; }

/* form fields */
.bk-field{ margin-bottom:18px; }
.bk-field label{ display:block; font-size:14px; color:#575558; margin-bottom:6px; }
.bk-input{ width:100%; padding:13px 16px; border:1px solid #E4E3E3; border-radius:10px; font-size:15px; }
.bk-input:focus{ outline:none; border-color:#49B948; box-shadow:0 0 0 3px rgba(73,185,72,.15); }
.bk-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
@media (max-width:600px){ .bk-grid2{ grid-template-columns:1fr; } }

/* sidebar summary */
.bk-side .bk-card{ padding:0; overflow:hidden; }
.bk-side-img{ width:100%; height:170px; object-fit:cover; display:block; background:#F6F6F6; }
.bk-side-pad{ padding:22px 24px; }
.bk-side h4{ font-size:20px; font-weight:600; margin-bottom:2px; }
.bk-side .muted{ color:#575558; font-size:14px; }
.bk-sum-row{ display:flex; justify-content:space-between; padding:9px 0; font-size:15px; color:#282828; }
.bk-sum-row.total{ border-top:1px solid #ECECEC; margin-top:6px; padding-top:14px; font-weight:600; font-size:17px; }
.bk-sum-sec{ border-top:1px solid #ECECEC; margin-top:14px; padding-top:14px; }
.bk-sum-h{ font-weight:600; color:#282828; margin-bottom:8px; }
.bk-deposit{ background:#EAF7EA; border-radius:12px; padding:16px 18px; margin-top:14px; }
.bk-deposit .big{ font-size:22px; font-weight:600; color:#3A9438; }

/* buttons / nav */
.bk-actions{ display:flex; justify-content:space-between; margin-top:26px; gap:12px; }
.bk-btn{ border-radius:100px; padding:16px 40px; font-size:16px; font-weight:500; cursor:pointer; border:1px solid transparent; text-decoration:none; display:inline-block; text-align:center; }
.bk-btn-primary{ background:#49B948; color:#fff; border-color:#49B948; }
.bk-btn-primary:hover{ background:#3A9438; }
.bk-btn-primary:disabled{ opacity:.5; cursor:not-allowed; }
.bk-btn-ghost{ background:#fff; color:#282828; border-color:#D0D0D0; }
.bk-btn-ghost:hover{ background:#F6F6F6; }
.bk-btn-sm{ padding:11px 26px; font-size:14px; }

.bk-book-btn{ background:#49B948; color:#fff; border:none; border-radius:100px; padding:14px 34px; font-size:15px; font-weight:500; cursor:pointer; }
.bk-book-btn:hover{ background:#3A9438; }

.bk-err{ background:#FDECEC; color:#C0392B; border-radius:10px; padding:12px 16px; margin-bottom:16px; display:none; }
.bk-empty{ text-align:center; color:#575558; padding:50px 0; }
.bk-hold{ font-size:13px; color:#575558; margin-top:12px; text-align:center; }

/* success */
.bk-success{ max-width:720px; margin:20px auto; text-align:center; }
.bk-check{ width:96px; height:96px; border-radius:50%; border:5px solid #49B948; color:#49B948;
  font-size:52px; display:flex; align-items:center; justify-content:center; margin:0 auto 26px; }
.bk-success h2{ font-size:34px; font-weight:600; }
.bk-ref-row{ display:flex; justify-content:center; gap:60px; margin:30px 0; flex-wrap:wrap; }
.bk-ref-row .k{ color:#575558; font-size:14px; }
.bk-ref-row .v{ font-size:20px; font-weight:600; color:#282828; }
.bk-ref-row .v.ok{ color:#49B948; }
.bk-next{ text-align:left; background:#F6F6F6; border-radius:14px; padding:26px 30px; margin:26px 0; }
.bk-next h5{ font-weight:600; margin-bottom:12px; }
.bk-next li{ margin-bottom:8px; color:rgba(40,40,40,.8); }

/* Apartment-type detail modal (Gallery / 3D tour / Floorplan) */
.apartment-type-card.bk-clickable{ cursor:pointer; transition:box-shadow .15s; }
.apartment-type-card.bk-clickable:hover{ box-shadow:0 4px 18px rgba(0,0,0,.10); }

/* full-height dialog, same as the buy page's #apartmentModal */
#bkTypeModal .modal-dialog{ --bs-modal-margin: 0; }
@media (min-width:1200px){ #bkTypeModal .modal-xl{ --bs-modal-width: 1152px; } }

/* main.css gives .pp-top a fixed 95px height; on narrow screens its floated
   columns overflow and push the carousel's BFC down — let it grow instead.
   The generic .info-tabs 60px bottom margin overflows invisibly in the buy
   modal's fixed-height header; here it would become a real gap, so zero it
   and keep the buy modal's 13px tabs-to-photo spacing (25+57+13 = 95). */
.bk-pp .pp-top{ height:auto; min-height:95px; padding:25px 0 13px; }
.bk-pp .pp-top::after{ content:""; display:block; clear:both; }
.bk-pp .pp-tab-content{ clear:both; }
.bk-pp .info-tabs{ margin-bottom:0; }

.bk-pp-carousel{ position:relative; }
.bk-pp-slides{ position:relative; width:100%; aspect-ratio:956/537; border-radius:16px; overflow:hidden; background:#EFEFEF; }
.bk-pp-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .25s; }
.bk-pp-slide.active{ opacity:1; }
.bk-pp-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:39px; height:39px;
  border-radius:50% !important;   /* main.css flattens button corners with !important */
  background:#fff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 1px 6px rgba(0,0,0,.18); z-index:2; }
.bk-pp-arrow:hover{ background:#F6F6F6; }
.bk-pp-arrow.prev{ left:24px; }
.bk-pp-arrow.next{ right:24px; }
.bk-pp-counter{ position:absolute; right:26px; bottom:24px; background:rgba(0,0,0,.6); color:#fff;
  font-size:14px; padding:7px 17px; border-radius:100px; z-index:2; }

.bk-pp-tour{ display:block; width:100%; aspect-ratio:956/537; border-radius:16px; border:none; background:#111; }

.bk-pp-placeholder{ width:100%; aspect-ratio:956/537; border-radius:16px; background:#F6F6F6;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:24px; }
.bk-pp-placeholder img{ width:42px; height:42px; opacity:.45; margin-bottom:8px; }
.bk-pp-ph-title{ font-size:19px; font-weight:500; color:#282828; }
.bk-pp-ph-sub{ font-size:14px; color:#575558; }

.bk-pp .pp-content .btn-inbp-primary{ cursor:pointer; }
.bk-pp .pp-status{ color:#49B948; }
@media (max-width:768px){
  .bk-pp .pp-details-block{ width:100%; }
  .bk-pp .pp-col-left, .bk-pp .pp-col-center, .bk-pp .pp-col-right{ width:100%; text-align:center; }
}

/* ---- Step 3 redesign (Figma 2672:5883/5916/5946/5966/5930) ---- */
.bk3-card{ border-radius:20px; padding:50px 60px; }
/* .bk-card h3 above is more specific, so scope this the same way to win */
.bk-card .bk3-h, .bk3-h{ font-size:26px; font-weight:600; color:#282828; margin-bottom:34px; }
/* browsers default <strong> to `bolder` (=700); nothing in the wizard goes above 600 */
.bk-wrap strong, .bk-wrap b{ font-weight:600; }

/* underline ("material") form fields */
.bk3-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 278px)); gap:38px 52px; }
.bk-f{ display:flex; flex-direction:column; }
.bk-f label{ font-size:12px; font-weight:500; color:#8D8D8D; line-height:20px; margin:0; transition:color .15s; }
.bk-f-input{ border:0; border-bottom:1px solid rgba(166,166,166,.65); background:transparent; padding:8px 0 10px;
  font-size:14px; font-family:inherit; color:#282828; outline:none; width:100%; transition:border-color .15s; }
.bk-f-input:focus{ border-bottom-color:#49B948; }
.bk-f:focus-within label{ color:#282828; }
.bk-f:has(.bk-f-input:not(:placeholder-shown)) label{ color:#282828; }
.bk-f-input.bk-invalid{ border-bottom-color:#D64545; }
.bk-f-err{ font-size:11px; line-height:1.3; color:#D64545; margin-top:5px; min-height:0; }
/* incomplete fields are flagged in place on Continue, so the label turns red
   too — the field may be well below the fold and the page no longer jumps */
.bk-f.bk-f-invalid label{ color:#D64545 !important; }
.bk-f-wide{ grid-column:1 / -1; }
.bk-f-select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:20px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238D8D8D' stroke-width='1.6' stroke-linecap='round'/></svg>") right 2px center no-repeat; }
.bk-f-select:invalid, .bk-f-select.is-empty{ color:#8D8D8D; }

/* identity document upload */
.bk-upload{ display:flex; align-items:center; gap:14px; border:1px dashed rgba(166,166,166,.8);
  border-radius:12px; padding:14px 16px; margin-top:8px; position:relative; transition:border-color .15s; }
.bk-upload:hover{ border-color:#49B948; }
.bk-upload.bk-invalid{ border-color:#D64545; }
.bk-upload.has-file{ border-style:solid; border-color:#49B948; }
.bk-upload input[type=file]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.bk-upload-cta{ flex:0 0 auto; font-size:13px; font-weight:600; color:#282828;
  border:1px solid #E4E3E3; border-radius:999px; padding:7px 14px; background:#fff; }
.bk-upload-name{ font-size:12px; color:#8D8D8D; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bk-upload.has-file .bk-upload-name{ color:#282828; font-weight:500; }

/* parent / guardian block (under-18 bookers).
   No rule between the two parents — a grey divider read as a section break and
   made the second parent look like a different part of the form. The subhead
   plus generous space does the separating. */
.bk-guardian + .bk-guardian{ margin-top:46px; }
/* guardians hang off the resident they belong to, so they sit inside that
   resident's card with a light rule marking where the resident ends */
.bk-guardian-wrap{ margin-top:38px; }
.bk-guardian-sep{ height:1px; background:rgba(166,166,166,.35); margin-bottom:28px; }
.bk-guardian-note{ font-size:14px; color:#575558; line-height:1.55; margin-bottom:28px; }
.bk-resident + .bk-resident{ margin-top:0; }

/* step 4 — read-back of the reservation, then a plain confirm */
.bk-review{ border:1px solid #ECECEC; border-radius:14px; overflow:hidden; margin-bottom:30px; }
.bk-review-row{ display:flex; justify-content:space-between; gap:20px; padding:13px 18px; font-size:15px; }
.bk-review-row + .bk-review-row{ border-top:1px solid #F1F1F1; }
.bk-review-row .k{ color:#8D8D8D; }
.bk-review-row .v{ color:#282828; text-align:right; }
.bk-review-row.total{ background:#F7FBF7; font-weight:600; }
.bk-review-cost{ background:#F7FBF7; border:1px solid #DFF0DE; border-radius:14px;
  padding:22px 24px; margin-bottom:34px; }
.bk-review-cost .bk-review-row{ padding:9px 0; }
.bk-review-cost .bk-review-row + .bk-review-row{ border-top:1px solid rgba(166,166,166,.25); }
.bk-review-cost .bk-review-row.total{ background:none; border-top:1px solid rgba(166,166,166,.5); margin-top:4px; }

/* one-off vs recurring — the distinction has to survive a glance */
.bk-sc-sub{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#8D8D8D; margin:4px 0 10px; }
.bk-sc-sub-once{ margin-top:20px; padding-top:16px; border-top:1px solid rgba(166,166,166,.4); }
.bk-once-head{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#8D8D8D; margin:18px 0 6px; padding-top:14px; border-top:1px solid rgba(166,166,166,.35); }
.bk-pkg3-once{ font-size:13px; font-weight:500; color:#8D8D8D; margin-left:8px;
  text-transform:uppercase; letter-spacing:.04em; }
.bk-pkg3-nomonthly{ font-size:12px; color:#8D8D8D; margin:-16px 0 20px; }

/* the reassurance step reads as a note, not another deadline */
.bk-steps-reassure .bk-steps-n{ background:#282828; }
.bk-steps-reassure > div{ background:#F7FBF7; border:1px solid #DFF0DE; border-radius:10px;
  padding:14px 16px; margin-top:-4px; }

.bk-next-steps{ margin-bottom:34px; }
.bk-steps-list{ list-style:none; margin:0; padding:0; }
.bk-steps-list li{ display:flex; gap:16px; }
.bk-steps-list li + li{ margin-top:22px; }
.bk-steps-n{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:#49B948; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; }
.bk-steps-list strong{ display:block; font-size:15px; color:#282828; margin-bottom:3px; }
.bk-steps-list p{ margin:0; font-size:14px; color:#575558; line-height:1.55; }

/* "Any questions?" on the thank-you page — the rental team's details */
.bk-help{ margin:44px auto 0; max-width:780px; padding-top:34px; border-top:1px solid rgba(166,166,166,.35); }
.bk-help-h{ font-size:18px; font-weight:600; color:#282828; margin-bottom:6px; }
.bk-help-sub{ font-size:15px; color:#575558; margin:0 0 22px; line-height:1.55; }
.bk-help-links{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.bk-help-link{ display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  background:#fff; border:1px solid #E4E3E3; border-radius:100px; padding:11px 20px;
  font-size:15px; color:#282828; transition:border-color .15s, color .15s; }
.bk-help-link:hover{ border-color:#49B948; color:#3A9438; }
.bk-help-link svg{ width:18px; height:18px; flex:0 0 auto; color:#49B948; }
@media (max-width:600px){ .bk-help-links{ flex-direction:column; } .bk-help-link{ justify-content:center; } }
.bk-guardian-h{ font-size:13px; font-weight:600; color:#8D8D8D; margin-bottom:22px;
  text-transform:uppercase; letter-spacing:.06em; }

/* "Optional" tag + selected-dates recap in Arrival & departure */
.bk3-h-row{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.bk-optional-tag{ font-size:11px; font-weight:600; color:#575558; background:#F1F1F1;
  border-radius:999px; padding:4px 10px; letter-spacing:.02em; }
.bk-dates-recap{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin:14px 0 18px;
  background:#F6F6F6; border-radius:10px; padding:11px 14px; }
.bk-dates-recap-l{ font-size:12px; color:#8D8D8D; }
.bk-dates-recap-v{ font-size:14px; font-weight:600; color:#282828; }

/* Checkboxes: a global appearance:none reset left these as invisible 18px
   boxes — they toggled, but nothing on screen changed, so they read as dead. */
.bk-opt-check{ cursor:pointer; }
.bk-opt-check input[type=checkbox]{ appearance:none; -webkit-appearance:none; flex:0 0 auto;
  width:20px; height:20px; margin:0; border:1.5px solid #C9C9C9; border-radius:6px !important;
  background-color:#fff; position:relative; cursor:pointer;
  transition:border-color .15s, background-color .15s; }
.bk-opt-check:hover input[type=checkbox]{ border-color:#49B948; }
/* longhand + !important: main.css resets every input with an !important
   border-radius, and the `background` shorthand was not winning here */
.bk-opt-check input[type=checkbox]:checked{ background-color:#49B948 !important; border-color:#49B948; }
.bk-opt-check input[type=checkbox]:checked::after{ content:''; position:absolute; left:6px; top:2px;
  width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.bk-opt-check input[type=checkbox]:focus-visible{ outline:2px solid #49B948; outline-offset:2px; }
.bk-opt.sel{ border-color:#49B948; box-shadow:0 0 0 2px rgba(73,185,72,.18); }

/* Native date inputs can't hold a placeholder, so they always rendered as
   "filled": dark label + a permanent dd/mm/yyyy mask sitting where every other
   field is empty. Drive both off .has-val instead so the empty state matches. */
.bk-f-date{ color:transparent; }
.bk-f-date:focus, .bk-f-date.has-val{ color:#282828; }
.bk-f:has(.bk-f-date:not(.has-val):not(:focus)) label{ color:#8D8D8D; }
/* ...but an invalid field still wins: this must come after the date rule above */
.bk-f.bk-f-invalid label{ color:#D64545 !important; }
.bk-f-date::-webkit-datetime-edit{ padding:0; }
.bk-f-date::-webkit-calendar-picker-indicator{ opacity:.4; cursor:pointer; padding:0; transition:opacity .15s; }
.bk-f-date:hover::-webkit-calendar-picker-indicator,
.bk-f-date:focus::-webkit-calendar-picker-indicator{ opacity:.75; }
.bk-f-date::-webkit-inner-spin-button{ display:none; }

/* phone: country picker + dial-code prefix sharing one underline */
.bk-phone{ display:flex; align-items:center; gap:6px; position:relative;
  border-bottom:1px solid rgba(166,166,166,.65); transition:border-color .15s; }
.bk-phone:focus-within{ border-bottom-color:#49B948; }
.bk-phone.bk-invalid{ border-bottom-color:#D64545; }
.bk-phone .bk-phone-num{ border-bottom:0; flex:1; min-width:0; padding-left:0; }
/* The select is transparent and sits exactly on top of the dial-code text, so
   it must be sized by that text — a fixed width would spill over the start of
   the number input and swallow clicks meant for it. */
.bk-phone-picker{ position:relative; display:inline-flex; flex:0 0 auto; }
.bk-phone-cc{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
  font-family:inherit; font-size:14px; }
.bk-phone-dial{ display:inline-flex; align-items:center; gap:4px; font-size:14px; color:#282828;
  padding:8px 0 10px; white-space:nowrap; pointer-events:none; }
.bk-phone-dial::after{ content:''; width:0; height:0; border-left:4px solid transparent;
  border-right:4px solid transparent; border-top:5px solid #8D8D8D; }

/* standard inclusions intro */
/* "Included in your monthly service fee" — a scannable tick list beats the old
   comma-run paragraph, and it is where the all-bills-covered pitch lands. */
.bk-svc{ max-width:none; background:#F7FBF7; border:1px solid #DFF0DE; border-radius:14px;
  padding:26px 28px; margin-bottom:34px; }
.bk-svc .bk3-std-h{ margin-bottom:8px; }
/* the lead sentence needs real air under it — at 20px it read as part of the
   first tick row rather than as its own intro */
.bk-svc-lead{ font-size:14px; color:#575558; line-height:1.55; margin:0 0 26px; max-width:620px; }
.bk-svc-list{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:11px 26px; }
.bk-svc-list li{ display:flex; align-items:center; gap:10px; font-size:14px; color:#282828; }
.bk-svc-list svg{ width:17px; height:17px; flex:0 0 auto; }

.bk3-std{ max-width:594px; margin-bottom:34px; }
.bk3-std-h{ font-size:16px; font-weight:600; color:#282828; margin-bottom:11px; }
.bk3-std p{ font-size:16px; color:#575558; line-height:1.55; margin:0; }

/* package cards */
.bk3-pkgs{ display:flex; flex-direction:column; gap:36px; }
.bk-pkg3{ width:500px; max-width:100%; background:#fff; border:1px solid #F1F1F1; border-radius:10px;
  padding:40px 50px; transition:border-color .15s; }
.bk-pkg3.sel{ border-color:#49B948; }
.bk-pkg3-name{ font-size:22px; font-weight:600; color:#282828; }
.bk-pkg3-price{ font-size:34px; font-weight:600; color:#282828; margin-bottom:22px; }
.bk-pkg3-items{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.bk-pkg3-items li{ display:flex; align-items:center; gap:16px; font-size:16px; color:#282828; }
.bk-pkg3-items svg{ width:26px; height:26px; flex-shrink:0; }
.bk-pkg3-fee{ font-size:16px; font-weight:600; color:#49B948; margin:30px 0 26px; }
.bk-pkg3-btn{ display:block; width:100%; height:36px; background:#F6F6F6; border:0;
  border-radius:10px !important;   /* main.css flattens button corners */
  font-family:inherit; font-size:16px; font-weight:600; color:#282828; cursor:pointer; transition:background .15s; }
.bk-pkg3-btn:hover{ background:#ECECEC; }
.bk-pkg3.sel .bk-pkg3-btn{ background:#49B948; color:#fff; }

/* sidebar cards */
.bk-side{ width:368px; display:flex; flex-direction:column; gap:20px; }
.bk-sc{ background:#fff; border-radius:16px; padding:24px 30px; box-shadow:0 1px 5px rgba(0,0,0,.04); }
.bk-sc-apt{ padding:0 0 24px; overflow:hidden; }
.bk-sc-imgwrap{ position:relative; }
.bk-sc-imgwrap img{ display:block; width:100%; height:220px; object-fit:cover; border-radius:16px 16px 0 0; }
.bk-sc-imgbtns{ position:absolute; left:16px; bottom:14px; display:flex; gap:8px; }
.bk-sc-ib{ width:40px; height:40px; border:0; border-radius:50% !important; background:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 1px 6px rgba(0,0,0,.22); transition:background .15s; }
.bk-sc-ib:hover{ background:#F6F6F6; }
.bk-sc-body{ padding:24px 30px 0; }
.bk-sc-title{ font-size:22px; font-weight:600; color:#282828; letter-spacing:-0.8px; line-height:1.15; }
.bk-sc-price{ font-size:16px; color:#575558; margin-top:2px; }
.bk-sc-desc{ font-size:16px; color:#575558; line-height:1.45; letter-spacing:-0.32px; margin:16px 0 0; }
.bk-sc-h{ font-size:22px; font-weight:600; color:#282828; letter-spacing:-0.44px; margin-bottom:20px; }
.bk-sc-row{ margin-bottom:20px; }
.bk-sc-row:last-child{ margin-bottom:0; }
.bk-sc .k{ font-size:16px; color:#575558; }
.bk-sc .v{ font-size:16px; color:#282828; }
.bk-sc-io{ display:flex; gap:18px; margin-bottom:20px; }
.bk-sc-sep{ width:1px; background:rgba(166,166,166,.65); align-self:stretch; }
.bk-sc-total{ border-top:1px solid rgba(166,166,166,.65); padding:12px 0; }
.bk-sc-dep{ display:flex; justify-content:space-between; align-items:center; margin-top:4px;
  font-size:16px; font-weight:600; color:#282828; }
.bk-sc-dep span:last-child{ color:#49B948; }

/* The rent + service split lives in .apartment-type-eur itself now — a second
   coloured line under the grey price read as a duplicate. */
/* Card photo: main.css pins it to a fixed 252px, which reads as too tall and
   changes proportion with card width. A fixed landscape ratio scales properly. */
.bk-typewrap .apartment-type-pic{ height:auto; aspect-ratio:3/2; }
/* keep a lone card from stretching across the whole row */
.bk-typewrap{ justify-content:start; }
.bk-typewrap .apartment-type-card{ max-width:420px; }

/* scarcity flag, top-right of the card photo */
.apartment-type-pic{ position:relative; }
.bk-scarce{ position:absolute; top:12px; right:12px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; letter-spacing:.01em; color:#fff;
  padding:6px 12px; border-radius:100px; box-shadow:0 2px 8px rgba(0,0,0,.22);
  white-space:nowrap; }
.bk-scarce::before{ content:''; width:6px; height:6px; border-radius:50%; background:#fff; opacity:.9; }
.bk-scarce-left{ background:#49B948; }     /* still available */
.bk-scarce-gone{ background:#8D8D8D; }     /* sold out */

/* Sold-out cards stay on the page — seeing what has gone is the point — but
   read clearly as unavailable and cannot be clicked through to booking. */
.bk-soldout{ opacity:.55; filter:grayscale(1); cursor:default; }
.bk-soldout:hover{ box-shadow:0 1px 5px rgba(0,0,0,.04); }
.bk-soldout-tag{ display:inline-block; font-size:11px; font-weight:600; color:#8D8D8D;
  border:1px solid #DDD; border-radius:100px; padding:11px 15px; white-space:nowrap; }

.apartment-type-eur{ line-height:1.35; }
/* "/month" is secondary to the figures — keep it on the same line, lighter */
.apartment-type-eur .eur-per{ color:#8D8D8D; margin-left:3px; white-space:nowrap; }

@media (max-width:900px){
  .bk3-card{ padding:28px 22px; }
  .bk3-grid{ grid-template-columns:1fr; gap:24px; }
  .bk-pkg3{ padding:26px 24px; }
  .bk-side{ width:100%; }
}