.appointment{background:var(--bg-clr);min-height:100svh;padding:100px 20px}.appointment-container{background:#000;border-radius:10px;grid-template-columns:repeat(2,1fr);gap:40px;width:100%;padding:40px;display:grid}.calendar{text-align:center;flex-direction:column;justify-content:space-around;gap:20px;width:100%;height:100%;display:flex}.calendar-header{justify-content:space-between;align-items:center;display:flex}.calendar-nav-btn{background:#ffffff26;border-radius:10px;justify-content:center;align-items:center;padding:10px;display:flex}.calendar-grid{grid-template-columns:repeat(7,1fr);gap:10px;display:grid}.calendar-grid-btn{aspect-ratio:1;background:#ffffff26;border-radius:10px}.calendar-grid-btn--selected{color:#000;background:#00d9ff}.calendar-grid-btn--past,.calendar-grid-btn--sunday{opacity:.5;cursor:not-allowed}.calendar-time-grid{grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px;display:grid}.calendar-time{background:#ffffff26;border-radius:10px;padding:10px}.calendar-time--selected{background:var(--primary-clr);color:#000}.calendar-time--booked{opacity:.5;cursor:not-allowed}.calendar-submit-btn{background:var(--secondary-clr);border-radius:10px;padding:10px}.calendar-form{flex-direction:column;gap:40px;display:flex}.calendar-form-summary{justify-content:center;align-items:center;gap:5px;display:flex}.input-container{flex-direction:column;padding-bottom:5px;display:flex;position:relative}.input-container:before{content:"";background:#ffffff80;width:100%;height:2px;position:absolute;bottom:0;left:0}.input-container:after{content:"";transform-origin:0;background:#fff;width:100%;height:2px;transition:transform .5s;position:absolute;bottom:0;left:0;transform:scaleX(0)}.input-container label{transition:transform .5s,color .5s,font-size .5s;position:absolute}.input-container ::placeholder{opacity:0;transition:opacity .5s}.input-container:has(input:disabled,textarea:disabled):after{background:#adff2f}.input-container:focus-within:after{transform:scaleX(1)}.input-container:focus-within label{font-size:14px;transform:translateY(-20px)}.input-container:focus-within ::placeholder{opacity:1}.input-container--active:after{transform:scaleX(1)}.input-container--active label{color:#ffffff80;font-size:14px;transform:translateY(-20px)}.textarea{resize:none;flex-grow:1}.appointment-success-banner{z-index:9999;text-align:center;background:#333;border-radius:10px;width:min(100% - 40px,500px);padding:1.25rem;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.appointment-success-date{margin:20px 0;font-size:1.25rem}.appointment__close-btn{background:var(--secondary-clr);border-radius:10px;margin-top:20px;padding:10px}.appointment-success-curtain{z-index:9998;background:#00000080;position:fixed;inset:0}@media screen and not (min-width:900px){.appointment-container{grid-template-columns:repeat(1,1fr);gap:20px;padding:20px}.calendar-grid{gap:5px}}