.cs-booking-widget {
--radius: 8px;
font-family: 'Inter', sans-serif;
background: #fff;
color: #111;
width: 100%;
max-width: 900px;
margin: 40px auto;
padding: 0 20px;
box-sizing: border-box;
}
.cs-booking-widget * {
box-sizing: border-box;
}
.cs-booking-widget .booking-heading {
text-align: center;
font-size: 20px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #f15a38;
margin-top: 24px;
margin-bottom: 10px;
}
.cs-booking-widget .plan-indicator {
text-align: center;
font-size: clamp(43px, 5.6vw, 67px);
font-weight: 950;
letter-spacing: -0.06em;
text-transform: uppercase;
color: #111;
line-height: 0.92;
margin-bottom: 18px;
}
.cs-booking-widget .plan-description {
text-align: center;
max-width: 760px;
margin: 0 auto 34px;
padding: 0 18px;
font-size: clamp(18px, 1.84vw, 25px);
font-weight: 500;
color: #5a5a5a;
line-height: 1.34;
}
.cs-booking-widget .status-message {
display: none;
margin: 0 auto 24px auto;
max-width: 640px;
border-radius: 12px;
padding: 14px 18px;
font-size: 15px;
line-height: 1.5;
text-align: center;
}
.cs-booking-widget .status-message.visible {
display: block;
}
.cs-booking-widget .status-message.error {
background: #fbeaea;
color: #9b1c1c;
border: 1px solid #efc2c2;
}
.cs-booking-widget .status-message.success {
background: #ebf7ee;
color: #1d6d35;
border: 1px solid #c9e7d2;
}
.cs-booking-widget .calendar-header {
display: grid;
grid-template-columns: 58px 1fr 58px;
align-items: center;
gap: 18px;
max-width: 860px;
margin: 0 auto 26px;
}
.cs-booking-widget #monthYear {
text-align: center;
font-size: clamp(24px, 2.4vw, 35px);
font-weight: 850;
letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 1.04;
margin-bottom: 0;
}
.cs-booking-widget .nav-btn {
width: 45px;
height: 45px;
margin: 0 auto;
padding: 0;
background: #fff;
border: 1.5px solid rgba(17, 17, 17, 0.14);
border-radius: 999px;
box-shadow: 0 10px 28px rgba(17, 17, 17, 0.06);
font-size: 22px;
font-weight: 600;
color: #111;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.cs-booking-widget .nav-btn:hover {
border-color: rgba(241, 90, 56, 0.55);
box-shadow: 0 14px 32px rgba(17, 17, 17, 0.1);
transform: translateY(-1px);
}
.cs-booking-widget .nav-btn:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 3px;
}
.cs-booking-widget .nav-btn.hidden {
visibility: hidden;
}
.cs-booking-widget .reserva-layout {
display: block;
}
.cs-booking-widget .calendar-wrapper {
width: 100%;
}
.cs-booking-widget .calendar {
border-radius: var(--radius);
overflow: hidden;
}
.cs-booking-widget .calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
}
.cs-booking-widget .day-name {
padding: 8px 0;
font-size: 12px;
font-weight: 500;
text-align: center;
color: #777;
}
.cs-booking-widget .day-badge {
position: absolute;
bottom: 6px;
right: 6px;
min-width: 18px;
height: 18px;
border-radius: 20px;
background: #111;
color: #fff;
font-size: 11px;
line-height: 18px;
text-align: center;
padding: 0 5px;
}
.cs-booking-widget .hours {
margin-top: 40px;
border-top: 1px solid #111;
padding-top: 30px;
display: block;
}
.cs-booking-widget .selected-date-card {
border: 1px solid #e5e5e5;
border-radius: 14px;
padding: 22px;
text-align: center;
margin-bottom: 25px;
background: #fff;
}
.cs-booking-widget .selected-date-card strong {
display: block;
font-size: 22px;
margin-bottom: 6px;
}
.cs-booking-widget .selected-date-card span {
font-size: 15px;
color: #666;
}
.cs-booking-widget .booking-list {
margin: 18px 0 0 0;
padding: 0;
list-style: none;
text-align: left;
}
.cs-booking-widget .booking-list li {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid #efefef;
font-size: 14px;
}
.cs-booking-widget .booking-remove {
border: none;
background: transparent;
color: #9A7E7E;
cursor: pointer;
font-size: 12px;
font-weight: 500;
padding: 0;
}
.cs-booking-widget .booking-remove:hover {
color: #B03A3A;
}
.cs-booking-widget .time-slots {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.cs-booking-widget .time-slot {
border: 1px solid #7a7a7a;
border-radius: 10px;
padding: 22px;
min-height: 64px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 18px;
font-weight: 600;
line-height: 1;
cursor: pointer;
background: #fff;
color: #222;
}
.cs-booking-widget .time-slot:focus-visible,
.cs-booking-widget .main-btn:focus-visible,
.cs-booking-widget .booking-remove:focus-visible,
.cs-booking-widget .booking-delete:focus-visible,
.cs-booking-widget .modal button:focus-visible,
.cs-booking-widget .hour-picker-option:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 3px;
}
.cs-booking-widget .time-slot.hidden {
display: none;
}
.cs-booking-widget .time-slot.selected {
background: #111;
color: #fff;
}
.cs-booking-widget .time-slot.disabled {
opacity: 0.35;
pointer-events: none;
}
.cs-booking-widget .main-btn {
width: 100%;
margin-top: 30px;
padding: 20px;
font-size: 22px;
font-weight: 600;
letter-spacing: 0.02em;
border: none;
border-radius: 14px;
background: #111;
color: #fff;
cursor: pointer;
transition: 0.2s ease;
}
.cs-booking-widget .main-btn:disabled {
background: #ddd;
color: #999;
cursor: not-allowed;
}
.cs-booking-widget .progress-wrapper {
margin-top: 14px;
}
.cs-booking-widget .progress-bar {
height: 6px;
background: #eee;
border-radius: 6px;
overflow: hidden;
margin-top: 8px;
}
.cs-booking-widget .progress-fill {
height: 100%;
background: #324C6E;
width: 0%;
transition: width 0.3s ease;
}
.cs-booking-widget .progress-check {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 10px;
padding: 4px 8px;
border-radius: 20px;
background: rgba(22, 163, 74, 0.12);
color: #16A34A;
font-size: 13px;
font-weight: 700;
line-height: 1;
}
.cs-booking-widget .modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
}
.cs-booking-widget .modal-overlay.visible {
display: flex;
}
.cs-booking-widget .modal {
background: #fff;
padding: 24px 24px;
max-width: 460px;
width: 100%;
box-sizing: border-box;
border: 1px solid #dcdcdc;
border-radius: 14px;
text-align: center;
}
.cs-booking-widget .modal-title {
font-size: 16px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 14px;
}
.cs-booking-widget .modal-subtitle {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #111;
margin-bottom: 18px;
}
.cs-booking-widget .modal-title::after {
content: "";
display: block;
width: 60px;
height: 1px;
background: #111;
margin: 20px auto 35px auto;
}
.cs-booking-widget .modal-message {
color: #333;
font-size: 15px;
line-height: 1.5;
margin: 0 0 18px;
}
.cs-booking-widget .field-label {
display: block;
text-align: left;
font-size: 12px;
font-weight: 600;
margin: 0 0 6px 0;
}
.cs-booking-widget .modal input,
.cs-booking-widget .modal textarea {
width: 100%;
padding: 12px 14px;
margin-bottom: 10px;
border: 1px solid #cfcfcf;
border-radius: 10px;
font-size: 15px;
font-family: 'Inter', sans-serif;
background: #fff;
}
.cs-booking-widget .modal input:focus-visible,
.cs-booking-widget .modal textarea:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 2px;
border-color: #1d4ed8;
}
.cs-booking-widget .modal textarea {
min-height: 64px;
resize: none;
}
.cs-booking-widget .modal .actions {
display: flex;
gap: 12px;
margin-top: 10px;
}
.cs-booking-widget .modal button {
flex: 1;
min-width: 0;
padding: 12px;
font-size: 16px;
font-weight: 600;
border: 1px solid #111;
border-radius: 10px;
cursor: pointer;
transition: 0.2s ease;
}
.cs-booking-widget .hour-picker-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: none;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 10001;
}
.cs-booking-widget .hour-picker-overlay.visible {
display: flex;
}
.cs-booking-widget .hour-picker-modal {
width: 100%;
max-width: 420px;
background: #fff;
border-radius: 18px;
padding: 26px 22px 20px;
text-align: center;
}
.cs-booking-widget .hour-picker-title {
font-size: 20px;
font-weight: 700;
margin: 0 0 8px;
}
.cs-booking-widget .hour-picker-text {
font-size: 14px;
line-height: 1.45;
color: #555;
margin: 0 0 18px;
}
.cs-booking-widget .hour-picker-options {
display: grid;
gap: 10px;
}
.cs-booking-widget .hour-picker-option {
width: 100%;
padding: 14px 16px;
border: 1px solid #111;
border-radius: 10px;
background: #fff;
color: #111;
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
.cs-booking-widget .hour-picker-option:hover {
background: #111;
color: #fff;
}
.cs-booking-widget .hour-picker-cancel {
width: 100%;
margin-top: 12px;
padding: 12px 16px;
border: 1px solid #cfcfcf;
border-radius: 10px;
background: #fff;
color: #555;
font-size: 15px;
cursor: pointer;
}
.cs-booking-widget .modal .confirm-btn {
background: #111;
color: #fff;
}
.cs-booking-widget .modal .cancel-btn {
background: #fff;
color: #111;
}
.cs-booking-widget .day {
min-height: 70px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 20px;
font-weight: 600;
border-radius: 12px;
background: #fafafa;
color: #111;
transition: all 0.2s ease;
position: relative;
padding: 6px;
border: 1.5px solid transparent;
}
.cs-booking-widget .day.empty {
background: transparent;
pointer-events: none;
}
.cs-booking-widget .day.disabled {
color: #d6d6d6;
background: #fafafa;
cursor: not-allowed;
}
.cs-booking-widget .day.selected-group {
background: #EAF1FB;
color: #445A73;
border: 1.5px solid #2F5B8C;
}
.cs-booking-widget .day.selected-tutoring {
background: #F6E9E9;
color: #B03A3A;
border: 1.5px solid #B03A3A;
}
.cs-booking-widget .day.active-day {
outline: none;
transform: scale(1.02);
}
.cs-booking-widget .booking-actions {
display: inline-flex;
align-items: center;
gap: 10px;
}
.cs-booking-widget .booking-delete {
border: none;
background: transparent;
color: #b8b8b8;
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0;
}
.cs-booking-widget .booking-delete:hover {
color: #B03A3A;
}
.cs-booking-widget .booking-section-title {
padding: 16px 0 8px 0;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #9a9a9a;
border-bottom: none;
}
@media (min-width: 900px) {
.cs-booking-widget {
max-width: 1100px;
}
.cs-booking-widget .reserva-layout {
display: flex;
gap: 60px;
align-items: flex-start;
margin-top: 40px;
margin-bottom: 60px;
}
.cs-booking-widget .calendar-wrapper {
width: 55%;
}
.cs-booking-widget .hours {
width: 45%;
margin-top: 0;
border-top: none;
padding-top: 0;
}
}
@media (max-width: 480px) {
.cs-booking-widget {
max-width: 100%;
padding: 0 8px;
margin: 20px auto 40px;
}
.cs-booking-widget .booking-heading {
font-size: 17px;
letter-spacing: 0.16em;
margin-top: 12px;
margin-bottom: 8px;
}
.cs-booking-widget .plan-indicator {
font-size: clamp(32px, 8.8vw, 45px);
letter-spacing: -0.05em;
line-height: 0.94;
margin-bottom: 12px;
}
.cs-booking-widget .plan-description {
font-size: 13px;
line-height: 1.38;
margin-top: 0;
margin-bottom: 20px;
padding: 0 18px;
}
.cs-booking-widget .calendar-header {
grid-template-columns: 36px 1fr 36px;
gap: 10px;
margin-bottom: 14px;
align-items: center;
}
.cs-booking-widget .nav-btn {
width: 36px;
height: 36px;
font-size: 18px;
}
.cs-booking-widget #monthYear {
font-size: 16px;
line-height: 1.08;
margin-bottom: 0;
padding: 0;
}
.cs-booking-widget .calendar-grid {
gap: 5px;
}
.cs-booking-widget .day-name {
font-size: 11px;
padding: 5px 0;
}
.cs-booking-widget .day {
min-height: clamp(44px, 12vw, 52px);
font-size: 15px;
border-radius: 10px;
padding: 4px;
}
.cs-booking-widget .day-badge {
bottom: 4px;
right: 4px;
min-width: 15px;
height: 15px;
font-size: 9px;
line-height: 15px;
padding: 0 4px;
}
.cs-booking-widget .hours {
margin-top: 24px;
padding-top: 20px;
}
.cs-booking-widget .selected-date-card {
padding: 16px;
margin-bottom: 18px;
}
.cs-booking-widget .selected-date-card strong {
font-size: 18px;
}
.cs-booking-widget .selected-date-card span {
font-size: 15px;
}
.cs-booking-widget .booking-list li {
font-size: 12px;
gap: 8px;
}
.cs-booking-widget .time-slots {
grid-template-columns: 1fr;
gap: 10px;
}
.cs-booking-widget .time-slot {
min-height: 52px;
font-size: 16px;
padding: 14px;
}
.cs-booking-widget .main-btn {
font-size: 18px;
padding: 16px;
margin-top: 18px;
}
.cs-booking-widget .modal {
padding: 24px 18px 18px;
max-width: calc(100vw - 32px);
width: calc(100vw - 32px);
}
.cs-booking-widget .modal-title {
font-size: 16px;
margin-bottom: 10px;
}
.cs-booking-widget .modal-subtitle {
font-size: 13px;
margin-bottom: 12px;
}
.cs-booking-widget .modal-title::after {
margin: 16px auto 28px auto;
}
.cs-booking-widget .modal-message {
font-size: 14px;
line-height: 1.45;
margin-bottom: 16px;
}
.cs-booking-widget .modal .actions {
flex-direction: column;
gap: 10px;
margin-top: 12px;
}
.cs-booking-widget .modal button {
width: 100%;
padding: 14px 16px;
font-size: 16px;
line-height: 1.2;
}
}