/* ==========================================
   TUFFATI - Frontend Styles
   Brand: #0EA5E9 (Pool Blue), #F97316 (CTA Orange)
   ========================================== */

/*
 * TUFFATI COLOR REFERENCE (hardcoded for Hello Elementor compatibility)
 * Blue: #0EA5E9  |  Blue Dark: #0284C7  |  Blue Pale: #E0F2FE
 * Orange: #F97316  |  Green: #22C55E  |  Red: #EF4444
 * Dark: #0A1628  |  Gray-200: #E2E8F0  |  Gray-400: #94A3B8
 * Radius: 12px  |  Radius-sm: 8px
 */

/* ── Base Elements ── */
.tuffati-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600;
    cursor: pointer; border: none; transition: all 0.2s; text-decoration: none; line-height: 1.4;
}
.tuffati-btn-primary { background: #0EA5E9; color: #fff; }
.tuffati-btn-primary:hover { background: #0284C7; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(14,165,233,0.3); }
.tuffati-btn-outline { background: transparent; color: #0EA5E9; border: 1.5px solid #0EA5E9; }
.tuffati-btn-outline:hover { background: #E0F2FE; color: #0284C7; }
.tuffati-btn-sm { padding: 6px 14px; font-size: 13px; }
.tuffati-btn-lg { padding: 14px 28px; font-size: 16px; }
.tuffati-btn-full { width: 100%; }

.tuffati-input, .tuffati-select, .tuffati-textarea {
    width: 100%; padding: 10px 14px; border: 1.5px solid #E2E8F0; border-radius: 8px;
    font-size: 14px; color: #1E293B; transition: border-color 0.2s; background: #fff;
    font-family: inherit;
}
.tuffati-input:focus, .tuffati-select:focus, .tuffati-textarea:focus { border-color: #0EA5E9; outline: none; box-shadow: 0 0 0 3px rgba(14,165,233,0.1); }

.tuffati-form-group { margin-bottom: 16px; }
.tuffati-form-group label { display: block; font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 6px; }
.tuffati-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }

.tuffati-notice { padding: 16px 20px; border-radius: 8px; margin: 16px 0; font-size: 14px; }
.tuffati-notice-info { background: #E0F2FE; color: #0284C7; border-left: 4px solid #0EA5E9; }
.tuffati-notice-warning { background: #FEF3C7; color: #92400E; border-left: 4px solid #F59E0B; }
.tuffati-notice-error { background: #FEE2E2; color: #991B1B; border-left: 4px solid #EF4444; }

/* ── Directory ── */
.tuffati-directory { max-width: 1200px; margin: 0 auto; }

.tuffati-search-filters {
    background: #F8FAFC; padding: 24px; border-radius: 12px; margin-bottom: 24px;
    border: 1px solid #E2E8F0;
}
.tuffati-filter-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.tuffati-filter-group { flex: 1; min-width: 180px; }
.tuffati-filter-group label { display: block; font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; }

.tuffati-results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.tuffati-results-count { font-size: 14px; color: #94A3B8; }

.tuffati-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }

/* ── Pro Card ── */
.tuffati-pro-card {
    background: #fff; border-radius: 12px; border: 1px solid #E2E8F0;
    padding: 20px; transition: all 0.3s; position: relative; overflow: hidden;
}
.tuffati-pro-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.08); transform: translateY(-2px); border-color: #BAE6FD; }
.tuffati-pro-card.tuffati-premium { border-color: #F97316; }
.tuffati-premium-badge { position: absolute; top: 12px; right: 12px; background: #F97316; color: #fff; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }

.tuffati-pro-card-header { display: flex; gap: 14px; margin-bottom: 14px; }
.tuffati-pro-avatar { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.tuffati-pro-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tuffati-pro-name { font-size: 16px; margin: 0 0 2px; }
.tuffati-pro-name a { color: #1E293B; text-decoration: none; }
.tuffati-pro-name a:hover { color: #0EA5E9; }
.tuffati-verified-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #0EA5E9; color: #fff; font-size: 10px; margin-left: 4px; vertical-align: middle; }
.tuffati-pro-location { font-size: 13px; color: #94A3B8; }
.tuffati-pro-rating { margin-top: 4px; }

.tuffati-stars .star { color: #FCD34D; font-size: 14px; }
.tuffati-stars .star.empty { color: #CBD5E1; }
.tuffati-stars .rating-number { font-size: 13px; font-weight: 700; color: #1E293B; margin-left: 4px; }
.tuffati-review-count { font-size: 12px; color: #94A3B8; }

.tuffati-pro-excerpt { font-size: 13px; color: #475569; line-height: 1.5; margin: 0 0 10px; }
.tuffati-pro-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tuffati-tag { font-size: 11px; padding: 3px 10px; border-radius: 20px; background: #E0F2FE; color: #0284C7; font-weight: 500; }
.tuffati-tag-more { background: #F1F5F9; color: #475569; }

.tuffati-pro-card-footer { display: flex; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #F1F5F9; }
.tuffati-pro-card-footer .tuffati-btn { flex: 1; text-align: center; }

/* ── Preventivo Form ── */
.tuffati-preventivo-form { max-width: 700px; margin: 0 auto; }

.tuffati-form-progress { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 40px; }
.tuffati-progress-step { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tuffati-progress-step .step-number { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; background: #E2E8F0; color: #94A3B8; transition: all 0.3s; }
.tuffati-progress-step.active .step-number { background: #0EA5E9; color: #fff; }
.tuffati-progress-step.done .step-number { background: #22C55E; color: #fff; }
.tuffati-progress-step .step-label { font-size: 11px; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.05em; }
.tuffati-progress-step.active .step-label { color: #0EA5E9; font-weight: 600; }
.tuffati-progress-line { width: 40px; height: 2px; background: #E2E8F0; margin: 0 8px; margin-bottom: 18px; }

.tuffati-form-step { display: none; animation: tuffatiFadeIn 0.3s ease; }
.tuffati-form-step.active { display: block; }
@keyframes tuffatiFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.tuffati-form-step h3 { font-size: 20px; color: #1E293B; margin-bottom: 20px; }

.tuffati-service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tuffati-service-option input { display: none; }
.tuffati-service-card { padding: 16px; border: 2px solid #E2E8F0; border-radius: 8px; cursor: pointer; transition: all 0.2s; text-align: center; }
.tuffati-service-card:hover { border-color: #BAE6FD; }
.tuffati-service-option input:checked + .tuffati-service-card { border-color: #0EA5E9; background: #E0F2FE; }
.tuffati-service-icon { font-size: 28px; display: block; margin-bottom: 6px; }
.tuffati-service-label { font-size: 13px; font-weight: 600; color: #1E293B; }

.tuffati-radio-group { display: flex; flex-direction: column; gap: 8px; }
.tuffati-radio-option { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1.5px solid #E2E8F0; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.tuffati-radio-option:hover { border-color: #BAE6FD; }
.tuffati-radio-option input:checked + span { color: #0EA5E9; font-weight: 600; }

.tuffati-checkbox-label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #475569; cursor: pointer; }
.tuffati-checkbox-label a { color: #0EA5E9; }

.tuffati-form-nav { display: flex; justify-content: space-between; margin-top: 30px; gap: 12px; }
.tuffati-form-notice { background: #E0F2FE; padding: 16px 20px; border-radius: 8px; font-size: 14px; color: #0284C7; margin: 20px 0; }

.tuffati-form-success { text-align: center; padding: 60px 20px; }
.tuffati-success-icon { font-size: 48px; margin-bottom: 16px; }
.tuffati-form-success h3 { font-size: 24px; color: #1E293B; margin-bottom: 8px; }
.tuffati-success-hash { margin-top: 16px; padding: 12px; background: #F8FAFC; border-radius: 8px; }

/* ── Preventivo Status ── */
.tuffati-preventivo-status { max-width: 800px; margin: 0 auto; }
.tuffati-status-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.tuffati-status-badge { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; }
.tuffati-status-active { background: #DCFCE7; color: #166534; }
.tuffati-status-pending { background: #FEF3C7; color: #92400E; }
.tuffati-status-completed { background: #E0F2FE; color: #0284C7; }
.tuffati-status-expired { background: #F1F5F9; color: #475569; }

.tuffati-status-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; padding: 20px; background: #F8FAFC; border-radius: 12px; margin-bottom: 24px; }
.tuffati-status-detail { font-size: 14px; color: #475569; }

.tuffati-responses-list { display: flex; flex-direction: column; gap: 16px; }
.tuffati-response-card { padding: 20px; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; }
.tuffati-response-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tuffati-response-price { font-size: 20px; font-weight: 700; color: #0EA5E9; }
.tuffati-response-message { font-size: 14px; color: #475569; line-height: 1.6; padding: 12px; background: #F8FAFC; border-radius: 8px; margin-bottom: 12px; }
.tuffati-response-timeline { font-size: 13px; color: #94A3B8; margin-bottom: 12px; }
.tuffati-response-actions { display: flex; gap: 8px; }

/* ── Booking ── */
.tuffati-booking { max-width: 1100px; margin: 0 auto; }
.tuffati-booking-header { text-align: center; margin-bottom: 32px; }
.tuffati-booking-header h2 { color: #1E293B; margin-bottom: 8px; }
.tuffati-booking-header p { color: #94A3B8; }

.tuffati-booking-grid { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
@media (max-width: 860px) { .tuffati-booking-grid { grid-template-columns: 1fr; } }

.tuffati-booking-section { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid #F1F5F9; }
.tuffati-booking-section h3 { font-size: 16px; color: #1E293B; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.section-num { width: 28px; height: 28px; border-radius: 50%; background: #0EA5E9; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }

.tuffati-booking-services { display: flex; flex-direction: column; gap: 8px; }
.tuffati-booking-service-option input { display: none; }
.tuffati-booking-service-option .service-option-inner { padding: 14px 18px; border: 1.5px solid #E2E8F0; border-radius: 8px; cursor: pointer; transition: all 0.2s; display: flex; justify-content: space-between; align-items: center; }
.tuffati-booking-service-option .service-option-inner:hover { border-color: #BAE6FD; }
.tuffati-booking-service-option input:checked + .service-option-inner { border-color: #0EA5E9; background: #E0F2FE; }
.service-name { font-weight: 600; color: #1E293B; font-size: 14px; }
.service-price { font-size: 13px; color: #94A3B8; }

.tuffati-selected-pro-card { display: flex; gap: 12px; align-items: center; padding: 14px; background: #F8FAFC; border-radius: 8px; }
.tuffati-selected-pro-card img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }

/* Calendar */
.tuffati-calendar-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tuffati-cal-month { font-weight: 700; color: #1E293B; }
.tuffati-cal-prev, .tuffati-cal-next { background: none; border: 1px solid #E2E8F0; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 16px; }

.tuffati-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.tuffati-cal-day-header { font-size: 11px; font-weight: 600; color: #94A3B8; padding: 4px; text-transform: uppercase; }
.tuffati-cal-day { padding: 8px; border-radius: 6px; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.tuffati-cal-day:hover { background: #E0F2FE; }
.tuffati-cal-day.disabled { color: #CBD5E1; cursor: default; }
.tuffati-cal-day.disabled:hover { background: none; }
.tuffati-cal-day.selected { background: #0EA5E9; color: #fff; }
.tuffati-cal-day.today { font-weight: 700; border: 1px solid #0EA5E9; }

.tuffati-slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; margin-top: 12px; }
.tuffati-slot { padding: 8px 12px; border: 1.5px solid #E2E8F0; border-radius: 6px; text-align: center; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.tuffati-slot:hover { border-color: #0EA5E9; }
.tuffati-slot.selected { background: #0EA5E9; color: #fff; border-color: #0EA5E9; }
.tuffati-slot.unavailable { background: #F8FAFC; color: #CBD5E1; cursor: not-allowed; border-color: #F1F5F9; }

/* Booking Summary */
.tuffati-booking-summary { position: sticky; top: 100px; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); }
.tuffati-booking-summary h3 { margin-bottom: 16px; font-size: 16px; }
.summary-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #F1F5F9; font-size: 14px; }
.summary-label { color: #94A3B8; }
.summary-value { font-weight: 600; color: #1E293B; }
.summary-total { border-bottom: none; padding-top: 14px; margin-top: 4px; border-top: 2px solid #1E293B; }
.summary-total .summary-value { font-size: 18px; color: #0EA5E9; }
.summary-note { font-size: 12px; color: #94A3B8; margin: 8px 0 16px; }

/* ── Pro Dashboard ── */
.tuffati-pro-dashboard { max-width: 1000px; margin: 0 auto; }
.tuffati-dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 24px 0; }
.tuffati-stat-card { background: #fff; padding: 20px; border-radius: 12px; border: 1px solid #E2E8F0; text-align: center; }
.tuffati-stat-number { font-size: 28px; font-weight: 800; color: #0EA5E9; }
.tuffati-stat-label { font-size: 12px; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }

.tuffati-dash-tabs { display: flex; gap: 4px; border-bottom: 2px solid #E2E8F0; margin-bottom: 24px; }
.tuffati-tab { padding: 10px 20px; border: none; background: none; cursor: pointer; font-size: 14px; font-weight: 600; color: #94A3B8; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; }
.tuffati-tab.active { color: #0EA5E9; border-bottom-color: #0EA5E9; }

.tuffati-booking-success { text-align: center; padding: 60px 20px; }
.tuffati-booking-success h3 { font-size: 24px; margin-bottom: 8px; color: #1E293B; }

/* ── Responsive ── */
@media (max-width: 640px) {
    .tuffati-results-grid { grid-template-columns: 1fr; }
    .tuffati-filter-row { flex-direction: column; }
    .tuffati-service-grid { grid-template-columns: 1fr 1fr; }
    .tuffati-form-nav { flex-direction: column; }
}

/* ── PRO Registration Form ── */
.tuffati-pro-registration { max-width: 750px; margin: 0 auto; }

.tuffati-reg-progress { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 40px; }
.tuffati-reg-step { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tuffati-reg-step .step-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; background: #E2E8F0; color: #94A3B8; transition: all 0.3s; }
.tuffati-reg-step.active .step-circle { background: #0EA5E9; color: #fff; }
.tuffati-reg-step.done .step-circle { background: #22C55E; color: #fff; }
.tuffati-reg-step span:last-child { font-size: 11px; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.tuffati-reg-step.active span:last-child { color: #0EA5E9; }
.tuffati-reg-line { width: 50px; height: 2px; background: #E2E8F0; margin: 0 10px 18px; }

.tuffati-reg-panel { display: none; animation: tuffatiFadeIn 0.3s ease; }
.tuffati-reg-panel.active { display: block; }
.tuffati-reg-panel-header { margin-bottom: 24px; }
.tuffati-reg-panel-header h2 { font-size: 22px; color: #1E293B; margin-bottom: 4px; }
.tuffati-reg-panel-header p { font-size: 14px; color: #94A3B8; }

.tuffati-hint { display: block; font-size: 12px; color: #94A3B8; margin-top: 4px; }

.tuffati-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.tuffati-check-option input { display: none; }
.tuffati-check-option .check-card { padding: 12px; border: 1.5px solid #E2E8F0; border-radius: 8px; cursor: pointer; transition: all 0.2s; text-align: center; }
.tuffati-check-option .check-card:hover { border-color: #BAE6FD; }
.tuffati-check-option input:checked + .check-card { border-color: #0EA5E9; background: #E0F2FE; }
.check-icon { font-size: 22px; display: block; margin-bottom: 4px; }
.check-label { font-size: 12px; font-weight: 600; color: #1E293B; }

.tuffati-checkbox-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.tuffati-check-inline { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1.5px solid #E2E8F0; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-size: 14px; }
.tuffati-check-inline:has(input:checked) { border-color: #0EA5E9; background: #E0F2FE; }

.tuffati-range-wrapper { display: flex; align-items: center; gap: 16px; }
.tuffati-range { flex: 1; -webkit-appearance: none; height: 6px; border-radius: 3px; background: #E2E8F0; outline: none; }
.tuffati-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #0EA5E9; cursor: pointer; }
.tuffati-range-value { font-size: 16px; font-weight: 700; color: #0EA5E9; min-width: 60px; }

.tuffati-plan-preview { margin: 20px 0; }
.tuffati-plan-card { padding: 24px; border-radius: 12px; border: 2px solid #0EA5E9; background: #E0F2FE; }
.tuffati-plan-card .plan-badge { display: inline-block; padding: 3px 10px; background: #22C55E; color: #fff; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 8px; }
.tuffati-plan-card h3 { font-size: 16px; margin-bottom: 4px; }
.tuffati-plan-card .plan-price { font-size: 32px; font-weight: 900; color: #0EA5E9; }
.tuffati-plan-card .plan-price span { font-size: 14px; font-weight: 400; color: #94A3B8; }
.tuffati-plan-card ul { list-style: none; padding: 10px 0; margin: 0; }
.tuffati-plan-card ul li { font-size: 13px; color: #475569; padding: 3px 0; }
.tuffati-plan-card small { font-size: 12px; color: #94A3B8; }

.tuffati-reg-nav { display: flex; justify-content: space-between; margin-top: 32px; padding-top: 20px; border-top: 1px solid #E2E8F0; }
.tuffati-reg-nav-right { display: flex; gap: 8px; }

.tuffati-reg-success { text-align: center; padding: 48px 20px; }
.tuffati-reg-success h2 { font-size: 24px; margin-bottom: 8px; color: #1E293B; }
.tuffati-success-steps { max-width: 400px; margin: 24px auto; text-align: left; }
.success-step { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F1F5F9; font-size: 14px; color: #94A3B8; }
.success-step.done { color: #22C55E; }
.success-step.active { color: #0EA5E9; font-weight: 600; }
.step-icon { font-size: 20px; }
.tuffati-success-note { font-size: 13px; color: #94A3B8; margin-top: 16px; }
.tuffati-success-note a { color: #0EA5E9; }