/* Shared appointment controls: consistent rendering in Safari and on touch devices. */
#appointment-form .time-fields>div{display:flex;align-items:center;gap:12px;margin-top:8px;max-width:280px}
#appointment-form .time-fields select{appearance:none;-webkit-appearance:none;box-sizing:border-box;display:block;flex:1;width:100%;height:52px;min-height:52px;margin:0;padding:0 30px;font-size:16px;line-height:normal;text-align:center;text-align-last:center;border-radius:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m1 1 6 6 6-6' fill='none' stroke='%23636A42' stroke-width='1.7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
#appointment-form .time-fields>div>span{padding:0;line-height:1}
#appointment-form .appointment-date{position:relative;min-width:0;font-size:inherit}
#appointment-form .appointment-date>label{display:block;font-size:14px}
#appointment-form .date-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;box-sizing:border-box;width:100%;height:52px;margin-top:8px;padding:0 13px;background:transparent;color:inherit;border:1px solid currentColor;border-radius:0;font:inherit;font-size:16px;text-align:left;cursor:pointer}
#appointment-form .date-trigger svg{width:20px;height:20px;flex:none;opacity:.8}
#appointment-form .date-trigger:focus-visible{outline:2px solid #636A42;outline-offset:3px}
#appointment-form .date-calendar{position:absolute;top:calc(100% + 10px);left:0;z-index:45;width:min(340px,100%);min-width:260px;box-sizing:border-box;padding:18px;background:#F2EDE3;color:#24201E;border:1px solid #636A42;box-shadow:0 14px 35px #24201e26;font:16px/1.4 var(--alex-font);border-radius:2px;color-scheme:light}
#appointment-form .date-calendar[hidden]{display:none}
#appointment-form .calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:17px}
#appointment-form .calendar-month{font-size:16px;font-weight:700;letter-spacing:0;text-align:center}
#appointment-form .date-calendar button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;margin:0;padding:0;background:transparent;color:#24201E;border:1px solid transparent;border-radius:2px;font:inherit;font-size:14px;line-height:1;letter-spacing:0;cursor:pointer}
#appointment-form .calendar-heading button{width:38px;height:38px;flex:none;border-color:#636a4266;font-size:24px}
#appointment-form .calendar-week,#appointment-form .calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
#appointment-form .calendar-week span{padding:0 0 9px;color:#636A42;text-align:center;font-size:11px;font-weight:700}
#appointment-form .calendar-days button{height:36px;width:100%;font-variant-numeric:tabular-nums}
#appointment-form .calendar-days button[data-outside]{opacity:.42}
#appointment-form .calendar-days button[aria-current=date]{border-color:#636A42}
#appointment-form .calendar-days button[aria-pressed=true]{background:#601F45;color:#F2EDE3;opacity:1}
#appointment-form .date-calendar button:hover{background:#636A42;color:#F2EDE3;opacity:1}
#appointment-form .date-calendar button:focus-visible{outline:2px solid #601F45;outline-offset:1px}
#appointment-form .calendar-footer{display:flex;justify-content:space-between;border-top:1px solid #636a4244;margin-top:14px;padding-top:10px;gap:10px}
#appointment-form .calendar-footer button{padding:9px 10px;font-size:12px;color:#601F45}
.atelier #appointment-form .date-trigger{background:#eeebdf;color:#292e23;border:0;border-bottom:1px solid #8f9a75;font-family:var(--alex-font)}
@media(max-width:380px){#appointment-form .date-calendar{min-width:0;width:100%;padding:12px}}

.request-area #appointment-form .time-fields select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m1 1 6 6 6-6' fill='none' stroke='%23F2EDE3' stroke-width='1.7'/%3E%3C/svg%3E")}

/* Crisp geometric checkbox: no font-dependent checkmark glyph. */
#appointment-form input[type="checkbox"]{appearance:none;-webkit-appearance:none;box-sizing:border-box;position:relative;display:inline-grid;place-items:center;flex:0 0 20px;width:20px;height:20px;min-width:20px;min-height:20px;margin:2px 0 0;padding:0;border:1px solid #f2ede380;border-radius:3px;background:transparent;cursor:pointer;transition:background-color .18s,border-color .18s}
#appointment-form input[type="checkbox"]::after{content:'';display:block;box-sizing:border-box;width:10px;height:6px;margin-top:-2px;border:0;border-left:1.8px solid #F2EDE3;border-bottom:1.8px solid #F2EDE3;transform:rotate(-45deg);opacity:0;transition:opacity .15s}
#appointment-form input[type="checkbox"]:checked{background:#f2ede314;border-color:#F2EDE3}
#appointment-form input[type="checkbox"]:checked::after{content:'';font-size:0;line-height:0;transform:rotate(-45deg);opacity:1}
#appointment-form input[type="checkbox"]:hover{border-color:#F2EDE3;background:#f2ede314}
#appointment-form input[type="checkbox"]:focus-visible{outline:2px solid #F2EDE3;outline-offset:4px}
.atelier #appointment-form input[type="checkbox"]{border-color:#636a4280;background:transparent}
.atelier #appointment-form input[type="checkbox"]:checked{background:#636A42;border-color:#636A42}
.atelier #appointment-form input[type="checkbox"]:hover{border-color:#636A42}
.atelier #appointment-form input[type="checkbox"]:focus-visible{outline-color:#601F45}
@media(prefers-reduced-motion:reduce){#appointment-form input[type="checkbox"],#appointment-form input[type="checkbox"]::after{transition:none}}