/* Otopist Rezervasyon Frontend Styles */

.otopist-rezervasyon-container {
    max-width: 980px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.otopist-rezervasyon-title {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 30px;
    font-size: 28px;
    font-weight: 600;
}

.otopist-booking-layout{display:grid;grid-template-columns:240px 1fr;gap:24px}
.otopist-sidebar{background:#b71313;color:#fff;border-radius:8px;padding:16px;position:relative}
.otopist-step{display:flex;align-items:center;gap:12px;padding:14px;border-radius:10px;opacity:.8;transition:.2s;background:rgba(255,255,255,.06);margin-bottom:12px;border:1px solid rgba(255,255,255,.08)}
.otopist-step.active{opacity:1;background:rgba(255,255,255,.12)}
.otopist-step-title{font-weight:700}
.otopist-step-sub{font-size:12px;opacity:.85}
.otopist-step-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.15)}
.otopist-step-icon span{display:block;width:18px;height:18px;background-repeat:no-repeat;background-size:18px 18px}
/* SVG Icons */
.otopist-i-calendar{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E")}
.otopist-i-user{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")}
.otopist-step-check{margin-left:auto;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center}
.otopist-step.active .otopist-step-check{background:#fff;border-color:#fff}
.otopist-step-check span{display:block;width:12px;height:12px;border-radius:50%;background:transparent}
.otopist-step.active .otopist-step-check span{background:#b71313}
.otopist-sidebar-footer{display:none}
.otopist-sidebar-toggle{background:transparent;border:none;color:#fff;font-weight:600;display:flex;align-items:center;gap:8px;cursor:pointer;opacity:.9}
.otopist-i-arrow{display:inline-block;width:14px;height:14px;background-repeat:no-repeat;background-size:14px 14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E")}

.otopist-rezervasyon-form{background:#fff;border-radius:12px;padding:24px;border:1px solid #e1e8ed;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.otopist-main-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.otopist-main-title{font-size:20px;font-weight:700;color:#2c3e50}
.otopist-progress{flex:1;height:6px;background:#ecf0f1;border-radius:999px;margin-left:16px}
.otopist-progress-bar{display:block;height:100%;background:#e20b0d;border-radius:999px;transition:.3s}
.otopist-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;}
.otopist-grid-1{display:grid;grid-template-columns:1fr;}
.span-2{grid-column:span 2}
.otopist-time-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.otopist-time-grid .slot{padding:8px 4px;border:2px solid #e1e8ed;border-radius:12px;text-align:center;cursor:pointer;transition:.2s;white-space:nowrap;line-height:1.2;font-weight:500;background:#fff;color:#0f172a}
.otopist-time-grid .slot:hover{border-color:#e20b0d}
.otopist-time-grid .slot.selected{background:#e20b0d;color:#fff;border-color:#e20b0d}
.otopist-time-grid .slot.disabled{opacity:.4;pointer-events:none}
.otopist-form-actions.between{display:flex;justify-content:space-between;gap:6px;flex-direction:column;}

/* Toggle */
.otopist-toggle{display:grid;grid-template-columns:1fr 1fr;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
.otopist-toggle .toggle-btn{padding:12px 16px;border:none;background:transparent;font-weight:700;color:#374151;cursor:pointer}
.otopist-toggle .toggle-btn.active{background:#e20b0d;color:#fff}

/* Calendar */
.otopist-calendar{background:#fff;border:1px solid #e1e8ed;border-radius:10px;padding:12px}
.otopist-cal-header{display:flex;gap:12px;align-items:center;margin-bottom:10px;}
.otopist-cal-select{border:2px solid #e1e8ed;border-radius:8px;padding:8px 12px;background:#fff}
.otopist-cal-nav{margin-left:auto;display:flex;gap:8px}
.otopist-cal-btn{border:2px solid #e1e8ed;background:#fff;border-radius:8px;padding:8px 12px;cursor:pointer;font-weight:700}
.otopist-cal-btn:hover{border-color:#e20b0d}
.otopist-cal-weekdays{display: grid;grid-template-columns: repeat(7, minmax(0, 1fr));gap: 4px;margin: 8px 0;color: #101010;font-weight: 500;text-align: center;font-size: 13px;}
.otopist-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.otopist-cal-day{height:36px;border:2px solid #e1e8ed;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#0f172a;cursor:pointer;background:#fff;font-weight:500;font-size:15px}
.otopist-cal-day:hover{border-color:#e20b0d}
.otopist-cal-day.is-today{border-color:#e20b0d}
.otopist-cal-day.is-selected{background:#e20b0d;border-color:#e20b0d;color:#fff}
.otopist-cal-day.is-disabled{opacity:.5;pointer-events:none;background:#f3f4f6;color:#9ca3af;border-color:#e5e7eb}

.otopist-form-group { margin-bottom: 16px; }

.otopist-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
}

.otopist-form-group input,
.otopist-form-group select,
.otopist-form-group textarea {
    width: 100%;
    padding: 8px;
    border: 2px solid #e1e8ed;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    margin-top: -4px;
}

.otopist-form-group input:focus,
.otopist-form-group select:focus,
.otopist-form-group textarea:focus {
    outline: none;
    border-color: #e20b0d;
    box-shadow: 0 0 0 3px rgba(226, 11, 13, 0.12);
}

.otopist-form-group input:invalid { border-color: #e1e8ed; }
.otopist-form-group input:valid { border-color: #e1e8ed; }

/* Contact Method Selection */
.otopist-contact-method {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.otopist-radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    color: #2c3e50;
    transition: color 0.3s ease;
}

.otopist-radio-label:hover {
    color: #e20b0d;
}

.otopist-radio-label input[type="radio"] {
    display: none;
}

.otopist-radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #bdc3c7;
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
    transition: all 0.3s ease;
}

.otopist-radio-label input[type="radio"]:checked + .otopist-radio-custom {
    border-color: #e20b0d;
    background-color: #e20b0d;
}

.otopist-radio-label input[type="radio"]:checked + .otopist-radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
}

/* Form Actions */
.otopist-form-actions {
    text-align: center;
    margin-top: 30px;
}

/* Contact method inline divider and alignment */
.otopist-contact-method {align-items:center}
.otopist-contact-method .otopist-radio-label {gap:8px}
.otopist-contact-method .otopist-radio-label + .otopist-radio-label {position:relative;padding-left:16px}
.otopist-contact-method .otopist-radio-label + .otopist-radio-label:before {content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:16px;background:#d1d5db}

.otopist-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 200px;
    position: relative;
    overflow: hidden;
}

.otopist-btn-primary {
    background: linear-gradient(135deg, #e20b0d, #b71313);
    color: white;
    box-shadow: 0 4px 15px rgba(226, 11, 13, 0.25);
}

.otopist-btn-primary:hover {
    background: linear-gradient(135deg, #cc0a0c, #9d0f0f);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(226, 11, 13, 0.35);
}

.otopist-btn-secondary {
    background: #95a5a6;
    color: white;
}

.otopist-btn-secondary:hover {
    background: #7f8c8d;
    transform: translateY(-2px);
}

.otopist-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Loading State */
.otopist-btn-loading {
    display: none;
}

.otopist-btn.loading .otopist-btn-text {
    display: none;
}

.otopist-btn.loading .otopist-btn-loading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.otopist-spinner {
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Success Message */
.otopist-success-message {
    text-align: center;
    padding: 40px 20px;
}

.otopist-success-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 20px;
    color: #27ae60;
    display: flex;align-items: center;justify-content: center;
}

.otopist-success-icon svg {
    width: 40px;
    height: 40px;
}

.otopist-success-message h4 {
    color: #27ae60;
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: 600;
}

.otopist-success-message p {
    color: #7f8c8d;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.otopist-success-subtext{font-size:14px;color:#6b7280}

/* Error state */
.otopist-error-icon{width:84px;height:84px;margin:0 auto 20px;color:#e11d48;display:flex;align-items:center;justify-content:center}
.otopist-error-state h4{color:#e11d48;font-size:24px;margin-bottom:15px;font-weight:600}

/* Stronger CTA */
.otopist-btn-secondary{background:#6b7d81;color:#fff}
.otopist-btn-secondary:hover{background:#5c6b6f}

/* Error Messages */
.otopist-error {
    background: #fdf2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

.otopist-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .otopist-rezervasyon-container {padding: 15px;}
    .otopist-rezervasyon-form {padding: 20px;}
    
    .otopist-rezervasyon-title {
        font-size: 24px;
    }
    
    .otopist-contact-method {flex-direction: column;gap: 15px;}
    .otopist-booking-layout{grid-template-columns:1fr}
    .otopist-grid-2{grid-template-columns:1fr;}
    .otopist-time-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    
    .otopist-btn {
        width: 100%;
        min-width: auto;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .otopist-cal-grid{gap:6px}
    .otopist-cal-day{height:32px;font-size:12px}
    .otopist-cal-select{flex:1 1 calc(50% - 6px)}
    .otopist-cal-nav{width:100%;justify-content:flex-end}
    .otopist-time-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Date and Time Input Styling */
input[type="date"],
input[type="time"] {
    position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

/* Select Styling */
select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 12px;
    padding-right: 40px;
    appearance: none;
}

/* Textarea Styling */
textarea {
    resize: vertical;
    min-height: 100px;
}

/* Focus States */
.otopist-form-group input:focus,
.otopist-form-group select:focus,
.otopist-form-group textarea:focus {
    transform: translateY(-1px);
}

/* Animation for form steps */
.otopist-form-step {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom scrollbar for select */
select::-webkit-scrollbar {
    width: 8px;
}

select::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

select::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

select::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}