.appointment-page{background:#f3eee6;color:#163a31}.appointment-page main{min-height:calc(100vh - 78px)}
.appointment-page .hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important}.appointment-page .owner-submit-fab{display:none}
.appointment-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:7vw;align-items:end;padding:clamp(70px,9vw,132px) clamp(22px,8vw,132px) clamp(58px,7vw,96px);overflow:hidden;background:radial-gradient(circle at 82% 8%,rgba(206,164,91,.22),transparent 31%),linear-gradient(135deg,#0d3028,#174c40);color:#fff}.appointment-hero:after{content:"";position:absolute;right:-180px;bottom:-310px;width:620px;aspect-ratio:1;border:1px solid rgba(218,183,113,.17);border-radius:50%;pointer-events:none}.appointment-hero>div{position:relative;z-index:1}.appointment-hero h1{max-width:870px;margin:18px 0 24px;font:700 clamp(47px,6vw,88px)/1.02 "Playfair Display","IBM Plex Sans Thai";letter-spacing:-.045em}.appointment-hero h1 em{font-style:normal;color:#d9af68}.appointment-hero p{max-width:720px;margin:0;color:#c5d5d0;font-size:16px;line-height:1.9}.appointment-promises{display:grid;gap:1px;border:1px solid rgba(255,255,255,.13);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.06);backdrop-filter:blur(10px)}.appointment-promises span{display:flex;align-items:center;gap:18px;padding:19px 22px;border-bottom:1px solid rgba(255,255,255,.1);font-size:13px}.appointment-promises span:last-child{border:0}.appointment-promises b{color:#d9af68;font-size:10px;letter-spacing:.15em}
.appointment-shell{display:grid;grid-template-columns:minmax(300px,.75fr) minmax(0,1.35fr);gap:clamp(24px,5vw,76px);max-width:1440px;margin:auto;padding:clamp(38px,6vw,88px) clamp(14px,5vw,70px)}.appointment-summary{align-self:start;position:sticky;top:100px;overflow:hidden;border:1px solid rgba(20,58,49,.12);border-radius:22px;background:#fff;box-shadow:0 24px 65px rgba(18,52,44,.1)}.appointment-cover{position:relative;height:300px;background:#ccd8d2}.appointment-cover img{width:100%;height:100%;object-fit:cover}.appointment-cover .availability-badge{position:absolute;left:18px;bottom:18px}.appointment-cover-placeholder{display:grid;place-items:center;width:100%;height:100%;color:#3e6258;font-size:11px;letter-spacing:.18em}.appointment-property-copy{padding:25px 26px 18px}.appointment-property-copy>small{color:#9a6d31;font-size:10px;font-weight:700;letter-spacing:.08em}.appointment-property-copy h2{margin:8px 0 14px;font:700 31px/1.18 "Playfair Display","IBM Plex Sans Thai"}.appointment-property-copy h2 em{display:block;color:#b78645;font-style:normal}.appointment-property-copy>strong{display:block;font-size:22px}.appointment-property-copy>a{display:inline-flex;margin-top:15px;color:#6e5a37;font-size:12px;font-weight:700}.appointment-guide{padding:34px 30px;background:linear-gradient(145deg,#fff,#f2ece2)}.appointment-guide>span{color:#b78645;font-size:9px;font-weight:700;letter-spacing:.16em}.appointment-guide h2{margin:13px 0;font:700 36px/1.15 "Playfair Display","IBM Plex Sans Thai"}.appointment-guide p{margin:0;color:#63736e;font-size:13px;line-height:1.8}.appointment-steps{display:grid;gap:0;margin:0;padding:10px 26px 24px;list-style:none}.appointment-steps li{position:relative;display:flex;gap:14px;padding:14px 0}.appointment-steps li:not(:last-child):after{content:"";position:absolute;left:16px;top:45px;bottom:-2px;width:1px;background:#d9d4ca}.appointment-steps b{display:grid;place-items:center;flex:0 0 33px;height:33px;border:1px solid #d4cec3;border-radius:50%;background:#fff;color:#78837f;font-size:10px}.appointment-steps li.active b,.appointment-steps li.done b{border-color:#17483c;background:#17483c;color:#fff}.appointment-steps span{display:grid;gap:2px;font-size:13px;font-weight:700}.appointment-steps small{color:#7a8782;font-size:10px;font-weight:400}
.appointment-form-card{overflow:hidden;border:1px solid rgba(20,58,49,.12);border-radius:24px;background:#fff;box-shadow:0 30px 80px rgba(18,52,44,.1)}.appointment-form-card>header{padding:34px clamp(22px,4vw,52px) 25px;border-bottom:1px solid #e8e3da}.appointment-form-card>header>span{color:#ad7a35;font-size:9px;font-weight:700;letter-spacing:.18em}.appointment-form-card>header h2{margin:7px 0 4px;font:700 clamp(30px,3vw,43px)/1.15 "Playfair Display","IBM Plex Sans Thai"}.appointment-form-card>header p{margin:0;color:#74807c;font-size:12px}.appointment-success{display:flex;gap:15px;align-items:center;margin:24px clamp(22px,4vw,52px) 0;padding:16px 18px;border:1px solid #a9d5bd;border-radius:14px;background:#eaf7f0;color:#175c42}.appointment-success>span{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#1c7451;color:#fff}.appointment-success strong,.appointment-success p{display:block;margin:0}.appointment-success p{margin-top:2px;font-size:12px}.appointment-form-card form{display:grid}.appointment-form-card fieldset{min-width:0;margin:0;padding:29px clamp(22px,4vw,52px);border:0;border-bottom:1px solid #e8e3da}.appointment-form-card legend{display:flex;align-items:center;gap:13px;width:100%;margin-bottom:19px}.appointment-form-card legend>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#173f35;color:#fff;font-size:10px;font-weight:700}.appointment-form-card legend div{display:grid;gap:2px}.appointment-form-card legend strong{font-size:16px}.appointment-form-card legend small{color:#77847f;font-size:10px}.appointment-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.appointment-grid label{display:grid;gap:7px;color:#354a43;font-size:11px;font-weight:700}.appointment-grid label>small{font-weight:400}.appointment-grid input,.appointment-grid select,.appointment-grid textarea{box-sizing:border-box;width:100%;min-height:50px;padding:12px 14px;border:1px solid #d3d6d0;border-radius:11px;background:#fcfaf6;color:#173c33;font:500 14px/1.5 "IBM Plex Sans Thai",sans-serif;outline:none;transition:.18s}.appointment-grid textarea{resize:vertical}.appointment-grid input:focus,.appointment-grid select:focus,.appointment-grid textarea:focus{border-color:#b78645;background:#fff;box-shadow:0 0 0 4px rgba(183,134,69,.1)}.appointment-wide{grid-column:1/-1}.appointment-property-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:340px;overflow:auto;padding:3px}.appointment-option{position:relative;cursor:pointer}.appointment-option input{position:absolute;opacity:0;pointer-events:none}.appointment-option>span{display:grid;grid-template-columns:54px minmax(0,1fr);grid-template-rows:auto auto;column-gap:11px;align-items:center;min-height:68px;padding:9px;border:1px solid #daddd7;border-radius:12px;background:#fff;transition:.18s}.appointment-option img,.appointment-option>span>b{grid-row:1/3;width:54px;height:54px;border-radius:8px;object-fit:cover}.appointment-option>span>b{display:grid;place-items:center;background:#ece7de;color:#8e6b37}.appointment-option strong{overflow:hidden;color:#233f37;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.appointment-option small{overflow:hidden;color:#78847f;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.appointment-option input:checked+span{border-color:#b78645;background:#fff9ef;box-shadow:0 0 0 3px rgba(183,134,69,.1)}.appointment-option input:focus-visible+span{outline:3px solid rgba(183,134,69,.28)}.appointment-option-general>span{background:#f2f6f3}.appointment-consent{display:flex;align-items:flex-start;gap:10px;margin-top:18px;color:#5e6c67;font-size:11px;line-height:1.6}.appointment-consent input{flex:none;margin-top:3px}.appointment-consent a{color:#845d29;text-decoration:underline}.appointment-submit-row{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:25px clamp(22px,4vw,52px) 32px}.appointment-submit-row p{max-width:450px;margin:0;color:#7b8782;font-size:10px;line-height:1.6}.appointment-submit-row .btn{flex:none;border:0;cursor:pointer}.appointment-footer{padding-bottom:92px}.appointment-mobile-bar{display:none}
@media(max-width:980px){.appointment-hero{grid-template-columns:1fr}.appointment-promises{grid-template-columns:repeat(3,1fr)}.appointment-promises span{align-items:flex-start;display:grid;gap:6px}.appointment-shell{grid-template-columns:1fr}.appointment-summary{position:static;display:grid;grid-template-columns:minmax(250px,.9fr) 1.1fr}.appointment-steps{align-self:center}.appointment-cover{height:100%}.appointment-property-copy,.appointment-guide{grid-row:2}.appointment-summary:has(.appointment-cover) .appointment-steps{grid-column:2;grid-row:1/3}.appointment-summary:has(.appointment-guide) .appointment-steps{grid-column:2;grid-row:1}.appointment-summary:has(.appointment-guide) .appointment-guide{grid-column:1;grid-row:1}}
@media(max-width:650px){.appointment-page .public-main-nav nav{display:none}.appointment-page .public-main-nav{min-height:66px}.appointment-hero{padding:54px 20px 44px}.appointment-hero h1{font-size:47px}.appointment-hero p{font-size:14px}.appointment-promises{grid-template-columns:1fr;gap:0}.appointment-promises span{display:flex;padding:14px 16px}.appointment-shell{padding:20px 10px 84px}.appointment-summary{display:block;border-radius:17px}.appointment-cover{height:230px}.appointment-property-copy{padding:20px}.appointment-guide{padding:26px 22px}.appointment-guide h2{font-size:31px}.appointment-steps{grid-template-columns:repeat(3,1fr);padding:15px 12px 18px}.appointment-steps li{display:grid;justify-items:center;gap:6px;padding:8px 3px;text-align:center}.appointment-steps li:not(:last-child):after{left:calc(50% + 19px);right:calc(-50% + 19px);top:24px;bottom:auto;width:auto;height:1px}.appointment-steps span{font-size:10px}.appointment-steps small{display:none}.appointment-form-card{border-radius:17px}.appointment-form-card>header{padding:27px 20px 20px}.appointment-form-card fieldset{padding:24px 16px}.appointment-property-options{grid-template-columns:1fr;max-height:310px}.appointment-grid{grid-template-columns:1fr}.appointment-wide{grid-column:auto}.appointment-submit-row{display:grid;padding:22px 16px 26px}.appointment-submit-row .btn{width:100%}.appointment-footer{padding-bottom:82px}.appointment-mobile-bar{display:grid}.owner-submit-fab{bottom:74px}}

/* Searchable property picker for large catalogues */
.appointment-property-picker{display:grid;gap:10px}.appointment-property-tools{display:grid;grid-template-columns:minmax(200px,1.5fr) repeat(2,minmax(125px,.75fr)) auto;gap:8px;align-items:end;padding:13px;border:1px solid #e0ddd6;border-radius:14px;background:#f7f4ee}.appointment-property-tools label{display:grid;gap:5px}.appointment-property-tools label>span{color:#65746f;font-size:9px;font-weight:700}.appointment-property-tools input,.appointment-property-tools select{box-sizing:border-box;width:100%;min-height:43px;padding:9px 11px;border:1px solid #d3d6d0;border-radius:9px;background:#fff;color:#173c33;font:500 12px "IBM Plex Sans Thai",sans-serif;outline:0}.appointment-property-tools input:focus,.appointment-property-tools select:focus{border-color:#b78645;box-shadow:0 0 0 3px rgba(183,134,69,.1)}.appointment-property-tools button{min-height:43px;padding:9px 12px;border:1px solid #d3d6d0;border-radius:9px;background:#fff;color:#755a34;font:700 10px "IBM Plex Sans Thai",sans-serif;cursor:pointer}
.appointment-picker-meta{display:flex;justify-content:space-between;gap:15px;padding-inline:3px;color:#75817d;font-size:9px}.appointment-picker-meta span{color:#244b40;font-weight:700}.appointment-option.is-selected>span{border-color:#b78645;box-shadow:0 0 0 3px rgba(183,134,69,.1)}.appointment-option.is-selected:after{content:"เลือกจากหน้าทรัพย์";position:absolute;right:8px;top:6px;padding:2px 6px;border-radius:99px;background:#173f35;color:#fff;font-size:7px;font-weight:700;letter-spacing:.04em}
.appointment-picker-footer{display:grid;justify-items:center;gap:8px}.appointment-picker-footer button{padding:8px 17px;border:1px solid #d1cabf;border-radius:99px;background:#fff;color:#765b34;font:700 10px "IBM Plex Sans Thai",sans-serif;cursor:pointer}.appointment-picker-footer button[hidden],.appointment-picker-footer p[hidden]{display:none}.appointment-picker-footer p{margin:0;padding:13px;color:#7a7061;font-size:10px;text-align:center}
@media(max-width:900px){.appointment-property-tools{grid-template-columns:1fr 1fr}.appointment-property-search{grid-column:1/-1}}
@media(max-width:650px){.appointment-property-tools{grid-template-columns:1fr 1fr;padding:10px}.appointment-property-search{grid-column:1/-1}.appointment-property-tools button{align-self:end}.appointment-picker-meta small{display:none}.appointment-option.is-selected:after{display:none}}