.barber-page{--pink:#deaf80;--teal:#d5c5a4;--panel:#1d1a19;--line:#493d36;background:#12100f}.barber-main{padding-block:45px 85px}.barber-hero{display:flex;justify-content:space-between;gap:24px;align-items:center;background:radial-gradient(ellipse at 90% 5%,#6c4a32,transparent 54%),linear-gradient(125deg,#2d231f,#1b1818);border:1px solid #6d4b3a;border-radius:20px;padding:clamp(25px,5vw,56px)}.barber-hero h1{font-size:clamp(45px,7vw,82px);letter-spacing:-.075em;line-height:1;margin:18px 0 15px}.barber-hero em{font-style:normal;color:#e7b786}.barber-hero p:last-child{color:#c7b7ad;font-size:15px}.barber-lede{color:#e4d3c0;font:600 18px var(--heading);margin-bottom:7px}.barber-art{display:grid;place-items:center;align-content:center;gap:4px;flex:none;width:190px;height:190px;border:1px solid #ad825f;border-radius:50%;background:#e9c39a14;text-align:center;transform:rotate(-8deg)}.barber-art span{font-size:83px;line-height:1;color:#dcb58d}.barber-art small{text-transform:uppercase;letter-spacing:.18em;color:#e8cbaa;font-weight:700}.demo-note{display:flex;gap:15px;align-items:baseline;padding:15px 18px;margin:17px 0 29px;border:1px solid #766144;border-radius:11px;background:#30281e;color:#ead9c2;font-size:13px}.demo-note strong{white-space:nowrap;color:#f6d7a9}.booking-layout{display:grid;grid-template-columns:1.12fr .88fr;gap:16px}.calendar-panel,.slots-panel,.booking-form-panel,.booking-confirmation{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:23px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px}.panel-heading h2{font-size:28px;letter-spacing:-.05em;margin-top:5px}.step{font-size:11px;font-weight:700;letter-spacing:.12em;color:#dfb98a}.month-nav{display:flex;align-items:center;gap:10px}.month-nav strong{font-size:14px;min-width:112px;text-align:center;text-transform:capitalize}.month-nav button{width:34px;height:34px;background:#342923;border:1px solid #685449;border-radius:8px;color:#fff;font-size:25px;line-height:1;cursor:pointer}.month-nav button:disabled{opacity:.35;cursor:default}.weekday-row,.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.weekday-row{font-size:11px;text-align:center;color:#b8a89c;font-weight:700;margin-bottom:8px}.calendar-days button{position:relative;min-width:0;min-height:55px;border:1px solid #51433c;border-radius:9px;background:#29231f;color:#f3e9df;cursor:pointer;font-weight:700}.calendar-days button small{display:block;font-size:9px;font-weight:500;color:#c5b4a5;margin-top:2px}.calendar-days button:hover:not(:disabled),.calendar-days button.selected{border-color:#e8bd8e;background:#5b3c2b}.calendar-days button.today:after{content:"";position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:#f3bf83}.calendar-days button.full{color:#b1a19a}.calendar-days button:disabled{opacity:.25;cursor:default}.calendar-hint{font-size:12px;color:#aa9b92;margin-top:13px}.selected-date{font-size:13px;color:#cbb9aa;margin-top:6px;text-transform:capitalize}.availability-count{border-radius:99px;padding:5px 9px;background:#98745033;color:#e7bf8e;font-size:12px;white-space:nowrap}.time-slots{display:grid;gap:9px}.time-slot{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;border:1px solid #71543f;border-radius:10px;padding:13px 15px;background:#2a211d;color:#f4e9df;text-align:left;cursor:pointer;font-weight:700}.time-slot span:last-child{font-size:12px;font-weight:600;color:#e0b98e}.time-slot:hover:not(:disabled),.time-slot.selected{background:#60402a;border-color:#e6b783}.time-slot:disabled{cursor:not-allowed;opacity:.55}.time-slot:disabled span:last-child{color:#b2a39c}.booking-status{color:#d9b18d;font-size:13px;margin-top:13px;min-height:20px}.booking-form-panel{margin-top:17px}.booking-form-panel[hidden],.booking-confirmation[hidden]{display:none}.booking-form-panel .panel-heading{margin-bottom:15px}.booking-form-panel .panel-heading p{margin-top:8px;color:#cbb7a2;font-size:14px}.booking-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.booking-fields label{font-weight:700;font-size:13px}.booking-fields input{display:block;width:100%;margin-top:6px;min-height:46px;padding:10px 12px;border-radius:8px;border:1px solid #685449;background:#141211;color:#fff;font:inherit}.booking-fields input:focus-visible{outline:2px solid #e6b783;outline-offset:2px}.booking-confirmation{margin-top:17px;border-color:#ae8f62;background:#29241b;color:#f4e1bb}.booking-confirmation strong{display:block;font-size:21px;font-family:var(--heading);margin-bottom:6px}.booking-confirmation p{color:#dccbb8}@media(max-width:850px){.booking-layout{grid-template-columns:1fr}.barber-art{width:130px;height:130px}.barber-art span{font-size:60px}}@media(max-width:680px){.barber-main{padding-block:23px 55px}.barber-hero{padding:24px}.barber-hero h1{font-size:clamp(44px,12vw,63px)}.barber-art{display:none}.demo-note{display:block}.demo-note strong{display:block;margin-bottom:4px}.calendar-panel,.slots-panel,.booking-form-panel,.booking-confirmation{padding:15px}.panel-heading h2{font-size:25px}.month-nav{gap:5px}.month-nav strong{min-width:95px;font-size:12px}.calendar-days{gap:4px}.calendar-days button{min-height:47px;font-size:13px}.calendar-days button small{font-size:8px}.booking-fields{grid-template-columns:1fr}}

.barber-nav{display:flex;gap:9px;align-items:center}.barber-admin-panel{margin-top:25px;padding:clamp(18px,3vw,32px);border:1px solid #795b42;border-radius:17px;background:#211a17}.barber-admin-panel[hidden]{display:none}.barber-admin-panel h2{font-size:clamp(26px,4vw,36px);margin:8px 0}.barber-admin-panel h3{font-size:21px;margin-bottom:8px}.barber-admin-panel p{color:#cfbdad;font-size:14px}.barber-admin-form{display:flex;align-items:end;gap:12px;margin-top:18px;max-width:660px}.barber-admin-form label,.barber-settings label{display:block;font-size:13px;font-weight:700;flex:1}.barber-admin-form input,.barber-settings input{display:block;width:100%;margin-top:6px;min-height:44px;padding:10px 12px;border:1px solid #705747;border-radius:8px;background:#13100f;color:#fff;font:inherit;color-scheme:dark}.barber-admin-head{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:23px}.barber-admin-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px}.barber-settings,.barber-reservations{background:#191513;border:1px solid #514135;border-radius:13px;padding:21px}.barber-settings>label{margin-top:17px}.schedule-times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}.barber-settings fieldset{border:1px solid #5e493a;border-radius:9px;padding:14px;margin:18px 0}.barber-settings legend{font-weight:700;padding-inline:5px}.working-days{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:13px}.working-days label{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500}.working-days input{width:18px;height:18px;min-height:18px;margin:0;accent-color:#e4b986}.barber-reservations-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.appointment-item{padding:15px 0;border-top:1px solid #493c33;display:flex;justify-content:space-between;align-items:start;gap:12px}.appointment-item strong,.appointment-item span{display:block}.appointment-item strong{font-size:14px;color:#f5e7d4}.appointment-item span{font-size:13px;color:#c5b4a5;margin-top:4px}.appointment-item .button{flex:none}@media(max-width:850px){.barber-admin-grid{grid-template-columns:1fr}}@media(max-width:680px){.barber-nav{gap:5px}.barber-nav .button{padding:8px;font-size:11px}.barber-admin-form,.barber-admin-head,.appointment-item{flex-direction:column;align-items:stretch}.barber-admin-form .button,.appointment-item .button{width:100%}.schedule-times{grid-template-columns:1fr}}
