.ccm-calendar-container {
max-width: 800px;
margin: 0 auto;
font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
border: 1px solid #C8A165;
border-radius: 8px;
padding: 15px;
background-color: #F8F8F8;
box-shadow: 0 4px 10px rgba(0,0,0,0.03);
color: #222;
} .ccm-time-btn.selected { background:#2b7cff; color:#fff; border-color:#1f5fc1; }
.ccm-time-btn.ccm-selected-start, .ccm-time-btn.ccm-selected-end { 
box-shadow: 0 0 0 3px rgba(200,161,101,0.08) !important; border-color:#C8A165 !important; background:#ffefcf !important; color:#503422 !important; 
} .ccm-time-btn.in-range { background:#cfe4ff; color:#000; } .ccm-two-panels { display:flex; gap:12px; margin-bottom:8px; align-items:flex-start; }
.ccm-panel { flex:1; background:#fff; border:1px solid #e1e1e1; padding:8px; border-radius:8px; min-width:140px; }
.ccm-panel-title { font-weight:600; margin-bottom:6px; color:#333; }
.ccm-list { display:flex; flex-wrap:wrap; gap:6px; max-height:220px; overflow:auto; }
.ccm-time-btn { background:#f7f7f7; border:1px solid #ddd; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:13px; }
.ccm-time-btn:hover { background:#eef; }
.ccm-time-btn.disabled { opacity:0.35; pointer-events:none; }
.ccm-time-btn.selected { background:#2b7cff; color:#fff; border-color:#1f5fc1; }
.ccm-time-btn.in-range { background:#cfe4ff; color:#000; }
.ccm-panel.active-mode { box-shadow:0 0 0 3px rgba(43,124,255,0.06); border-color:#2b7cff; }
.ccm-range-message.ccm-error-message { color:#b00020; }
.ccm-range-message.ccm-success-message { color:#007a33; }
.ccm-range-message.ccm-warning-message { color:#b58900; } .ccm-selectors { display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.ccm-select-box { background:#fff; border:1px solid #ddd; padding:8px 12px; border-radius:6px; cursor:pointer; user-select:none; }
.ccm-select-box.active-mode { border-color:#2b7cff; box-shadow:0 0 0 3px rgba(43,124,255,0.08); }
.ccm-select-box:focus { outline:none; box-shadow:0 0 0 3px rgba(43,124,255,0.12); } .ccm-slots { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.ccm-slot-button { background:#f7f7f7; border:1px solid #ddd; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:13px; }
.ccm-slot-button:hover { background:#eef; }
.ccm-slot-button.ccm-selected-start, .ccm-slot-button.ccm-selected-end { background:#2b7cff; color:#fff; border-color:#1f5fc1; }
.ccm-slot-button.ccm-in-range { background:#cfe4ff; color:#000; }
.ccm-slot-button.ccm-slot-disabled { opacity:0.35; pointer-events:none; } .ccm-range-message.ccm-error-message { color:#b00020; }
.ccm-range-message.ccm-success-message { color:#007a33; }
.ccm-range-message.ccm-warning-message { color:#b58900; } .ccm-confirm-button.is-loading { opacity:0.7; pointer-events:none; }
.ccm-slot-group { margin: 6px 0 12px; }
.ccm-slots { display:flex; flex-wrap:wrap; gap:6px; }
.ccm-slot-button {
background:#f7f7f7; border:1px solid #ddd; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:13px;
}
.ccm-slot-button:hover { background:#eef; }
.ccm-slot-button.ccm-selected-start { background:#2b7cff; color:#fff; border-color:#1f5fc1; }
.ccm-slot-button.ccm-selected-end { background:#2b7cff; color:#fff; border-color:#1f5fc1; }
.ccm-slot-button.ccm-in-range { background:#cfe4ff; color:#000; }
.ccm-range-message.ccm-error-message { color:#b00020; }
.ccm-range-message.ccm-success-message { color:#007a33; }
.ccm-range-row {
display: flex;
align-items: center;
gap: 10px;
margin: 8px 0;
flex-wrap: wrap;
}
.ccm-range-row input[type="time"] {
padding: 6px;
border-radius: 6px;
border: 1px solid rgba(80,52,34,0.08);
}
.ccm-range-message { font-size: 13px; color: #666; margin-left:8px; }
.ccm-calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.ccm-month-year {
margin: 0;
font-size: 1.5em;
color: #503422;
font-weight: 600;
}
.ccm-nav {
font-size: 1.8em;
text-decoration: none;
color: #503422;
transition: color 0.3s ease, transform 0.08s ease;
padding: 4px 8px;
border-radius: 6px;
}
.ccm-nav:hover {
color: #C8A165;
transform: translateY(-1px);
}
.ccm-calendar {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
background: transparent;
}
.ccm-calendar th, .ccm-calendar td {
text-align: center;
padding: 10px;
border: 1px solid #C8A165;
vertical-align: middle;
word-break: break-word;
}
.ccm-calendar th {
background-color: #C8A165;
color: #fff;
font-weight: 700;
}
.ec-day:hover {
background-color: #e6e6e6;
}
.ccm-clickable-day {
background-clip: padding-box;
}
.ec-toolbar {
display: flex;
flex-direction: row;
align-items: center;
align-content: center;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.ec-center {  
text-align: center;
padding: 0;
margin: 0; 
}
h2.ec-title {
margin: 0 !important;
} .ccm-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
padding: 40px 15px;
box-sizing: border-box;
}
.ccm-modal-content {
background-color: #fff;
margin: 0 auto;
padding: 20px;
border: 1px solid #C8A165;
width: 100%;
max-width: 720px;
border-radius: 8px;
position: relative;
animation: ccm-fadeIn 0.35s ease;
font-family: inherit;
box-shadow: 0 8px 30px rgba(0,0,0,0.08);
max-height: calc(100vh - 80px);
overflow-y: auto;
}
@keyframes ccm-fadeIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.ccm-close-button {
color: #503422;
position: absolute;
top: 10px;
right: 15px;
font-size: 28px;
font-weight: bold;
cursor: pointer;
transition: color 0.3s ease, transform 0.08s ease;
background: transparent;
border: none;
line-height: 1;
padding: 6px;
border-radius: 6px;
}
.ccm-close-button:hover,
.ccm-close-button:focus {
color: #C8A165;
text-decoration: none;
transform: translateY(-1px);
outline: none;
} .ccm-event-card {
border: 1px solid #C8A165;
padding: 15px;
margin-bottom: 10px;
border-radius: 8px;
background-color: #fff;
display: block;
}
.ccm-event-card h4 {
margin: 0 0 6px 0;
color: #503422;
font-size: 1.05em;
}
.ccm-event-card p {
margin: 6px 0;
color: #4a4a4a;
font-size: 14px;
} .ccm-time-slots {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.ccm-time-slots-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 8px 10px;
border-radius: 6px;
border: 1px solid rgba(80,52,34,0.12);
background: #fff;
font-size: 14px;
color: #333;
min-width: 160px;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
} .ccm-confirm-button,
.ccm-book-button {
background-color: #C8A165;
color: #ffffff;
border: none;
padding: 8px 14px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: background-color 0.18s ease, transform 0.08s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.06);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
text-decoration: none;
}
.ccm-confirm-button:hover,
.ccm-book-button:hover {
background-color: #9b7a44;
}
.ccm-confirm-button:active,
.ccm-book-button:active {
transform: translateY(1px);
} .ccm-confirm-button:disabled,
.ccm-book-button:disabled {
opacity: 0.55;
cursor: not-allowed;
filter: grayscale(0.05);
} .ccm-confirm-button.is-loading::after,
.ccm-book-button.is-loading::after {
content: '';
display: inline-block;
margin-left: 6px;
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.25);
border-top-color: #fff;
animation: ccm-spin 0.8s linear infinite;
vertical-align: middle;
}
@keyframes ccm-spin {
to { transform: rotate(360deg); }
} .ccm-message {
padding: 10px 12px;
border-radius: 6px;
margin-top: 10px;
font-size: 14px;
}
.ccm-success-message {
background: #e9f7ef;
color: #1b6e3a;
border: 1px solid rgba(27,110,58,0.12);
}
.ccm-error-message {
background: #fff0f0;
color: #9b2b2b;
border: 1px solid rgba(155,43,43,0.08);
}
.ccm-no-slots {
color: #666;
font-style: italic;
margin-top: 8px;
} .ccm-event-card + .ccm-event-card {
margin-top: 12px;
} @media (max-width: 700px) {
.ccm-calendar-container { padding: 10px; }
.ccm-month-year { font-size: 1.25em; }
.ccm-time-slots { flex-direction: column; align-items: stretch; }
.ccm-time-slots-select { width: 100%; min-width: 0; }
.ccm-modal { padding-top: 20px; }
.ccm-modal-content { padding: 16px; max-width: 95%; }
} .ccm-time-slots-select:focus,
.ccm-confirm-button:focus,
.ccm-book-button:focus,
.ccm-close-button:focus {
outline: 3px solid rgba(200,161,101,0.18);
outline-offset: 2px;
box-shadow: 0 0 0 3px rgba(200,161,101,0.06);
} .ccm-modal-content { overflow-y: auto; } .ccm-modal-content hr {
border: none;
border-top: 1px solid rgba(0,0,0,0.06);
margin: 12px 0;
} .ccm-hidden { display: none !important; }