/* ========================================
VikAppointments - Design moderne et minimaliste
Palette: #C604BC, #2D3436, #FAFAFA, #008999
Typographie: Playfair Display / Raleway
======================================== */

/* === VARIABLES CSS === */
:root {
--primary-purple: #C604BC;
--dark-gray: #2D3436;
--light-gray: #FAFAFA;
--accent-teal: #008999;
--white: #FFFFFF;
--border-light: rgba(45, 52, 54, 0.08);
--border-medium: rgba(45, 52, 54, 0.12);
--shadow-subtle: 0 1px 3px rgba(45, 52, 54, 0.04);
--shadow-medium: 0 4px 12px rgba(45, 52, 54, 0.08);
--radius-small: 4px;
--radius-medium: 8px;
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;
}

/* === RESET & BASE === */
* {
box-sizing: border-box;
}

/* === TYPOGRAPHIE === */
.vapempnamediv a,
.vapseroptionsheader {
font-family: 'Playfair Display', serif;
}

body,
.vapempdescdiv,
.vapseroptname label,
input,
select,
textarea,
button {
font-family: 'Raleway', sans-serif;
}

/* === RATINGS STARS === */
.vap-rating-star {
width: 16px;
height: auto;
display: inline-block;
margin: 0 1px;
}

/* ========================================
CALENDRIER MODERNE - STYLE INSPIRÉ DE L'IMAGE
======================================== */
.vapcalendardiv {
    width: 100%;
    margin: 0.5rem 0;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 4px 20px rgba(45, 52, 54, 0.08);
}

.vapcaltable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* En-tête du calendrier */
.vaptheadcal {
    background: linear-gradient(135deg, var(--light-gray) 0%, #f1f3f4 100%);
}

.vaptheadcal td {
    padding: 1.5rem;
    text-align: center;
    font-weight: 700;
    color: var(--dark-gray);
    font-size: 1.1rem;
    border: none;
    position: relative;
}

/* Navigation du mois */
.vaptheadcal td:first-child {
    position: relative;
}

/* Jours de la semaine */
.vaptheadcal th {
    padding: 1rem;
    text-align: center;
    font-weight: 600;
    color: var(--dark-gray);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    background: var(--white);
    opacity: 0.7;
}

/* Corps du calendrier */
.vaptbodycal td {
    height: 60px;
    text-align: center;
    border: none;
    padding: 4px;
    transition: all 0.2s ease;
    position: relative;
    /*border-radius: 50%;*/
}

.vaptbodycal td.vaptdgreen a {
    color: var(--vap-calendar-available-color) !important;
}

/*.vaptbodycal td.vaptdgreen a:hover {
    background-color: #c604bc !important;
    color: #ffffff !important;
    border-radius: 50%;
}*/

.vaptdday {
    background: transparent;
    cursor: pointer;
    position: relative;
}

.vaptdday a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto;
    text-decoration: none;
    color: var(--dark-gray);
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Effet d'élévation au survol pour les jours disponibles */
.vaptdday:not(.vaptdgrey):hover a, .vaptdday:not(.vaptdgrey):active a, .vaptbodycal td.vaptdselected a {
    transform: translateY(-2px);
    /*box-shadow: 0 4px 12px rgba(198, 4, 188, 0.2);*/
	background-color: #c604bc !important;
    color: #ffffff !important;
    border-radius: 50%;
}

/* Pas d'effet au survol pour les jours indisponibles */
.vaptdday .vaptdgrey:hover a {
    transform: translateY(0px);
    box-shadow: none;
	background-color: #ffffff !important;
    color: var(--vap-calendar-selected-color) !important;
}

/* Jour aujourd'hui */
.vaptdtoday a {
    position: relative;
}

.vaptdtoday a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-teal);
}

/* ========================================
TIMELINE MODERNE - STYLE GRILLE
======================================== */
.vaptimeline {
    margin: 2rem 0;
    padding: 0;
}

.vaptimelinewt {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 0;
}

.vaptimelinewt > * {
  grid-column: span 1;
}

/* Reset du style existant pour les blocs timeline */
.vaptimeline .ratesgrid .vap-timeline-itemdate i,
.vaptimeline .ratesgrid .vap-timeline-itemseats i {
    /*display: inline-block;*/
    color: var(--accent-teal);
    font-size: 0.875rem;
    margin-right: 0.25rem;
    display: none;
}

/* Bloc de créneau horaire moderne */
.vap-timeline-block {
    background: var(--white);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    padding: 1rem;
    margin: 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    font-weight: 550;
}

.vaptimeline .vap-timeline-itemdate {
    font-size: 0.85rem;
}

/* Reset des anciens styles */
.vaptimeline .ratesgrid.vaptlblock0,
.vaptimeline .ratesgrid.vaptlblock1,
.vaptimeline .ratesgrid.vaptlblock2 {
    background: var(--white);
    box-shadow: 0 4px 12px rgba(45, 52, 54, 0.06);
    padding: 1rem;
    margin: 0;
}

/* Effet de survol pour créneaux disponibles */
.vaptlblock1:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(198, 4, 188, 0.15);
    border-color: var(--primary-purple);
}

/* Styles pour les prix */
.vaptimeline .ratesgrid .vap-timeline-itemprice,
.vaptimeline .ratesgrid .vap-timeline-itemseats {
    padding: 0;
    background: none;
    color: #c8c8c8;
    border-radius: 0;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    text-align: center;
    font-weight: 500;
    opacity: 0.8;
    font-size: 0.8rem;
}

/* Contenu du créneau */
.vap-timeline-itemdate {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dark-gray);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.vaptimeline .ratesgrid.vaptlblock2 .vap-timeline-itemdate, .vaptimelinewt a:hover .vap-timeline-itemdate {
    background-color: transparent !important;
}

.vaptimeline .ratesgrid.vaptlblock1.vaptimeselected .vap-timeline-itemdate {
    background-color: transparent !important;
    color: #eaebeb !important;
}

.vapdivday {
    font-size: 14px;
}

.vaptimeline .ratesgrid .vap-timeline-itemdate {
    padding: 0;
}

/* Créneaux avec tarifs spéciaux */
.vap-timeline-block[data-rate="4000"] {
    position: relative;
}

.vap-timeline-block[data-rate="4000"]::before {
    content: "★";
    position: absolute;
    top: 6px;
    right: 8px;
    color: #ffc107;
    font-size: 0.75rem;
}

/* ========================================
DÉTAILS DES SERVICES
======================================== */
/* Container principal */
.vapempblock {
background: var(--white);
border: 1px solid var(--border-light);
margin: var(--spacing-lg) 0;
transition: all 0.3s ease;
overflow: hidden;
box-shadow: none;
}

.vapempblock:hover {
border-color: var(--border-medium);
box-shadow: var(--shadow-medium);
}

/* Image */
.vapempallblocks .vapempinfoblock .vapempimgdiv {
position: relative;
height: 100px;
overflow: hidden;
background: var(--light-gray);
border-radius: 10px;
border: 1px solid #c604bc;
}

.vapempimgdiv img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}

.vapempimgdiv:hover img {
transform: scale(1.02);
}

@media (max-width: 680px) {
.vapempallblocks .vapempinfoblock .vapempimgdiv img {
border-radius: 10px;
height: 80px;
object-fit: cover;
}
.vapempallblocks .vapempinfoblock .vapempimgdiv {
margin-right: 20px;
height: 80px;
}
}

.vapempimgdiv {
max-width: 150px;
}

/* Contenu principal */
.vap-empmain-block {
padding: var(--spacing-lg);
}

/* En-tête du service */
.vap-empheader-div {
margin-bottom: var(--spacing-md);
}

.vapempnamediv {
margin-bottom: 1rem;
}

.vapempnamediv a {
font-size: 1.5rem;
color: var(--dark-gray);
text-decoration: none;
font-weight: 500;
line-height: 1.2;
display: block;
transition: color 0.2s ease;
}

.vapempnamediv a:hover {
color: var(--primary-purple);
}

/* Description */
.vapempdescdiv {
line-height: 1.2;
font-size: 0.85rem;
margin: 0;
}

.vapempdescdiv b {
font-weight: 600;
color: var(--dark-gray);
}

.vapempdescdiv i {
color: var(--accent-teal);
margin-right: var(--spacing-xs);
width: 16px;
}

/* Pied du service */
.vapempcontactdiv {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--border-light);
gap: var(--spacing-sm);
}

/* Boîtes d'information */
.vap-price-info-box {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-sm);
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-small);
font-size: 0.875rem;
font-weight: 500;
transition: border-color 0.2s ease;
}

.vap-price-info-box:hover {
border-color: var(--border-medium);
}

.vap-price-info-box i {
color: var(--accent-teal);
font-size: 0.875rem;
}

.vapempquickcontsp a {
color: var(--dark-gray);
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
}

.vapempquickcontsp a:hover {
color: var(--primary-purple);
}

/* ========================================
SÉLECTEUR DE MOIS MODERNE
======================================== */
.vapmonthselect {
    margin: 1rem 0 0 0;
    text-align: center;
}

.vapmonthselect .select2-container {
    min-width: 180px;
}

.vapmonthselect .select2-choice {
    background: var(--white) !important;
    border: 2px solid var(--border-light) !important;
    border-radius: 10px !important;
    height: 44px !important;
    line-height: 40px !important;
    font-weight: 600 !important;
    color: var(--dark-gray) !important;
    transition: all 0.2s ease !important;
}

.vapmonthselect .select2-choice:hover {
    border-color: var(--primary-purple) !important;
}

/* ========================================
FILTRES COMMUNE
======================================== */
.vap-filterbar-group {
    margin-bottom: 2rem;
    background: var(--white);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(45, 52, 54, 0.06);
}

.vap-filterbar-label label {
    font-weight: 600;
    color: var(--dark-gray);
    margin-bottom: 0.75rem;
    display: block;
    font-size: 0.95rem;
}

.vap-filterbar-control select {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid var(--border-light);
    border-radius: 10px;
    background: var(--white);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--dark-gray);
    transition: all 0.2s ease;
}

.vap-filterbar-control select:focus {
    outline: none;
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 3px rgba(198, 4, 188, 0.1);
}

/* ========================================
OPTIONS
======================================== */
.vapseroptionscont {
margin: var(--spacing-lg) 0;
border: 0;
}

.vapseroptionsheader {
font-size: 1.2rem;
color: var(--dark-gray);
margin-bottom: var(--spacing-lg);
text-align: left;
font-weight: 600;
border: 0;
padding: var(--spacing-lg);
text-transform: none;
}

.vapseroptionsdiv div:not(.select2-container) {
margin: 0 0 20px 0;
padding: 10px;
}

.vapseroptionsdiv {
border: 0;
}

.vapsersingoption {
background: var(--white);
border: 1px solid #e1e1e1;
border-radius: var(--radius-medium);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-md);
transition: all 0.2s ease;
}

.vapsersingoption:hover {
border-color: var(--primary-purple);
box-shadow: var(--shadow-medium);
}

.vapseroptrow {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--spacing-md);
align-items: center;
}

.vapseroptimage img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: var(--radius-small);
border: 0;
}

.vapseroptionsdiv .vapseroptname {
min-width: 35%;
max-width: 40%;
}

.vapseroptname label {
font-size: 1rem;
font-weight: 500;
color: var(--dark-gray);
line-height: 1.4;
cursor: pointer;
margin: 0;
}

.vapseroptprice,
.vapseroptduration {
font-weight: 600;
color: var(--dark-gray);
font-size: 0.95rem;
text-align: right;
}

.vapseroptact {
display: flex;
justify-content: flex-end;
margin-top: var(--spacing-sm);
}

.vapseroptact input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--primary-purple);
}

/* Variations select */
.vapseropt-variations {
grid-column: 1 / -1;
margin-top: var(--spacing-sm);
}

.select2-container > .select2-choice {
background: var(--white) !important;
background-image: none !important;
border: 1px solid var(--border-light) !important;
border-radius: var(--radius-small) !important;
height: 40px !important;
line-height: 40px !important;
padding: 0 var(--spacing-sm);
}

.select2-container > .select2-choice .select2-arrow {
background: transparent !important;
border: none !important;
}

.select2-drop-active {
border: 1px solid var(--primary-purple) !important;
}

.select2-results .select2-highlighted {
background: var(--primary-purple) !important;
color: var(--white);
}

/* ========================================
FORMULAIRES
======================================== */
.vapqcdiv {
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-medium);
padding: var(--spacing-lg);
margin: var(--spacing-lg) 0;
}

.vapqcnominative {
font-size: 1.25rem;
color: var(--dark-gray);
font-weight: 600;
text-align: center;
margin-bottom: var(--spacing-lg);
}

.vapqcdiv label {
display: block;
margin-bottom: var(--spacing-xs);
font-weight: 500;
color: var(--dark-gray);
}

.vapqcdiv input,
.vapqcdiv textarea,
.vapqcdiv select {
width: 100%;
padding: var(--spacing-sm);
border: 1px solid var(--border-light);
border-radius: var(--radius-small);
font-size: 0.95rem;
transition: border-color 0.2s ease;
margin-bottom: var(--spacing-md);
}

.vapqcdiv input:focus,
.vapqcdiv textarea:focus,
.vapqcdiv select:focus {
outline: none;
border-color: var(--primary-purple);
}

/* ========================================
BOUTONS
======================================== */
.vap-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-sm) var(--spacing-lg);
border: none;
border-radius: var(--radius-small);
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
font-size: 0.95rem;
gap: var(--spacing-xs);
}

.vap-btn.blue {
background: var(--accent-teal);
color: var(--white);
  padding: 1.1rem;
}

.vap-btn.blue:hover {
background: #007080;
transform: translateY(-1px);
}

.vap-btn.green {
background: var(--primary-purple);
color: var(--white);
}

.vap-btn.green:hover {
background: #a5039c;
transform: translateY(-1px);
}

.vap-btn.dark-gray {
background: var(--dark-gray);
color: var(--white);
}

.vap-btn.dark-gray:hover {
background: #1a1d1f;
}

/* ========================================
RÉCURRENCE
======================================== */
.vaprecurrencediv {
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-medium);
padding: var(--spacing-lg);
margin: var(--spacing-lg) 0;
}

.vaprecurrenceprediv label {
font-weight: 500;
color: var(--dark-gray);
cursor: pointer;
}

.vaprecurrencenextdiv {
margin-top: var(--spacing-md);
padding-top: var(--spacing-md);
border-top: 1px solid var(--border-light);
}

.recurrence-repeat-box,
.recurrence-for-box {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
}

@media (max-width: 768px) {
.recurrence-repeat-box,
.recurrence-for-box {
display: block;
}
}

/* ========================================
PANIER (MODULE)
======================================== */
.vapmaincartmod {
	background: transparent;
    border: 0;
	border-radius: var(--radius-medium);
	overflow: hidden;
}

.vapmodcartitemdiv {
border-bottom: 1px solid var(--border-light);
padding: 10px 20px;
}

.vapmodcartitemboxdialog {
    margin: 10px 0 10px 0px !important;
    border: 1px solid #c604bc !important;
    background: transparent !important;
    font-size: 0.75rem !important;
    padding: 15px !important;
}

.vapmodcartitemleft {
padding: 0;
}

.vapmodcartitemname {
font-weight: 600;
color: var(--dark-gray);
font-size: 0.95rem;
}

.vapmodcartitemname i {
color: var(--accent-teal);
margin-right: var(--spacing-xs);
}

.vapmodcartitemright {
padding: 8px 0;
text-align: right;
font-weight: 600;
color: var(--dark-gray);
}

.vapmodcartinneritemscont {
background: transparent;
padding: 0;
}

.vapmodcartinneritemdiv {
background: transparent;
border-radius: var(--radius-small);
margin-bottom: var(--spacing-sm);
padding: 0;
}

.vapmodcartpricediv {
background: transparent;
padding: var(--spacing-md);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600 !important;
color: #c604bc !important;
font-size: 16px !important;
}

.vapmodcartbotactdiv {
padding: var(--spacing-md);
display: flex;
gap: var(--spacing-sm);
}

.vapmodcartbotactdiv .vap-btn {
flex: 1;
}

/* ========================================
CHECKOUT / VALIDATION
======================================== */
.vap-checkout-bar {
margin: 0;
text-align: center;
}
.vap-checkout-bar .vapbookbuttoninnerdiv.additem button.vap-btn.blue, #vappayform #vapcontinuebutton {
    background-color: #008999 !important;
}
.vapbookbuttondiv {
border-radius: var(--radius-medium);
padding: var(--spacing-lg);
}

.vapbookbuttoninnerdiv {
margin-bottom: var(--spacing-md);
}

.vapbookbuttoninnerdiv:last-child {
margin-bottom: 0;
}

.vapbookbuttoninnerdiv .vap-btn {
width: 100%;
padding: var(--spacing-md) var(--spacing-lg);
font-size: 1rem;
}

/* ========================================
MODAL & OVERLAYS
======================================== */
.vap-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(45, 52, 54, 0.5);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
}

.vap-modal-box {
background: var(--white);
border-radius: var(--radius-medium);
max-width: 90vw;
max-height: 90vh;
overflow: hidden;
box-shadow: 0 20px 60px rgba(45, 52, 54, 0.3);
}

.vap-modal-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-lg);
border-bottom: 1px solid var(--border-light);
background: var(--light-gray);
}

.vap-modal-head-title h3 {
margin: 0;
font-weight: 600;
color: var(--dark-gray);
}

.vap-modal-head-dismiss a {
font-size: 1.5rem;
color: var(--dark-gray);
text-decoration: none;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.2s ease;
}

.vap-modal-head-dismiss a:hover {
background: rgba(45, 52, 54, 0.1);
}

.vap-modal-body {
padding: var(--spacing-lg);
}

/* ========================================
MESSAGE D'ERREUR TIMELINE
======================================== */
.vaptimeline .timeline-error {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: none;
    border-left: 4px solid #f39c12;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    font-size: 0.9rem;
    color: #856404;
    text-align: center;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.1);
}

/* ========================================
MASQUAGE D'ÉLÉMENTS
======================================== */
.cf-control input[name="vapcf13"],
.cf-control label[for="vapcf13"],
.cf-control #vapcf13-label,
.cf-control input[name="vapcf13"] + .cf-value,
.cf-control[data-field="vapcf13"] {
  /*display: none !important;*/
  margin-top: 5px;
}

.cf-control:has(input[name="vapcf13"]) {
display: none !important;
}

/***MASQUER LE BOUTON CONTINUER SUR LA BOUTIQUE***/
.vapcontinueshopdiv {
display: none;
}

/***DESCRIPTION DE SERVICES SUR VUE EMPLOYEE***/
#vapempsearchform .vapserdescriptiondiv {
margin: 10px 0 0;
padding: 1.5rem;
background: #fff;
font-size: 90%;
}

#vapempsearchform .vapserdescriptiondiv .fa-solid, #vapempsearchform .vapserdescriptiondiv .fas {
font-weight: 900;
margin-top: 10px;
font-size: 100%;
color: #969a9b;
margin-right: 0.5rem;
}

/***PAS D'iMAGES POUR LES PAGES DE RESERVATION DE SERVICES***/
.vapempblock.image-banner .vapempinfoblock .vapempimgdiv {
display: none;
}

/* ========================================
RESPONSIVE DESIGN
======================================== */
@media (max-width: 768px) {
:root {
--spacing-xs: 0.25rem;
--spacing-sm: 0.75rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
}

/* Calendrier mobile */
.vaptbodycal td {
    height: 50px;
    padding: 2px;
}

.vaptdday a {
    width: 40px;
    height: 40px;
    font-size: 0.875rem;
    border-radius: 10px;
}

.vaptheadcal td {
    padding: 1rem;
    font-size: 1rem;
}

.vaptheadcal th {
    padding: 0.75rem 0.5rem;
    font-size: 0.8rem;
}

/* Timeline mobile */
.vaptimelinewt {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.vap-timeline-block {
    padding: 0.75rem;
    min-height: 70px;
    border-radius: 10px;
}

.vap-timeline-itemdate {
    font-size: 0.875rem;
}

.vap-timeline-itemprice {
    font-size: 0.8rem;
}

.vapempimgdiv {
height: 220px;
}

.vap-empmain-block {
padding: var(--spacing-md);
}

.vapempnamediv a {
font-size: 1.5rem;
}

.vapempcontactdiv {
flex-direction: column;
gap: var(--spacing-sm);
padding: var(--spacing-md);
}

.vap-price-info-box {
width: 100%;
justify-content: center;
}

.vapseroptrow {
display: grid !important;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"image name checkbox"
"duration price .";
gap: var(--spacing-sm);
align-items: center;
}

.vapseroptimage {
grid-area: image;
align-self: center;
}

.vapseroptname {
grid-area: name;
min-width: unset !important;
max-width: unset !important;
align-self: center;
}

.vapseroptact {
grid-area: checkbox;
margin-top: 0 !important;
padding-top: 0 !important;
border-top: none !important;
align-self: center;
justify-self: end;
}

.vapseroptduration {
grid-area: duration !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
text-align: left !important;
color: var(--accent-teal) !important;
justify-self: start;
}

.vapseroptprice {
grid-area: price !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
text-align: left !important;
color: var(--primary-purple) !important;
justify-self: start;
}

.vapsersingoption {
padding: var(--spacing-md);
}

.vapseroptimage img {
width: 50px;
height: 50px;
}

.vapseroptionsdiv .vapseroptname {
min-width: 75%;
max-width: 100%;
}

.recurrence-repeat-box,
.recurrence-for-box {
flex-direction: column;
align-items: stretch;
gap: var(--spacing-xs);
}

.vapmodcartbotactdiv {
flex-direction: column;
}
}

@media (max-width: 480px) {
/* Timeline très petit écran */
.vaptimelinewt {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.vap-timeline-block {
    padding: 0.6rem;
    min-height: 60px;
    border-radius: 8px;
}

.vaptdday a {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
}

.vaptheadcal td {
    padding: 0.75rem;
    font-size: 0.95rem;
}

.vapempnamediv a {
font-size: 1.25rem;
}

.vapseroptionsheader {
font-size: 1.25rem;
}

.vap-timeline-itemdate {
font-size: 100%;
}

.vapseroptrow {
grid-template-columns: auto 1fr auto;
grid-template-areas:
"image name checkbox"
"duration price .";
gap: var(--spacing-xs);
}

.vapseroptname label {
font-size: 0.925rem;
line-height: 1.3;
}

.vapseroptimage img {
width: 45px;
height: 45px;
}

.vapseroptduration,
.vapseroptprice {
font-size: 0.85rem !important;
}
}

/* ========================================
AMÉLIORATIONS UX SPÉCIFIQUES
======================================== */
/* Focus states améliorés */
input:focus,
textarea:focus,
select:focus,
.vap-btn:focus,
.vap-timeline-block:focus,
.vaptdday a:focus {
outline: 3px solid var(--primary-purple);
outline-offset: 2px;
}

/* États de loading */
.vap-btn.loading {
opacity: 0.7;
pointer-events: none;
}

.vap-btn.loading::after {
content: '';
width: 16px;
height: 16px;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: var(--spacing-xs);
}

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

/* Animations */
@keyframes pulse-selection {
    0% { box-shadow: 0 6px 20px rgba(198, 4, 188, 0.4); }
    50% { box-shadow: 0 8px 25px rgba(198, 4, 188, 0.6); }
    100% { box-shadow: 0 6px 20px rgba(198, 4, 188, 0.4); }
}

/* Amélioration de l'accessibilité */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}

/* États de succès/erreur plus visibles */
.success-state {
border-color: var(--accent-teal) !important;
background: rgba(0, 137, 153, 0.05) !important;
}

.error-state {
border-color: #dc3545 !important;
background: rgba(220, 53, 69, 0.05) !important;
}

/* Feedback tactile pour mobile */
@media (max-width: 768px) {
.vap-timeline-block:active,
.vaptdday:active a {
transform: scale(0.95);
}

.vapseroptact input[type="checkbox"] {
width: 22px;
height: 22px;
margin: 0;
}

.vapseroptname label {
padding: var(--spacing-xs) 0;
display: block;
cursor: pointer;
-webkit-tap-highlight-color: rgba(198, 4, 188, 0.1);
}
}

/* Transition douce pour les changements d'état */
.vap-timeline-block,
.vaptdday a {
will-change: transform, box-shadow;
}

/* Indicateur de disponibilité */
.vaptdday:not(.vaptdgrey) a::before {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-teal);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.vaptdday:not(.vaptdgrey):hover a::before {
    opacity: 1;
}

/* ========================================
VUE CONFIRMAPP - STYLE MINIMALISTE
======================================== */

.vapcartinneritemdiv {
    background-color: #fff;
}
.vapcartitemboxdialog {
    margin: 20px 0 3px;
    line-height: 1.6em;
    padding: 15px;
    border: 1px solid #c604bc;
    background-color: #fafafa;
}

.vapcartitemboxdetails {
    font-weight: bold;
    margin-bottom: 8px;
}
.vapcartinneritemscont .vapcartinneritemdiv .vapcartinitemupright .vapcartitemprice {
    margin-right: 10px;
    margin-top: 8px;
    font-size: 85%;
}
.vapsummarycont {
    margin: 2rem 0 2rem 0;
    border: 1px solid var(--border-light);
    background: #fff;
}
.vapsummarycont:hover {
    border-color: var(--border-medium);
    box-shadow: var(--shadow-medium);
}
.vapsummaryservicescont .vapcartitemdiv:last-child, .vapsummaryservicescont .vapcartitemdiv, .vap-cart-summary-gtotal {
    border: 0;
}

.vapsummaryoptionsheadtitle, .vapcompleteorderheadtitle {
    margin: 0 0 15px 15px;
}
.vap-cart-summary-gtotal {
    border-top: 1px solid #ddd !important;
    padding: 20px;
}

.vapcompleteorderdiv {
    background: #fff;
    border: 1px solid var(--border-light);
    margin-bottom: 2rem;
    box-shadow: none;
}
.vapcompleteorderdiv:hover {
    border-color: var(--border-medium);
    box-shadow: var(--shadow-medium);
    margin-bottom: 2rem;
}
h3.vap-confirmapp-h3 {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 2rem;
}
.vapcustomfields > div {
    margin: 15px;
}
.select2-container-multi .select2-choices .select2-search-choice {
    background-color: #008999 !important;
    border-color: #008999 !important;
}
a.vapcartexplink, a.vapcartitemexp, .vapsummarycont span, .vapmodcartitemdetlink {
    color: #2d3436 !important;
}
.vapmodcartitemdetlink {
    font-size: 0.8rem !important;
}
.vapmodcartitemscont {
    padding: 15px;
    margin: 0;
}

.vap-payment-description .vap-payment-wrapper i {
    margin: 2px 5px 0 3px !important;
}
/* ========================================
RÉCURRENCE - MISE EN VALEUR MARKETING
======================================== */

.vaprecurrencediv {
    /*background: linear-gradient(135deg, var(--white) 0%, rgba(198, 4, 188, 0.02) 100%);*/
    border: 1px solid #eee;
    background-clip: padding-box;
    border-radius: 12px;
    padding: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    /*box-shadow: 0 4px 20px rgba(198, 4, 188, 0.08);*/
}

/*.vaprecurrencediv::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-purple), var(--accent-teal));
    z-index: -1;
    border-radius: 12px;
    padding: 2px;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask-composite: xor;
}*/

.vaprecurrencediv:hover {
    transform: translateY(-2px);
    /*box-shadow: 0 8px 30px rgba(198, 4, 188, 0.15);*/
    border: 3px solid #c604bc;
}

/* Badge "Populaire" en coin */
.vaprecurrencediv::after {
    content: 'Populaire';
    position: absolute;
    top: 1.3rem;
    right: 1.5rem;
    background: linear-gradient(135deg, var(--primary-purple), #e91e63);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(198, 4, 188, 0.3);
    animation: gentle-pulse 2s ease-in-out infinite;
}

@keyframes gentle-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Styling du contenu */
.vaprecurrenceprediv {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin: 0;
}

.vaprecurrenceprediv input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin: 4px 0 0 0;
    cursor: pointer;
    accent-color: var(--primary-purple);
    transform: scale(1.2);
    flex-shrink: 0;
}

.vaprecurrenceprediv label {
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--dark-gray);
    cursor: pointer;
    margin: 0;
    flex: 1;
}

/* Texte principal en gras */
.recurrence-main-text {
    font-weight: 600;
    color: var(--dark-gray);
    display: block;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

/* Sous-texte avec style différencié */
.recurrence-sub-text {
    font-size: 0.9rem;
    color: var(--accent-teal);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Séparateurs visuels pour les avantages */
.recurrence-benefit {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: rgba(0, 137, 153, 0.1);
    border-radius: 12px;
    font-size: 0.85rem;
    margin: 2px;
}

.recurrence-benefit::before {
    content: '✓';
    color: var(--accent-teal);
    font-weight: bold;
    margin-right: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .vaprecurrencediv {
        padding: var(--spacing-lg);
        margin: var(--spacing-lg) 0;
    }
    
    .vaprecurrencediv::after {
        font-size: 0.7rem;
        padding: 4px 8px;
        right: 10px;
    }
    
    .vaprecurrenceprediv {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .vaprecurrenceprediv input[type="checkbox"] {
        margin: 0;
    }
    
    .recurrence-sub-text {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}
/* Version minimaliste - juste l'essentiel */
.vapempdescdiv {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
}

.vapempdescdiv b {
    display: block;
    margin-bottom: 0px;
}

.vapempdescdiv i {
    width: 18px;
    margin-top: 4px;
}
/*** ONGLETS CONFIRMATION***/
.vaploginradiobox .vaploginradiosp
 {
    margin: 10px 15px 10px 0;
    background: #ffffff;
    border: 1px solid #ccc;
    padding: 15px 20px;
    border-radius: 2px;
    cursor: pointer;
    float: left;
    display: inline-block;
    text-transform: uppercase;
}
.vaploginblock, .vapregisterblock {
    background: #fff;
}
vaploginfieldsdiv .vaploginfield {
    margin: 8px 0;
}
.vap-login-footer-links {
    font-size: 70%;
    margin: 20px 0;
}
.vaploginblock h3, .vapregisterblock h3 {
    margin: 0 0 5px 0;
    font-size: 130%;
}
.vap-allorders-userright a.vap-btn.blue, .vap-allorders-userright a.vap-btn {
    background-color: var(--vap-button-primary-background) !important;
    color: var(--vap-button-primary-color) !important;
    padding: 1rem;
    margin: 10px;
}
.vapcustomfields .cf-value input:not([type="checkbox"]), .vapcustomfields .cf-value textarea, .vapcustomfields .cf-control.select select, .vap-packconf-custfields .cf-value input:not([type="checkbox"]), .vap-packconf-custfields .cf-value textarea, .vap-packconf-custfields .cf-control.select select {
    padding: 10px;
    background: #fafafa;
    border: 1px solid #c604bc;
	border-radius: 5px;
}
/***USER PROFILE***/
.vap-userprofile-field label[for=billing-state], .vap-userprofile-field-control input#billing-state,
.vap-userprofile-field label[for=billing-address-2], .vap-userprofile-field-control input#billing-address-2,
.vap-userprofile-field label[for=billing-zip], .vap-userprofile-field-control input#billing-zip,
.vap-userprofile-field label[for=billing-vatnum], .vap-userprofile-field-control input#billing-vatnum,
.vap-userprofile-field label[for=billing-ssn], .vap-userprofile-field-control input#billing-ssn
{
    display: none;
}
button[data-role="userprofile.save"] {
  display: none;
}
.vap-userprofile-toolbar > div {
    display: inline-block;
    margin: 0 0 20px 20px;
}
.view-employeesearch .vapserviceselect, .view-employeesearch .vapemployeeselect, .view-employeesearch .vapmonthselect {
    display: block;
    width: 100%;
}
.view-employeesearch .vapemployeeselect .select2-container {
    width: 100% !important;
}

/* ========================================
PAGE RÉVISION COMMANDE - VIKAPPOINTMENTS (Version légère)
Améliorations visuelles sans casser la mise en page
======================================== */

/* === AMÉLIORATIONS CONTENEUR PRINCIPAL === */
.vaporderpagediv {
  box-shadow: none;
  border-radius: 8px;
  overflow: hidden;
  background: TRANSPARENT;
}

/* === EN-TÊTE AMÉLIORÉ === */
.vap-order-first {
  border-bottom: 1px solid rgba(45, 52, 54, 0.08);
}

.vaporderheader.vap-head-first {
  font-family: 'Playfair Display', serif;
  color: #2D3436;
  font-weight: 600;
}

/* === BOUTON PRINT STYLISÉ === */
.vap-printable a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #FFFFFF;
  border: 1px solid rgba(45, 52, 54, 0.12);
  border-radius: 4px;
  color: #2D3436;
  text-decoration: none;
  transition: all 0.2s ease;
}

.vap-printable a:hover {
  background: #C604BC;
  color: #FFFFFF;
  border-color: #C604BC;
}

/* === AMÉLIORATION DES INFORMATIONS === */
.vaporderinfo-lbl {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  color: #2D3436;
  font-size: 0.9rem;
}

.vaporderinfo-value {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  color: #2D3436;
  font-size: 0.9rem;
}

/* === STATUT AMÉLIORÉ === */
.vaporderinfo-value b[style*="color: #ffb900"] {
  background: rgba(255, 185, 0, 0.1) !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.5px !important;
}

/* === COUNTDOWN AMÉLIORÉ === */
.vap-order-countdown {
  background: #008999 !important;
  color: #FFFFFF !important;
  padding: 12px 16px !important;
  border-radius: 4px !important;
  text-align: center !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  margin-top: 16px !important;
}

/* === TITRES SECTIONS === */
.vapordercontentinfoleft .vaporderheader, .vaporderheader.vap-head-first {
  font-family: 'Playfair Display', serif;
  color: #2D3436;
  font-weight: 600;
  font-size: 1.2rem;
  border-bottom: 1px solid #C604BC;
  padding-bottom: 8px;
  margin-bottom: 16px;
}

/* === SÉPARATEURS SUBTILS === */
.vaporderinfo {
  border-bottom: 1px solid rgba(45, 52, 54, 0.06);
  padding: 8px 0;
}

.vaporderinfo:last-child {
  border-bottom: none;
}

/* === HOVER EFFECTS SUBTILS === */
.vaporderinfo:hover {
  background: rgba(198, 4, 188, 0.02);
  transition: background 0.2s ease;
}

/* === RESPONSIVE UNIQUEMENT POUR MOBILES === */
@media (max-width: 768px) {
  .vaporderinfo-lbl {
    font-weight: 600;
    margin-bottom: 4px;
  }
  
  .vaporderheader.vap-head-first {
    font-size: 1.25rem;
  }
  
  .vap-order-countdown {
    font-size: 0.875rem !important;
    padding: 10px 12px !important;
  }
}

/* === FOCUS POUR ACCESSIBILITÉ === */
.vap-printable a:focus {
  outline: 2px solid #C604BC;
  outline-offset: 2px;
}

.vaporderboxcontent {
    background: #ffffff;
}
/***TITRE LANGUE MES RESERVATIONS**/
span.vapsubordertitle {
    margin: 15px 0 15px 0;
    color: #C604BC;
    font-size: smaller;
}
.vap-allorders-tinylist .list-order-bar .order-purchase .purchase-price {
    color: #c604bc;
}
.vap-allorders-tinylist .list-order-bar {
    padding: 25px 0;
    border-bottom: 1px solid #e1e1e1;
}
/***ESPACE DJOSSEUR***/

#employee button
 {
    color: #c604bc !important;
}
#employee a.vapmodal {
    color: #ccc;
}

.vap-accountstat-toolbar .vap-accountstat-search {
    width: 255px;
}
button[role="tab"][aria-controls="settings_zip"] {
  display: none !important;
}

li[data-id="locwdays"] {
    display: none !important;
}
.vap-allorders-column.wday-location {
    display: none !important;
}
.vap-allorders-column a {
    color: #2d3436;
    text-decoration: underline;
}
.vap-emparea-navform joomla-tab-element .options-form {
    background: #fff;
}
label[for="vap-qc-checkbox"],
#vap-qc-checkbox {
    display: none !important;
}

/* Masquer aussi le div parent pour éviter l'espace vide */
label[for="vap-qc-checkbox"]:closest(.control-group) {
    display: none !important;
}

.control-group:has(input[name="nickname"]) {
  display: none !important;
}

button[data-action="empsettings.saveclose"] {
  display: none !important;
}

#s2id_vap-group-sel {
  display: none;
}
#s2id_vap-group-sel,
#s2id_vap-group-sel select,
#s2id_vap-group-sel .select2-container {
  display: none;
}
.vap-account-stat .customers-list {
    display: none;
}
.vap-account-stat .account-summary {
    margin-bottom: 20px;
}
#empareaForm .vaptdyellow {
    background-color: #ffdc80 !important;
}
#empareaForm .vaptdgrey {
    background-color: #e1e1e1 !important;
}
#empareaForm .vaptdred {
    background-color: #bc544b !important;
}
#empareaForm .vaptdgreen  {
    background-color: #fafafa !important;
}

.view-emplogin #sp-main-body {
    padding: 40px 0;
}

.view-emplogin .vaptimelinewt, .view-emplogin .vapserselectsp #s2id_vap-service-sel {
    display: none;
}

/***Masquer les préférences de réglage***/
button[aria-controls="settings_global"][role="tab"][type="button"][tabindex="0"], button[aria-controls="settings_global"][role="tab"][type="button"][tabindex="0"][aria-selected="true"], button[aria-controls="settings_global"][role="tab"][type="button"][tabindex="0"][aria-selected="false"], joomla-tab-element#settings_global
 {
    display: none;
}


/***MODULE***/
.vamodservices-divblock {
    min-height: 80px;
}
/* Select2 OnDjossi - Style court */
/* Select2 OnDjossi - Style complet */

.vapemployeeselect .select2-choice:hover {
    border-color: #C604BC;
    box-shadow: 0 2px 4px rgba(198, 4, 188, 0.6);
}

/***EDITION PROFIL***/
label[for=vapshophonebox] {
  display: none;
}
input#vapshophonebox {
    display: none;
}
button.tox-tbtn.tox-tbtn--select {
    display: none;
}

/***DESC SERVICE***/
.image-banner .vapempdescdiv i {
    margin-top: 15px;
}
.image-banner .vapempdescdiv b {
    display: inline;
}

/***LATITUDE / LONGITUDE ***/
@media (max-width: 768px) {
  .vaorderboxright {
    display: inline-block;
    width: calc(50% - 3px);
    display: none;
}
  }
/**longitude**/
.vapcustomfields .cf-label label#vapcf40-label, .vapcustomfields .cf-value input#vapcf40 {
     display: none;
}

/***confirmation summary***/
.vaporderboxleft {
    padding-right: 20px;
}
.vap-payments-list .vap-payment-title-label span {
    display: none;
}

/***MODULE DJOSSEURS***/
.vamodemployees-divblock {
    text-align: center !important;
}

/**BON DE REDUCTION***/
.vapheading3 {
    margin: 0 0 10px !important;
    padding: 0 !important;
    color: #2a2a2a;
    font-size: 18px;
    display: inline-block;
}

.vapcouponcodediv .vapcouponcodetext {
    vertical-align: top;
    text-align: center;
    padding: 20px;
    border: 1px solid #ccc;
    width: 50%;
    margin: auto;
}

/***BOUTON INSCRIPTION RADIO***/
.vaploginradiobox .vaploginradiosp label {
    display: inline;
    font-size: 15px;
}
input#logradio1, input#logradio2 {
    accent-color: #c604bc;
    width: 1.1em;
    height: 1em;
    transform: scale(1.5);
    margin-right: 0.6em;
    cursor: pointer;
    margin-left: 0.6em;
    margin-top: 0.4em;
}
a.vap-btn.blue, button.vap-btn.blue {
    background-color: #008999 !important;
}
.vaploginradiosp input:focus {
    outline: 0;
}
.vaploginspinput button.vap-btn.blue {
    border-radius: 10%;
    margin: 10px;
}