/**
 * ROVA Appointment Booking - CSS Styles
 * 
 * Stiluri pentru sistemul de booking.
 */

/* ==========================================================================
   VARIABILE
   ========================================================================== */

:root {
    /* Culori ROVA Brand (Match Mobile App - Flutter Theme) */
    --rova-primary: #921D4C;           /* Burgundy wine - butoane, accente */
    --rova-primary-hover: #7A1840;     /* Darker burgundy - hover states */
    --rova-secondary: #4B0F27;         /* Dark burgundy - text principal */
    --rova-tertiary: #F4EDF0;          /* Soft pink - icon circles, backgrounds */
    --rova-accent1: #FFF7F9;           /* Very light pink - cards, info boxes */
    --rova-accent2: #FAFAFA;           /* Almost white - container backgrounds */
    --rova-alternate: #E0E3E7;         /* Light gray - borders, separators */
    --rova-primary-text: #4B0F27;      /* Dark text - titluri, labels */
    --rova-secondary-text: #57636C;    /* Gray text - subtitles, helper text */
    --rova-primary-bg: #FFFFFF;        /* White - cards, main backgrounds */
    --rova-secondary-bg: #F2F2F2;      /* Light gray - shadows, disabled states */
    --rova-success: #2FC289;           /* Green - success states */
    --rova-warning: #F9CF58;           /* Yellow - warnings */
    --rova-error: #FF5963;             /* Red - errors */

    /* Legacy aliases (pentru backward compatibility) */
    --rova-text: var(--rova-primary-text);
    --rova-text-muted: var(--rova-secondary-text);
    --rova-text-light: #999;
    --rova-border: var(--rova-alternate);
    --rova-bg: var(--rova-primary-bg);
    --rova-bg-light: var(--rova-tertiary);
    --rova-bg-accent: var(--rova-accent2);
    --rova-danger: var(--rova-error);
    --rova-primary-light: rgba(146, 29, 76, 0.15);

    /* Typography (Google Fonts) */
    --rova-font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --rova-font-body: 'Readex Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --rova-font: var(--rova-font-display); /* Default */

    /* Font Sizes (Match Mobile) */
    --rova-text-xs: 12px;   /* Helper text, descrieri mici */
    --rova-text-sm: 13px;   /* Labels, job titles */
    --rova-text-base: 14px; /* Body text, nume servicii */
    --rova-text-md: 15px;   /* Modal titles */
    --rova-text-lg: 16px;   /* Specialist name, preț total */
    --rova-text-xl: 24px;   /* Success screen title */

    /* Font Weights */
    --rova-weight-normal: 400;
    --rova-weight-medium: 500;
    --rova-weight-semibold: 600;
    --rova-weight-bold: 700;

    /* Spacing Scale (Match Mobile) */
    --rova-space-1: 4px;
    --rova-space-2: 8px;
    --rova-space-3: 12px;
    --rova-space-4: 16px;
    --rova-space-5: 20px;
    --rova-space-6: 24px;
    --rova-space-8: 32px;

    /* Border Radius (Match Mobile) */
    --rova-radius-sm: 8px;    /* Butoane mici */
    --rova-radius-md: 12px;   /* Cards, servicii */
    --rova-radius-lg: 14px;   /* Containers mari */
    --rova-radius-xl: 30px;   /* Pills, capsules, dropdowns */
    --rova-radius-full: 9999px; /* Circles, avatars */
    --rova-radius: var(--rova-radius-sm); /* Default (legacy) */
    --rova-radius-sm: 4px; /* Legacy override */

    /* Shadows (Match Mobile) */
    --rova-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
    --rova-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.05);
    --rova-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12);
    --rova-shadow: var(--rova-shadow-md); /* Default (legacy) */

    /* Transitions */
    --rova-transition: 0.2s ease;
    --rova-transition-smooth: 450ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ==========================================================================
   MODAL
   ========================================================================== */

.rova-booking-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--rova-transition), visibility var(--rova-transition);
}

.rova-booking-modal--open {
    opacity: 1;
    visibility: visible;
}

.rova-booking-modal__container {
    width: 100%;
    max-width: 480px; /* Match mobile width */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--rova-accent2); /* #FAFAFA - Match mobile */
    border-radius: var(--rova-radius-lg); /* 14px */
    box-shadow: var(--rova-shadow-lg);
    font-family: var(--rova-font-display); /* Inter */
    transform: scale(0.95) translateY(20px);
    transition: transform var(--rova-transition);
}

.rova-booking-modal--open .rova-booking-modal__container {
    transform: scale(1) translateY(0);
}

.rova-booking-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--rova-space-4) var(--rova-space-5); /* 16px 20px */
}

.rova-booking-modal__title {
    margin: 0;
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-md); /* 15px - Match mobile */
    font-weight: var(--rova-weight-medium); /* 500 */
    color: var(--rova-primary-text); /* #4B0F27 */
}

/* Back button (Match mobile - 40x40px circular) */
.rova-booking-modal__back,
.rova-booking-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Match mobile */
    height: 40px; /* Match mobile */
    padding: 0;
    border: 1px solid var(--rova-alternate); /* #E0E3E7 */
    background: var(--rova-secondary-bg); /* #F2F2F2 */
    color: var(--rova-secondary-text); /* #57636C */
    cursor: pointer;
    border-radius: var(--rova-radius-full); /* Circular */
    transition: all var(--rova-transition);
}

.rova-booking-modal__back:hover,
.rova-booking-modal__close:hover {
    background: var(--rova-alternate);
    transform: scale(1.05);
}

.rova-booking-modal__back svg,
.rova-booking-modal__close svg {
    width: 20px;
    height: 20px;
}

.rova-booking-modal__progress {
    display: none; /* Ascuns complet */
}

.rova-booking-modal__content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.rova-booking-modal__loading {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.rova-booking-modal__loading--active {
    display: flex;
}

.rova-booking-modal__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--rova-border);
    border-top-color: var(--rova-primary);
    border-radius: 50%;
    animation: rova-spin 0.8s linear infinite;
}

@keyframes rova-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   STEP 0: SERVICE SELECTION
   ========================================================================== */

.rova-step-service__subtitle {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--rova-text-muted);
}

.rova-step-service__groups {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rova-step-service__group-title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--rova-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rova-step-service__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rova-step-service__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--rova-text-muted);
}

.rova-step-service__empty svg {
    margin-bottom: 16px;
    opacity: 0.5;
}

.rova-step-service__empty h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
}

.rova-step-service__empty p {
    margin: 0;
    font-size: 14px;
}

/* Footer cu buton logout */
.rova-step-service__footer {
    padding-top: var(--rova-space-6); /* 24px */
    margin-top: var(--rova-space-6); /* 24px */
}

.rova-step-service__logout-btn {
    width: 75%; /* Match mobile width pattern */
    height: 56px; /* Match mobile height pattern */
    margin: 0 auto; /* Centrat */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rova-space-2); /* 8px */
    border: 1.5px solid var(--rova-alternate); /* #E0E3E7 */
    border-radius: var(--rova-radius-md); /* 12px */
    background: var(--rova-secondary-bg); /* #F2F2F2 */
    color: var(--rova-secondary-text); /* #57636C */
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-base); /* 14px */
    font-weight: var(--rova-weight-medium); /* 500 */
    cursor: pointer;
    transition: all var(--rova-transition);
}

.rova-step-service__logout-btn:hover {
    background: var(--rova-alternate); /* #E0E3E7 */
    border-color: var(--rova-secondary-text); /* #57636C */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(87, 99, 108, 0.15);
}

.rova-step-service__logout-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(87, 99, 108, 0.1);
}

.rova-step-service__logout-btn svg {
    flex-shrink: 0;
}

/* ==========================================================================
   SERVICE CARD - Matching Mobile App Design
   ========================================================================== */

.rova-service-card {
    background: var(--rova-accent2, #FAFAFA);
    border-radius: var(--rova-radius);
    margin-bottom: 12px;
    transition: box-shadow var(--rova-transition);
}

.rova-service-card:hover {
    box-shadow: 0 2px 8px rgba(146, 29, 76, 0.08);
}

.rova-service-card__content {
    padding: 12px 0;
}

/* Header: Icon + Name + Avatars */
.rova-service-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 5px;
}

.rova-service-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: var(--rova-tertiary, #F4EDF0);
    border: 1px solid var(--rova-border);
    border-radius: 50%;
    color: var(--rova-primary);
}

.rova-service-card__icon svg {
    width: 18px;
    height: 18px;
}

.rova-service-card__name {
    flex: 1;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--rova-text);
    line-height: 1.4;
}

/* Avatars Grid - 2 columns, max 3 rows (6 avatars) */
.rova-service-card__avatars-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 5px;
}

.rova-service-card__avatars-row {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.rova-service-card__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 0.5px solid var(--rova-border);
    overflow: hidden;
    background: var(--rova-bg);
    flex-shrink: 0;
}

.rova-service-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rova-service-card__avatar--initials {
    font-size: 10px;
    font-weight: 500;
    color: var(--rova-text-muted);
    background: var(--rova-bg-light);
}

/* Description (expandable) */
.rova-service-card__description-wrapper {
    margin-top: 8px;
    padding: 0 5px 0 13px;
}

.rova-service-card__description {
    font-size: 13px;
    color: var(--rova-text-muted);
    line-height: 1.5;
    margin: 0;
}

.rova-service-card__description--truncated {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rova-service-card__description-toggle {
    display: inline;
    font-size: 13px;
    color: var(--rova-text-muted);
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
    margin-left: 4px;
}

.rova-service-card__description-toggle:hover {
    color: var(--rova-text);
}

/* Footer: Info + Button */
.rova-service-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 0 5px;
}

.rova-service-card__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    padding-left: 8px;
}

.rova-service-card__info-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--rova-text-muted);
}

.rova-service-card__info-item:first-child {
    font-weight: 500;
    color: var(--rova-text);
}

.rova-service-card__info-item svg {
    width: 16px;
    height: 16px;
    color: var(--rova-text-muted);
    flex-shrink: 0;
}

.rova-service-card__select-btn {
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    background: var(--rova-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity var(--rova-transition);
    flex-shrink: 0;
}

.rova-service-card__select-btn:hover {
    opacity: 0.9;
}

.rova-service-card__select-btn:active {
    opacity: 0.8;
}

/* Event Badge (dacă este necesar) */
.rova-service-card__event-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    background: var(--rova-bg-light);
    border-radius: 12px;
    color: var(--rova-text-muted);
}

/* ==========================================================================
   STEP 1: SPECIALIST SELECTION (Match Mobile App)
   ========================================================================== */

/* Service Info Container */
.rova-step-specialist__service-container {
    padding: var(--rova-space-3); /* 12px */
    background: var(--rova-primary-bg); /* White */
    border: 1px solid var(--rova-alternate); /* #E0E3E7 */
    border-radius: var(--rova-radius-lg); /* 14px */
    box-shadow: var(--rova-shadow-md);
    margin-bottom: var(--rova-space-8); /* 32px - Match mobile */
}

.rova-step-specialist__service-header {
    display: flex;
    align-items: center;
    gap: var(--rova-space-3); /* 12px */
}

.rova-step-specialist__service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; /* Match mobile */
    height: 36px; /* Match mobile */
    background: var(--rova-tertiary); /* #F4EDF0 */
    border: 1px solid var(--rova-alternate); /* #E0E3E7 */
    border-radius: 18px; /* Circular */
    flex-shrink: 0;
    color: var(--rova-primary); /* #921D4C */
}

.rova-step-specialist__service-icon svg {
    width: 18px;
    height: 18px;
}

.rova-step-specialist__service-name {
    flex: 1;
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-base); /* 14px */
    font-weight: var(--rova-weight-medium); /* 500 */
    color: var(--rova-primary-text);
    line-height: 1.4;
}

.rova-step-specialist__service-description {
    margin-top: var(--rova-space-2); /* 8px */
    padding-left: 5px;
    font-family: var(--rova-font-body); /* Readex Pro */
    font-size: var(--rova-text-sm); /* 13px */
    color: var(--rova-secondary-text); /* #57636C */
    line-height: 1.5;
}

/* Specialists Container */
.rova-step-specialist__specialists-container {
    padding: var(--rova-space-3); /* 12px */
    background: var(--rova-primary-bg); /* White */
    border: 1px solid var(--rova-alternate); /* #E0E3E7 */
    border-radius: var(--rova-radius-lg); /* 14px */
    box-shadow: var(--rova-shadow-md);
}

.rova-step-specialist__specialists-title {
    padding: 0 4px var(--rova-space-3); /* 12px bottom */
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-base); /* 14px */
    color: var(--rova-secondary-text); /* #57636C */
}

.rova-step-specialist__list {
    display: flex;
    flex-direction: column;
    gap: var(--rova-space-3); /* 12px */
}

/* Specialist Item (Match Mobile App) */
.rova-step-specialist__item {
    padding-bottom: var(--rova-space-3); /* 12px */
}

.rova-step-specialist__item:not(:last-child) {
    border-bottom: 1px solid transparent; /* Spacing only */
}

/* Row 1: Avatar + Name/Job */
.rova-step-specialist__item-row1 {
    display: flex;
    align-items: center;
    gap: var(--rova-space-3); /* 12px */
    margin-bottom: var(--rova-space-2); /* 8px */
}

.rova-step-specialist__item-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Match mobile */
    height: 40px; /* Match mobile */
    background: var(--rova-accent1); /* #FFF7F9 */
    border: 1px solid var(--rova-accent1);
    border-radius: var(--rova-radius-full); /* Circular */
    overflow: hidden;
    flex-shrink: 0;
}

.rova-step-specialist__item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rova-step-specialist__item-avatar span {
    font-family: var(--rova-font-display); /* Inter */
    font-size: 16px; /* Match mobile */
    font-weight: var(--rova-weight-semibold); /* 600 */
    color: var(--rova-primary); /* #921D4C */
}

.rova-step-specialist__item-name-container {
    flex: 1;
    min-width: 0;
}

.rova-step-specialist__item-name {
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-base); /* 14px */
    font-weight: var(--rova-weight-medium); /* 500 */
    color: var(--rova-primary-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rova-step-specialist__item-job {
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-xs); /* 12px */
    color: var(--rova-secondary-text); /* #57636C */
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Row 2: Price/Time + Button */
.rova-step-specialist__item-row2 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rova-space-3); /* 12px */
}

.rova-step-specialist__item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 52px; /* Avatar width (40px) + gap (12px) */
}

.rova-step-specialist__item-price,
.rova-step-specialist__item-time {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rova-step-specialist__item-price svg,
.rova-step-specialist__item-time svg {
    width: 16px;
    height: 16px;
    color: var(--rova-secondary-text);
    flex-shrink: 0;
}

.rova-step-specialist__item-price span {
    font-family: var(--rova-font-body); /* Readex Pro */
    font-size: var(--rova-text-sm); /* 13px */
    font-weight: var(--rova-weight-medium); /* 500 */
    color: var(--rova-primary-text);
}

.rova-step-specialist__item-time span {
    font-family: var(--rova-font-body); /* Readex Pro */
    font-size: var(--rova-text-sm); /* 13px */
    color: var(--rova-secondary-text); /* #57636C */
}

.rova-step-specialist__item-button {
    height: 36px; /* Match mobile */
    padding: 0 var(--rova-space-4); /* 16px horizontal */
    border: none;
    border-radius: var(--rova-radius-sm); /* 8px */
    background: var(--rova-primary); /* #921D4C */
    color: #fff;
    font-family: var(--rova-font-body); /* Readex Pro */
    font-size: var(--rova-text-sm); /* 13px */
    font-weight: var(--rova-weight-normal); /* 400 */
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity var(--rova-transition);
}

.rova-step-specialist__item-button:hover {
    opacity: 0.9;
}

.rova-step-specialist__item-button:active {
    opacity: 0.8;
}

/* Empty State */
.rova-step-specialist__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--rova-text-muted);
}

/* ==========================================================================
   SPECIALIST CARD
   ========================================================================== */

.rova-specialist-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--rova-border);
    border-radius: var(--rova-radius);
    cursor: pointer;
    transition: border-color var(--rova-transition), box-shadow var(--rova-transition);
}

.rova-specialist-card:hover {
    border-color: var(--rova-primary);
    box-shadow: 0 2px 8px rgba(146, 29, 76, 0.1);
}

.rova-specialist-card__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--rova-primary), #C84B6D);
    border-radius: 50%;
    overflow: hidden;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

.rova-specialist-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rova-specialist-card__info {
    flex: 1;
    min-width: 0;
}

.rova-specialist-card__name {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 500;
    color: var(--rova-text);
}

.rova-specialist-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--rova-text-muted);
}

.rova-specialist-card__price {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--rova-primary);
}

/* ==========================================================================
   STEP 2: EXTRAS SELECTION (Match Mobile App)
   ========================================================================== */

/* Specialist Section - Centered, No Background Container */
.rova-step-extras__specialist-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: var(--rova-space-5); /* 20px */
}

.rova-step-extras__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px; /* Match mobile */
    height: 80px; /* Match mobile */
    background: var(--rova-accent1); /* #FFF7F9 */
    border: 2px solid var(--rova-accent1); /* Match mobile */
    border-radius: var(--rova-radius-full); /* Circular */
    overflow: hidden;
    flex-shrink: 0;
    margin-bottom: var(--rova-space-3); /* 12px */
}

.rova-step-extras__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rova-step-extras__avatar-initials {
    font-family: var(--rova-font-display); /* Inter */
    font-size: 28px; /* 80 * 0.35 = 28px - Match mobile */
    font-weight: var(--rova-weight-semibold); /* 600 */
    color: var(--rova-primary); /* #921D4C */
}

.rova-step-extras__specialist-name {
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-lg); /* 16px - Match mobile */
    font-weight: var(--rova-weight-medium); /* 500 */
    color: var(--rova-primary-text); /* #4B0F27 */
}

.rova-step-extras__specialist-job {
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-sm); /* 13px - Match mobile */
    font-weight: var(--rova-weight-normal); /* 400 */
    color: var(--rova-secondary-text); /* #57636C */
    margin-top: 4px;
}

/* Main Service Card (Match Mobile) */
.rova-step-extras__main-service {
    padding: var(--rova-space-3); /* 12px */
    background: var(--rova-primary-bg); /* White */
    border: 1px solid var(--rova-alternate); /* #E0E3E7 */
    border-radius: var(--rova-radius-lg); /* 14px */
    box-shadow: var(--rova-shadow-md);
    margin-bottom: var(--rova-space-8); /* 32px */
}

.rova-step-extras__service-header {
    display: flex;
    align-items: center; /* Aliniere verticală centrală */
    gap: var(--rova-space-3); /* 12px */
}

.rova-step-extras__service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; /* Match mobile */
    height: 36px; /* Match mobile */
    background: var(--rova-tertiary); /* #F4EDF0 */
    border: 1px solid var(--rova-alternate); /* #E0E3E7 */
    border-radius: 18px; /* Circular */
    flex-shrink: 0;
    color: var(--rova-primary); /* #921D4C */
}

.rova-step-extras__service-info {
    flex: 1;
    min-width: 0;
}

.rova-step-extras__service-row {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Aliniere verticală centrală */
    gap: var(--rova-space-3); /* 12px spacing între nume și preț */
}

.rova-step-extras__service-name {
    flex: 1; /* Ocupă tot spațiul disponibil */
    font-size: var(--rova-text-base); /* 14px */
    font-weight: var(--rova-weight-medium); /* 500 */
    color: var(--rova-primary-text);
    line-height: 1.4;
}

.rova-step-extras__service-price {
    font-size: var(--rova-text-base); /* 14px */
    font-weight: var(--rova-weight-medium); /* 500 */
    color: var(--rova-primary-text);
    flex-shrink: 0; /* Prevent shrinking */
}

.rova-step-extras__service-description-wrapper {
    margin-top: var(--rova-space-2); /* 8px */
    padding-left: 5px; /* Ușor mai în stânga decât iconul pentru aliniere subtilă */
}

.rova-step-extras__service-description {
    font-family: var(--rova-font-body); /* Readex Pro */
    font-size: var(--rova-text-sm); /* 13px */
    color: var(--rova-secondary-text); /* #57636C */
    line-height: 1.5;
    margin: 0;
}

.rova-step-extras__service-description--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rova-step-extras__description-toggle {
    font-family: var(--rova-font-body); /* Readex Pro */
    font-size: var(--rova-text-sm); /* 13px */
    color: var(--rova-secondary-text); /* #57636C */
    font-weight: var(--rova-weight-medium); /* 500 */
    text-decoration: underline;
    cursor: pointer;
    margin-left: 4px;
}

.rova-step-extras__description-toggle:hover {
    color: var(--rova-primary-text);
}

/* Extras Container (Match Mobile) */
.rova-step-extras__extras-container {
    padding: var(--rova-space-3); /* 12px */
    background: var(--rova-primary-bg); /* White */
    border: 1px solid var(--rova-alternate); /* #E0E3E7 */
    border-radius: var(--rova-radius-lg); /* 14px */
    box-shadow: var(--rova-shadow-md);
}

.rova-step-extras__extras-title {
    padding: 0 4px var(--rova-space-3); /* 12px bottom */
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-base); /* 14px */
    color: var(--rova-secondary-text); /* #57636C */
}

.rova-step-extras__extras-list {
    display: flex;
    flex-direction: column;
    gap: var(--rova-space-4); /* 16px */
}

/* Service Group Header (Match Mobile - Pill + Line) */
.rova-step-extras__group {
    display: flex;
    flex-direction: column;
}

.rova-step-extras__group-header-wrapper {
    margin-bottom: 0;
    padding-bottom: var(--rova-space-2); /* 8px */
    padding-top: var(--rova-space-2); /* 8px */
}

.rova-step-extras__group-header {
    display: inline-flex;
    align-items: center;
    gap: var(--rova-space-2); /* 8px */
    padding: var(--rova-space-2) var(--rova-space-4); /* 8px 16px */
    background: var(--rova-primary-bg); /* White */
    border-radius: var(--rova-radius-xl); /* 30px - Pill shape */
    cursor: pointer;
    transition: background var(--rova-transition);
}

.rova-step-extras__group-header:hover {
    background: var(--rova-tertiary); /* #F4EDF0 */
}

.rova-step-extras__group-name {
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-base); /* 14px */
    font-weight: var(--rova-weight-medium); /* 500 */
    color: var(--rova-primary-text);
}

.rova-step-extras__group-arrow {
    transition: transform var(--rova-transition-smooth); /* 450ms cubic-bezier */
    color: var(--rova-secondary-text);
}

.rova-step-extras__group-arrow--expanded {
    transform: rotate(180deg);
}

.rova-step-extras__group-line {
    width: 65%;
    height: 0.3px;
    background: var(--rova-primary-text);
    margin-top: 0;
}

.rova-step-extras__group-services {
    display: flex;
    flex-direction: column;
    gap: var(--rova-space-2); /* 8px */
    padding-top: var(--rova-space-1); /* 4px */
    margin-bottom: var(--rova-space-4); /* 16px */
}

/* Service Item (Match Mobile) */
.rova-step-extras__item {
    display: flex;
    align-items: center;
    gap: var(--rova-space-3); /* 12px */
    padding: 10px var(--rova-space-3); /* 10px 12px */
    border-radius: 24px; /* Match mobile */
    cursor: pointer;
    transition: background var(--rova-transition);
}

.rova-step-extras__item:hover {
    background: rgba(146, 29, 76, 0.03);
}

.rova-step-extras__item--selected {
    background: rgba(146, 29, 76, 0.05);
}

.rova-step-extras__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Match mobile */
    height: 40px; /* Match mobile */
    background: var(--rova-tertiary); /* #F4EDF0 */
    border: 1px solid var(--rova-alternate); /* #E0E3E7 */
    border-radius: var(--rova-radius-full); /* Circular */
    flex-shrink: 0;
    color: var(--rova-primary); /* #921D4C */
}

.rova-step-extras__item-icon svg {
    width: 20px;
    height: 20px;
}

.rova-step-extras__item-content {
    flex: 1;
    min-width: 0;
}

.rova-step-extras__item-name {
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-base); /* 14px */
    font-weight: var(--rova-weight-medium); /* 500 */
    color: var(--rova-primary-text);
    margin-bottom: 4px;
}

.rova-step-extras__item-details {
    display: flex;
    align-items: center;
    gap: var(--rova-space-3); /* 12px */
}

.rova-step-extras__item-detail {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--rova-font-body); /* Readex Pro */
    font-size: var(--rova-text-xs); /* 12px */
    color: var(--rova-secondary-text); /* #57636C */
}

.rova-step-extras__item-detail svg {
    width: 14px;
    height: 14px;
    color: var(--rova-secondary-text);
}

/* Checkbox Circular (Match Mobile - 24x24px) */
.rova-step-extras__item-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px; /* Match mobile */
    height: 24px; /* Match mobile */
    border: 2px solid var(--rova-alternate); /* #E0E3E7 */
    border-radius: var(--rova-radius-full); /* Circular */
    background: transparent;
    flex-shrink: 0;
    transition: all var(--rova-transition);
}

.rova-step-extras__item-checkbox--selected {
    background: var(--rova-primary); /* #921D4C */
    border-color: var(--rova-primary);
}

.rova-step-extras__item-checkbox svg {
    width: 14px;
    height: 14px;
}

/* Footer */
.rova-step-extras__footer {
    padding-top: 20px;
}

.rova-step-extras__continue-btn {
    width: 75%; /* Match step-3 datetime */
    height: 56px; /* Match step-3 datetime */
    margin: var(--rova-space-6) auto 0; /* 24px top, centered */
    display: block;
    border: none;
    border-radius: var(--rova-radius-md); /* 12px */
    background: var(--rova-primary);
    color: #fff;
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-lg); /* 16px */
    font-weight: var(--rova-weight-semibold); /* 600 */
    cursor: pointer;
    transition: all var(--rova-transition);
}

.rova-step-extras__continue-btn:hover:not(:disabled) {
    background: var(--rova-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(146, 29, 76, 0.25);
}

.rova-step-extras__continue-btn:disabled {
    background: var(--rova-secondary-bg); /* #F2F2F2 */
    color: var(--rova-secondary-text); /* #57636C */
    cursor: not-allowed;
    opacity: 0.6;
}

/* ==========================================================================
   STEP 3: DATETIME SELECTION
   ========================================================================== */

.rova-step-datetime__calendar-container {
    margin-bottom: 20px;
}

.rova-step-datetime__slots-container {
    display: none;
}

.rova-step-datetime__footer {
    padding-top: 20px;
}

.rova-step-datetime__continue-btn {
    width: 75%; /* Match mobile */
    height: 56px; /* Match mobile */
    margin: var(--rova-space-6) auto 0; /* 24px top, centered */
    display: block;
    border: none;
    border-radius: var(--rova-radius-md); /* 12px */
    background: var(--rova-primary);
    color: #fff;
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-lg); /* 16px */
    font-weight: var(--rova-weight-semibold); /* 600 */
    cursor: pointer;
    transition: all var(--rova-transition);
}

.rova-step-datetime__continue-btn:hover:not(:disabled) {
    background: var(--rova-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(146, 29, 76, 0.25);
}

.rova-step-datetime__continue-btn:disabled {
    background: var(--rova-secondary-bg); /* #F2F2F2 */
    color: var(--rova-secondary-text); /* #57636C */
    cursor: not-allowed;
    opacity: 0.6;
}

/* ==========================================================================
   CALENDAR
   ========================================================================== */

/* Calendar (Match Mobile) */
.rova-calendar {
    width: 90%; /* Match mobile */
    margin: 0 auto;
    border: 1px solid var(--rova-alternate); /* #E0E3E7 */
    border-radius: 14px 14px 8px 8px; /* Top 14px, bottom 8px - Match mobile */
    box-shadow: 0 0 10px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.05); /* Match mobile */
    overflow: hidden;
}

.rova-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 5px; /* Match mobile */
}

.rova-calendar__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--rova-primary); /* #921D4C - Match mobile */
    cursor: pointer;
    border-radius: var(--rova-radius-full);
    transition: background var(--rova-transition);
}

.rova-calendar__nav-btn:hover {
    background: rgba(146, 29, 76, 0.1);
}

.rova-calendar__nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.rova-calendar__month-year {
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-md); /* 15px - Match mobile */
    font-weight: var(--rova-weight-medium); /* 500 */
    color: var(--rova-primary); /* #921D4C - Match mobile */
    text-transform: capitalize;
}

.rova-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 8px 12px;
    background: var(--rova-bg-light);
    border-bottom: 1px solid var(--rova-border);
}

.rova-calendar__weekday {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--rova-text-muted);
    text-transform: uppercase;
}

.rova-calendar__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 5px; /* Match mobile */
    gap: 2px; /* Match mobile - 2px spacing */
}

.rova-calendar__day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px; /* Match mobile */
    aspect-ratio: 1;
    border: none;
    background: transparent;
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-base); /* 14px */
    color: var(--rova-text-light);
    border-radius: var(--rova-radius-full);
    cursor: default;
    position: relative;
}

.rova-calendar__day--current-month {
    color: var(--rova-primary-text);
}

.rova-calendar__day--available {
    color: #555;
    font-weight: 400;
    cursor: pointer;
    transition: all var(--rova-transition);
}

.rova-calendar__day--available:hover {
    background: rgba(146, 29, 76, 0.05);
}

/* Day number - ensure it appears above background circles */
.rova-calendar__day-number {
    position: relative;
    z-index: 1;
}

/* Selected date (Match Mobile - 28x28px circle) */
.rova-calendar__day--selected {
    position: relative;
    color: #fff !important;
}

.rova-calendar__day--selected::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    background: var(--rova-primary); /* #921D4C */
    border-radius: var(--rova-radius-full);
    z-index: 0;
}

/* Today indicator (Match Mobile - 28x28px with 40% opacity) */
.rova-calendar__day--today:not(.rova-calendar__day--selected)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    background: rgba(146, 29, 76, 0.4); /* 40% opacity */
    border-radius: var(--rova-radius-full);
    z-index: 0;
}

/* Disabled dates (Match Mobile - strikethrough diagonal) */
.rova-calendar__day--disabled {
    color: #BDBDBD; /* Gray 400 */
    cursor: not-allowed !important;
}

.rova-calendar__day--disabled::after {
    content: '';
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    background: linear-gradient(
        to bottom right,
        transparent calc(50% - 0.75px),
        #BDBDBD,
        transparent calc(50% + 0.75px)
    );
    pointer-events: none;
}

/* ==========================================================================
   TIME SLOTS
   ========================================================================== */

.rova-time-slots__groups {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rova-time-slots__group-title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--rova-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Time Slots (Match Mobile) */
.rova-time-slots {
    width: 90%; /* Match mobile */
    margin: 0 auto;
}

.rova-time-slots__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 per rând - Match mobile */
    gap: var(--rova-space-2); /* 8px - Match mobile */
}

.rova-time-slots__slot {
    height: 38px; /* Match mobile */
    padding: 10px 8px; /* Match mobile */
    border: 1px solid var(--rova-alternate); /* #E0E3E7 */
    border-radius: var(--rova-radius-xl); /* 30px - Capsule style - Match mobile */
    background: var(--rova-primary-bg); /* White */
    font-family: var(--rova-font-body); /* Readex Pro - Match mobile */
    font-size: var(--rova-text-sm); /* 13px - Match mobile */
    font-weight: var(--rova-weight-normal); /* 400 */
    color: var(--rova-primary-text); /* #4B0F27 */
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 0 2px rgba(0,0,0,0.04); /* Match mobile */
    transition: all 200ms ease;
}

.rova-time-slots__slot:hover {
    border-color: var(--rova-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(146, 29, 76, 0.15);
}

.rova-time-slots__slot--selected {
    background: var(--rova-tertiary); /* #F4EDF0 - Match mobile */
    border-color: var(--rova-alternate);
    color: var(--rova-primary); /* #921D4C */
    font-size: var(--rova-text-base); /* 14px - Match mobile */
    font-weight: var(--rova-weight-medium); /* 500 */
}

.rova-time-slots__empty {
    padding: 24px;
    text-align: center;
    color: var(--rova-text-muted);
    font-size: 14px;
}

.rova-time-slots__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

/* ==========================================================================
   EVENT CARDS (Match Mobile App)
   ========================================================================== */

.rova-event-cards {
    width: 90%; /* Match mobile */
    margin: var(--rova-space-3) auto 0; /* 12px top, centered */
}

.rova-event-cards__list {
    display: flex;
    flex-direction: column;
    gap: var(--rova-space-3); /* 12px */
}

/* Event Card Container (Match Mobile) */
.rova-event-cards__card {
    width: 100%;
    background: var(--rova-primary-bg); /* White */
    border: 1px solid var(--rova-alternate); /* #E0E3E7 */
    border-radius: 12px 12px 25px 25px; /* Top 12px, bottom 25px - Match mobile */
    box-shadow: 0 0 10px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.05); /* Match mobile */
    overflow: hidden;
    transition: transform var(--rova-transition), box-shadow var(--rova-transition);
}

.rova-event-cards__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(146, 29, 76, 0.15);
}

/* Header cu gradient (Match Mobile) */
.rova-event-cards__header {
    display: flex;
    align-items: center;
    gap: var(--rova-space-3); /* 12px */
    padding: var(--rova-space-2) var(--rova-space-3); /* 8px 12px */
    background: linear-gradient(135deg, var(--rova-tertiary), var(--rova-tertiary)); /* #F4EDF0 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    border-radius: 12px 12px 25px 25px; /* Match mobile */
    border-bottom: 1px solid var(--rova-alternate);
}

/* Avatar Specialist */
.rova-event-cards__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Match mobile */
    height: 40px; /* Match mobile */
    border: 1px solid var(--rova-alternate);
    border-radius: var(--rova-radius-full);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--rova-primary-bg);
}

.rova-event-cards__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rova-event-cards__avatar-initials {
    font-family: var(--rova-font-display); /* Inter */
    font-size: 16px;
    font-weight: var(--rova-weight-semibold); /* 600 */
    color: var(--rova-primary);
}

/* Service Info */
.rova-event-cards__service-info {
    flex: 1;
    min-width: 0;
}

.rova-event-cards__service-name {
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-sm); /* 13px - Match mobile */
    font-weight: var(--rova-weight-semibold); /* 600 */
    color: var(--rova-primary-text);
    line-height: 1.3;
}

.rova-event-cards__service-duration {
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-xs); /* 12px - Match mobile */
    font-weight: var(--rova-weight-normal); /* 400 */
    color: var(--rova-secondary-text);
    margin-top: 2px;
}

/* Preț Badge */
.rova-event-cards__service-price {
    padding: 4px 8px;
    background: var(--rova-primary-bg); /* White */
    border: 1px solid var(--rova-primary); /* #921D4C */
    border-radius: 6px;
    font-family: var(--rova-font-display); /* Inter */
    font-size: 11px;
    font-weight: var(--rova-weight-semibold); /* 600 */
    color: var(--rova-primary);
    flex-shrink: 0;
}

/* Description (Match Mobile) */
.rova-event-cards__description {
    padding: var(--rova-space-3); /* 12px */
    border-bottom: 1px solid var(--rova-alternate);
}

.rova-event-cards__description-text {
    font-family: var(--rova-font-body); /* Readex Pro */
    font-size: var(--rova-text-sm); /* 13px */
    color: var(--rova-secondary-text);
    line-height: 1.5;
    margin: 0 0 var(--rova-space-2); /* 8px */
}

.rova-event-cards__description-text--truncated {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rova-event-cards__description-toggle {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--rova-font-body); /* Readex Pro */
    font-size: var(--rova-text-sm); /* 13px */
    color: var(--rova-secondary-text);
    font-weight: var(--rova-weight-medium); /* 500 */
    text-decoration: underline;
    cursor: pointer;
    transition: color var(--rova-transition);
}

.rova-event-cards__description-toggle:hover {
    color: var(--rova-primary-text);
}

/* Event Details (Match Mobile) */
.rova-event-cards__details {
    display: flex;
    flex-direction: column;
    gap: var(--rova-space-2); /* 8px */
    padding: var(--rova-space-3); /* 12px */
}

.rova-event-cards__detail-item {
    display: flex;
    align-items: center;
    gap: var(--rova-space-2); /* 8px */
    font-family: var(--rova-font-body); /* Readex Pro */
    font-size: var(--rova-text-sm); /* 13px */
    color: var(--rova-primary-text);
}

.rova-event-cards__detail-item svg {
    color: var(--rova-secondary-text);
    flex-shrink: 0;
}

.rova-event-cards__detail-item--warning {
    color: var(--rova-warning);
}

.rova-event-cards__detail-item--warning svg {
    color: var(--rova-warning);
}

/* Footer cu butoane (Match Mobile) */
.rova-event-cards__footer {
    padding: var(--rova-space-3); /* 12px */
    padding-top: 0;
}

.rova-event-cards__btn {
    width: 100%;
    height: 44px; /* Match mobile */
    padding: 0 var(--rova-space-4); /* 16px */
    border: none;
    border-radius: var(--rova-radius-md); /* 12px */
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-base); /* 14px */
    font-weight: var(--rova-weight-semibold); /* 600 */
    cursor: pointer;
    transition: all var(--rova-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rova-space-2); /* 8px */
}

.rova-event-cards__btn--enroll {
    background: var(--rova-primary); /* #921D4C */
    color: #fff;
}

.rova-event-cards__btn--enroll:hover {
    background: var(--rova-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(146, 29, 76, 0.25);
}

.rova-event-cards__btn--enrolled {
    background: var(--rova-success); /* Green */
    color: #fff;
    cursor: not-allowed;
}

.rova-event-cards__btn--full {
    background: var(--rova-secondary-bg); /* #F2F2F2 */
    color: var(--rova-secondary-text);
    border: 1px solid var(--rova-alternate);
    cursor: not-allowed;
}

/* Loading & Empty States */
.rova-event-cards__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--rova-space-8); /* 32px */
    color: var(--rova-secondary-text);
}

.rova-event-cards__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--rova-alternate);
    border-top-color: var(--rova-primary);
    border-radius: 50%;
    animation: rova-spin 0.8s linear infinite;
    margin-bottom: var(--rova-space-3); /* 12px */
}

.rova-event-cards__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--rova-space-8); /* 32px */
    text-align: center;
}

.rova-event-cards__empty svg {
    width: 48px;
    height: 48px;
    color: var(--rova-secondary-text);
    opacity: 0.5;
    margin-bottom: var(--rova-space-4); /* 16px */
}

.rova-event-cards__empty p {
    margin: 0;
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-base); /* 14px */
    color: var(--rova-secondary-text);
}

/* ==========================================================================
   STEP 4: CONFIRMATION (Match Mobile App)
   ========================================================================== */

/* Specialist Header - Centered, No Container */
.rova-step-confirmation__specialist-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: var(--rova-space-6); /* 24px */
}

.rova-step-confirmation__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; /* Regular size */
    height: 56px; /* Regular size */
    background: var(--rova-accent1); /* #FFF7F9 */
    border: 2px solid var(--rova-accent1);
    border-radius: var(--rova-radius-full);
    overflow: hidden;
    flex-shrink: 0;
}

.rova-step-confirmation__avatar--large {
    width: 80px; /* Match mobile */
    height: 80px; /* Match mobile */
    margin-bottom: var(--rova-space-3); /* 12px */
}

.rova-step-confirmation__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rova-step-confirmation__avatar span {
    font-family: var(--rova-font-display); /* Inter */
    font-size: 28px; /* 80 * 0.35 - Match mobile */
    font-weight: var(--rova-weight-semibold); /* 600 */
    color: var(--rova-primary); /* #921D4C */
}

.rova-step-confirmation__specialist-name {
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-lg); /* 16px - Match mobile */
    font-weight: var(--rova-weight-medium); /* 500 */
    color: var(--rova-primary-text); /* #4B0F27 */
    margin: 0;
}

.rova-step-confirmation__specialist-title {
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-sm); /* 13px */
    color: var(--rova-secondary-text); /* #57636C */
    margin: 4px 0 0;
}

/* Date/Time Container - Wrapper pentru centrare */
.rova-step-confirmation__datetime-container {
    display: flex;
    justify-content: center;
    margin-bottom: var(--rova-space-6); /* 24px */
}

/* Date/Time Compact Container - Centered */
.rova-step-confirmation__datetime-compact {
    display: inline-flex;
    align-items: center;
    padding: var(--rova-space-3); /* 12px */
    background: var(--rova-accent1); /* #FFF7F9 */
    border: 1px solid var(--rova-alternate); /* #E0E3E7 */
    border-radius: var(--rova-radius-lg); /* 14px */
    box-shadow: 0 0 10px rgba(242,242,242,1), 0 0 5px rgba(242,242,242,1); /* Match mobile */
}

.rova-step-confirmation__datetime-date {
    text-align: center;
}

.rova-step-confirmation__datetime-separator {
    width: 1px;
    height: 40px;
    background: var(--rova-alternate);
    margin: 0 var(--rova-space-3); /* 12px horizontal */
}

.rova-step-confirmation__datetime-time {
    text-align: center;
}

.rova-step-confirmation__datetime-label {
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-base); /* 14px */
    font-weight: var(--rova-weight-medium); /* 500 */
    color: var(--rova-primary-text); /* #4B0F27 */
}

.rova-step-confirmation__datetime-time .rova-step-confirmation__datetime-label {
    font-size: var(--rova-text-lg); /* 16px for time */
    font-weight: var(--rova-weight-semibold); /* 600 for time */
}

/* Services and Totals Container */
.rova-step-confirmation__summary-container {
    padding: var(--rova-space-3); /* 12px */
    background: var(--rova-primary-bg); /* White */
    border: 1px solid var(--rova-alternate); /* #E0E3E7 */
    border-radius: var(--rova-radius-lg); /* 14px */
    box-shadow: var(--rova-shadow-md);
    margin-bottom: var(--rova-space-6); /* 24px */
}

/* Services List */
.rova-step-confirmation__services-list {
    display: flex;
    flex-direction: column;
    gap: var(--rova-space-2); /* 8px */
}

.rova-step-confirmation__service-item {
    display: flex;
    align-items: center; /* Aliniere verticală centrală */
    gap: var(--rova-space-3); /* 12px */
}

.rova-step-confirmation__service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Match mobile */
    height: 40px; /* Match mobile */
    background: var(--rova-tertiary); /* #F4EDF0 */
    border: 1px solid var(--rova-alternate); /* #E0E3E7 */
    border-radius: var(--rova-radius-full); /* Circular */
    flex-shrink: 0;
    color: var(--rova-primary); /* #921D4C */
}

.rova-step-confirmation__service-icon svg,
.rova-step-confirmation__service-icon i {
    width: 20px;
    height: 20px;
}

.rova-step-confirmation__service-name {
    flex: 1; /* Ocupă tot spațiul disponibil */
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-base); /* 14px */
    font-weight: var(--rova-weight-medium); /* 500 */
    color: var(--rova-primary-text);
    line-height: 1.4;
}

.rova-step-confirmation__service-price {
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-base); /* 14px */
    font-weight: var(--rova-weight-medium); /* 500 */
    color: var(--rova-primary-text);
    flex-shrink: 0;
}

/* Separator Line */
.rova-step-confirmation__separator {
    height: 1px;
    background: var(--rova-alternate);
    margin: var(--rova-space-4) 0; /* 16px vertical */
}

/* Time Range */
.rova-step-confirmation__time-range {
    display: flex;
    align-items: center;
    gap: var(--rova-space-2); /* 8px */
    margin-bottom: var(--rova-space-3); /* 12px */
}

.rova-step-confirmation__time-range-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.rova-step-confirmation__time-range-icon svg {
    color: var(--rova-primary-text);
}

.rova-step-confirmation__time-range-label {
    flex: 1;
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-base); /* 14px */
    color: var(--rova-primary-text);
}

.rova-step-confirmation__time-range-value {
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-base); /* 14px */
    font-weight: var(--rova-weight-medium); /* 500 */
    color: var(--rova-primary-text);
}

/* Total Row */
.rova-step-confirmation__total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--rova-space-2); /* 8px */
}

.rova-step-confirmation__total-label {
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-lg); /* 16px - Mărit */
    font-weight: var(--rova-weight-semibold); /* 600 - Îngroșat */
    color: var(--rova-primary-text);
}

.rova-step-confirmation__total-value {
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-lg); /* 16px - Același ca label-ul, match Flutter */
    font-weight: var(--rova-weight-bold); /* 700 - Bold */
    color: var(--rova-primary-text); /* Primary text color, nu primary - match Flutter */
}

/* Deposit Row */
.rova-step-confirmation__deposit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rova-step-confirmation__deposit-label {
    font-family: var(--rova-font-display); /* Inter */
    font-size: 15px; /* 15px - Match Flutter */
    font-weight: var(--rova-weight-semibold); /* 600 */
    color: var(--rova-primary); /* Primary color pentru "Plătești acum" - match Flutter */
}

.rova-step-confirmation__deposit-value {
    font-family: var(--rova-font-display); /* Inter */
    font-size: 15px; /* 15px - Match Flutter */
    font-weight: var(--rova-weight-bold); /* 700 - Bold */
    color: var(--rova-primary-text);
}

/* Info Boxes (Payment and Confirmation) */
.rova-step-confirmation__info-box {
    display: flex;
    align-items: flex-start;
    gap: var(--rova-space-3); /* 12px */
    padding: var(--rova-space-4); /* 16px */
    background: var(--rova-accent1); /* #FFF7F9 */
    border: 1.5px solid rgba(146, 29, 76, 0.3); /* Primary with 30% opacity */
    border-radius: var(--rova-radius-lg); /* 14px */
    box-shadow: 0 0 10px rgba(242,242,242,1), 0 0 5px rgba(242,242,242,1);
    margin-bottom: var(--rova-space-6); /* 24px */
}

.rova-step-confirmation__info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(146, 29, 76, 0.1);
    border-radius: var(--rova-radius-full);
    flex-shrink: 0;
}

.rova-step-confirmation__info-icon svg {
    color: var(--rova-primary);
}

.rova-step-confirmation__info-content {
    flex: 1;
    min-width: 0;
}

.rova-step-confirmation__info-title {
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-base); /* 14px */
    font-weight: var(--rova-weight-semibold); /* 600 */
    color: var(--rova-primary-text);
    margin: 0 0 6px;
}

.rova-step-confirmation__info-text {
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-sm); /* 13px */
    color: var(--rova-secondary-text);
    margin: 0;
    line-height: 1.5;
}

.rova-step-confirmation__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.rova-step-confirmation__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rova-step-confirmation__field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--rova-text);
}

.rova-step-confirmation__field input,
.rova-step-confirmation__field textarea {
    padding: 12px;
    border: 1px solid var(--rova-border);
    border-radius: var(--rova-radius-sm);
    font-size: 15px;
    font-family: inherit;
    transition: border-color var(--rova-transition);
}

.rova-step-confirmation__field input:focus,
.rova-step-confirmation__field textarea:focus {
    outline: none;
    border-color: var(--rova-primary);
}

.rova-step-confirmation__terms-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: var(--rova-radius-sm);
    background: var(--rova-primary-light);
    margin-bottom: 20px;
}

.rova-step-confirmation__terms-notice svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--rova-primary);
}

.rova-step-confirmation__terms-notice p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--rova-text-muted);
}

.rova-step-confirmation__terms-notice a {
    color: var(--rova-primary);
    text-decoration: none;
    font-weight: 500;
}

.rova-step-confirmation__terms-notice a:hover {
    text-decoration: underline;
}

.rova-step-confirmation__notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: var(--rova-radius-sm);
    margin-bottom: 20px;
}

.rova-step-confirmation__notice--warning {
    background: rgba(255, 193, 7, 0.1);
    color: #856404;
}

.rova-step-confirmation__notice p {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}

.rova-step-confirmation__footer {
    padding-top: 20px;
}

.rova-step-confirmation__submit-btn {
    width: 75%; /* Match step-2 */
    height: 56px; /* Match step-2 */
    margin: var(--rova-space-6) auto 0; /* 24px top, centered - Match step-2 */
    display: block;
    border: none;
    border-radius: var(--rova-radius-md); /* 12px - Match step-2 */
    background: var(--rova-primary);
    color: #fff;
    font-family: var(--rova-font-display); /* Inter - Match step-2 */
    font-size: var(--rova-text-lg); /* 16px - Match step-2 */
    font-weight: var(--rova-weight-semibold); /* 600 - Match step-2 */
    cursor: pointer;
    transition: all var(--rova-transition);
}

.rova-step-confirmation__submit-btn:hover:not(:disabled) {
    background: var(--rova-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(146, 29, 76, 0.25);
}

.rova-step-confirmation__submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rova-step-confirmation__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px;
    color: var(--rova-text-muted);
}

.rova-step-confirmation__spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--rova-border);
    border-top-color: var(--rova-primary);
    border-radius: 50%;
    animation: rova-spin 0.8s linear infinite;
}

.rova-step-confirmation__error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    margin-bottom: 16px;
    background: rgba(220, 53, 69, 0.1);
    border-radius: var(--rova-radius-sm);
    color: var(--rova-danger);
    font-size: 13px;
}

/* Event Display Styles (for eventType !== null) */
.rova-step-confirmation__event-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, var(--rova-tertiary), var(--rova-tertiary));
    border-radius: 12px;
    box-shadow: var(--rova-shadow-sm);
    margin-bottom: 12px;
}

.rova-step-confirmation__event-specialist {
    flex-shrink: 0;
}

.rova-step-confirmation__event-info {
    flex: 1;
    min-width: 0;
}

.rova-step-confirmation__event-name {
    font-size: var(--rova-text-sm);
    font-weight: var(--rova-weight-semibold);
    color: var(--rova-primary-text);
    margin: 0 0 2px 0;
}

.rova-step-confirmation__event-duration {
    font-size: var(--rova-text-xs);
    font-weight: var(--rova-weight-normal);
    color: var(--rova-secondary-text);
    margin: 0;
}

.rova-step-confirmation__event-price-badge {
    flex-shrink: 0;
    padding: 4px 8px;
    background: var(--rova-primary-bg);
    border: 1px solid var(--rova-primary);
    border-radius: 6px;
    font-size: 11px;
    font-weight: var(--rova-weight-semibold);
    color: var(--rova-primary);
}

.rova-step-confirmation__event-description {
    padding: 12px;
    font-size: var(--rova-text-sm);
    color: var(--rova-secondary-text);
    line-height: 1.5;
}

.rova-step-confirmation__event-date-label {
    text-align: center;
    font-size: var(--rova-text-xs);
    font-weight: var(--rova-weight-medium);
    color: var(--rova-primary-text);
    margin-bottom: 8px;
}

.rova-step-confirmation__event-times {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.rova-step-confirmation__event-time-box {
    flex: 1;
    padding: 10px 12px;
    background: var(--rova-secondary-bg);
    border: 1.5px solid var(--rova-alternate);
    border-radius: var(--rova-radius-sm);
}

.rova-step-confirmation__event-time-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: var(--rova-weight-medium);
    color: var(--rova-secondary-text);
}

.rova-step-confirmation__event-time-icon {
    font-size: 14px;
}

.rova-step-confirmation__event-time-label {
    flex: 1;
}

.rova-step-confirmation__event-time-value {
    font-size: 18px;
    font-weight: var(--rova-weight-semibold);
    color: var(--rova-primary-text);
}

.rova-step-confirmation__event-time-value--multiday {
    font-size: var(--rova-text-sm) !important;
}

.rova-step-confirmation__event-time-badge {
    margin-left: auto;
    font-size: var(--rova-text-xs);
    font-weight: var(--rova-weight-semibold);
    color: var(--rova-primary);
}

.rova-step-confirmation__avatar--small {
    width: 40px;
    height: 40px;
}

/* ==========================================================================
   STEP 5: SUCCESS (100% Match Mobile App)
   ========================================================================== */

.rova-step-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--rova-space-4) var(--rova-space-4) var(--rova-space-4); /* 16px */
}

/* Icon Circle (Match Mobile - 100x100px with 3px border) */
.rova-step-success__icon-circle {
    width: 100px; /* Match mobile */
    height: 100px; /* Match mobile */
    border-radius: var(--rova-radius-full);
    background: var(--rova-accent1); /* #FFF7F9 */
    border: 3px solid var(--rova-primary); /* #921D4C - Match mobile */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--rova-space-5) auto var(--rova-space-6); /* 20px top, 24px bottom */
}

.rova-step-success__icon {
    color: var(--rova-primary); /* #921D4C */
    width: 60px; /* Match mobile */
    height: 60px; /* Match mobile */
}

.rova-step-success__icon--confirmed {
    color: var(--rova-primary); /* #921D4C */
}

.rova-step-success__icon--pending {
    color: var(--rova-primary); /* #921D4C - Schedule icon */
}

.rova-step-success__title {
    margin: 0 0 var(--rova-space-3); /* 12px */
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-xl); /* 24px - Match mobile */
    font-weight: var(--rova-weight-bold); /* 700 */
    color: var(--rova-primary-text); /* #4B0F27 */
}

.rova-step-success__message {
    margin: 0 0 10vh; /* Dynamic spacing - Match mobile */
    max-width: 360px;
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-base); /* 14px - Match mobile */
    font-weight: var(--rova-weight-normal); /* 400 */
    color: var(--rova-secondary-text); /* #57636C */
    line-height: 1.5;
}

/* Date/Time Card (Match Mobile - inline-flex centered) */
.rova-step-success__datetime {
    display: inline-flex;
    align-items: center;
    gap: var(--rova-space-3); /* 12px */
    padding: var(--rova-space-3); /* 12px */
    background: var(--rova-accent1); /* #FFF7F9 - Match mobile */
    border: 1px solid var(--rova-alternate); /* #E0E3E7 */
    border-radius: var(--rova-radius-lg); /* 14px */
    box-shadow: 0 0 10px rgba(242, 242, 242, 1), 0 0 5px rgba(242, 242, 242, 1); /* Match mobile */
    margin-bottom: 10vh; /* Dynamic spacing - Match mobile */
}

.rova-step-success__datetime-text {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center text - Match mobile */
    gap: 2px; /* Match mobile */
}

.rova-step-success__date {
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-base); /* 14px - Match mobile */
    font-weight: var(--rova-weight-medium); /* 500 */
    color: var(--rova-primary-text); /* #4B0F27 */
    text-align: center;
}

.rova-step-success__separator {
    width: 1px;
    height: 40px; /* Match mobile */
    background: var(--rova-alternate); /* #E0E3E7 */
    margin: 0; /* No extra margin */
}

.rova-step-success__time {
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-lg); /* 16px - Match mobile */
    font-weight: var(--rova-weight-semibold); /* 600 */
    color: var(--rova-primary-text); /* #4B0F27 */
}

/* Auto-Close Button with Progress (Match Mobile) */
.rova-step-success__auto-close-btn {
    width: 75%; /* Match mobile */
    height: 56px; /* Match mobile */
    margin: 0 auto var(--rova-space-4); /* Centered, 16px bottom */
    border: 1.5px solid var(--rova-alternate); /* #E0E3E7 */
    border-radius: var(--rova-radius-md); /* 12px */
    background: var(--rova-accent2); /* #FAFAFA */
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--rova-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rova-step-success__auto-close-btn:hover {
    transform: scale(1.02);
    border-color: var(--rova-primary);
}

/* Progress overlay (animat 0 → 100% în 5s) */
.rova-step-success__progress-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(146, 29, 76, 0.7); /* 70% opacity - Match mobile */
    width: 0%; /* Start at 0% */
    transition: width 5s linear; /* 5 seconds animation */
    border-radius: inherit;
}

/* Countdown text (overlay pe progress) */
.rova-step-success__countdown-text {
    position: relative;
    z-index: 1;
    font-family: var(--rova-font-display); /* Inter */
    font-size: var(--rova-text-lg); /* 16px */
    font-weight: var(--rova-weight-semibold); /* 600 */
    color: var(--rova-primary); /* #921D4C */
}

/* Confetti animation */
.rova-step-success__confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.rova-step-success__confetti-piece {
    position: absolute;
    top: -20px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    animation: rova-confetti-fall 2s linear forwards;
}

@keyframes rova-confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(400px) rotate(720deg);
        opacity: 0;
    }
}

/* ==========================================================================
   PAYMENT
   ========================================================================== */

.rova-payment {
    padding: 20px 0;
}

.rova-payment__title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
    color: var(--rova-text);
}

.rova-payment__amount {
    margin: 0 0 24px;
    font-size: 15px;
    color: var(--rova-text-muted);
}

#rova-payment-element {
    margin-bottom: 24px;
}

.rova-payment__submit-btn {
    width: 100%;
    padding: 14px 24px;
    border: none;
    border-radius: var(--rova-radius);
    background: var(--rova-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--rova-transition), opacity var(--rova-transition);
}

.rova-payment__submit-btn:hover:not(:disabled) {
    background: var(--rova-primary-hover);
}

.rova-payment__submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rova-payment__error {
    margin-top: 16px;
    padding: 12px;
    background: rgba(220, 53, 69, 0.1);
    border-radius: var(--rova-radius-sm);
    color: var(--rova-danger);
    font-size: 13px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    /* Bottom Sheet pe Mobile */
    .rova-booking-modal {
        padding: 0;
        align-items: flex-end; /* Aliniază container-ul la bottom */
    }

    .rova-booking-modal__container {
        max-width: 100%;
        width: 100%;
        height: 80vh; /* Fix height - 80% din screen height */
        max-height: 80vh;
        border-radius: 24px 24px 0 0; /* Margini rotunjite doar la top */
        transform: translateY(100%); /* Start from bottom (off-screen) */
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); /* Shadow sus */
    }

    .rova-booking-modal--open .rova-booking-modal__container {
        transform: translateY(0); /* Slide up into view */
    }

    /* Content area cu scroll */
    .rova-booking-modal__content {
        height: calc(80vh - 80px); /* 80vh minus header height */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling pe iOS */
    }

    /* Adaptează grid-ul time slots pentru mobile */
    .rova-time-slots__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   MANDATORY SERVICE GROUPS (Step 2 - Extras)
   ========================================================================== */

.rova-step-extras__mandatory-container {
    padding: 12px;
    margin-bottom: 20px;
    background-color: var(--rova-bg);
    border-radius: 14px;
    border: 1.5px solid var(--rova-primary);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.rova-step-extras__mandatory-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--rova-primary);
    margin-bottom: 12px;
    padding-left: 4px;
    font-size: 14px;
}

.rova-step-extras__mandatory-title svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

.rova-step-extras__mandatory-list {
    /* Container for mandatory service groups */
}

/* Ensure optional container has proper spacing when both sections exist */
.rova-step-extras__mandatory-container + .rova-step-extras__extras-container {
    margin-top: 20px;
}

/* ==========================================================================
   SCHEDULE CONFLICT WARNING (Step 3 - DateTime)
   ========================================================================== */

.rova-conflict-warning {
    padding: 24px;
    text-align: center;
    background-color: var(--rova-bg);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.rova-conflict-warning__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: rgba(255, 152, 0, 0.1);
    color: #FF9800;
}

.rova-conflict-warning__icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2.5;
}

.rova-conflict-warning__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--rova-text);
    margin: 0 0 12px;
    line-height: 1.3;
}

.rova-conflict-warning__message {
    font-size: 14px;
    color: var(--rova-text-secondary);
    margin: 0 0 16px;
    line-height: 1.5;
}

.rova-conflict-warning__list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    text-align: left;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.rova-conflict-warning__list li {
    padding: 10px 16px;
    margin-bottom: 8px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.rova-conflict-warning__list li::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
}

.rova-conflict-warning__list--unavailable li {
    background-color: rgba(244, 67, 54, 0.1);
    color: #D32F2F;
}

.rova-conflict-warning__list--unavailable li::before {
    background-color: #D32F2F;
}

.rova-conflict-warning__list--available li {
    background-color: rgba(76, 175, 80, 0.1);
    color: #388E3C;
}

.rova-conflict-warning__list--available li::before {
    background-color: #388E3C;
}

.rova-conflict-warning__continue-btn,
.rova-conflict-warning__back-btn {
    width: 100%;
    max-width: 400px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 8px auto;
    display: block;
}

.rova-conflict-warning__continue-btn {
    background-color: var(--rova-primary);
    color: white;
}

.rova-conflict-warning__continue-btn:hover {
    background-color: var(--rova-primary-dark, #7a1a3c);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(146, 29, 76, 0.3);
}

.rova-conflict-warning__back-btn {
    background-color: transparent;
    color: var(--rova-text-secondary);
    border: 1.5px solid var(--rova-border);
}

.rova-conflict-warning__back-btn:hover {
    background-color: var(--rova-bg-secondary, #f5f5f5);
    border-color: var(--rova-text-secondary);
}

@media (max-width: 640px) {
    .rova-conflict-warning {
        padding: 20px 16px;
    }

    .rova-conflict-warning__title {
        font-size: 16px;
    }

    .rova-conflict-warning__message {
        font-size: 13px;
    }

    .rova-conflict-warning__list li {
        font-size: 13px;
        padding: 8px 12px;
    }
}
}

/* ============================================
   Multi-Day Event Range Styling (Match Flutter)
   ============================================ */

/* Single-day event: Full circle */
.rova-calendar__day--event-single {
    border-radius: 30px;
    background-color: var(--rova-theme-tertiary, #e8f4f8);
}

.rova-calendar__day--event-single.rova-calendar__day--selected {
    background-color: var(--rova-theme-primary, #4a90e2);
    color: white;
}

/* Multi-day event range: Connected visual */
.rova-calendar__day--event-range {
    background-color: var(--rova-theme-tertiary, #e8f4f8);
    margin: 2px 0; /* Vertical margin only */
}

.rova-calendar__day--event-range.rova-calendar__day--selected {
    background-color: var(--rova-theme-primary, #4a90e2);
    color: white;
}

/* Start day: Rounded left, straight right */
.rova-calendar__day--event-start {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-left: 2px;
    margin-right: 0;
}

/* Middle day: Straight on both sides */
.rova-calendar__day--event-middle {
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
}

/* End day: Straight left, rounded right */
.rova-calendar__day--event-end {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-left: 0;
    margin-right: 2px;
}

/* Borders for unselected event ranges (Flutter parity) */
.rova-calendar__day--event-range:not(.rova-calendar__day--selected) {
    border: 1px solid var(--rova-theme-alternate, #ddd);
}

/* Start day borders: top, left, bottom (no right) */
.rova-calendar__day--event-start:not(.rova-calendar__day--selected) {
    border-right: none;
}

/* Middle day borders: top, bottom only */
.rova-calendar__day--event-middle:not(.rova-calendar__day--selected) {
    border-left: none;
    border-right: none;
}

/* End day borders: top, right, bottom (no left) */
.rova-calendar__day--event-end:not(.rova-calendar__day--selected) {
    border-left: none;
}

/* Remove default day dot for event ranges (we use background instead) */
.rova-calendar__day--event-range .rova-calendar__day-dot,
.rova-calendar__day--event-single .rova-calendar__day-dot {
    display: none;
}

/* Text color for events */
.rova-calendar__day--event-range:not(.rova-calendar__day--selected) .rova-calendar__day-number,
.rova-calendar__day--event-single:not(.rova-calendar__day--selected) .rova-calendar__day-number {
    color: #000;
}

.rova-calendar__day--event-range.rova-calendar__day--selected .rova-calendar__day-number,
.rova-calendar__day--event-single.rova-calendar__day--selected .rova-calendar__day-number {
    color: white;
}