@charset "utf-8";

/* ==========================================================================
   VARIABLES & RESET
   ========================================================================== */
.repair-buddy-container.wcrb_container,
:root {
    /*
     * The booking form follows the dashboard palette from the Styling screen
     * (Front-end Dashboard Colors): the --wcrb-* tokens are printed by
     * class-wcrb_styling.php on :root. The fallbacks keep the form readable when
     * that block is not on the page, and each keeps the original look.
     */
    --primary-color: var(--wcrb-brand, #3b82f6);
    --primary-dark: var(--wcrb-brand, #2563eb);
    --primary-light: var(--wcrb-brand, #93c5fd);
    --secondary-color: var(--wcrb-brand-accent, #10b981);
    --light-bg: var(--wcrb-surface-2, #f8fafc);
    --light-bg-alt: var(--wcrb-surface-3, #f1f5f9);
    --text-dark: var(--wcrb-ink, #1e293b);
    --text-medium: var(--wcrb-ink-soft, #475569);
    --text-light: var(--wcrb-ink-muted, #64748b);
    --border-color: var(--wcrb-border, #e2e8f0);
    --border-dark: var(--wcrb-border-strong, #cbd5e1);
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 0 50px 0 rgba(0, 0, 0, 0.1), 0 0 50px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a, ul, li, p, h1, h2, h3, h4, h5, h6 {
    min-height:auto !important;
}
.text-center {
    text-align: center;
}

.form-field.field-error .wp-editor-container {
    border: 1px solid #ef4444;
    border-radius: 4px;
}
/* For the frontend field */
input[name="phoneNumber_ol"] {
    width: 100% !important; /* or a specific width, e.g. 100% of its container */
}

/* For the admin field */
input.customer_phone_ol {
    width: 100% !important;
}

/* Optionally target the intl-tel-input wrapper to ensure it also stretches */
.iti {
    display: block !important;
    width: 100% !important;
}

.iti input {
    width: 100% !important;
}
/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   LAYOUT & CONTAINERS
   ========================================================================== */
.wcrb_container .repair-buddy-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.wcrb_container .rb-booking-main-content-wrapper {
    margin-top: 15px;
}

.wcrb_container .rb-booking-main-content-wrapper.bookingsummaryincluded {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}

.wcrb_container .rb-booking-main-content {
    flex: 1;
}

.wcrb_container .rb-content-area {
    background: white;
    border-radius: var(--radius-xl);
    padding: 30px;
    box-shadow: var(--shadow-lg);
    margin-bottom: 2rem;
}

/* Section Headers */
.wcrb_container .section-header {
    margin-bottom: 1rem;
}
/* The theme gives every h3 a large size (~22px) with a heavier selector, so
   these element rules must keep the specificity of the old `.section-header h3`
   to stay in charge of the booking form's headings. */
.wcrb_container h3,
.wcrb_container h2 {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-dark);
}

.wcrb_container .section-header h3,
.wcrb_container .section-header h2 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.wcrb_container .section-header p {
    color: var(--text-light);
    font-size: 1.1rem;
}

/* Section Transitions */
.wcrb_container .sectiontypes {
    transition: all 0.3s ease;
}

.wcrb_container .sectiontypes.hidden {
    display: none;
}

/* ==========================================================================
   PROGRESS STEPS
   ========================================================================== */
.wcrb_container .rb-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.5rem;
    position: relative;
}

.wcrb_container .rb-progress-line {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 2px;
    background-color: var(--border-color);
    z-index: 1;
}

.wcrb_container .rb-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    width: 25%;
}

.wcrb_container .step-number {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    background: white;
    border: 2px solid var(--border-color);
    color: var(--text-light);
    transition: all 0.3s ease;
}

.wcrb_container .step-label {
    font-size: 0.9rem;
    color: var(--text-light);
    text-align: center;
    font-weight: 500;
}

.wcrb_container .step-active .step-number {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

.wcrb_container .step-active .step-label {
    color: var(--primary-color);
    font-weight: 600;
}

/* ==========================================================================
   SEARCH COMPONENTS
   ========================================================================== */
.wcrb_container .rb-search-container {
    margin-bottom: 1rem;
}
.rb-search-container .section-header {
    text-align: center;
}
.wcrb_container .search-box {
    position: relative;
    margin-bottom: 0px;
    padding:0px;
    background-color:transparent;
}

.wcrb_container .search-input-container {
    position: relative;
    display: flex;
    align-items: center;
    background: #f7f7f7;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

.wcrb_container .search-input-container:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--wcrb-brand-soft, rgba(59, 130, 246, 0.1));
}

.wcrb_container .search-icon {
    color: var(--text-light);
    margin-right: 0.75rem;
}

.wcrb_container .search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.1rem;
    color: var(--text-dark);
    background: transparent;
    margin-bottom:0px;
    padding:0px;
    background-color:#FFF;
}
.wcrb_container .search-input::placeholder {
    color: var(--text-light);
}

.wcrb_container .search-clear-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    transition: color 0.2s ease;
}

.wcrb_container .search-clear-btn:hover {
    color: var(--primary-color);
}

.wcrb_container .search-hint {
    margin-top: 5px;
    gap: 0.5rem;
    display:block;
    text-align:right;
}
.wcrb_container .search-hint span,
.wcrb_container .search-hint {
    font-size: 0.75rem;
    color: var(--text-light);
}
.wcrb_container .search-hint svg {
    color: var(--secondary-color);
}

/* Search Results Dropdown */
.wcrb_container .search-results-dropdown {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    margin-top: -2px;
    max-height: 390px;
    overflow-y: auto;
}

.wcrb_container .dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--light-bg);
    border-bottom: 1px solid var(--border-color);
}

.wcrb_container .results-count {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.9rem;
}

.wcrb_container .close-dropdown {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-light);
    transition: color 0.2s ease;
}

.wcrb_container .close-dropdown:hover {
    color: var(--primary-color);
}

.wcrb_container .dropdown-content {
    padding: 0;
    margin-bottom:0px;
}

.wcrb_container .results-list {
    max-height: 303px;
    overflow-y: auto;
}

.wcrb_container .search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid var(--light-bg);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.wcrb_container .search-result-item:hover {
    background-color: var(--light-bg);
}

.wcrb_container .search-result-item:last-child {
    border-bottom: none;
}

.wcrb_container .result-item-content {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 12px;
}

.wcrb_container .result-image {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.wcrb_container .result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wcrb_container .result-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--light-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wcrb_container .result-icon svg {
    width: 20px;
    height: 20px;
    color: var(--text-light);
}

.wcrb_container .result-details {
    flex: 1;
    min-width: 0;
}

.wcrb_container .result-name {
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wcrb_container .result-brand,
.wcrb_container .result-type {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 1px;
}

.wcrb_container .result-select-arrow {
    width: 16px;
    height: 16px;
    color: var(--border-dark);
    flex-shrink: 0;
    margin-left: 12px;
}

.wcrb_container .no-results {
    padding: 32px 16px;
    text-align: center;
}

.wcrb_container .no-results-icon {
    margin-bottom: 16px;
    color: var(--border-dark);
}

.wcrb_container .no-results p {
    color: var(--text-light);
    font-size: 0.875rem;
}

.wcrb_container .loading-results {
    padding: 32px 16px;
    text-align: center;
}

.wcrb_container .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

/* ==========================================================================
   CATEGORIES & DEVICES
   Shared card look for the Type / Brand / Device steps. The rules below only
   adjust presentation (size, spacing, hover, a selected state) - the markup,
   classes and click behaviour stay exactly the same.
   ========================================================================== */
.wcrb_container .devices-grid,
.wcrb_container .categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(179px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.wcrb_container .category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 14px 12px 16px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.wcrb_container .category-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-color);
    box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.18);
}

.wcrb_container .category-card:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* The type/brand the visitor just picked (class added by the booking script). */
.wcrb_container .category-card.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--wcrb-brand-soft, rgba(59, 130, 246, 0.18));
}

.wcrb_container .category-card.selected::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* "Other <model>" card: reads as an action, not a product. */
.wcrb_container .category-card.wcrb-other-color {
    border-style: dashed;
    background: var(--light-bg);
}

.wcrb_container .category-card.wcrb-other-color:hover {
    background: #fff;
}

.wcrb_container .category-icon {
    width: 100%;
    max-width: 132px;
    aspect-ratio: 1 / 1;
    height: auto;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-bg);
    border-radius: 50%;
    padding: 14px;
    object-fit: contain;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.wcrb_container .category-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-dark);
    text-align: center;
}

/* Popular Devices */
.wcrb_container .popular-devices {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.wcrb_container .popular-devices .section-header {
    margin-bottom: 0;
}

.wcrb_container .popular-devices .section-header h3 {
    font-size: 1.1rem;
}

.wcrb_container .popular-devices .section-header p {
    font-size: 0.95rem;
}

.wcrb_container .device-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 12px 12px 16px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    text-align: center;
}
.wcrb_container .category-count {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 2px;
    line-height: 1.4;
}

.wcrb_container .device-card .device-brand {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 2px;
    line-height: 1.5;
}
.wcrb_container .category-name,
.wcrb_container .device-card .device-model {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.4;
}
.wcrb_container .device-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.18);
}

.wcrb_container .device-card:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.wcrb_container .device-image {
    width: 100%;
    height: auto;
    max-height: 110px;
    object-fit: contain;
    margin-bottom: 0px;
    margin-top: 10px;
    border-radius: var(--radius-sm);
}
.wcrb_container .device-card .device-description {
    font-size: 13px;
    color: var(--text-light);
    padding: 8px 0px 0px;
    line-height: 1.5;
}

/* "Other model" card inside the device grid. */
.wcrb_container .device-card.other-device-option {
    justify-content: center;
    border-style: dashed;
    background: var(--light-bg);
    color: var(--text-medium);
    font-size: 13px;
    line-height: 1.5;
}

.wcrb_container .device-card.other-device-option:hover {
    background: #fff;
}

/* Device step: sub-brand filter strip */
.wcrb_container .wcrb-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 1rem 0 0.25rem;
}

.wcrb_container .wcrb-filter-chip {
    padding: 7px 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #fff;
    color: var(--text-medium);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.wcrb_container .wcrb-filter-chip:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.wcrb_container .wcrb-filter-chip.is-active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
}

/* ==========================================================================
   DEVICE FIELDS
   ========================================================================== */
.wcrb_container .device-fields-row {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    overflow: hidden;
}

.wcrb_container .device-fields-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--light-bg);
    border-bottom: 1px solid var(--border-color);
}

.wcrb_container .device-fields-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
}
.wcrb_container .remove-device-btn {
    background: var(--danger-color);
    color: white;
    border: none;
    width: 23px;
    height: 23px;
    border-radius: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    padding:3px;
}
.wcrb_container .remove-device-btn:hover {
    background: #dc2626;
}
.wcrb_container .device-fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    padding: 20px;
}

.wcrb_container .device-field {
    margin-bottom: 7px;
}
.wcrb_container .device-field label {
    display: block;
    margin-bottom: 3px;
    font-weight: 600;
    color: var(--text-dark);
    font-size: 14px;
}

.wcrb_container .device-field input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    transition: border 0.3s ease;
    margin-bottom:0px;
}

.wcrb_container .device-field input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--wcrb-brand-soft, rgba(59, 130, 246, 0.1));
}

.wcrb_container select, .wcrb_container textarea, .wcrb_container input[type=email], .wcrb_container input[type=date], .wcrb_container input[type=text] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    transition: border 0.3s ease;
    margin-bottom:0px;
}

/* ==========================================================================
   SERVICES SECTION
   ========================================================================== */
.wcrb_container .services-accordion {
    margin: 0px 0;
}
.wcrb_container .service-group-card {
    background: white;
    border: 1px solid var(--border-color);
    margin-bottom: 10px;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wcrb_container .service-group-card:last-child {
    margin-bottom:0px;
}
.wcrb_container .service-group-card:hover {
    border-color: var(--primary-color);
}

/* An open group is clearly the active one. */
.wcrb_container .service-group-card.active {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.wcrb_container .service-group-header {
    padding: 16px 18px;
    background: var(--light-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.wcrb_container .service-group-card.active .service-group-header {
    background: var(--wcrb-brand-soft, rgba(59, 130, 246, 0.06));
}
.wcrb_container .service-group-header span,
.wcrb_container .service-group-header h4 {
    margin-top:0px;
    margin-bottom:0px;
}
.wcrb_container .service-group-header:hover {
    background: var(--light-bg-alt);
}

.wcrb_container .service-group-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-dark);
}

.wcrb_container .service-group-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-light);
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    border-radius: 999px;
}

.wcrb_container .group-toggle-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--text-light);
    transition: transform 0.25s ease;
}

.wcrb_container .service-group-card.active .group-toggle-icon {
    transform: rotate(180deg);
}

.wcrb_container .service-group-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.wcrb_container .service-group-card.active .service-group-content {
    max-height: 1000px;
}

/* Services Grid */
.wcrb_container .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    padding: 16px;
}

/* Ungrouped mode lists every service at once, which can run to dozens of
   cards. Keep that list in its own scroll area so the step's navigation and
   the booking summary stay within reach. */
.wcrb_container .services-grid-ungrouped {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    padding: 16px;
    max-height: 62vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--light-bg);
}

.wcrb_container .service-card {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.wcrb_container .service-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.wcrb_container .service-selector {
    display: flex;
    height: 100%;
}

.wcrb_container .service-checkbox {
    display: none;
}

/* The checkbox itself is hidden: the whole label is the hit area and the
   selected state is shown on the card (class added by the booking script). */
.wcrb_container .service-checkbox:checked + .service-label {
    background: var(--wcrb-brand-soft, rgba(59, 130, 246, 0.06));
    border-color: var(--primary-color);
}

.wcrb_container .service-label {
    flex: 1;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-color);
    transition: border-color 0.2s ease, background 0.2s ease;
    margin: 0;
    height: 100%;
    min-height: 96px;
    box-sizing: border-box;
}

.wcrb_container .service-label:hover {
    border-color: var(--primary-color);
    background: var(--light-bg);
}

.wcrb_container .service-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-dark);
    margin-bottom: 6px;
    /* Prices line up at the bottom of every card in a row. */
    flex: 1 1 auto;
}

.wcrb_container .service-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 6px;
}

.wcrb_container .service-time {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--text-light);
}

.wcrb_container .service-time svg {
    width: 13px;
    height: 13px;
}

.wcrb_container .service-price {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
}

/* "Included" marker for services rendered without a price. */
.wcrb_container .service-label::after {
    content: 'Included';
    align-self: flex-start;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--light-bg-alt);
    color: var(--text-light);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.wcrb_container .service-label:has(.service-price)::after {
    content: none;
}

/* Ticked state: brand border plus a tick in the top-right corner. */
.wcrb_container .service-card:has(.service-checkbox:checked) {
    position: relative;
    border-color: var(--primary-color);
}

.wcrb_container .service-card:has(.service-checkbox:checked)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 26px;
    height: 26px;
    border-bottom-left-radius: var(--radius-md);
    background: var(--primary-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px no-repeat;
    pointer-events: none;
}

/* Selected Service Styling */
.wcrb_container .service-selected {
    background: var(--wcrb-brand-soft, rgba(59, 130, 246, 0.1)) !important;
    border-color: var(--primary-color) !important;
}

/* Service Carousel */
.wcrb_container .service-carousel-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: var(--light-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    animation: fadeIn 0.3s ease;
}

.wcrb_container .service-carousel-nav button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    color: var(--text-medium);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wcrb_container .service-carousel-nav button:hover {
    background: var(--light-bg);
    border-color: var(--text-light);
}

.wcrb_container .carousel-counter {
    font-weight: 600;
    color: var(--text-medium);
}

/* Device Services Container */
.wcrb_container .device-services-container {
    transition: opacity 0.3s ease;
}

.wcrb_container .device-services-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px;
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wcrb_container .device-services-toggle:hover {
    background: var(--light-bg-alt);
}

.wcrb_container .device-services-toggle h4 {
    margin: 0;
    font-size: 18px;
    color: var(--text-dark);
}

.wcrb_container .device-services-content {
    margin-top: 0;
    padding: 12px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    border-top: none;
}
/* ==========================================================================
   STORE SELECTION
   ========================================================================== */
.wcrb_container .select_store_wrapper {
    margin: 30 0 30px 0;
    animation: fadeIn 0.3s ease;
}

.wcrb_container .select_store_wrapper h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
    position: relative;
}

.wcrb_container .select_store_wrapper h3:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--primary-color);
}

/* Store List Styling */
.wcrb_container .manufacture_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.wcrb_container .manufacture_list li {
    margin: 0;
    padding: 0;
    transition: all 0.3s ease;
}

.wcrb_container .manufacture_list li label {
    display: block;
    cursor: pointer;
    padding: 0;
    margin: 0;
    position: relative;
}

/* Store Card - Similar to appointment-option-card */
.wcrb_container .store_selector_radio_output li label {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.wcrb_container .store_selector_radio_output li label:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* Selected state */
.wcrb_container .store_selector_radio_output li label:has(input[type="radio"]:checked) {
    border-color: var(--primary-color);
    background: var(--wcrb-brand-soft, rgba(59, 130, 246, 0.05));
    box-shadow: 0 0 0 3px var(--wcrb-brand-soft, rgba(59, 130, 246, 0.1));
}

/* Radio button styling - matches appointment option selector */
.wcrb_container .radioHolder {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.wcrb_container .radioHolder input[type="radio"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.wcrb_container .radioHolder input[type="radio"] + .radioHolder {
    display: none;
}

/* Custom radio indicator */
.wcrb_container .radioHolder:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    background: white;
    transition: all 0.2s ease;
    pointer-events: none;
}

.wcrb_container .radioHolder:hover:before {
    border-color: var(--primary-light);
}

.wcrb_container input[type="radio"]:checked + .radioHolder:before,
.wcrb_container .radioHolder:has(input[type="radio"]:checked):before {
    border-color: var(--primary-color);
    background: var(--primary-color);
    box-shadow: 0 0 0 3px var(--wcrb-brand-soft, rgba(59, 130, 246, 0.1));
}

.wcrb_container input[type="radio"]:checked + .radioHolder:after,
.wcrb_container .radioHolder:has(input[type="radio"]:checked):after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    transform: scale(0.8);
    animation: scaleIn 0.2s ease;
}

@keyframes scaleIn {
    from { transform: scale(0); }
    to { transform: scale(0.8); }
}

/* Store content styling */
.wcrb_container .theServiceTitle {
    flex: 1;
    display: block;
    line-height: 1.5;
}

.wcrb_container .theServiceTitle strong {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    display: block;
    margin-bottom: 8px;
    transition: color 0.2s ease;
}

.wcrb_container li label:hover .theServiceTitle strong {
    color: var(--primary-color);
}

.wcrb_container input[type="radio"]:checked ~ .theServiceTitle strong,
.wcrb_container li:has(input[type="radio"]:checked) .theServiceTitle strong {
    color: var(--primary-color);
}

/* Store address */
.wcrb_container .theServiceTitle br + br {
    display: none;
}

.wcrb_container .theServiceTitle br:first-of-type {
    display: none;
}

.wcrb_container .theServiceTitle {
    color: var(--text-medium);
    font-size: 14px;
}

/* Address line */
.wcrb_container .theServiceTitle br:first-of-type + br {
    display: inline;
}

.wcrb_container .theServiceTitle br:first-of-type + br + span,
.wcrb_container .theServiceTitle br:first-of-type + br + strong,
.wcrb_container .theServiceTitle br:first-of-type + br + em {
    display: none;
}

/* Format store information into clean sections */
.wcrb_container .theServiceTitle {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wcrb_container .theServiceTitle strong + br {
    display: none;
}

.wcrb_container .theServiceTitle strong {
    margin-bottom: 0;
}

/* Address styling */
.wcrb_container .theServiceTitle br:first-of-type + br {
    display: block;
    content: '';
    margin: 0;
}

.wcrb_container .theServiceTitle br:first-of-type + br + * {
    display: inline-block;
}

.wcrb_container .theServiceTitle br:first-of-type {
    display: none;
}

/* Better formatting for store details */
.wcrb_container .theServiceTitle {
    position: relative;
}

.wcrb_container .theServiceTitle strong + br + * {
    display: block;
    color: var(--text-light);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border-color);
}

/* Opening hours section */
.wcrb_container .theServiceTitle br + br + br + br + *,
.wcrb_container .theServiceTitle br + br + br + br + br + *,
.wcrb_container .theServiceTitle br + br + br + br + br + br + * {
    display: block;
    font-size: 13px;
    margin-top: 4px;
}

/* Hours labels */
.wcrb_container .theServiceTitle {
    font-size: 13px;
    line-height: 1.6;
}

/* Manager info */
.wcrb_container .theServiceTitle br + br + br + br + br + br + br + *,
.wcrb_container .theServiceTitle br + br + br + br + br + br + br + br + * {
    display: block;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-weight: 500;
    color: var(--text-dark);
    font-size: 13px;
}

.wcrb_container .theServiceTitle br + br + br + br + br + br + br + br + br + * {
    display: none;
}

/* Format "Manager:" text */
.wcrb_container .theServiceTitle:contains("Manager") {
    font-weight: 600;
    color: var(--text-dark);
}

/* Store hours styling - similar to service-time component */
.wcrb_container .theServiceTitle br:first-of-type + br + *,
.wcrb_container .theServiceTitle br:first-of-type + br + * + br + *,
.wcrb_container .theServiceTitle br:first-of-type + br + * + br + * + br + *,
.wcrb_container .theServiceTitle br:first-of-type + br + * + br + * + br + * + br + *,
.wcrb_container .theServiceTitle br:first-of-type + br + * + br + * + br + * + br + * + br + *,
.wcrb_container .theServiceTitle br:first-of-type + br + * + br + * + br + * + br + * + br + * + br + * {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--text-medium);
}

.wcrb_container .theServiceTitle:before {
    display: none;
}

/* Add icons to store hours - using pseudo-elements */
.wcrb_container .theServiceTitle br:first-of-type + br + *:before,
.wcrb_container .theServiceTitle br:first-of-type + br + * + br + *:before,
.wcrb_container .theServiceTitle br:first-of-type + br + * + br + * + br + *:before,
.wcrb_container .theServiceTitle br:first-of-type + br + * + br + * + br + * + br + *:before,
.wcrb_container .theServiceTitle br:first-of-type + br + * + br + * + br + * + br + * + br + *:before,
.wcrb_container .theServiceTitle br:first-of-type + br + * + br + * + br + * + br + * + br + * + br + *:before {
    content: '🕒';
    font-size: 12px;
    opacity: 0.7;
}

.wcrb_container .theServiceTitle:contains("Sunday: Off"):before {
    content: '🚫';
}

/* Manager info with icon */
.wcrb_container .theServiceTitle br + br + br + br + br + br + br + *,
.wcrb_container .theServiceTitle br + br + br + br + br + br + br + br + * {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wcrb_container .theServiceTitle br + br + br + br + br + br + br + *:before,
.wcrb_container .theServiceTitle br + br + br + br + br + br + br + br + *:before {
    content: '👤';
    font-size: 13px;
    opacity: 0.7;
}

/* Compact view for mobile */
@media (max-width: 768px) {
    .wcrb_container .manufacture_list {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .wcrb_container .store_selector_radio_output li label {
        padding: 15px;
    }
    
    .wcrb_container .theServiceTitle strong {
        font-size: 16px;
    }
}

/* Loading/Skeleton state */
.wcrb_container .store_selector_radio_output.loading li label {
    pointer-events: none;
    opacity: 0.7;
    background: var(--light-bg);
    border-color: var(--border-color);
}

.wcrb_container .store_selector_radio_output.loading .theServiceTitle {
    color: transparent;
    position: relative;
}

.wcrb_container .store_selector_radio_output.loading .theServiceTitle:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Empty state */
.wcrb_container .manufacture_list:empty:after {
    content: 'No stores available';
    display: block;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-light);
    background: var(--light-bg);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    font-size: 14px;
}

/* Store count badge - similar to service-group-count */
.wcrb_container .select_store_wrapper h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wcrb_container .select_store_wrapper h3:after {
    display: none;
}

.wcrb_container .select_store_wrapper h3 .store-count-badge {
    font-size: 14px;
    font-weight: normal;
    color: var(--text-light);
    background: var(--light-bg);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}

/* Add store count badge via JavaScript or manually in HTML */
.wcrb_container .select_store_wrapper h3 span.store-count {
    font-size: 14px;
    font-weight: normal;
    color: var(--text-light);
    background: var(--light-bg-alt);
    padding: 4px 12px;
    border-radius: 20px;
    margin-left: 10px;
}
/* ==========================================================================
   APPOINTMENT OPTIONS
   ========================================================================== */
.wcrb_container .appointment-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.wcrb_container .appointment-option-card {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.wcrb_container .appointment-option-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.wcrb_container .appointment-option-card.selected {
    border-color: var(--primary-color);
    background: var(--wcrb-brand-soft, rgba(59, 130, 246, 0.05));
}

.wcrb_container .appointment-option-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.wcrb_container .appointment-option-icon {
    width: 48px;
    height: 48px;
    background: var(--light-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.wcrb_container .appointment-option-icon svg {
    width: 24px;
    height: 24px;
}

.wcrb_container .appointment-option-selector {
    position: relative;
}

.wcrb_container .appointment-option-selector input[type="radio"] {
    display: none;
}

.wcrb_container .appointment-option-selector label {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    display: block;
    position: relative;
    transition: all 0.3s ease;
}

.wcrb_container .appointment-option-selector input[type="radio"]:checked + label {
    border-color: var(--primary-color);
    background: var(--primary-color);
}

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

.wcrb_container .appointment-option-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.wcrb_container .appointment-option-description {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.5;
}

.wcrb_container .appointment-option-extra-fields {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    animation: slideDown 0.3s ease;
}

.wcrb_container .appointment-extra-field {
    margin-bottom: 15px;
}

.wcrb_container .appointment-extra-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--text-dark);
    font-size: 14px;
}

.wcrb_container .appointment-extra-field input,
.wcrb_container .appointment-extra-field textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 14px;
    transition: border 0.3s ease;
}

.wcrb_container .appointment-extra-field input:focus,
.wcrb_container .appointment-extra-field textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--wcrb-brand-soft, rgba(59, 130, 246, 0.1));
}

.wcrb_container .appointment-extra-field textarea {
    min-height: 80px;
    resize: vertical;
}

.wcrb_container .appointment-date-notice {
    margin-top: 15px;
    padding: 12px;
    background: var(--light-bg);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-medium);
    border-left: 3px solid var(--primary-color);
}

.wcrb_container .appointment-date-notice.hidden {
    display: none;
}

/* ==========================================================================
   DATE & TIME SELECTION
   ========================================================================== */
.wcrb_container .datetime-selection-content {
    max-width: 680px;
    margin: 0 auto;
}

.wcrb_container .date-selection,
.wcrb_container .time-selection {
    margin-bottom: 40px;
}

.wcrb_container .selection-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}

.wcrb_container .selection-header .line {
    flex: 1;
    height: 1px;
    background: var(--border-color);
    margin-right: 15px;
}

.wcrb_container .selection-header .the-text {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-dark);
    margin-right: 15px;
    white-space: nowrap;
}

.wcrb_container .selection-header .the-text b {
    color: var(--primary-color);
}

/* Slider Controls */
.wcrb_container .slider-controls {
    display: flex;
    gap: 10px;
}

.wcrb_container .slider-controls button {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 100%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding:3px;
}

.wcrb_container .slider-controls button:hover {
    background: var(--light-bg);
    border-color: var(--text-light);
}

.wcrb_container .slider-controls button.disabled,
.wcrb_container .slider-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Date Slider */
.wcrb_container .date-slider-container {
    overflow: hidden;
    padding: 10px 0;
}

.date-slider,
.time-slots {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px 15px;
    padding: 5px 0;
}

.date-slider::-webkit-scrollbar,
.time-slots::-webkit-scrollbar {
    display: none;
}

.wcrb_container .date-slide {
    min-width: 60px;
    flex-shrink: 0;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.wcrb_container .date-slide:hover {
    transform: translateY(-2px);
}

.wcrb_container .dateOfWeek {
    padding: 15px 5px;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    background: white;
    transition: all 0.3s ease;
}

.wcrb_container .date-slide:hover .dateOfWeek {
    border-color: var(--primary-light);
}

.wcrb_container .date-slide.selected .dateOfWeek {
    border-color: var(--primary-color);
    background: var(--wcrb-brand-soft, rgba(59, 130, 246, 0.05));
}

.wcrb_container .date-slide.is_day_off .dateOfWeek {
    opacity: 0.6;
    background: var(--light-bg-alt);
}

.wcrb_container .dayOfWeek {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.wcrb_container .date-slide.selected .dayOfWeek {
    color: var(--primary-color);
}

.wcrb_container .dateOfWeek .num {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    display: block;
}

.wcrb_container .date-slide.selected .dateOfWeek .num {
    color: var(--primary-color);
}

/* Time Slots */
.wcrb_container .time-slots-container {
    padding: 10px 0;
}

.wcrb_container .time-box {
    min-width: 140px;
    flex-shrink: 0;
    text-align: center;
    padding: 15px 25px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-dark);
    transition: all 0.3s ease;
}

.wcrb_container .time-box:hover {
    border-color: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.wcrb_container .time-box.selected {
    border-color: var(--primary-color);
    background: var(--wcrb-brand-soft, rgba(59, 130, 246, 0.05));
    color: var(--primary-color);
    font-weight: 600;
}

/* ==========================================================================
   CUSTOMER DETAILS FORM
   ========================================================================== */
.wcrb_container .customer-details-form {
    max-width: 100%;
    margin: 0 auto;
}

.wcrb_container .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;
}
.wcrb_container .form-field,
.wcrb_container .form-field label,
.wcrb_container .form-field input,
.wcrb_container .form-field textarea {
    margin-bottom: 0px;
}

.wcrb_container .form-field.full-width {
    grid-column: 1 / -1;
}

.wcrb_container .form-field label {
    display: block;
    font-weight: 600;
    color: var(--text-dark);
    font-size: 14px;
}
.iti.iti--allow-dropdown.iti--show-flags.iti--inline-dropdown {
    width:100%;
}
.wcrb_container .form-field label .required {
    color: var(--danger-color);
}
.wcrbmargin-bt {
    margin-bottom:1rem;
}
.other-service-content {
    padding: 15px;
}
.other-service-content .custom-checkbox label,
.other-service-content .custom-checkbox {
    font-weight:600;
    margin-left:0px;
    margin-right:0px;
}

/* "Describe your own service" (grouped accordion card and ungrouped card) */
.wcrb_container .services-accordion .other-service-card {
    border-style: dashed;
}
.wcrb_container .services-accordion .other-service-card .service-group-header {
    background: #fff;
}
.wcrb_container .services-accordion .other-service-card.active .service-group-header {
    background: var(--light-bg);
}

.wcrb_container .other-service-content .custom-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.wcrb_container .other-service-content .custom-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
}
.wcrb_container .other-service-content .custom-checkbox label {
    cursor: pointer;
    font-size: 14px;
    color: var(--text-dark);
}
.wcrb_container .other-service-content .other-service-description {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 14px;
    background: #fff;
    transition: border-color 0.2s ease;
}
.wcrb_container .other-service-content .other-service-description:focus {
    outline: none;
    border-color: var(--primary-color);
}

.other-service-card-ungrouped {
    cursor: pointer;
    padding: 16px;
    border-radius: var(--radius-md);
    border: 2px dashed var(--border-color);
    background: #fff;
    transition: border-color 0.2s ease;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
}
.other-service-card-ungrouped:hover {
    border-color: var(--primary-color);
}
.other-service-card-ungrouped h4 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
}
.other-service-card-ungrouped .other-service-content {
    padding:0px;
}

.wcrb_container .form-field input,
.wcrb_container .form-field textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 14px;
    transition: all 0.3s ease;
}
.repairbuddy-captcha-field {
    margin-top: 10px;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    display: inline-block;
    margin-bottom:15px;
}
.wcrb_container .form-field input:focus,
.wcrb_container .form-field textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--wcrb-brand-soft, rgba(59, 130, 246, 0.1));
}

.wcrb_container .form-field textarea {
    min-height: 100px;
    resize: vertical;
}

.wcrb_container .jobAttachments {
    background-color: #FFF;
    border: 1px solid #ededed;
    padding: 15px;
    margin: 15px 0;
    border-radius: 10px;
}

.wcrb_container .jobAttachments img {
    width: 40px;
    height: auto;
    margin: 0 15px;
}
.submit_booking_btn.bookingaction {
   margin-top:15px !important;
}

/*
 * The submit button also carries Foundation's `.button primary` classes, and
 * foundation.min.css paints those with a fixed blue (#1779ba) using a higher
 * specificity. These rules keep the final Submit Booking button on the dashboard
 * palette like every other primary button in the form.
 */
.wcrb_container button.submit_booking_btn,
.wcrb_container button.submit_booking_btn.button.primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.875rem 1.275rem;
    margin-top: 15px;
    margin-bottom: 0;
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-md);
    background-color: var(--primary-color);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
}

.wcrb_container button.submit_booking_btn:hover,
.wcrb_container button.submit_booking_btn:focus,
.wcrb_container button.submit_booking_btn:active,
.wcrb_container button.submit_booking_btn.button.primary:hover,
.wcrb_container button.submit_booking_btn.button.primary:focus {
    background-color: var(--primary-color);
    color: #fff;
    filter: brightness(.92);
    box-shadow: var(--shadow);
}

.wcrb_container button.submit_booking_btn[disabled],
.wcrb_container button.submit_booking_btn.is-loading {
    opacity: .7;
    cursor: progress;
    filter: none;
}

/* ==========================================================================
   BOOKING SUMMARY
   Only the classes the summary actually renders are styled here:
   .booking-summary-section, .summary-header/h3, .toggle-summary-btn,
   .summary-empty, .summary-items, .device-summary-group + .device-group-heading,
   .service-summary-list + .service-summary-item, .device-summary-item,
   .appointment-summary-item + .appointment-summary-heading/.appointment-summary-name,
   .datetime-summary-item + .datetime-summary-heading/.datetime-summary-details,
   .summary-footer, .summary-actions, .summary-total (+ .total-amount,.summary-total-note).
   ========================================================================== */
.wcrb_container .booking-summary-section {
    width: 320px;
    flex-shrink: 0;
    align-self: flex-start;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Header */
.wcrb_container .summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--light-bg);
    border-bottom: 1px solid var(--border-color);
}

/* The theme's `.blog-text .post-content h3` rule loads after this file and has
   the same specificity, so it wins ties. Bump the summary heading past it (and
   pin the other properties it sets: weight, line-height, clear, margin, border). */
.wcrb_container .booking-summary-section .summary-header h3,
.wcrb_container .booking-summary-section .summary-header h3 span,
.wcrb_container .booking-summary-section .summary-header h3 a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    clear: none;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--text-dark);
}

.wcrb_container .booking-summary-section .summary-header h3 svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--primary-color);
}

.wcrb_container .toggle-summary-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.wcrb_container .toggle-summary-btn:hover {
    background: #fff;
    color: var(--text-dark);
}

.wcrb_container .toggle-summary-btn svg {
    transition: transform 0.25s ease;
}

.wcrb_container .toggle-summary-btn svg.rotate-180 {
    transform: rotate(180deg);
}

/* Body - scrolls on its own so a long booking never pushes the total away. */
.wcrb_container .summary-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.wcrb_container .summary-items {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wcrb_container .summary-empty {
    padding: 32px 18px;
    text-align: center;
    font-size: 13px;
    color: var(--text-light);
}

/* Sections inside the summary */
.wcrb_container .device-summary-group,
.wcrb_container .appointment-summary-item,
.wcrb_container .datetime-summary-item {
    margin: 0;
    padding: 10px 12px;
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.wcrb_container .device-group-heading,
.wcrb_container .appointment-summary-heading,
.wcrb_container .datetime-summary-heading {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--text-light);
    /* A small brand accent before each section title. */
    padding-left: 10px;
    border-left: 3px solid var(--primary-color);
}

.wcrb_container .service-summary-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wcrb_container .service-summary-item {
    padding: 6px 0 6px 14px;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-medium);
    /* Single-line overflow instead of a box around every row. */
    position: relative;
}

.wcrb_container .service-summary-item::before {
    content: '';
    position: absolute;
    top: 13px;
    left: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary-color);
}

/* Device rows (built by updateBookingSummary) */
.wcrb_container .device-summary-item {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--light-bg);
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-medium);
}

.wcrb_container .device-label-text {
    display: block;
    font-weight: 500;
    color: var(--text-dark);
}

.wcrb_container .appointment-summary-name,
.wcrb_container .datetime-summary-details {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-dark);
}

.wcrb_container .datetime-summary-details > div + div {
    margin-top: 2px;
    color: var(--text-medium);
}

/* Footer: estimate + step actions */
.wcrb_container .summary-footer {
    flex-shrink: 0;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--border-color);
    background: #fff;
}

.wcrb_container .summary-actions {
    width: 100%;
    margin-top: 12px;
}

.wcrb_container .summary-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-medium);
}

.wcrb_container .summary-total .total-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    font-variant-numeric: tabular-nums;
}

/* A total that is not a real estimate yet ("Not calculated yet",
   "Price on request") is shown as a label, not as a price. */
.wcrb_container .summary-total .total-amount.is-pending {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-medium);
}

.wcrb_container .summary-total-note {
    flex-basis: 100%;
    margin: 6px 0 0;
    padding: 6px 10px;
    border-left: 3px solid var(--warning-color);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: rgba(245, 158, 11, 0.08);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--text-medium);
}

/* The desktop layout uses the card's own navigation; the phone layout pulls
   those buttons into a fixed bottom bar (see RESPONSIVE DESIGN). */
.wcrb_container .summary-footer .bookingsummarynavigation {
    display: flex;
    gap: 10px;
}

.wcrb_container .summary-footer .bookingsummarynavigation .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.75rem 0.5rem;
    font-size: 0.9rem;
    line-height: 1.2;
}

/* ==========================================================================
   BUTTONS & NAVIGATION
   ========================================================================== */
.wcrb_container .btn {
    padding: 0.875rem 1.275rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.wcrb_container .btn-secondary {
    background: white;
    color: var(--text-dark);
    border: 2px solid var(--border-color);
}

.wcrb_container .btn-secondary:hover {
    border-color: var(--text-light);
}

.wcrb_container .btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.wcrb_container .btn-primary:hover,
.wcrb_container .btn-primary:focus-visible,
.wcrb_container .btn-primary:active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    /* Same shade treatment as the dashboard buttons. */
    filter: brightness(.92);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

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

.wcrb_container .btn-disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Navigation Sections */
.wcrb_container .services-navigation,
.wcrb_container .appointment-navigation,
.wcrb_container .details-navigation,
.wcrb_container .confirmation-actions,
.wcrb_container .datetime-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 0px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

/* Give the step navigation buttons a comfortable tap target. */
.wcrb_container .services-navigation .btn,
.wcrb_container .appointment-navigation .btn,
.wcrb_container .datetime-navigation .btn,
.wcrb_container .confirmation-actions .btn {
    flex: 0 1 auto;
    min-width: 150px;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 1024px) {
    .wcrb_container .services-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

/* Between the phone and desktop layouts the summary card (320px) leaves the
   main column too narrow for the service/device grids. Stack the summary
   underneath sooner and keep it after the step content, so the action bar
   sits right below the choices instead of past a long summary card. */
@media (max-width: 900px) {
    .wcrb_container .rb-booking-main-content-wrapper.bookingsummaryincluded {
        flex-direction: column;
        gap: 20px;
    }

    .wcrb_container .booking-summary-section {
        order: 2;
        width: 100%;
        /* The card is stacked below the step content here: it should grow with
           its content instead of sticking to the viewport. */
        position: static;
        max-height: none;
    }
}

@media (max-width: 768px) {
    .wcrb_container .repair-buddy-container {
        padding: 1rem;
    }

    .wcrb_container .rb-booking-main-content-wrapper.bookingsummaryincluded {
        flex-direction: column;
        gap: 20px;
        /* .bookingsummaryincluded sets margin-top: 20px, which overrides the
           15px above at this width for the device flow. */
        margin-top: 15px;
    }
    
    .wcrb_container .booking-summary-section {
        width: 100%;
    }

    .wcrb_container .rb-content-area {
        padding: 1.5rem;
    }

    .wcrb_container .categories-grid,
    .wcrb_container .devices-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* Keep the two-up cards compact on small screens. */
    .wcrb_container .category-card {
        padding: 10px 8px 12px;
    }

    .wcrb_container .category-icon {
        max-width: 92px;
        padding: 10px;
        margin-bottom: 8px;
    }

    .wcrb_container .services-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
    }

    .wcrb_container .service-group-header {
        padding: 14px;
    }

    .wcrb_container .service-group-title {
        font-size: 15px;
    }

    .wcrb_container .service-label {
        padding: 12px 14px;
        min-height: 0;
    }

    .wcrb_container .service-title {
        font-size: 15px;
    }

    .wcrb_container .service-price {
        font-size: 16px;
    }

    .wcrb_container .service-carousel-nav {
        flex-direction: column;
        gap: 10px;
    }

    .wcrb_container .service-carousel-nav button {
        width: 100%;
        justify-content: center;
    }

    .wcrb_container .device-services-toggle {
        padding: 12px;
    }

    .wcrb_container .device-services-toggle h4 {
        font-size: 16px;
    }

    /* Appointment Options Responsive */
    .wcrb_container .appointment-options-grid {
        grid-template-columns: 1fr;
    }

    /*
     * Mobile navigation
     * ----------------------------------------------------------------
     * On phones the action buttons live at the end of a long section (service
     * list, appointment options, time slots, details form) and were easy to
     * miss. The current step's buttons are lifted out of the summary card and
     * pinned to the bottom of the screen as a compact action bar with a
     * fading backdrop, so "Back" is always one thumb-tap away.
     */
    .wcrb_container .summary-footer .bookingsummarynavigation {
        position: fixed;
        z-index: 9993;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) 12px;
        border-top: 1px solid var(--border-color);
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.14);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .wcrb_container .summary-footer .bookingsummarynavigation::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 14px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92));
        pointer-events: none;
    }

    .wcrb_container .summary-footer .bookingsummarynavigation:not([style*="none"]) {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        gap: 10px;
    }

    .wcrb_container .summary-footer .bookingsummarynavigation .btn {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        min-height: 50px;
        padding: 0.75rem 0.75rem;
        font-size: 0.95rem;
        line-height: 1.2;
        white-space: normal;
        text-align: center;
    }

    /* The forward action is the primary one on a phone - make it the bigger target. */
    .wcrb_container .summary-footer .bookingsummarynavigation .btn-primary {
        flex: 1.6 1 0;
    }

    /* Leave room for the action bar so it never hides the bottom of the page. */
    .wcrb_container .rb-booking-main-content-wrapper.bookingsummaryincluded {
        padding-bottom: 96px;
    }

    /* The navigation moved to the fixed bar, so the card footer stays compact
       and keeps the edit affordances (total, details toggle) visible. */
    .wcrb_container .summary-footer .summary-actions .bookingsummarynavigation {
        display: none;
    }

    .wcrb_container .summary-footer {
        padding-bottom: 12px;
    }

    /* Date & Time Responsive */
    .wcrb_container .date-slider {
        gap: 10px;
    }
    
    .wcrb_container .date-slide {
        width: 55px;
    }
    
    .wcrb_container .time-slots {
        gap: 10px;
    }
    
    .wcrb_container .time-box {
        padding: 12px 15px;
        min-width: 120px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .rb-progress {
        display:none !important;
    }
    .wcrb_container .categories-grid,
    .wcrb_container .devices-grid {
        grid-template-columns: 1fr;
    }

    .wcrb_container .service-group-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* One row on phones: title and chevron win the space; the count is the
       least important piece, so it goes first on the narrowest screens. */
    .wcrb_container .service-group-title {
        flex: 1 1 auto;
        min-width: 0;
        order: 1;
    }

    .wcrb_container .service-group-count {
        order: 2;
    }

    /* Too narrow for title + count + chevron: the chevron and title matter
       more than the count, so hide the count here. */
    .wcrb_container .service-group-card:not(.active) .service-group-count {
        display: none;
    }

    .wcrb_container .group-toggle-icon {
        order: 3;
    }

    .wcrb_container .service-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .wcrb_container .btn {
        width: 100%;
    }

    /* Mobile action bar - smaller screens keep both actions on one row. */
    .wcrb_container .summary-footer .bookingsummarynavigation {
        padding-left: 8px;
        padding-right: 8px;
        gap: 8px;
    }

    .wcrb_container .summary-footer .bookingsummarynavigation:not([style*="none"]) .btn {
        width: auto;
        min-height: 48px;
        padding: 0.625rem 0.5rem;
        font-size: 0.9rem;
    }

    .wcrb_container .rb-booking-main-content-wrapper.bookingsummaryincluded {
        padding-bottom: 90px;
    }

    /* Date & Time Small Screen */
    .wcrb_container .selection-header {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .wcrb_container .selection-header .line {
        display: none;
    }
    
    .wcrb_container .selection-header .the-text {
        flex: 1;
    }
    
    .wcrb_container .date-slide {
        width: 50px;
    }
    
    .wcrb_container .time-slots {
        grid-template-columns: 1fr;
    }
    
    .wcrb_container .time-box {
        width: 100%;
    }
}