/* Popup overlay and content improvements */
.popup-overlay {opacity:0; visibility:hidden; pointer-events:none; position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.4); backdrop-filter: blur(2px); transition: opacity .3s ease; z-index: 1000;}
.popup-content {position:relative; width: min(560px, 92vw); background:#fff; border-radius:16px; padding:28px 24px; box-shadow:0 20px 60px rgba(0,0,0,0.15); overflow:hidden;}
.popup-content h2 {margin: 0 0 16px; font-size:24px;}
#appointment-form {display:flex; flex-direction:column; gap:12px;}
/* Submit button with loader */
.btn-submit:active {transform: translateY(1px)}
.btn-submit[disabled] {opacity:.8; cursor:not-allowed}
.btn-submit .btn-text {display:inline-block}
.btn-submit .spinner {width:18px; height:18px; border:2px solid rgba(255,255,255,0.5); border-top-color:#fff; border-radius:50%; animation:spin 0.9s linear infinite; display:none}
.btn-submit.is-loading .spinner {display:inline-block}
.btn-submit.is-loading .btn-text {opacity:.9}
@keyframes spin {to {transform: rotate(360deg)}}
/* Success animation for checkmark */
#success-animation {text-align:center}
.checkmark {width:84px; height:84px; display:block; margin:12px auto}
.checkmark__circle {stroke:dodgerblue; stroke-width:3; stroke-linecap:round; stroke-miterlimit:10; stroke-dasharray: 166; stroke-dashoffset: 166; animation: stroke 0.8s ease-out forwards}
.checkmark__check {stroke:dodgerblue; stroke-width:3; stroke-linecap:round; stroke-miterlimit:10; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.5s 0.6s ease-out forwards}
@keyframes stroke {to {stroke-dashoffset: 0}}
.success-text {font-weight:600; color:#2c2c2c; opacity:0; transform: translateY(6px); animation: successText .4s .9s ease-out forwards}
@keyframes successText {to {opacity:1; transform: translateY(0)}}
/* Error message styling */
#form-message {font-size:14px}
/* Subtle form dim state while sending */
.form-sending {pointer-events:none; opacity:0.75;}
/* Close button nicer target */
.popup-close {position:absolute; right:10px; top:10px; background:transparent; border:none; font-size:28px; line-height:1; cursor:pointer; color:#8a8a8a; transition: color .2s}
.popup-close:hover {color:#333}