/* Apply Now — layout from the application screenshots, Eski colours & fonts */
:root{
  --teal:#00c6aa; --teal-hover:#00b49b; --brand:#159389; --brand-dark:#00756c;
  --forest:#214343; --forest-dark:#183938;
  --sand:#ece7de; --sand-light:#f3f3ef; --cream:#fefdf5;
  --text:#214343; --muted:#506963; --border:#d8d2c7;
  --border-teal:rgba(0,198,170,.35); --error:#c0392b; --error-bg:#fdecea;
  --font-display:'Shantell Sans',cursive;
  --font-body:'Outfit',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--text);font:400 16px/1.5 var(--font-body)}
h1,h2,h3,h4{font-family:var(--font-body);font-weight:500;letter-spacing:-0.01em;color:var(--forest);margin:0}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.center{text-align:center}
.hidden{display:none!important}
.orange{color:var(--brand-dark)}
.link, .emsg p a{color:var(--brand-dark);text-decoration:underline;cursor:pointer;background:none;border:0;padding:0;font:inherit}

/* Grey title bars + steps */
.bar{position:relative;background:var(--sand-light);text-align:center;padding:28px 16px;margin-bottom:6px}
.bar h2{font-size:clamp(2.25rem,4vw,3.75rem);line-height:1.2}
.bar h1.h1-page{font-size:clamp(54px,2.162vw + 45.27px,78px);line-height:1.05;letter-spacing:-0.9px;font-weight:473}
.bar h1.h1-page .h1-page-script{color:var(--brand);font-size:clamp(52px,2.072vw + 43.67px,75px);letter-spacing:-3px}
.bar h1.h1-page{padding-top:120px}
@media(max-width:768px){.bar h1.h1-page{padding-top:80px}}
.edit{display:none;margin-top:4px;background:none;border:0;color:var(--forest);text-decoration:underline;font:700 .95rem var(--font-body);cursor:pointer}
.step.done .edit{display:inline}
.step.locked .bar{opacity:.7}
.step-body{display:none;padding:32px 0 20px}
.step.open .step-body{display:block}

/* Pills */
.pills{display:flex;flex-wrap:wrap;gap:12px 14px;justify-content:center;max-width:540px;margin:0 auto}
.pills.auto{max-width:none}
.pills.left{justify-content:flex-start;margin:0}
.pill-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.pill-wrap small{color:var(--muted);font-size:.75rem}
.pill{min-width:130px;padding:9px 22px;border:1.5px solid var(--brand);border-radius:20px;background:#fff;color:var(--brand-dark);font:600 14px var(--font-body);cursor:pointer;transition:.15s;text-align: center;transition: all 0.6s !important;}
.pill:hover{background: #00756c;color: #ffffff;/*background:var(--cream)*/}
.pill.on{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.sel .pill-wrap{flex:0 0 calc(33.333% - 10px)}
.sel .pill{/*width:100%*/}

/* Select city / property / room */
.sel h3,.choose h3,.email-box h3{font-size:clamp(1.5rem,2.5vw,2.5rem);line-height:1.2;text-align:center;margin:26px 0 14px}
.sel h3:first-child{margin-top:0}
.rooms{display:grid;grid-template-columns:360px 1fr;gap:20px;align-items:start}
#room-data{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;position: relative;width: 100%;height: 100%;}
@media(max-width:860px){.rooms, #room-data{grid-template-columns:1fr}}
.room-list{display:flex;flex-direction:column}
.room-item{background:var(--sand-light);border:0;border-bottom:1px solid #fff;text-align:left;padding:13px 16px;font:600 20px/1.35 var(--font-body);color:var(--forest);cursor:pointer}
@media(max-width:768px){.room-item{font-size:16px}.bar h2{font-size:32px;line-height:1.176;letter-spacing:-0.04em}}
.room-item:hover{background:var(--sand)}
.room-item.on{background:var(--brand-dark);color:#fff}
.room-img{position:relative;aspect-ratio:4/5;background:linear-gradient(160deg,var(--brand),var(--forest));overflow:hidden}
.room-img::after{content:attr(data-label);position:absolute;left:0;bottom:0;padding:16px;color:var(--cream);font-family:var(--font-body);font-size:1.05rem}
.room-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.room-info .feat{display:flex;justify-content:space-around;gap:12px;padding:6px 0 12px;border-bottom:1.5px solid var(--border);color:var(--muted);font-size:.9rem}
.from{text-align:center;margin:18px 0 20px;color:var(--muted);font-size:.72rem;letter-spacing:.04em}
.from strong{display:block;font-size:1.15rem;color:var(--forest);letter-spacing:0}
.offers{margin-top:22px;font-size:.82rem}
.offers h4{font-family:var(--font-body);font-size:.8rem;text-transform:uppercase;color:var(--brand-dark);margin-bottom:6px}
.offers p{margin:0 0 10px}
/* Buttons use the site .btn styles from main.css */
.btn.block{display:flex;width:100%}

/* Ready to apply */
.ready{background:var(--sand-light);text-align:center;padding:36px 28px;margin:60px 0 30px}
.ready h3{font-size:clamp(1.5rem,2.5vw,2.5rem);line-height:1.2;margin-bottom:12px}
.ready p{margin:0 auto;max-width:640px;font-size:16px;line-height:1.35}
.note, .emsg p{color:var(--muted);font-size:.88rem;margin:6px 0 0}

/* Pre-booking terms */
.terms{max-width:520px;margin:24px auto 0;background:var(--sand-light);padding:16px 20px;font-size:.82rem}
.terms h4{font-family:var(--font-body);font-size:.9rem;margin-bottom:8px}
.terms p{margin:0 0 10px;color:var(--muted)}

/* Calendar */
.cal{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:16px 0 8px}
.month{width:310px;border:1px solid var(--sand)}
.mhead{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;color:var(--brand-dark);font-weight:500;font-size:1.05rem}
.arrow{background:none;border:0;color:var(--brand-dark);font-size:1.8rem;line-height:1;cursor:pointer;padding:0 6px}
.days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.dow{background:var(--brand-dark);color:#fff;padding:5px 0;font-weight:600}
.day{background:none;border:0;padding:10px 0;font:600 .95rem var(--font-body);color:var(--brand-dark);cursor:pointer}
.day:hover:not(:disabled){background:var(--cream)}
.day:disabled{color:#bbb;cursor:default}
.day.on{background:var(--brand-dark);color:#fff}

/* Email */
.email-box{max-width:520px;margin:40px auto 20px;text-align:center}
.email-box h3{text-transform:uppercase;font-size:1rem}
.email-box input{margin:10px 0}
.email-box .btn{margin-top:10px}

/* Forms */
input[type=text],input[type=email],input[type=tel],select{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:6px;background:#fff;font:inherit;color:var(--text);margin-bottom:8px}
input:focus,select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--border-teal)}
.err-field{border-color:var(--error)!important}
.alert{background:var(--error-bg);color:var(--error);border-radius:6px;padding:10px 14px;margin:14px 0;font-size:.92rem;text-align:left}
label{display:block;font-weight:500;margin:10px 0 4px}
.two{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start}
@media(max-width:860px){.two{grid-template-columns:1fr;gap:24px}}
.form h4{font-size:1.05rem;margin:26px 0 6px;padding-top:18px;border-top:1px solid var(--border)}
.form h4:first-child{margin-top:0;padding-top:0;border-top:0}
.dob{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:10px}
.check{display:flex;gap:12px;align-items:flex-start;margin:12px 0;font-weight:400}
.check input{margin-top:4px;width:18px;height:18px;accent-color:var(--brand);flex:none}
.form .btn.block{margin-top:20px}
.form .note.center{margin-top:8px}

/* Side summary */
.side h4.orange{font-size:1.1rem;margin:18px 0 12px}
.side .room-img{margin-bottom:14px}
.side dl{margin:0}
.side dt{font-size:.9rem;color:var(--muted);margin-top:12px}
.side dd{margin:0;font-weight:700;word-break:break-word}
.total{color:var(--brand-dark);font-weight:700;font-size:1.1rem;margin:16px 0;padding:12px 0;border-bottom:1px solid var(--border)}
.total.top{border-top:1px solid var(--border);margin-top:0}
.help{margin-top:24px;padding-top:12px;border-top:1px solid var(--border);font-size:.85rem}
.help p{margin:0}

/* Payment */
.due{color:var(--brand-dark);font-weight:700;margin:20px 0 10px;padding:10px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* Other things */
.know{text-align:center;padding:50px 16px 60px;font-size:.88rem}
.know h3{font-family:var(--font-body);font-size:1rem;text-transform:uppercase;color:var(--brand-dark);margin-bottom:12px}
.know p{margin:0 0 4px}
.know a{color:var(--brand-dark)}

/* Modal */
.modal{
	/*position:fixed;
	inset:0;
	background:rgba(24,57,56,.55);
	display:grid;
	place-items:center;
	z-index:50;
	padding:16px;*/
	
	position: fixed;
    top: 0;
    left: 0;
    z-index: 1055;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
	background:rgba(24,57,56,.55);
}
div#payment-modal.modal.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}
.fade:not(.show) {
    opacity: 0;
}
.modal .box{background:#fff;border-radius:10px;padding:28px;max-width:440px;width:100%}
.modal h3{margin-bottom:10px}
.modal .btn{margin-top:14px}

.btn--nav {
    padding: 0 32px !important;
    border-radius: var(--radius-pill) !important;
    display: inline-flex !important;
}
#dates-html { text-align: center; }
.progress::before {
	content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(0, 0, 0, 0.7);*/
    opacity: 1;
    display: block;
    z-index: 98;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
	background: url(../assets/images/preloader.gif) center no-repeat rgba(255, 255, 255, 0.7) !important;
}
#readypanel {
	position: relative !important;
    width: 100%;
}
#readypanel input[type="radio"], #readypanel input[type="checkbox"], #readypanel .hide, .steps.hide, .step-5.steps.hide, input[type="checkbox"]#direct-debit, input[type="checkbox"]#credit-card {
    display: none;
}

#readypanel .steps {
    margin-bottom: 30px;
    /*float: left;*/
    width: 100%;
    display: none;
    opacity: 0;
}
#readypanel .steps.active {
    display: block;
    animation: fadeIn 0.9s ease forwards;
	opacity: 1;
}
#months-html li.btn-waitlist {
    list-style: none;
    text-align: center;
    padding-top: 40px;
}
#readypanel .choose {position: relative;}

body.page-template-tpl-apply-now .room-booking__location {
	font-size: 24px;
    font-weight: 500;
    line-height: 1.333;
    letter-spacing: -0.01em;
    margin: 0;
}
body.page-template-tpl-apply-now .room-booking__summary {
    gap: 24px;
}
body.page-template-tpl-apply-now h2.room-booking__title {
	font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
}
body.page-template-tpl-apply-now .room-booking__price-row {
    gap: 8px 16px;
    margin: 0;
}
body.page-template-tpl-apply-now .room-booking__price {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.333;
    margin: 0;
}
body.page-template-tpl-apply-now .room-booking__badge {
    font-size: 14px;
    font-weight: 600;
    padding: 10px 16px;
}
body.page-template-tpl-apply-now .room-booking__note {
    font-size: 18px;
    line-height: 1.333;
    letter-spacing: -0.02em;
    margin: 0;
    width: 100%;
}
body.page-template-tpl-apply-now .room-booking__benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0 0 24px;
    padding: 0;
}
body.page-template-tpl-apply-now .room-booking__benefits li {
    font-size: 20px;
    line-height: 1.35;
    gap: 10px;
    margin: 0;
}
body.page-template-tpl-apply-now .room-booking__benefits img {
    width: 25px;
    height: 25px;
}

body.page-template-tpl-apply-now .location-rooms__stock {
	display: inline-flex;
    align-items: center;
    padding: 8px 16px;
	margin: 10px 0px;
    border-radius: 24px;
    background: var(--color-sand-light);
    color: var(--color-forest);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.333;
    letter-spacing: 0;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.agents_only {display: none;}
.students_only {display: none;}
.show_for_agents {display: none;}
.hide_for_agents {display: none;}
.grecaptcha-badge {opacity: 0;width: 1px !important;height: 1px !important;}
span.notes-div {margin-top: 15px;display: block;}
span.notes-div {margin-top: 15px;display: block;}

/* pre booking date css */

.pb_date
{
	width:100%;
	max-width:600px;
	margin:0 auto;
	display:block;
	background:#f3f3ef;
	text-align:left;
	margin-top: 30px;
}
.pb_date .title
{
	font-size:15px;
	color:#506963;
	background:#eaeaea;
	line-height:57px;
	text-align:left;
	padding-left:25px;
	margin:0;
}
.pb_date .content-sec
{
	padding:20px 25px;
}
.pb_date .content-sec p
{
	font-size:13px;
	color:#506963;
	line-height:17px;
}
.pb_date .content-sec label
{
	font-size:13px;
	color:#000;
	display: inline-block;
}
.pb_date .content-sec input[type="checkbox"] {
    display: inline-block !important;
}
.pb_date .content-sec label:before {
	border:solid 1px #6c6c6c;
}
@media (max-width: 768px) {
  body.page-template-tpl-apply-now .room-booking__location {
    letter-spacing: -0.24px;
  }
  body.page-template-tpl-apply-now h2.room-booking__title {
    font-size: 34px;
  }
  body.page-template-tpl-apply-now .room-booking__price {
    font-size: 18px;
  }
  body.page-template-tpl-apply-now .room-booking__note {
    font-size: 16px;
  }
  body.page-template-tpl-apply-now .room-booking__benefits li {
    font-size: 16px;
  }
}

#readypanel h2 {
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  #readypanel h2 {
    margin-bottom: 12px;
  }
}

/* ===== Accordion step content — match site typography, colours & form style ===== */
#accordion .step-body,
#accordion .step-body p,
#accordion .step-body label,
#accordion .step-body input,
#accordion .step-body select,
#accordion .step-body textarea,
#accordion .step-body button,
#accordion .step-body li,
#accordion .step-body dt,
#accordion .step-body dd{
  font-family:var(--font-body);
  color:var(--color-text-dark,#214343);
}
#accordion .step-body{font-size:1rem;line-height:1.35;font-weight:400}
#accordion .step-body p{margin-bottom:1rem;line-height:1.35}
#accordion .step-body p:last-child{margin-bottom:0}
#accordion .step-body h4,
#accordion .step-body h5{
  font-family:var(--font-body);
  font-weight:500;
  font-size:clamp(1.25rem,1.6vw,1.5rem);
  line-height:1.333;
  letter-spacing:-0.01em;
  text-transform:none;
  color:var(--color-forest,#214343);
}
#accordion .step-body label{
  font-size:1rem;
  font-weight:500;
  line-height:1.35;
  letter-spacing:0;
  margin:14px 0 6px;
  color:var(--color-forest,#214343);
}
#accordion .step-body input[type=text],
#accordion .step-body input[type=email],
#accordion .step-body input[type=tel],
#accordion .step-body input[type=number],
#accordion .step-body input[type=date],
#accordion .step-body select,
#accordion .step-body textarea{
  width:100%;
  padding:14px 16px;
  font-size:1rem;
  font-weight:400;
  line-height:1.35;
  color:var(--color-forest,#214343);
  background:#fff;
  border:1px solid var(--color-border,#d8d2c7);
  border-radius:var(--radius-input,8px);
  transition:border-color .2s ease,box-shadow .2s ease;
}
#accordion .step-body input::placeholder,
#accordion .step-body textarea::placeholder{color:var(--color-text-muted,#506963);opacity:.7}
#accordion .step-body input:focus,
#accordion .step-body select:focus,
#accordion .step-body textarea:focus{
  outline:none;
  border-color:var(--color-teal,#00c6aa);
  box-shadow:0 0 0 3px var(--color-border-teal,rgba(0,198,170,.35));
}
#accordion .step-body hr{border:0;border-top:1px solid var(--color-border,#d8d2c7);margin:24px 0}
#accordion .step-body .note,
#accordion .step-body .note.center,
#accordion .step-body .elements_group.button p,
#accordion .step-body .form_container small{
  font-size:.875rem;
  color:var(--color-text-muted,#506963);
}
#accordion .step-body a{color:var(--brand-dark);text-decoration:underline}
#accordion .step-body .btn,
#accordion .step-body .btn *{text-decoration:none}
#accordion .step-body .check,
#accordion .step-body .check label{font-weight:400;font-size:1rem}
#accordion .step-body input[type=checkbox],
#accordion .step-body input[type=radio]{accent-color:var(--color-brand-secondary,#159389)}
#accordion .step-body .alert,
#accordion .step-body .ajax-msg{font-size:.9rem;border-radius:var(--radius-input,8px)}
@media(max-width:768px){
  #accordion .step-body{font-size:16px}
  #accordion .step-body h4,#accordion .step-body h5{font-size:1.25rem}
}

#accordion .step-body .ajax-msg,
#accordion .step-body .ajax-msg *,
.ajax-msg,
.ajax-msg p,
.ajax-msg a{color:var(--color-teal,#00c6aa)}

#accordion .step-body .room-item.on,
#accordion .step-body .room-item.on *{color:#fff}

#accordion .btn.block.show_for_agents,
#accordion .btn.block.show_for_agents *,
#accordion .step-body .btn.block.show_for_agents,
#accordion .step-body .btn.block.show_for_agents *{color:var(--color-forest,#214343)}

/* Tab headings (Agency Details / Student Details / Payment) match the "Apply now" heading */
#accordion .bar h2{
  font-family:var(--font-body);
  font-size:clamp(54px,2.162vw + 45.27px,78px);
  font-weight:473;
  line-height:1.05;
  letter-spacing:-0.9px;
  color:var(--forest);
}

#accordion .bar h2 .h1-page-script{
  color:var(--brand);
  font-size:clamp(52px,2.072vw + 43.67px,75px);
  letter-spacing:-3px;
}

/* Edit link sits below the tab heading instead of overlapping it */
#accordion .bar .edit-link{
  position:static;
  display:block;
  margin:8px 0 0;
  text-align:center;
}
#accordion .bar .edit-link a,
#accordion .bar .edit-link a.edit{
  display:inline;
  position:static;
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:500;
  color:var(--brand-dark);
  text-decoration:underline;
  cursor:pointer;
}

/* --- Tab headings: same brightness whether the tab is locked or open --- */
#accordion .step.locked .bar,
#accordion .step .bar{opacity:1}
#accordion .step.locked .bar h2{opacity:1}

/* --- Edit link: hidden until the tab is completed (JS shows it), with clear spacing below heading --- */
#accordion .bar .edit-link{display:none;margin:24px 0 0;padding:0;line-height:1.35}
#accordion .bar h1.h1-page,
#accordion .bar h2{margin-bottom:0}
#accordion .bar h1.h1-page{padding-bottom:4px}

/* Month / date pills: no underline, site button hover (forest bg + teal text) */
#accordion .step-body .pill,
#accordion .step-body a.pill{
  color:var(--brand-dark);
  text-decoration:none;
}
#accordion .step-body .pill:hover,
#accordion .step-body a.pill:hover,
#accordion .step-body .pill:focus-visible,
#accordion .step-body .pill.on:hover{
  background:var(--forest);
  border-color:var(--forest);
  color:var(--color-teal,#00c6aa);
  text-decoration:none;
}
#accordion .step-body .pill.on{color:#fff}
#accordion .step-body a.btn-rev,
#accordion .step-body a.btn-rev:hover{text-decoration:none}

/* ===== Student Details: label / name field sizes ===== */
#collapse3 label{font-size:16px}
#collapse3 #student_first_name,
#collapse3 #student_last_name{font-size:14px}
#accordion .step-body label:empty{display:none}

/* ===== Custom 40x40 checkboxes with X mark when ticked ===== */
#accordion .step-body input[type=checkbox]{
  -webkit-appearance:none;
  appearance:none;
  width:40px;
  height:40px;
  min-width:40px;
  flex:none;
  margin:0;
  padding:0;
  order:-1;
  background:#fff center/22px 22px no-repeat;
  border:1px solid var(--color-border,#d8d2c7);
  border-radius:var(--radius-input,8px);
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease;
}
#accordion .step-body input[type=checkbox]:hover{border-color:var(--color-teal,#00c6aa)}
#accordion .step-body input[type=checkbox]:checked{
  background-color:var(--color-teal,#00c6aa);
  border-color:var(--color-teal,#00c6aa);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23214343' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E");
}
#accordion .step-body input[type=checkbox]:focus-visible{box-shadow:0 0 0 3px var(--color-border-teal,rgba(0,198,170,.35))}
#accordion .step-body .check{align-items:center;gap:16px}

/* ===== Next buttons: full-width hover fill + visible teal text ===== */
#accordion .step-body .btn.block:hover::before{transform:translate(-50%,50%) scale(200)}
@media (hover:hover) and (pointer:fine){
  #accordion .step-body .btn:hover,
  #accordion .step-body .btn:hover *,
  #accordion .step-body .btn.block:hover,
  #accordion .step-body .btn.block.show_for_agents:hover,
  #accordion .step-body .btn.block.show_for_agents:hover *{color:var(--color-teal,#00c6aa)}
}

/* =====================================================================
   STUDENT DETAILS — layout from student_details.png (site colours/fonts)
   Left: label column + fields. Right: application summary.
   ===================================================================== */
#collapse3 .two{grid-template-columns:minmax(0,1fr) 380px;gap:64px;align-items:start}

/* Form = 2-column grid: [label 130px][content] */
#collapse3 .form{
  display:grid;
  grid-template-columns:130px minmax(0,1fr);
  column-gap:24px;
  align-items:center;
}
#collapse3 .form > *{grid-column:2;min-width:0}
#collapse3 .form > label:not(.check):not(:empty){
  grid-column:1;
  text-align:right;
  margin:0 0 8px;
  font-size:16px;
  color:var(--color-text-muted,#506963);
}
#collapse3 .form > label:not(.check) + input,
#collapse3 .form > label:not(.check) + .iti{grid-column:2}
#collapse3 .form > input[type=hidden]{display:none}

/* Section headings with divider lines between sections */
#collapse3 .form > h4{
  margin:0 0 8px;
  padding-top:32px;
  border-top:1px solid var(--color-border,#d8d2c7);
  font-size:clamp(1.25rem,1.6vw,1.5rem);
}
#collapse3 .form > h4:first-child{padding-top:0;border-top:0}
#collapse3 .form > h4 + .note,
#collapse3 .form > h4 + p{margin:0 0 16px}
#collapse3 .form > .dob + h4{margin-top:16px;padding-top:0;border-top:0}
#collapse3 .form > .note{font-size:16px;color:var(--color-forest,#214343)}
#collapse3 #student_output{min-height:0;margin:0 0 12px;font-size:16px;color:var(--color-forest,#214343)}

/* Inputs & selects: 50px, rounded, chevron */
#collapse3 .form input[type=text],
#collapse3 .form input[type=tel],
#collapse3 .form select{height:50px;margin-bottom:12px}
#collapse3 .form select{
  -webkit-appearance:none;
  appearance:none;
  padding-right:48px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23214343' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l9 9 9-9'/%3E%3C/svg%3E") no-repeat right 16px center/22px 22px;
  cursor:pointer;
}
#collapse3 .iti{width:100%;display:block}
#collapse3 .dob{gap:12px;grid-template-columns:1fr 1.8fr 1.2fr}
#collapse3 .dob select{margin-bottom:12px}

/* Friend referral extra fields */
#collapse3 #referralBox{display:block}
#collapse3 #referralBox.hidden{display:none!important}
#collapse3 #referralBox input,#collapse3 #referralBox select{margin-top:0}

/* Checkbox rows: [text 130px][box 40px][bold text] */
#collapse3 .form > label.check{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:130px 40px minmax(0,1fr);
  column-gap:24px;
  align-items:center;
  margin:0 0 16px;
  font-weight:400;
  font-size:16px;
}
#collapse3 .form > label.check > span:first-child{grid-column:1;text-align:right;color:var(--color-text-muted,#506963)}
#collapse3 .form > label.check > input[type=checkbox]{grid-column:2;order:0;justify-self:start}
#collapse3 .form > label.check > .check-text{grid-column:3;font-weight:600}
#collapse3 .form > label.check b{font-weight:600}
#collapse3 .check-text .ico{position:static!important;display:inline-block;vertical-align:middle;margin-left:8px}
/* friend referral row: box + text only */
#collapse3 .form > label.check:has(#friend-refferal) > input{grid-column:2}
#collapse3 .form > label.check:has(#friend-refferal) > span{grid-column:3;text-align:left;color:var(--color-forest,#214343);font-weight:500}

/* Next button + step note */
#collapse3 .form > .btn.block{margin-top:24px;width:100%}
#collapse3 .form > .note.center{text-align:center;margin-top:12px;font-size:12px;font-weight:600;color:var(--color-forest,#214343)}
#collapse3 .form > .ajax-msg,#collapse3 .form > .alert{grid-column:2}

/* Right-hand summary */
#collapse3 .side{border-top:1px solid var(--color-border,#d8d2c7);padding-top:24px}
#collapse3 .side h4.orange{font-size:clamp(1.25rem,1.6vw,1.5rem);margin:0 0 8px;color:var(--brand-dark)}
#collapse3 .side h6{margin:0 0 12px;font:600 12px/1.3 var(--font-body);letter-spacing:.04em;text-transform:uppercase;color:var(--brand-dark)}
#collapse3 .side .room-img{aspect-ratio:380/460;margin-bottom:16px}
#collapse3 .side dt{font-size:16px;font-weight:400;color:var(--color-forest,#214343);margin-top:16px}
#collapse3 .side dd{font-size:16px;font-weight:600;color:var(--color-forest,#214343)}
#collapse3 .side .total{font-size:20px;font-weight:600;color:var(--brand-dark);margin:24px 0 0;padding:0 0 16px;border:0;border-bottom:1px solid var(--color-border,#d8d2c7)}
#collapse3 .side .help{margin-top:16px;padding-top:0;border:0;font-size:12px}
#collapse3 .side .help h4{font-size:clamp(1.25rem,1.6vw,1.5rem);margin:0 0 8px;color:var(--brand-dark)}
#collapse3 .side .help p{font-size:12px}

@media(max-width:860px){
  #collapse3 .two{grid-template-columns:1fr;gap:32px}
  #collapse3 .form{grid-template-columns:1fr}
  #collapse3 .form > *,
  #collapse3 .form > .ajax-msg,
  #collapse3 .form > .alert{grid-column:1}
  #collapse3 .form > label:not(.check):not(:empty){grid-column:1;text-align:left}
  #collapse3 .form > label.check{grid-template-columns:40px minmax(0,1fr);column-gap:16px}
  #collapse3 .form > label.check > span:first-child{grid-column:1 / -1;text-align:left;margin-bottom:8px}
  #collapse3 .form > label.check > input[type=checkbox]{grid-column:1}
  #collapse3 .form > label.check > .check-text{grid-column:2}
  #collapse3 .form > label.check:has(#friend-refferal) > span{grid-column:2}
}

/* Calendar (datepicker): no underline, readable hover/selected states */
#accordion .step-body .ui-datepicker a,
#accordion .step-body .ui-datepicker a:hover,
#accordion .step-body .ui-datepicker a:focus,
.ui-datepicker a,
.ui-datepicker a:hover{text-decoration:none!important}
#accordion .step-body .ui-datepicker td a,
#accordion .step-body .ui-datepicker td span{color:var(--forest)}
#accordion .step-body .ui-datepicker td a.ui-state-hover,
#accordion .step-body .ui-datepicker td a:hover,
#accordion .step-body .ui-datepicker td a.ui-state-focus{
  background:var(--forest);
  border-color:var(--forest);
  color:var(--color-teal,#00c6aa);
}
#accordion .step-body .ui-datepicker td a.ui-state-active,
#accordion .step-body .ui-datepicker td a.ui-state-active:hover{
  background:var(--brand-dark);
  border-color:var(--brand-dark);
  color:#fff;
}
#accordion .step-body .ui-datepicker td.ui-state-disabled span,
#accordion .step-body .ui-datepicker td.ui-state-disabled a{color:#999}

/* =====================================================================
   PAYMENT — layout from payment1.png / payment2.png (site colours/fonts)
   ===================================================================== */
#collapse4 .two{grid-template-columns:minmax(0,1fr) 380px;gap:64px;align-items:start}

/* Payment method heading + pills */
#collapse4 .form h4{
  margin:0 0 16px;padding:0;border:0;
  font-size:16px;font-weight:500;letter-spacing:0;text-transform:uppercase;
  color:var(--color-forest,#214343);
}
#collapse4 .pills{gap:16px;justify-content:flex-start;max-width:none;margin:0 0 24px}
#collapse4 .pill-wrap{flex-direction:row;gap:16px}
#collapse4 label.pm-lbl.pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:180px;height:40px;padding:0 24px;margin:0;
  font:600 14px/1 var(--font-body);text-transform:uppercase;
  border:1.5px solid var(--brand);border-radius:20px;background:#fff;color:var(--brand-dark);
  cursor:pointer;
}
#collapse4 input[name=payment_method]:checked + label.pm-lbl.pill{
  background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;
}
#collapse4 label.pm-lbl.pill:hover,
#collapse4 input[name=payment_method]:checked + label.pm-lbl.pill:hover{
  background:var(--forest);border-color:var(--forest);color:var(--color-teal,#00c6aa);
}

/* Intro text */
#collapse4 .form > span > p,
#collapse4 .form > span{font-size:16px;line-height:1.5;color:var(--color-forest,#214343)}
#collapse4 .form > span p{margin:0 0 24px}

/* Total due / rent lines */
#collapse4 .payment-labels{margin:0 0 24px}
#collapse4 .payment-labels h5{
  display:inline-block;max-width:100%;
  margin:0 0 16px;padding:12px 0;
  border-top:1px solid var(--color-border,#d8d2c7);
  border-bottom:1px solid var(--color-border,#d8d2c7);
  font-size:20px;font-weight:600;line-height:1.3;letter-spacing:0;text-transform:uppercase;
  color:var(--brand-dark);
}
#collapse4 .payment-labels h5 span{color:inherit;font:inherit}
#collapse4 .payment-labels h6{
  margin:0 0 8px;font:600 16px/1.4 var(--font-body);color:var(--color-forest,#214343);
}
#collapse4 .payment-labels h6 span{color:var(--brand-dark);font:inherit}

/* Terms & conditions (direct deposit) */
#collapse4 .dd_fields h6{margin:0 0 16px;font:500 20px/1.3 var(--font-body);letter-spacing:-0.01em;color:var(--color-forest,#214343)}
#collapse4 .dd_fields input[type=checkbox]{display:inline-block!important;vertical-align:middle;order:0}
#collapse4 .dd_fields label{display:inline-block;vertical-align:middle;margin:0 0 0 16px;font-size:16px;font-weight:400}
#collapse4 .dd_fields label:empty{display:none}
#collapse4 .dd_fields a{color:var(--color-forest,#214343);text-decoration:underline}

/* Apply button */
#collapse4 #btnStep4_fw{display:flex;width:fit-content;min-width:174px;margin:32px auto 0}

/* Right summary */
#collapse4 .side p.total.top{
  margin:0 0 16px;padding:16px 0;
  border-top:1px solid var(--color-border,#d8d2c7);
  border-bottom:1px solid var(--color-border,#d8d2c7);
  font-size:24px;font-weight:600;line-height:1.3;color:var(--brand-dark);
}
#collapse4 .side p.total.top span{font:inherit;color:inherit}
#collapse4 .side h6{margin:0 0 12px;font:600 12px/1.3 var(--font-body);letter-spacing:.04em;text-transform:uppercase;color:var(--brand-dark)}
#collapse4 .side .room-img{aspect-ratio:380/460;margin-bottom:0}
#collapse4 .side h4.orange{font-size:clamp(1.25rem,1.6vw,1.5rem);margin:0 0 8px;color:var(--brand-dark)}
#collapse4 .side dt{font-size:16px;font-weight:400;color:var(--color-forest,#214343);margin-top:16px}
#collapse4 .side dd{font-size:16px;font-weight:600;color:var(--color-forest,#214343)}
#collapse4 .side dl + p,
#collapse4 .side #sp4-confirm-student,
#collapse4 .side #sp4-confirm-over18,
#collapse4 .side #sp4-confirm-nras{margin:0;font-size:16px;font-weight:600;color:var(--color-forest,#214343)}
#collapse4 .side #sp4-confirm-over18,
#collapse4 .side #sp4-confirm-nras{margin-top:8px}
#collapse4 .side .help{margin-top:32px;padding-top:0;border:0;font-size:12px}
#collapse4 .side .help h4{font-size:clamp(1.25rem,1.6vw,1.5rem);margin:0 0 8px;color:var(--brand-dark)}
#collapse4 .side .help p{font-size:12px;font-weight:600}
#collapse4 .side .help a{color:var(--brand-dark)}

@media(max-width:860px){
  #collapse4 .two{grid-template-columns:1fr;gap:32px}
  #collapse4 label.pm-lbl.pill{min-width:0;flex:1}
  #collapse4 .pill-wrap{width:100%}
  #collapse4 .side p.total.top{font-size:20px}
}

#collapse4 input[name=payment_method][type=radio]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
#collapse4 .pill-wrap{position:relative}