/* Wallpaper styles for all pages */

body::before {

    content: '';

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background-image: var(--wallpaper-url, none); /* Use variable, default to none */

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    z-index: -2;

}



/* Dark overlay specifically for booking page */

body:not(.index-page)::after {

    content: '';

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */

    z-index: -1;

}



/* Specific selector for booking page's main app container */

#contener4 .app-container {

  background: transparent;

  box-shadow: none; 

  border-radius: 20px;

  overflow-y: auto;

  width: calc(100vw - 10px);

  height: calc(100vh - 14px);

  margin: 7px 5px;

  display: flex;

  flex-direction: column;

  flex-shrink: 0;

  flex-grow: 1;

  position: relative;

}



/* Header for booking page */

#appHeaderWrapper {

    position: absolute;

    top: 20px;

    right: 30px;

    z-index: 100;

}



#bookingAccountBtn, #bookingLoginBtn {

    background: rgba(255, 255, 255, 0.8);

    border: 1px solid var(--border-color);

    border-radius: 50%;

    width: 44px;

    height: 44px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

    transition: all 0.2s ease;

    padding: 0;

}



#bookingAccountBtn:hover, #bookingLoginBtn:hover {

    transform: scale(1.1);

    background: var(--white);

}



#bookingAccountBtn svg, #bookingLoginBtn svg {

    width: 24px;

    height: 24px;

    color: var(--primary-color);

}



/* Booking Step Styles */

.step {

  padding: 40px 30px 40px;

  display: none;

  animation: fadeIn 0.5s ease-in-out;

  flex-grow: 1;

  flex-direction: column;

  justify-content: flex-start;

  min-height: auto;

}



.step:not(#step0) {

    background-color: rgba(255, 255, 255, 0.75);

    border-radius: 20px;

}



.step.active {

  display: flex;

}



@keyframes fadeIn {

  from { opacity: 0; transform: translateY(10px); }

  to { opacity: 1; transform: translateY(0); }

}



.step-header {

  display: flex;

  align-items: center;

  margin-bottom: 20px;

}



.step-icon {

  background-color: var(--primary-color);

  color: var(--white);

  width: 30px;

  height: 30px;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  font-weight: 600;

  margin-right: 15px;

  flex-shrink: 0;

}



.small-text {

  font-size: 0.8rem;

  color: var(--light-text);

}



.no-services-wrap {

    margin-bottom: 10px;

}



.step-content {

  margin-bottom: 20px;

  flex-grow: 0;

  overflow-y: auto;

  padding-right: 5px;

  transition: min-height 0.4s ease; /* For calendar expansion */

}



#step2 .step-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 25px; /* Spacing between date and time pickers */

}



#step3 .step-content,

#step4 .step-content {

    justify-content: center;

    flex-grow: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

}

.auth-prompt {

    text-align: center;

}

.auth-box {

    background: var(--white);

    padding: 30px;

    border-radius: 12px;

    box-shadow: var(--shadow-color);

    max-width: 400px;

    width: 100%;

    margin-bottom: 20px;

}

.auth-box h3 {

    margin-bottom: 20px;

    color: var(--text-color);

}

.guest-link {

    color: var(--light-text);

    text-decoration: underline;

    cursor: pointer;

}

.guest-link:hover {

    color: var(--primary-color);

}



.info-form .input-group-split {

    display: flex;

    gap: 15px;

    margin-bottom: 15px;

}



.info-form .input-group-split .input-with-validation {

    flex: 1;

    margin-bottom: 0;

}



.input-with-validation {

  position: relative;

  margin-bottom: 15px;

}

.input-with-validation input {

  margin-bottom: 0;

}

.validation-checkmark {

  position: absolute;

  right: 15px;

  top: 50%;

  transform: translateY(-50%);

  width: 24px;

  height: 24px;

  border-radius: 50%;

  background-color: transparent;

  opacity: 0;

  transition: opacity 0.3s;

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center;

}

.validation-checkmark.valid {

  background-image: url('../images/green_check.png');

  opacity: 1;

}



input, .StripeElement {

  width: 100%;

  padding: 12px;

  border: 1px solid var(--border-color);

  border-radius: 10px;

  font-family: 'Poppins', sans-serif;

  font-size: 1rem;

  transition: border-color 0.3s, box-shadow 0.3s;

}

input:focus, .StripeElement--focus {

  outline: none;

  border-color: var(--primary-color);

  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);

}



.step-navigation {

  display: flex;

  gap: 15px;

  margin-top: auto;

}



.step-navigation .secondary-btn,

.step-navigation .primary-btn {

    flex: 1;

}

/* Navigation buttons styled like services.php */
.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #0079fc 0%, #005bb5 100%);
    color: white;
    text-decoration: none;
}

.nav-btn svg {
    flex-shrink: 0;
}

.nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 121, 252, 0.4);
}

.back-nav-btn {
    background: linear-gradient(135deg, #0079fc 0%, #005bb5 100%);
}

.back-nav-btn:hover {
    box-shadow: 0 4px 12px rgba(0, 121, 252, 0.4);
}

.next-nav-btn {
    background: linear-gradient(135deg, #0079fc 0%, #005bb5 100%);
}

.next-nav-btn:hover {
    box-shadow: 0 4px 12px rgba(0, 121, 252, 0.4);
}

.next-nav-btn svg {
    order: 2;
}

/* Desktop layout: buttons at top and wider spacing */
@media (min-width: 768px) {
    .step-navigation {
        justify-content: space-between;
        margin-bottom: 20px;
        margin-top: 0;
    }
    
    .step-navigation .nav-btn {
        flex: 0 0 auto;
        min-width: 150px;
    }
}



/* --- New Custom Date Picker Styles --- */

/* Desktop: Side-by-side layout wrapper */
.datetime-selection-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

.date-picker-container {

    position: relative;

    width: 100%;

    max-width: 450px;
    flex: 1;

}

/* Desktop: Hide the date display box toggle, show calendar directly */
@media (min-width: 768px) {
    .date-display-box {
        display: none !important;
    }
    
    .calendar-dropdown {
        display: block !important;
        position: static !important;
        max-height: none !important;
    }
    
    .time-picker-section {
        flex: 1;
        max-width: 400px;
    }
    
    /* Hide Save button on desktop since calendar is always visible */
    #saveDateBtn {
        display: none;
    }
    
    .calendar-actions {
        justify-content: center;
    }
}

.date-display-box {

    background-color: #2c2f33;

    color: white;

    padding: 15px 20px;

    border-radius: 10px;

    font-size: 1.1rem;

    font-weight: 600;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border: 1px solid #444;

}

.date-display-box svg {

    fill: white;

    transition: transform 0.3s ease;

}

.date-picker-container.open .date-display-box svg {

    transform: rotate(180deg);

}

.calendar-dropdown {

    display: none;

    position: absolute;

    top: 105%;

    left: 0;

    width: 100%;

    background-color: #23272A;

    border-radius: 10px;

    box-shadow: 0 8px 16px rgba(0,0,0,0.3);

    z-index: 10;

    padding: 0;

    color: white;

    overflow: visible;

    max-height: 0;

    opacity: 0;

    transition: max-height 0.4s ease-out, opacity 0.3s ease-out, padding 0.4s ease-out;

}

.calendar-dropdown.open {

    display: block;
    
    padding: 15px;
    
    max-height: 600px;
    
    opacity: 1;

}

.calendar-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;

}

.calendar-header button {

    background: none;

    border: none;

    color: var(--primary-color);

    font-size: 1.5rem;

    cursor: pointer;

}

#monthYearDisplay {

    font-weight: 600;

    font-size: 1.1rem;

}

.calendar-grid {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 5px;

    text-align: center;

}

.day-name {

    font-weight: 600;

    color: #99AAB5;

    font-size: 0.8rem;

    padding-bottom: 10px;

}

.calendar-days {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 5px;

    text-align: center;

}

.calendar-day {

    padding: 8px 5px;

    border-radius: 50%;

    cursor: pointer;

    transition: background-color 0.2s, color 0.2s, border 0.2s;

    width: 36px;

    height: 36px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 0 auto;

    border: 1px solid transparent;

}

.calendar-day.other-month {

    color: #4F545C;

}

.calendar-day:not(.other-month):not(.disabled):hover {

    background-color: #7289DA;

}

.calendar-day.today {

    border-color: var(--primary-color);

}

.calendar-day.selected {

    background-color: transparent;

    border: 1px solid white;

    color: white;

    font-weight: bold;

}

.calendar-day.disabled {

    color: #4F545C;

    cursor: not-allowed;

    text-decoration: line-through;

}

.calendar-actions {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 15px;

    padding-top: 10px;

    border-top: 1px solid #444;

}

.calendar-actions .secondary-btn, .calendar-actions .primary-btn {

    padding: 8px 15px;

    font-size: 0.9rem;

    height: auto;

    flex: none;

}

.quick-select-label {

    font-size: 0.7rem;

    color: #99AAB5;

    text-transform: uppercase;

    font-weight: bold;

}

.quick-select-buttons {

    display: flex;

    gap: 5px;

}



/* --- New Custom Time Picker Styles --- */

.new-time-picker-wrapper {

    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    max-width: 450px;

    justify-content: center;

    background: #23272A; /* Match calendar color */

    padding: 15px;

    border-radius: 20px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

}

.time-box-new {

    background-color: #ffffff;

    border-radius: 12px;

    padding: 5px;

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 120px;

    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

}

.time-value-new {

    font-size: 3rem;

    font-weight: 700;

    color: #333;

    padding: 5px 0;

}

.time-control-new {

    background: none;

    border: none;

    cursor: pointer;

    line-height: 1;

    padding: 5px;

    color: #64748b;

}

.time-control-new svg {

    width: 28px;

    height: 28px;

    fill: currentColor;

}

.time-separator-new {

    font-size: 3rem;

    font-weight: 700;

    color: #64748b;

}

.ampm-toggle-new {

    width: 60px; /* Explicit width */

    height: 96px; /* Explicit height */

}



.ampm-toggle-new img {

    width: 100%;

    height: 100%;

    cursor: pointer;

}

.time-error-wrapper {

    width: 100%;

    max-width: 450px;

    min-height: 40px; /* Reserve space */

    display: none; /* Hidden by default */

    margin-top: -15px; /* Pull it closer to the time picker */

    padding: 5px;

    background-color: rgba(255, 255, 255, 0.8);

    border-radius: 8px;

}

.time-error-message {

    color: var(--error-color);

    font-size: 0.85rem;

    text-align: center;

    width: 100%;

}



.date-time-summary-box {

    background-color: #e0e7ff;

    color: #374151;

    padding: 12px 20px;

    border-radius: 10px;

    font-weight: 600;

    text-align: center;

    width: 100%;

    max-width: 450px;

    margin-top: 5px;

    opacity: 0;

    transition: opacity 0.3s ease;

    visibility: hidden;

}

.date-time-summary-box.visible {

    opacity: 1;

    visibility: visible;

}

.date-time-summary-box .date-part {

    color: #1e40af;

}



.device-name-display {

  text-align: center;

  font-size: 0.9rem;

  color: var(--light-text);

  margin-bottom: 15px;

}

.repair-options-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 15px;

}

.repair-option {

  background-color: var(--secondary-color);

  padding: 15px;

  border-radius: 15px;

  text-align: center;

  cursor: pointer;

  position: relative;

  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;

  border: 2px solid transparent;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  min-height: 150px;

  flex: 1 1 calc(50% - 8px); /* 2 columns on mobile */

}

.repair-option:hover {

  transform: scale(0.95);

  box-shadow: 0 5px 15px var(--shadow-color);

}

.repair-option.selected {

  border-color: var(--primary-color);

  background-color: #d1e7ff;

}

.check-mark {

  position: absolute;

  top: 10px;

  right: 10px;

  display: none;

  width: 24px;

  height: 24px;

  background-image: url('../images/green_check.png');

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center;

}

.repair-option.selected .check-mark {

  display: block;

}

.repair-option h3 {

  font-size: 1rem;

  margin-bottom: 5px;

}

.repair-option .service-price-display {

  font-size: 1rem;

  font-weight: 600;

  color: var(--primary-color);

  display: block;

  min-height: 1.2em;

}



.summary-box {

  border: 1px solid var(--border-color);

  border-radius: 10px;

  padding: 15px;

  background: var(--secondary-color);

  max-height: 150px;

  overflow-y: auto;

  transition: transform 0.3s ease, opacity 0.3s ease;

}

.summary-box .summary-header {

    display: flex;

    justify-content: space-between;

    padding: 0 5px 5px 5px;

    border-bottom: 1px solid var(--border-color);

    margin-bottom: 5px;

}

.summary-box h4 {

  margin-bottom: 0;

  color: var(--primary-color);

  font-size: 0.9rem;

  font-weight: bold;

}

.summary-box ul {

  list-style: none;

  padding: 0;

}

.summary-box li {

  display: flex;

  justify-content: space-between;

  padding: 3px 5px;

  font-size: 0.9rem;

  flex-wrap: wrap;

}

.summary-box .summary-footer {

    border-top: 1px solid var(--border-color);

    margin-top: 5px;

    padding-top: 5px;

}

.summary-box .summary-subtotal,

.summary-box .summary-discount,

.summary-box .summary-tax,

.summary-box .summary-total {

    display: flex;

    justify-content: space-between;

    font-size: 0.9rem;

    padding: 2px 5px;

}

.summary-box .summary-subtotal {

    font-weight: 500;

}

.summary-box .summary-discount {

    color: #28a745;

    font-weight: 700;

}

.summary-box .summary-tax {

    font-weight: 500;

}

.summary-box .summary-total {

    color: var(--primary-color);

    font-weight: 700;

    font-size: 1rem;

    margin-top: 5px;

    padding-top: 5px;

    border-top: 1px solid var(--border-color);

}





.payment-options {

  display: flex;

  flex-direction: column;

  gap: 1rem;

  margin-top: 20px;

}

.payment-option-label {

  display: flex;

  align-items: center;

  border: 2px solid var(--border-color);

  border-radius: 10px;

  padding: 15px;

  margin-bottom: 10px;

  cursor: pointer;

  transition: border-color 0.2s, background-color 0.2s;

}

.payment-option-label:hover {

  border-color: var(--primary-color);

}

.payment-option-label input[type="radio"] {

  display: none;

}

.payment-option-label:has(input:checked) {

  border-color: var(--primary-color);

  background-color: #f8fbff;

}



.loading-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(255, 255, 255, 0.8);

  display: none;

  justify-content: center;

  align-items: center;

  z-index: 1001;

}

.modal .loading-overlay {

    border-radius: 20px;

}

.loading-overlay.visible {

  display: flex;

}

.loading-spinner {

  border: 5px solid var(--primary-color);

  border-top: 5px solid transparent;

  border-radius: 50%;

  width: 50px;

  height: 50px;

  animation: spin 1s linear infinite;

}

@keyframes spin {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}



.confirmation-receipt {

  background: var(--white);

  padding: 25px;

  border-radius: 15px;

  box-shadow: 0 5px 15px rgba(0,0,0,0.1);

  text-align: center;

  margin-bottom: 20px;

  max-width: 400px;

  margin-left: auto;

  margin-right: auto;

}

.barcode-container {

  margin-bottom: 20px;

}

#barcode {

  width: 100%;

  max-width: 250px;

  height: 80px;

  display: block;

  margin: 0 auto;

}

.logo-container {

  margin-bottom: 20px;

}

.company-logo {

  width: 90px;

  height: 90px;

  border-radius: 50%;

  object-fit: cover;

  border: 2px solid var(--border-color);

}



/* --- Screen Repair Quality Modal --- */

#screenRepairModal .modal-content {

    max-height: 80vh; /* Set a max height relative to the viewport */

    display: flex;

    flex-direction: column;

    position: relative; /* Make it a positioning context for the overlay */

    z-index: 0; /* Establish a stacking context */

    overflow: hidden; /* Prevent parent from scrolling */

}



.background-color-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: -1; /* Sit behind the content */

    border-radius: inherit;

    pointer-events: none;

}



#screenRepairModal .modal-content > * {

    position: relative;

    z-index: 1;

}



#screenRepairModal .modal-content h3 {

    color: #ffffff; /* Make title white */

    text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* Add shadow for readability */

}



#screenRepairModal .close-modal-btn {

    color: #fff; /* Make close button white */

    text-shadow: 0 1px 3px rgba(0,0,0,0.5);

}



#screenQualitiesContainer {

    overflow-y: auto; /* Add a vertical scrollbar when content overflows */

    padding: 5px 15px 5px 5px; /* Add some padding to avoid scrollbar overlap */

}



/* Custom Scrollbar for Webkit (Chrome, Safari) */

#screenQualitiesContainer::-webkit-scrollbar {

  width: 10px;

}

#screenQualitiesContainer::-webkit-scrollbar-track {

  background: rgba(255, 255, 255, 0.2);

  border-radius: 10px;

}

#screenQualitiesContainer::-webkit-scrollbar-thumb {

  background-color: var(--primary-color);

  border-radius: 10px;

  border: 2px solid transparent;

  background-clip: content-box;

}

#screenQualitiesContainer::-webkit-scrollbar-thumb:hover {

  background-color: #005bb5;

}



/* Custom Scrollbar for Firefox */

#screenQualitiesContainer {

  scrollbar-width: thin;

  scrollbar-color: var(--primary-color) rgba(255, 255, 255, 0.2);

}





.repair-quality-option {

    border: 2px solid rgba(255, 255, 255, 0.5);

    background-color: rgba(0, 0, 0, 0.2); /* Semi-transparent dark background */

    backdrop-filter: blur(5px); /* Frosted glass effect */

    border-radius: 12px;

    padding: 15px;

    margin-bottom: 10px;

    cursor: pointer;

    transition: all 0.2s ease-in-out;

}



.repair-quality-option:hover {

    border-color: #ffffff;

    background-color: rgba(0, 0, 0, 0.4);

    transform: translateY(-2px);

}



.repair-quality-option.selected-quality {

    border-color: var(--primary-color);

    background-color: rgba(0, 122, 255, 0.3);

    box-shadow: 0 4px 10px rgba(0, 122, 255, 0.1);

}



.repair-quality-option h4 {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin: 0 0 5px 0;

    font-size: 1.1rem;

    color: #ffffff; /* Make text white */

    text-shadow: 0 1px 2px rgba(0,0,0,0.4);

}



.repair-quality-option .price-box {

    background-color: var(--primary-color);

    color: var(--white);

    padding: 4px 10px;

    border-radius: 8px;

    font-size: 1rem;

}



.repair-quality-option .quality-description {

    font-size: 0.9rem;

    color: #e0e0e0; /* Lighter white for description */

    margin: 0 0 8px 0;

}



.repair-quality-option small {

    font-weight: 600;

    color: #a7d7a9; /* Light green for warranty, good contrast */

}



/* --- Mobile-specific styles for sticky navigation --- */

@media (max-width: 767px) {

    /* Mobile: Stack datetime components vertically */
    .datetime-selection-wrapper {
        flex-direction: column;
        gap: 15px;
    }
    
    .time-picker-section {
        width: 100%;
    }

    .step-navigation {

        position: fixed;

        bottom: 0;

        left: 0;

        right: 0;

        width: 100%;

        z-index: 1000;

        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);

        margin-top: 0;

        border-radius: 0;

        padding: 15px 20px;

        gap: 10px;
        
        background: #1a2332;

    }



    .step-navigation .secondary-btn {

        background-color: #1f212e;

        background-image: none;

    }



    .step-navigation .secondary-btn,

    .step-navigation .primary-btn {

        flex: 1;

        color: white;

        background-image: url('../images/HEADER10.png');

        background-size: cover;

        background-position: center;

        border: none;

        border-radius: 0;

        height: 60px;

    }
    
    /* Mobile nav buttons styling - match services.php */
    .step-navigation .nav-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 24px;
        background: #007AFF !important;
        color: white !important;
        text-decoration: none !important;
        border-radius: 8px;
        font-weight: 600;
        font-size: 16px;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
        flex: 1;
        min-width: 0;
        box-sizing: border-box;
        height: auto;
    }
    
    .back-nav-btn {
        background: #007AFF !important;
    }
    
    .next-nav-btn {
        background: #007AFF !important;
    }
    
    .step-navigation .nav-btn:hover {
        transform: none;
        box-shadow: none;
        background: #0051D5 !important;
    }
    
    .step-navigation .nav-btn svg {
        width: 20px;
        height: 20px;
    }



    .step {

        padding-bottom: 80px; /* Add padding to prevent content from being hidden by the sticky nav */

    }



    .time-box-new {

        width: 90px;

    }

    .time-value-new {

        font-size: 2.5rem;

    }

    .ampm-toggle-new {

        width: 45px;

        height: 72px;

    }

    

    /* Calendar mobile responsive fixes */

    .date-picker-container {

        max-width: 100%;

        width: 100%;

    }



    .date-display-box {

        padding: 12px 15px;

        font-size: 1rem;

    }



    .calendar-dropdown {

        width: 100%;

        max-width: 100%;

        left: 0;

        right: 0;
        
        overflow: visible;
        
        position: relative;
        
        top: 0;

    }
    
    .calendar-dropdown.open {
        padding: 10px;
        
        max-height: none;
    }



    .calendar-header {

        margin-bottom: 10px;

    }



    .calendar-header button {

        font-size: 1.3rem;

        padding: 5px 10px;

    }



    #monthYearDisplay {

        font-size: 1rem;

    }



    .calendar-grid,

    .calendar-days {

        gap: 3px;

    }



    .day-name {

        font-size: 0.7rem;

        padding-bottom: 5px;

    }



    .calendar-day {

        width: 32px;

        height: 32px;

        padding: 6px 3px;

        font-size: 0.9rem;

    }



    .calendar-actions {

        flex-direction: column;

        gap: 10px;

        align-items: stretch;

    }



    .quick-select-label {

        text-align: center;

        margin-bottom: 5px;

    }



    .quick-select-buttons {

        width: 100%;

        justify-content: space-between;

    }



    .calendar-actions .secondary-btn,

    .calendar-actions .primary-btn {

        width: 100%;

        padding: 10px 15px;

    }



    .calendar-actions .quick-select-buttons .secondary-btn {

        flex: 1;

    }



    /* Time picker mobile adjustments */

    .new-time-picker-wrapper {

        max-width: 100%;

        padding: 10px;

    }



    .time-separator-new {

        font-size: 2rem;

    }

}



@media (min-width: 768px) {

    .repair-option {

        flex-basis: calc(25% - 12px); /* 4 columns on desktop */

    }

}