.renovadate-checkout-container {
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
animation: rdFadeIn 0.3s ease;
} .renovadate-loading-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 20px 0;
color: #64748b;
font-size: 14px;
}
.renovadate-spinner {
width: 20px;
height: 20px;
border: 2px solid #cbd5e1;
border-top-color: #6c5ce7;
border-radius: 50%;
animation: rdSpin 0.8s linear infinite;
} .renovadate-section-title {
font-size: 14px;
font-weight: 700;
color: #0f172a;
margin: 0 0 12px 0;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 6px;
} .renovadate-days-cards {
display: flex;
gap: 12px;
margin-bottom: 20px;
} .renovadate-day-select-card {
flex: 1;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 16px;
text-align: center;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
position: relative;
box-shadow: 0 2px 4px rgba(0,0,0,0.01);
}
.renovadate-day-select-card:hover {
border-color: #cbd5e1;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.04);
} .renovadate-card-day-title {
display: block;
font-size: 14px;
font-weight: 700;
color: #1e293b;
margin-bottom: 4px;
} .renovadate-card-day-date {
display: block;
font-size: 12px;
color: #64748b;
} .renovadate-day-select-card.selected {
border-color: #6c5ce7;
background-color: #f5f3ff;
box-shadow: 0 4px 15px rgba(108, 92, 231, 0.12);
}
.renovadate-day-select-card.selected .renovadate-card-day-title {
color: #6c5ce7;
}
.renovadate-day-select-card.selected .renovadate-card-day-date {
color: #818cf8;
} .renovadate-day-select-card.selected::after {
content: "✓";
position: absolute;
top: -6px;
right: -6px;
background: #6c5ce7;
color: #ffffff;
width: 18px;
height: 18px;
border-radius: 50%;
font-size: 11px;
line-height: 18px;
font-weight: bold;
text-align: center;
box-shadow: 0 2px 5px rgba(108, 92, 231, 0.3);
} .renovadate-hours-section {
animation: rdSlideDown 0.35s ease;
}
.renovadate-hours-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
gap: 8px;
margin-top: 8px;
} .renovadate-hour-pill {
padding: 8px 0;
text-align: center;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
color: #334155;
cursor: pointer;
transition: all 0.15s ease;
user-select: none;
}
.renovadate-hour-pill:hover {
border-color: #6c5ce7;
color: #6c5ce7;
background: #f5f3ff;
}
.renovadate-hour-pill.selected {
background: #6c5ce7;
border-color: #6c5ce7;
color: #ffffff;
box-shadow: 0 2px 8px rgba(108, 92, 231, 0.25);
transform: scale(1.02);
} .renovadate-asap-pill {
grid-column: span 2;
}
.renovadate-no-slots {
padding: 10px 15px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
color: #b91c1c;
font-size: 13px;
font-weight: 500;
} @keyframes rdSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes rdFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes rdSlideDown {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
} @media (max-width: 480px) {
.renovadate-days-cards {
flex-direction: column;
gap: 8px;
}
}