/* rental/assets/css/booking-guest.css */

.booking-container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
   line-height: 1.6;
}

/* Booking Header */
.booking-header {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   padding: 30px;
   border-radius: 16px;
   margin-bottom: 30px;
   box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.business-info h1 {
   margin: 0 0 15px 0;
   font-size: 2.5rem;
   font-weight: 700;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.business-meta {
   display: flex;
   align-items: center;
   gap: 20px;
   flex-wrap: wrap;
}

.rating {
   display: flex;
   align-items: center;
   gap: 8px;
   background: rgba(255, 255, 255, 0.15);
   padding: 8px 16px;
   border-radius: 25px;
   backdrop-filter: blur(10px);
}

.rating .star {
   color: #ffd700;
   font-size: 1.1rem;
}

.rating-text {
   font-weight: 700;
   font-size: 1.1rem;
}

.review-count {
   opacity: 0.9;
   font-size: 0.9rem;
}

.category {
   background: rgba(255, 255, 255, 0.2);
   padding: 6px 16px;
   border-radius: 20px;
   font-size: 0.9rem;
   font-weight: 500;
   border: 1px solid rgba(255, 255, 255, 0.3);
}

.guest-banner {
   background: rgba(255, 255, 255, 0.15);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 12px;
   padding: 20px;
   margin-top: 25px;
   display: flex;
   align-items: center;
   gap: 15px;
   backdrop-filter: blur(10px);
}

.guest-icon {
   font-size: 2rem;
   opacity: 0.8;
}

.guest-content h3 {
   margin: 0 0 8px 0;
   font-size: 1.3rem;
   font-weight: 600;
}

.guest-content p {
   margin: 0;
   opacity: 0.95;
   line-height: 1.5;
}

.login-link {
   color: #ffd700;
   text-decoration: underline;
   font-weight: 600;
   transition: color 0.2s;
}

.login-link:hover {
   color: #ffed4e;
}

/* Booking Content Layout */
.booking-content {
   display: grid;
   grid-template-columns: 1fr 320px;
   gap: 30px;
   align-items: start;
}

.booking-form-container {
   background: white;
   border-radius: 16px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
   overflow: hidden;
   border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Step Progress */
.step-progress {
   display: flex;
   justify-content: space-between;
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
   padding: 25px 30px;
   border-bottom: 1px solid #e9ecef;
   position: relative;
}

.progress-step {
   display: flex;
   flex-direction: column;
   align-items: center;
   flex: 1;
   position: relative;
   z-index: 2;
}

.progress-step:not(:last-child)::after {
   content: '';
   position: absolute;
   top: 22px;
   left: 60%;
   right: -60%;
   height: 3px;
   background: #dee2e6;
   z-index: 1;
   border-radius: 2px;
}

.progress-step.completed:not(:last-child)::after,
.progress-step.active:not(:last-child)::after {
   background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.step-circle {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: #dee2e6;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   z-index: 3;
   transition: all 0.3s ease;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.progress-step.active .step-circle {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   transform: scale(1.05);
}

.progress-step.completed .step-circle {
   background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
   color: white;
}

.step-number, .step-check {
   font-weight: 700;
   font-size: 0.9rem;
}

.step-check {
   display: none;
}

.progress-step.completed .step-number {
   display: none;
}

.progress-step.completed .step-check {
   display: block;
}

.step-label {
   margin-top: 10px;
   font-size: 0.85rem;
   color: #6c757d;
   text-align: center;
   font-weight: 500;
}

.progress-step.active .step-label,
.progress-step.completed .step-label {
   color: #495057;
   font-weight: 600;
}

/* Booking Steps */
.booking-step {
   display: none;
   padding: 35px;
   animation: fadeInUp 0.3s ease-out;
}

.booking-step.active {
   display: block;
}

.booking-step h2 {
   margin: 0 0 30px 0;
   color: #2c3e50;
   font-size: 1.8rem;
   font-weight: 700;
   border-bottom: 3px solid #667eea;
   padding-bottom: 10px;
   display: inline-block;
}

/* Date & Time Selection */
.datetime-selection {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 25px;
   margin-bottom: 25px;
}

.calendar-section, .time-section {
   background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
   border-radius: 12px;
   padding: 25px;
   border: 1px solid #e9ecef;
}

.calendar-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
}

.calendar-header h3 {
   margin: 0;
   color: #2c3e50;
   font-size: 1.2rem;
   font-weight: 600;
}

.calendar-nav {
   background: none;
   border: none;
   font-size: 1.5rem;
   color: #667eea;
   cursor: pointer;
   padding: 8px 12px;
   border-radius: 8px;
   transition: all 0.2s;
   font-weight: bold;
}

.calendar-nav:hover {
   background-color: #667eea;
   color: white;
   transform: scale(1.1);
}

.calendar-days {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 6px;
}

.calendar-day {
   aspect-ratio: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
   font-weight: 600;
   font-size: 0.9rem;
}

.calendar-day:not(.empty):not(.disabled):hover {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   transform: scale(1.05);
}

.calendar-day.today {
   background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%);
   color: white;
   box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.calendar-day.selected {
   background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
   color: white;
   box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
   transform: scale(1.05);
}

.calendar-day.disabled {
   color: #adb5bd;
   cursor: not-allowed;
   opacity: 0.5;
}

.calendar-day.empty {
   cursor: default;
}

/* Time Section */
.time-section h4 {
   margin: 0 0 15px 0;
   color: #495057;
   font-size: 1.1rem;
   font-weight: 600;
}

.time-slots {
   min-height: 220px;
}

.time-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
   gap: 12px;
}

.time-slot {
   padding: 14px 8px;
   border: 2px solid #e9ecef;
   border-radius: 8px;
   background: white;
   cursor: pointer;
   transition: all 0.2s ease;
   text-align: center;
   font-weight: 600;
   position: relative;
   overflow: hidden;
}

.time-slot::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   opacity: 0;
   transition: opacity 0.2s;
}

.time-slot.available:hover::before {
   opacity: 1;
}

.time-slot.available:hover {
   border-color: #667eea;
   color: white;
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.time-slot.available:hover .time-text {
   position: relative;
   z-index: 1;
}

.time-slot.selected {
   border-color: #28a745;
   background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
   color: white;
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.time-slot.unavailable {
   background: #f8f9fa;
   color: #6c757d;
   cursor: not-allowed;
   opacity: 0.6;
}

.unavailable-label {
   display: block;
   font-size: 0.7rem;
   margin-top: 2px;
   font-weight: normal;
}

.no-date-selected,
.no-slots,
.error-slots,
.time-loading {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 50px 20px;
   color: #6c757d;
   text-align: center;
}

.empty-icon,
.error-icon {
   font-size: 2.5rem;
   margin-bottom: 15px;
   opacity: 0.7;
}

.loading-spinner {
   width: 32px;
   height: 32px;
   border: 3px solid #f3f3f3;
   border-top: 3px solid #667eea;
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin-bottom: 15px;
}

/* Party Size Section */
.party-size-section {
   grid-column: 1 / -1;
   background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
   border-radius: 12px;
   padding: 25px;
   border: 1px solid #e9ecef;
   margin-top: 20px;
}

.party-size-section h4 {
   margin: 0 0 15px 0;
   color: #495057;
   font-size: 1.1rem;
   font-weight: 600;
}

.party-counter {
   display: flex;
   align-items: center;
   gap: 20px;
   justify-content: center;
}

.party-btn {
   width: 44px;
   height: 44px;
   border: 2px solid #667eea;
   border-radius: 50%;
   background: white;
   color: #667eea;
   font-size: 1.3rem;
   font-weight: 700;
   cursor: pointer;
   transition: all 0.2s ease;
   display: flex;
   align-items: center;
   justify-content: center;
}

.party-btn:hover:not(:disabled) {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   transform: scale(1.05);
   box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.party-btn:disabled {
   opacity: 0.4;
   cursor: not-allowed;
}

.party-count {
   font-size: 1.5rem;
   font-weight: 700;
   color: #2c3e50;
   min-width: 40px;
   text-align: center;
   background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
   padding: 8px 16px;
   border-radius: 12px;
   border: 2px solid #dee2e6;
}

/* Services Grid */
.services-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 20px;
}

.service-option {
   position: relative;
}

.service-option input[type="checkbox"] {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}

.service-card {
   display: block;
   background: white;
   border: 2px solid #e9ecef;
   border-radius: 12px;
   padding: 25px;
   cursor: pointer;
   transition: all 0.3s ease;
   height: 100%;
   position: relative;
   overflow: hidden;
}

.service-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
   opacity: 0;
   transition: opacity 0.3s;
}

.service-card:hover::before {
   opacity: 1;
}

.service-card:hover {
   border-color: #667eea;
   transform: translateY(-4px);
   box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
}

.service-option.selected .service-card {
   border-color: #28a745;
   background: linear-gradient(135deg, rgba(40, 167, 69, 0.05) 0%, rgba(32, 201, 151, 0.05) 100%);
   transform: translateY(-4px);
   box-shadow: 0 8px 24px rgba(40, 167, 69, 0.2);
}

.service-option.selected .service-card::after {
   content: '✓';
   position: absolute;
   top: 15px;
   right: 15px;
   width: 28px;
   height: 28px;
   background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
   color: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   font-size: 0.9rem;
}

.service-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 15px;
   position: relative;
   z-index: 1;
}

.service-header h3 {
   margin: 0;
   color: #2c3e50;
   font-size: 1.2rem;
   font-weight: 700;
   flex: 1;
   margin-right: 15px;
}

.service-price {
   color: #667eea;
   font-weight: 700;
   font-size: 1.2rem;
   white-space: nowrap;
}

.service-description {
   color: #6c757d;
   margin: 0 0 15px 0;
   line-height: 1.6;
   position: relative;
   z-index: 1;
}

.service-meta {
   display: flex;
   align-items: center;
   gap: 15px;
   font-size: 0.9rem;
   color: #6c757d;
   position: relative;
   z-index: 1;
}

/* Guest Info Banner */
.guest-info-banner {
   background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
   border: 2px solid #ffd43b;
   border-radius: 12px;
   padding: 20px;
   margin-bottom: 25px;
   display: flex;
   align-items: center;
   gap: 15px;
   box-shadow: 0 4px 12px rgba(255, 212, 59, 0.2);
}

.info-icon {
   font-size: 1.8rem;
   flex-shrink: 0;
}

.info-content p {
   margin: 0;
   font-weight: 600;
   color: #856404;
   line-height: 1.5;
}

.info-content a {
   color: #667eea;
   text-decoration: underline;
   font-weight: 700;
}

/* Customer Form */
.customer-form {
   max-width: 600px;
}

.form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
}

.form-group {
   margin-bottom: 25px;
}

.form-group label {
   display: block;
   margin-bottom: 8px;
   font-weight: 700;
   color: #495057;
   font-size: 0.95rem;
}

.form-group input,
.form-group textarea,
.form-group select {
   width: 100%;
   padding: 14px 16px;
   border: 2px solid #e9ecef;
   border-radius: 8px;
   font-size: 1rem;
   transition: all 0.2s ease;
   box-sizing: border-box;
   font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
   outline: none;
   border-color: #667eea;
   box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
   transform: translateY(-1px);
}

.form-group input.error,
.form-group textarea.error,
.form-group select.error {
   border-color: #dc3545;
   box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.field-error {
   color: #dc3545;
   font-size: 0.875rem;
   margin-top: 6px;
   display: none;
   font-weight: 500;
}

/* Email Status */
.email-status {
   margin-top: 12px;
}

.email-exists,
.email-available,
.email-checking,
.email-error {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px 16px;
   border-radius: 8px;
   font-size: 0.9rem;
   animation: slideDown 0.3s ease-out;
}

.email-exists {
   background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
   border: 1px solid #ffd43b;
   color: #856404;
}

.email-available {
   background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
   border: 1px solid #28a745;
   color: #155724;
}

.email-checking {
   background: linear-gradient(135deg, #cce7ff 0%, #e7f3ff 100%);
   border: 1px solid #667eea;
   color: #004085;
}

.email-error {
   background: linear-gradient(135deg, #f8d7da 0%, #f1aeb5 100%);
   border: 1px solid #dc3545;
   color: #721c24;
}

/* Confirmation Summary */
.confirmation-summary {
   background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
   border-radius: 12px;
   padding: 30px;
   margin-bottom: 25px;
   border: 1px solid #e9ecef;
}

.summary-section {
   margin-bottom: 25px;
}

.summary-section:last-child {
   margin-bottom: 0;
}

.summary-section h3 {
   margin: 0 0 20px 0;
   color: #2c3e50;
   font-size: 1.3rem;
   font-weight: 700;
   border-bottom: 3px solid #e9ecef;
   padding-bottom: 8px;
}

.detail-item,
.service-item,
.customer-item,
.breakdown-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 15px 0;
   border-bottom: 1px solid #f1f3f4;
}

.detail-item:last-child,
.service-item:last-child,
.customer-item:last-child,
.breakdown-item:last-child {
   border-bottom: none;
}

.detail-icon,
.customer-icon {
   font-size: 1.3rem;
   margin-right: 15px;
   width: 24px;
   text-align: center;
}

.detail-content,
.customer-content {
   flex: 1;
}

.detail-label,
.customer-label {
   display: block;
   font-weight: 700;
   color: #495057;
   margin-bottom: 3px;
   font-size: 0.9rem;
}

.detail-value,
.customer-value {
   color: #6c757d;
   font-weight: 500;
}

.service-info {
   flex: 1;
}

.service-name,
.breakdown-label {
   font-weight: 700;
   color: #495057;
}

.service-duration {
   color: #6c757d;
   font-size: 0.85rem;
   margin-top: 2px;
}

.service-price,
.breakdown-amount {
   font-weight: 700;
   color: #667eea;
}

.total-section {
   background: white;
   border: 2px solid #e9ecef;
   border-radius: 12px;
   padding: 25px;
   margin-top: 20px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.total-amount {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 1.5rem;
   font-weight: 700;
   color: #2c3e50;
   margin-top: 20px;
   padding-top: 20px;
   border-top: 2px solid #e9ecef;
}

.total-price {
   color: #28a745;
   font-size: 1.8rem;
}

/* Terms Section */
.terms-section {
   margin: 30px 0;
}

.checkbox-label {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   cursor: pointer;
   line-height: 1.6;
   padding: 15px;
   border-radius: 8px;
   transition: background-color 0.2s;
}

.checkbox-label:hover {
   background-color: #f8f9fa;
}

.checkbox-label input[type="checkbox"] {
   margin: 0;
   transform: scale(1.3);
   accent-color: #667eea;
}

.terms-text {
   font-weight: 500;
   color: #495057;
}

.terms-text a {
   color: #667eea;
   text-decoration: underline;
   font-weight: 600;
}

/* Guest Account Info */
.guest-account-info {
   background: linear-gradient(135deg, #e8f5e8 0%, #f0f8ff 100%);
   border-radius: 12px;
   padding: 25px;
   margin: 25px 0;
   border: 2px solid #c3e6cb;
   box-shadow: 0 4px 12px rgba(40, 167, 69, 0.1);
}

.info-card h4 {
   margin: 0 0 15px 0;
   color: #2c3e50;
   font-size: 1.2rem;
   font-weight: 700;
}

.info-card p {
   margin: 0 0 15px 0;
   color: #495057;
   line-height: 1.6;
   font-weight: 500;
}

.benefits-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.benefits-list li {
   padding: 6px 0;
   color: #495057;
   font-weight: 500;
}

/* Form Navigation */
.form-navigation {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 25px 35px;
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
   border-top: 1px solid #e9ecef;
}

.btn {
   padding: 14px 28px;
   border: none;
   border-radius: 8px;
   font-size: 1rem;
   font-weight: 700;
   cursor: pointer;
   transition: all 0.2s ease;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   position: relative;
   overflow: hidden;
}

.btn::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
   transition: left 0.5s;
}

.btn:hover::before {
   left: 100%;
}

.btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
}

.btn:disabled:hover::before {
   left: -100%;
}

.btn-primary {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover:not(:disabled) {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
   background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
   color: white;
   box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

.btn-secondary:hover:not(:disabled) {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
}

.btn-success {
   background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
   color: white;
   box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.btn-success:hover:not(:disabled) {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

.btn-icon {
   font-size: 1.1rem;
}

.btn-loading {
   display: none;
   align-items: center;
   gap: 8px;
}

.spinner {
   width: 16px;
   height: 16px;
   border: 2px solid rgba(255, 255, 255, 0.3);
   border-top: 2px solid white;
   border-radius: 50%;
   animation: spin 1s linear infinite;
}

/* Booking Sidebar */
.booking-sidebar {
   position: relative;
}



.summary-card {
   background: white;
   border-radius: 16px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
   padding: 30px;
   position: sticky;
   top: 20px;
   border: 1px solid rgba(0, 0, 0, 0.05);
}

.summary-card h3 {
   margin: 0 0 25px 0;
   color: #2c3e50;
   font-size: 1.4rem;
   font-weight: 700;
   border-bottom: 3px solid #667eea;
   padding-bottom: 12px;
}

.summary-placeholder {
   text-align: center;
   padding: 50px 20px;
   color: #6c757d;
}

.placeholder-icon {
   font-size: 3rem;
   margin-bottom: 15px;
   opacity: 0.6;
}

.summary-placeholder p {
   margin: 0;
   font-weight: 500;
   line-height: 1.5;
}

.sidebar-summary {
   margin-bottom: 25px;
}

.summary-item {
   display: flex;
   align-items: center;
   gap: 15px;
   padding: 15px 0;
   border-bottom: 1px solid #f1f3f4;
   transition: all 0.2s ease;
}

.summary-item:hover {
   background: #f8f9fa;
   margin: 0 -15px;
   padding-left: 15px;
   padding-right: 15px;
   border-radius: 8px;
}

.summary-item:last-child {
   border-bottom: none;
}

.summary-icon {
   font-size: 1.3rem;
   width: 28px;
   text-align: center;
   flex-shrink: 0;
}

.summary-details {
   flex: 1;
}

.summary-label {
   display: block;
   font-weight: 700;
   color: #495057;
   font-size: 0.9rem;
   margin-bottom: 2px;
}

.summary-value {
   color: #6c757d;
   font-size: 0.95rem;
   font-weight: 500;
}

.summary-services {
   margin-top: 20px;
   padding-top: 20px;
   border-top: 2px solid #f1f3f4;
}

.summary-services h5 {
   margin: 0 0 15px 0;
   color: #495057;
   font-size: 1rem;
   font-weight: 700;
}

.summary-service {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px 0;
   font-size: 0.9rem;
}

.summary-service .service-name {
   font-weight: 600;
   color: #495057;
}

.summary-service .service-price {
   font-weight: 700;
   color: #667eea;
}

.sidebar-price {
   border-top: 3px solid #e9ecef;
   padding-top: 25px;
}

.price-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 0;
   font-size: 0.95rem;
}

.price-label {
   color: #495057;
   font-weight: 500;
}

.price-amount {
   font-weight: 700;
   color: #667eea;
}

.price-total {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 20px;
   padding-top: 20px;
   border-top: 2px solid #e9ecef;
   font-size: 1.2rem;
   font-weight: 700;
}

.price-total .price-label {
   color: #2c3e50;
}

.price-total .price-amount {
   color: #28a745;
   font-size: 1.4rem;
}

/* Modal Styles */
.modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
   backdrop-filter: blur(4px);
}

.modal-content {
   background: white;
   border-radius: 16px;
   max-width: 500px;
   width: 90%;
   max-height: 90vh;
   overflow-y: auto;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
   animation: modalSlideIn 0.3s ease-out;
}

.modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 25px 30px;
   border-bottom: 1px solid #e9ecef;
   background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
   border-radius: 16px 16px 0 0;
}

.modal-header h3 {
   margin: 0;
   color: #2c3e50;
   font-size: 1.3rem;
   font-weight: 700;
}

.modal-close {
   background: none;
   border: none;
   font-size: 1.8rem;
   color: #6c757d;
   cursor: pointer;
   padding: 5px;
   line-height: 1;
   border-radius: 50%;
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
}

.modal-close:hover {
   background: #f8f9fa;
   color: #495057;
   transform: scale(1.1);
}

.modal-body {
   padding: 30px;
}

.modal-body p {
   margin: 0 0 25px 0;
   line-height: 1.6;
   color: #495057;
   font-weight: 500;
}

.login-options {
   display: flex;
   gap: 15px;
}

.login-options .btn {
   flex: 1;
   justify-content: center;
}

/* Animations */
@keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}

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

@keyframes slideDown {
   from {
       opacity: 0;
       transform: translateY(-10px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}

@keyframes modalSlideIn {
   from {
       opacity: 0;
       transform: scale(0.9) translateY(-20px);
   }
   to {
       opacity: 1;
       transform: scale(1) translateY(0);
   }
}

@keyframes shake {
   0%, 100% { transform: translateX(0); }
   25% { transform: translateX(-5px); }
   75% { transform: translateX(5px); }
}

.shake {
   animation: shake 0.5s ease-in-out;
}

/* Utility Classes */
body.modal-open {
   overflow: hidden;
}

.text-center {
   text-align: center;
}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

/* Responsive Design */
@media (max-width: 1024px) {
   .booking-content {
       grid-template-columns: 1fr;
       gap: 25px;
   }
   
   .booking-sidebar {
       order: -1;
   }
   
   .summary-card {
       position: static;
       margin-bottom: 20px;
   }
}

@media (max-width: 768px) {
   .booking-container {
       padding: 15px;
   }
   
   .booking-header {
       padding: 20px;
       margin-bottom: 20px;
   }
   
   .business-info h1 {
       font-size: 2rem;
   }
   
   .guest-banner {
       flex-direction: column;
       text-align: center;
       gap: 10px;
   }
   
   .guest-icon {
       font-size: 1.5rem;
   }
   
   .step-progress {
       padding: 20px 15px;
       overflow-x: auto;
   }
   
   .progress-step {
       min-width: 80px;
   }
   
   .step-circle {
       width: 36px;
       height: 36px;
   }
   
   .step-label {
       font-size: 0.8rem;
   }
   
   .booking-step {
       padding: 25px 20px;
   }
   
   .booking-step h2 {
       font-size: 1.5rem;
   }
   
   .datetime-selection {
       grid-template-columns: 1fr;
       gap: 20px;
   }
   
   .calendar-section, 
   .time-section {
       padding: 20px;
   }
   
   .party-size-section {
       padding: 20px;
   }
   
   .form-row {
       grid-template-columns: 1fr;
       gap: 15px;
   }
   
   .services-grid {
       grid-template-columns: 1fr;
   }
   
   .service-card {
       padding: 20px;
   }
   
   .confirmation-summary {
       padding: 20px;
   }
   
   .form-navigation {
       flex-direction: column;
       gap: 15px;
       padding: 20px;
   }
   
   .form-navigation .btn {
       width: 100%;
       justify-content: center;
   }
   
   .summary-card {
       padding: 20px;
   }
   
   .login-options {
       flex-direction: column;
   }
   
   .modal-content {
       margin: 20px;
       width: calc(100% - 40px);
   }
   
   .modal-header,
   .modal-body {
       padding: 20px;
   }
}

@media (max-width: 480px) {
   .booking-container {
       padding: 10px;
   }
   
   .business-info h1 {
       font-size: 1.7rem;
   }
   
   .business-meta {
       flex-direction: column;
       gap: 10px;
       align-items: flex-start;
   }
   
   .booking-step {
       padding: 20px 15px;
   }
   
   .calendar-days {
       gap: 4px;
   }
   
   .time-grid {
       grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
       gap: 8px;
   }
   
   .time-slot {
       padding: 10px 6px;
       font-size: 0.9rem;
   }
   
   .party-counter {
       gap: 15px;
   }
   
   .party-btn {
       width: 40px;
       height: 40px;
       font-size: 1.2rem;
   }
   
   .service-header {
       flex-direction: column;
       align-items: flex-start;
       gap: 8px;
   }
   
   .service-price {
       align-self: flex-end;
   }
   
   .detail-item,
   .service-item,
   .customer-item,
   .breakdown-item {
       flex-direction: column;
       align-items: flex-start;
       gap: 5px;
   }
   
   .total-amount {
       flex-direction: column;
       gap: 10px;
       text-align: center;
   }
   
   .summary-item {
       flex-direction: column;
       align-items: flex-start;
       gap: 8px;
   }
   
   .summary-icon {
       align-self: center;
   }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   .booking-header {
       background-attachment: fixed;
   }
   
   .service-card::before,
   .btn::before {
       backface-visibility: hidden;
       perspective: 1000px;
   }
}

/* Dark Mode Support (if needed) */
@media (prefers-color-scheme: dark) {
   .booking-container {
       background-color: #1a1a1a;
       color: #ffffff;
   }
   
   .booking-form-container,
   .summary-card {
       background: #2d2d2d;
       border-color: #404040;
   }
   
   .calendar-section,
   .time-section,
   .party-size-section {
       background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
   }
   
   .service-card {
       background: #2d2d2d;
       border-color: #404040;
   }
   
   .form-group input,
   .form-group textarea,
   .form-group select {
       background: #3a3a3a;
       border-color: #404040;
       color: #ffffff;
   }
}

/* Print Styles */
@media print {
   .booking-container {
       background: white;
       box-shadow: none;
       padding: 0;
   }
   
   .booking-header {
       background: #f8f9fa !important;
       color: #000 !important;
   }
   
   .form-navigation,
   .booking-sidebar {
       display: none;
   }
   
   .booking-content {
       grid-template-columns: 1fr;
   }
   
   .btn {
       display: none;
   }
   
   .modal {
       display: none;
   }
}

/* Focus States for Accessibility */
.btn:focus,
.calendar-nav:focus,
.party-btn:focus,
.time-slot:focus,
.service-card:focus {
   outline: 3px solid #667eea;
   outline-offset: 2px;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
   outline: 3px solid #667eea;
   outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
       animation-duration: 0.01ms !important;
       animation-iteration-count: 1 !important;
       transition-duration: 0.01ms !important;
   }
   
   .booking-step {
       animation: none;
   }
   
   .modal-content {
       animation: none;
   }
}