/* SkiClub Booking System — Frontend */
.skb-booking {
    width: 100%;
    margin: 0;
    font-family: inherit;
    color: #333;
}
.skb-booking * {
    box-sizing: border-box;
}
.skb-calendar-shell {
    margin-bottom: 16px;
}
.skb-cal {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.skb-cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #1a3a5c;
    color: #fff;
}
.skb-cal-header button {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
}
.skb-cal-title {
    font-weight: 600;
}
.skb-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.skb-cal-dow {
    padding: 8px 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    background: #f7f7f7;
    border-bottom: 1px solid #eee;
}
.skb-cal-day {
    min-height: 48px;
    padding: 6px 4px 4px;
    border-right: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.skb-cal-day:hover:not(.skb-day-blocked):not(.skb-day-full) {
    background: #eef3f8;
}
.skb-day-blocked {
    background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 4px, #ececec 4px, #ececec 8px);
    color: #bbb;
    cursor: not-allowed;
}
.skb-day-full {
    background: #fdecea;
    color: #bbb;
    cursor: not-allowed;
}
.skb-day-selected {
    background: #1a3a5c !important;
    color: #fff !important;
}
.skb-day-inrange {
    background: #c5d6e8;
}
.skb-day-past {
    color: #ccc;
    cursor: not-allowed;
}
.skb-daynum {
    font-size: 13px;
}
.skb-legend {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #666;
    margin-top: 10px;
}
.skb-legend span::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    vertical-align: middle;
    border-radius: 2px;
}
.skb-legend .skb-leg-avail::before { background: #fff; border: 1px solid #ddd; }
.skb-legend .skb-leg-full::before { background: #fdecea; }
.skb-legend .skb-leg-blocked::before { background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 4px, #ececec 4px, #ececec 8px); }
.skb-field {
    margin-bottom: 12px;
}
.skb-field label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}
.skb-field input[type='text'],
.skb-field input[type='email'],
.skb-field input[type='tel'],
.skb-field input[type='number'],
.skb-field input[type='date'],
.skb-field select,
.skb-field textarea,
.skb-contact input,
.skb-contact select,
.skb-contact textarea,
.skb-member input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
}
.skb-field textarea,
.skb-contact textarea {
    min-height: 80px;
}
.skb-field-full {
    grid-column: 1 / -1;
}
.skb-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}
.skb-req {
    color: #c62828;
}
.skb-desc {
    display: block;
    color: #888;
    font-size: 12px;
    margin-top: 2px;
}
.skb-services {
    margin: 16px 0;
    padding: 16px;
    border: 1px solid #eee;
    border-radius: 8px;
}
.skb-service-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 14px;
}
.skb-service-item input[type='checkbox'] {
    flex-shrink: 0;
}
.skb-service-item input[type='number'] {
    width: 64px;
}
.skb-member {
    margin: 16px 0;
}
.skb-member-status {
    display: block;
    font-size: 13px;
    margin-top: 4px;
}
.skb-member-status.skb-ok { color: #2e7d32; }
.skb-member-status.skb-err { color: #c62828; }
.skb-price-preview {
    margin: 16px 0;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}
.skb-price-preview table {
    width: 100%;
    border-collapse: collapse;
}
.skb-price-preview td {
    padding: 4px 0;
    font-size: 14px;
}
.skb-price-preview .skb-total td {
    border-top: 2px solid #1a3a5c;
    font-weight: 700;
    font-size: 16px;
    padding-top: 8px;
}
.skb-submit {
    display: inline-block;
    background: #1a3a5c;
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.skb-submit:hover { background: #14304d; }
.skb-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.skb-message-box {
    margin-top: 12px;
    font-size: 14px;
}
.skb-message-box.skb-success { color: #2e7d32; }
.skb-message-box.skb-error { color: #c62828; }
.skb-selected-range {
    font-weight: 600;
    margin-bottom: 10px;
}

@media (max-width: 600px) {
    .skb-contact { grid-template-columns: 1fr; }
    .skb-cal-header { padding: 10px 12px; }
    .skb-cal-header button {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    .skb-cal-dow { font-size: 11px; padding: 6px 2px; }
    .skb-cal-day { min-height: 46px; padding: 4px 2px 2px; }
    .skb-daynum { font-size: 12px; }
    .skb-day-avail { font-size: 9px; }
    .skb-day-price { font-size: 10px; }
    .skb-day-morning, .skb-day-evening { height: 3px; }
    .skb-legend { flex-wrap: wrap; gap: 8px; font-size: 11px; }
    .skb-services { padding: 12px; }
    .skb-service-item { font-size: 13px; }
    .skb-field input[type='text'],
    .skb-field input[type='email'],
    .skb-field input[type='tel'],
    .skb-field input[type='number'],
    .skb-field input[type='date'],
    .skb-field select,
    .skb-field textarea,
    .skb-contact input,
    .skb-contact select,
    .skb-contact textarea,
    .skb-member input {
        font-size: 16px;
    }
    .skb-submit {
        width: 100%;
        padding: 14px;
        font-size: 17px;
    }
}

.skb-day-morning,
.skb-day-evening {
    position: absolute;
    top: 0;
    height: 5px;
    width: 50%;
    pointer-events: none;
}
.skb-day-morning { left: 0; background: #c8e6c9; }
.skb-day-evening { right: 0; background: #37474f; }
.skb-day-avail {
    display: block;
    font-size: 10px;
    color: #2e7d32;
    margin-top: 2px;
}
.skb-day-price {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #1a3a5c;
}