/* Styled to match hamptonglassonline.com: white/clean, Mulish (Avenir/Lulo stand-in), Playfair Display, greens #68B04D / #005C37, taupe #957B5F */
@font-face{font-family:Mulish;src:url(/fonts/Mulish.woff2) format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(/fonts/PlayfairDisplay.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--g:#68B04D;--dg:#005C37;--ddg:#013B16;--taupe:#957B5F;--ink:#2B2B2B;--grey:#928D8D;--line:#d9d6d2;--err:#b3261e}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;background:transparent;color:var(--ink);font:300 16px/1.55 Mulish,Avenir,"Helvetica Neue",Arial,sans-serif;overflow-x:hidden}
b,strong{font-weight:700}
a{color:var(--dg)}
.wrap{max-width:720px;margin:0 auto;padding:16px 14px 28px;position:relative}
.hd{text-align:center;padding:4px 4px 18px}
.logo{display:block;width:100%;max-width:380px;height:auto;margin:0 auto 14px}
h1{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:32px;margin:4px 0 8px;color:var(--dg);letter-spacing:.01em}
.lead{margin:0 auto;max-width:540px;color:var(--ink)}
.card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--g);padding:18px 16px;margin:0 0 16px}
h2{font-size:15px;margin:0 0 14px;font-weight:800;display:flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--ddg)}
.n{display:inline-flex;width:26px;height:26px;border:1px solid var(--taupe);color:var(--dg);font-size:13px;letter-spacing:0;align-items:center;justify-content:center;flex:none;font-weight:800}
.fld{margin:12px 0 0;min-width:0}
.fld label,.lab{display:block;font-size:12px;font-weight:700;margin:0 0 5px;color:var(--ink);text-transform:uppercase;letter-spacing:.12em}
.opt{font-weight:400;color:var(--grey);text-transform:none;letter-spacing:0}
input:not([type=radio]):not([type=checkbox]):not([type=file]),textarea,select{width:100%;font:inherit;font-weight:400;font-size:16px;padding:11px 12px;border:1px solid #bdb8b2;border-radius:0;background:#fff;color:inherit;min-width:0;appearance:none;-webkit-appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,#005C37 50%),linear-gradient(135deg,#005C37 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:32px}
textarea{resize:vertical;min-height:96px}
input:focus,textarea:focus,select:focus{outline:2px solid var(--g);outline-offset:0;border-color:var(--g)}
.bad{border-color:var(--err)!important;background:#fff6f5!important}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.hint{margin:-6px 0 12px;color:#5f5a55;font-size:15px}
.hint.small{margin:10px 0 0;font-size:14px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg label{position:relative;cursor:pointer}
.seg input,.opt-row input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:8px 10px;border:1px solid #bdb8b2;font-weight:700;background:#fff;color:var(--ink);text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.seg input:checked+span{background:var(--dg);border-color:var(--dg);color:#fff}
.seg input:focus-visible+span,.opt-row input:focus-visible~.box{outline:2px solid var(--g);outline-offset:2px}
.opts{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.opt-row{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;border:1px solid #bdb8b2;cursor:pointer;position:relative;background:#fff}
.opt-row .box{width:22px;height:22px;border:2px solid var(--dg);flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:800}
.opt-row .lbl{font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:14px}
.opt-row:has(input:checked){border-color:var(--dg);background:#f3f8f0}
.opt-row input:checked~.box{background:var(--dg)}
.opt-row input:checked~.box::after{content:"✓"}
.blurb,.tilestate{margin:-4px 0 2px;padding:8px 14px 10px 48px;font-size:15px;color:#3f3a35;border-left:3px solid var(--g);background:#fafaf8}
.tilestate{font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--dg)}
.tilestate button{font:inherit;font-weight:700;background:none;border:0;color:var(--taupe);text-decoration:underline;cursor:pointer;padding:0 0 0 8px;letter-spacing:.05em}
.photo-btn{position:relative;display:inline-flex!important;width:auto!important;align-items:center;justify-content:center;margin-top:8px!important;padding:11px 18px!important;font-size:14px!important;cursor:pointer}
.photo-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.thumbs:empty{display:none}
.th{position:relative;aspect-ratio:1;border:1px solid var(--line);background:#f4f3f1;overflow:hidden}
.th img{width:100%;height:100%;object-fit:cover;display:block}
.th .heic{display:flex;height:100%;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--grey)}
.th.badph{outline:3px solid var(--err)}
.th button{position:absolute;top:4px;right:4px;width:30px;height:30px;border:0;background:rgba(0,0,0,.65);color:#fff;font-size:18px;line-height:30px;cursor:pointer;padding:0}
.cal{display:block}
.mon{font-weight:800;font-size:13px;color:var(--taupe);margin:14px 0 6px;letter-spacing:.2em}
.mon:first-child{margin-top:0}
.dow,.wk{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.dow div{font-size:11px;text-align:center;color:var(--grey);font-weight:700;padding-bottom:2px;text-transform:uppercase;letter-spacing:.1em}
.wk{margin-bottom:6px}
.day{font:inherit;border:1px solid #bdb8b2;background:#fff;border-radius:0;min-height:52px;padding:4px 2px;cursor:pointer;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.day b{font-size:18px;line-height:1.1;font-weight:700}
.day small{font-size:11px;color:var(--grey)}
.day:hover{border-color:var(--g)}
.day.sel{background:var(--dg);border-color:var(--dg);color:#fff}
.day.sel small{color:#d7ead0}
.day.na{background:#f1efec;border-color:#e2dfdb;color:#b1aca6;cursor:not-allowed}
.day.na b{text-decoration:line-through}
.day.na small{color:#a19a93;font-weight:700;letter-spacing:.06em;font-size:9px}
.day.blank{visibility:hidden}
.legend{font-size:13px;color:var(--grey);margin:6px 0 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lg{display:inline-block;width:14px;height:14px;border:1px solid #bdb8b2;background:#fff}
.lg.full{background:#f1efec;border-color:#e2dfdb;margin-left:10px}
.picked{margin:12px 0 0;padding:10px 12px;background:#f3f8f0;border-left:4px solid var(--g);font-weight:700;color:var(--dg)}
.loading{color:var(--grey)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{background:#fdeceb;border:1px solid #e3a59d;color:#8e1b14;padding:12px;margin:0 0 12px;font-weight:800;letter-spacing:.03em}
.fld .err{margin:10px 0 0}
.btn{display:block;width:100%;font:inherit;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;padding:16px;border:1px solid var(--dg);border-radius:0;background:var(--dg);color:#fff;cursor:pointer;text-align:center}
.btn:hover{background:var(--ddg)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn.ghost{background:#fff;color:var(--dg)}
.btn.ghost:hover{background:#f3f8f0}
#again{margin-top:14px}
.fine{font-size:12px;color:var(--grey);text-align:center;margin:10px 0 0}
.done{text-align:center;padding:28px 16px}
.tick{width:58px;height:58px;border:2px solid var(--g);color:var(--g);font-size:30px;line-height:54px;margin:0 auto 12px;font-weight:800}
.done h2{justify-content:center;font-family:"Playfair Display",Georgia,serif;font-size:28px;text-transform:none;letter-spacing:0;color:var(--dg)}
.ref{font-size:16px;margin:4px 0}
.ref b{font-size:20px;letter-spacing:.1em;background:#f3f8f0;padding:2px 8px;color:var(--dg)}
.ddate{font-size:20px;font-weight:700;margin:12px 0 6px;color:var(--dg)}
.call{background:#f3f8f0;border-left:4px solid var(--g);padding:12px;margin:12px 0;text-align:left}
/* Modal: positioned absolutely next to the Shower option so it is on screen even inside an auto-height iframe */
.shade{position:absolute;inset:0;background:rgba(255,255,255,.78);z-index:20}
.modal{position:absolute;left:8px;right:8px;z-index:30;display:flex;justify-content:center}
.sheet{background:#fff;border:1px solid var(--line);border-top:4px solid var(--g);box-shadow:0 10px 40px rgba(0,0,0,.18);padding:22px 18px;max-width:460px;width:100%;text-align:center}
.sheet h3{margin:0 0 16px;font-size:16px;font-weight:800;letter-spacing:.14em;color:var(--ddg)}
.yn{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stopmsg{font-weight:800;letter-spacing:.03em;color:#8e1b14;background:#fdeceb;border:1px solid #e3a59d;padding:12px;margin:0 0 12px;text-align:left}
.stopcall a{display:inline-block;font-weight:800;letter-spacing:.12em;font-size:18px;margin:0 0 14px;text-decoration:none}

.remote{margin:12px 0 4px;padding:12px 14px;border:1px solid #bdb8b2;border-left:3px solid var(--g);background:#fff}
.rq{margin:0 0 10px;font-weight:800;font-size:13px;letter-spacing:.14em;color:var(--ddg)}
.remote.badq{border-color:var(--err);background:#fff6f5}
.remote-note{margin:10px 0 0;padding-left:14px}