/* ========================================
   IMPORT DES VARIABLES CSS CENTRALISÉES
   ======================================== */
@import url('./variables.css');



/* ==============================================
   DASHBOARD CLIENT LUZALYA
   ============================================== */

#amelia-v2-booking-1000 .am-fs__init-item:not(:first-child) {
  display: none !important;
}

/* ========================================
   MASQUER LA SIDEBAR FIXE AMELIA (MODAL LOGIN)
   ======================================== */
body.dashboard-customer.wpamelia-customer .mfn-header-login.is-side,
body.dashboard-customer.wpamelia-customer .mfn-header-modal-nav,
body.dashboard-customer.wpamelia-customer .mfn-header-modal-login {
  display: none !important;
}


/* ========================================
   NAVIGATION LATÉRALE (MON COMPTE)
   ======================================== */
body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation {
  width: 100% !important;
  float: none !important;
  display: block !important;
  margin-bottom: 30px !important;
  background: none !important;
}

/* Aligner les onglets horizontalement */
body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation ul {
  display: flex !important;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: space-around;
}


body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--customer-logout{
  border: none !important;
  padding: 0 !important;
}

body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link a {
  padding: 0.5rem 1rem;
  color: var(--luzalya-secondary);
  font-size: 0.9rem !important;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  background: var(--luzalya-primary) !important;
  border-radius: var(--luzalya-border-radius-extra-large) !important;
}

body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link a:hover {
  color: var(--luzalya-primary);
  background: var(--luzalya-secondary) !important;
}

body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link.is-active a {
  color: var(--luzalya-primary);
  background: var(--luzalya-secondary) !important;
}

body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--customer-logout a{
  background: none !important;
  color: var(--luzalya-primary) !important;
}

body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--customer-logout a:hover{
  background: none !important;
  color: var(--luzalya-primary) !important;
}

/* Icônes pour les onglets */

body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--customer-logout a::before {
  color: var(--luzalya-primary) !important;
  font-size: 2rem;
}

body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--customer-logout:hover a::before {
  color: var(--luzalya-primary-dark) !important;
}

/* Propriétés communes pour les icônes SVG */
body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--prendre-rendez-vous a::before,
body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--mes-rendezvous a::before,
body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--mes-comptes-rendus a::before,
body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--mes-factures a::before {
  content: '';
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
   margin-right: 5px;
}

/* Images SVG spécifiques pour chaque onglet */
body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--prendre-rendez-vous a::before {
  background-image: url('/wp-content/uploads/2025/11/Prendre-rendez-vous-seance-sophrologie.svg');
}
body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--prendre-rendez-vous:hover a::before,
body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--prendre-rendez-vous.is-active a::before {
  background-image: url('/wp-content/uploads/2025/11/Prendre-rendez-vous-seance-sophrologie-hover.svg');
}

body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--mes-rendezvous a::before {
  background-image: url('/wp-content/uploads/2025/11/Mes-rendez-vous-de-sophrologie.svg');
}
body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--mes-rendezvous:hover a::before,
body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--mes-rendezvous.is-active a::before {
  background-image: url('/wp-content/uploads/2025/11/Mes-rendez-vous-de-sophrologie-hover.svg');
}

body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--mes-comptes-rendus a::before {
  background-image: url('/wp-content/uploads/2025/11/Compte-rendu-seance-sophrologie.svg');
}
body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--mes-comptes-rendus:hover a::before,
body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--mes-comptes-rendus.is-active a::before {
  background-image: url('/wp-content/uploads/2025/11/Compte-rendu-seance-sophrologie-hover.svg');
}

body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--mes-factures a::before {
  background-image: url('/wp-content/uploads/2025/11/Mes-factures-de-sophrologues.svg');
}
body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--mes-factures:hover a::before,
body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link--mes-factures.is-active a::before {
  background-image: url('/wp-content/uploads/2025/11/Mes-factures-de-sophrologues-hover.svg');
}

/* ========================================
   CONTENU PRINCIPAL
   ======================================== */

/* S'assurer que le conteneur parent utilise une disposition en bloc */
body.dashboard-customer.wpamelia-customer .woocommerce-account .woocommerce,
body.dashboard-customer.wpamelia-customer .woocommerce {
  display: block !important;
  overflow: hidden; /* Clearfix */
}

body.dashboard-customer.wpamelia-customer .woocommerce {
  background: var(--luzalya-white);
  padding: 40px !important;
}

body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-content {
  width: 100% !important;
  float: none !important;
  display: block !important;
  clear: both !important;
}

/* Titres */
body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-content h1,
body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-content h2,
body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-content h3 {
  color: var(--luzalya-primary);
}

body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-content h2 {
  font-size: 2rem;
}

/* Paragraphes */
body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-content p {
  color: var(--luzalya-primary);
}

/* ========================================
   INTERFACE AMELIA EMBARQUÉE
   ======================================== */
body.dashboard-customer.wpamelia-customer .am-fs-sb__page-heading {
  color: var(--luzalya-secondary) !important;
  font-size: 1rem !important;
}

body.dashboard-customer.wpamelia-customer .am-fs-sb__page.selected .am-fs-sb__page-heading {
  color: var(--luzalya-white) !important;
}

body.dashboard-customer.wpamelia-customer .am-fs-sb__page:hover .am-fs-sb__page-heading {
  color: var(--luzalya-white) !important;
}

.amelia-v2-booking #amelia-container .am-cappa__img {
  border-radius: 0 !important;
}

/* ========================================
   AMELIA - PACKS (SERVICE 5)
   ======================================== */
/* Masquer la liste des collaborateurs (avatars) dans la fiche service des packs */
.am-fs__pis-includes {
	display: none !important;
}

/* ========================================
   WOOCOMMERCE (MISE EN PAGE)
   ======================================== */
.woocommerce p {
  color: var(--luzalya-text-light) !important;
}

.woocommerce-account #Content .woocommerce {
  background: var(--luzalya-white) !important;
  padding: 30px !important;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.dashboard-customer.wpamelia-customer .woocommerce {
  background: var(--luzalya-white) !important;
  padding: 30px !important;
  width: auto !important;
  max-width: 1280px !important;
}

.dashboard-customer.wpamelia-customer .mfn-checkout-steps {
  display: none;
}

.woocommerce-account #Content .woocommerce h2 {
  color: var(--luzalya-primary) !important;
  font-size: 1.7rem !important;
}

.dashboard-customer.wpamelia-customer .woocommerce h3 {
  color: var(--luzalya-primary) !important;
  font-size: 1.4rem !important;
}

.woocommerce-form-login.login {
  color: var(--luzalya-primary) !important;
}

.woocommerce-form-login.login a{
  color: var(--luzalya-primary) !important;
}

.woocommerce-form-login.login a:hover {
  color: var(--luzalya-primary-dark) !important;
}

/* ========================================
   PAGES CLIENT (FRONTEND)
   ======================================== */

.customer-page{
    padding: 20px;
}

.customer-page h2 {
    color: var(--luzalya-primary);
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--luzalya-primary);
}

.customer-page ul {
    margin: 0;
    padding-left: 20px;
    color: var(--luzalya-primary);
}

.customer-page li {
    margin-bottom: 8px;
    line-height: 1.5;
}

.customer-page a{
    color: var(--luzalya-primary);
     font-weight: bold;
}

.customer-page a:hover {
    color: var(--luzalya-primary-dark);
    font-weight: bold;
}

.customer-page a:focus {
    color: var(--luzalya-primary-dark);
     font-weight: bold;
}


/* ========================================
   ICÔNES COLORÉES POUR LA PAGE "PRENDRE RENDEZ-VOUS"
   ======================================== */

/* Icônes de contact */
.contact-icon {
    display: inline-block;
}

.contact-icon.email::before {
    content: '';
    background-image: url('/wp-content/uploads/2025/10/Icone-MAIL.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25px 25px;
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}


.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.info-card {
  display:flex;
  flex-direction :column;
  border-radius: var(--luzalya-border-radius-large);
  padding: 25px;
  gap: 40px;
}

.info-card-standard {
    background-color: var(--luzalya-primary);
    color: var(--luzalya-secondary);
}
.info-card-standard ul li {
    color: var(--luzalya-secondary);
}

.info-card-emergency {
    background-color: var(--luzalya-secondary);
    color: var(--luzalya-primary);
}
.info-card-emergency ul li {
    color: var(--luzalya-primary);
}


/* ========================================
   BOUTONS DE RÉSERVATION DE RENDEZ-VOUS
   ======================================== */

/* Propriétés communes aux boutons de rendez-vous */
.appointment-button {
  padding: 0.75rem 1.5rem !important;
  border-radius: var(--luzalya-border-radius-large) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: var(--luzalya-transition) !important;
  cursor: pointer !important;
  text-align: center !important;
}

/* Bouton de réservation standard */
.appointment-button-standard {
  background-color: var(--luzalya-secondary) !important;
  color: var(--luzalya-primary) !important;
}

.appointment-button-standard:hover {
  background-color: var(--luzalya-secondary-light) !important;
  color: var(--luzalya-primary) !important;
}

/* Bouton d'astreinte */
.appointment-button-emergency {
  background-color: var(--luzalya-primary) !important;
  color: var(--luzalya-secondary) !important;
}

.appointment-button-emergency:hover {
  background-color: var(--luzalya-primary-dark) !important;
  color: var(--luzalya-secondary) !important;
}

/* ========================================
   MES RENDEZ-VOUS – DÉSACTIVER CLIC ET HOVER POUR LES RDV ANNULÉS
   ======================================== */
#amelia-container .am-cc:has(.am-cc__status-canceled) {
  pointer-events: none !important;
  cursor: default !important;
}
#amelia-container .am-cc:has(.am-cc__status-canceled):hover {
  background-color: inherit !important;
  box-shadow: none !important;
}

/* ========================================
   PAGE DES COMPTES RENDUS CLIENT
   ======================================== */

/* ========================================
   ÉTAT VIDE (AUCUN COMPTE RENDU)
   ======================================== */

.compte-rendus-empty {
    text-align: center;

}

.empty-state {
    background: var(--luzalya-secondary-light);
    border-radius: var(--luzalya-border-radius-large);
    padding: 40px;
    border: 1px solid var(--luzalya-border);
}

.empty-state h3 {
    color: var(--luzalya-primary);
    margin-bottom: 15px;
    font-size: 1.5em;
}

.empty-state p {
    color: var(--luzalya-text-light);
    margin-bottom: 15px;
    line-height: 1.6;
}

.empty-help {
    font-style: italic;
    font-size: 0.9em;
    color: var(--luzalya-text-light);
    background: var(--luzalya-white);
    padding: 15px;
    border-radius: var(--luzalya-border-radius-small);
    border-left: 4px solid var(--luzalya-primary);
}

/* ========================================
   RÉSUMÉ DES COMPTES RENDUS
   ======================================== */

.compte-rendus-summary {
    background: var(--luzalya-primary);
    border-radius: var(--luzalya-border-radius-small);
    padding: 15px 20px;
    margin-bottom: 30px;
}
.compte-rendus-summary p{
    color: var(--luzalya-secondary) !important;
    margin: 0 !important;
}

/* ========================================
   LISTE DES COMPTES RENDUS CLIENT
   ======================================== */

.compte-rendus-list-client {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.informations {
  background: var(--luzalya-secondary-light);
  border: 1px solid var(--luzalya-border);
  border-radius: var(--luzalya-border-radius-large);
  padding: 25px;
}

.compte-rendu-card {
    border-radius: var(--luzalya-border-radius-large);
    padding: 15px;
    display: flex;
    background-color: var(--luzalya-secondary);
    align-items: center;
}

.compte-rendu-info {
    flex: 1;
}

.compte-rendu-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 5px;
}

.meta-item {
    display: block;
    color: var(--luzalya-text-light);
    font-size: 0.9em;
    line-height: 1.4;
}

.meta-item strong {
    color: var(--luzalya-text-dark);
    font-weight: 600;
}


.action-buttons {
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.action-buttons a {
    background: var(--luzalya-primary);
    color: var(--luzalya-secondary);
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    border-radius: var(--luzalya-border-radius-small);
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
    font-size: 0.9em !important;
}

.action-buttons a:hover {
    background: var(--luzalya-primary-dark);
    color: var(--luzalya-secondary);
}


/* ========================================
   RESPONSIVE DESIGN - REGROUPÉ PAR TAILLE D'ÉCRAN
   ======================================== */

   @media (max-width: 1023px) {
    /* Les onglets passent en colonne sur les petits écrans */
    body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation ul {
        flex-direction: column !important;
    }

    body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation ul li {
        flex-direction: column !important;
        width: 100% !important;
    }

    body.dashboard-customer.wpamelia-customer .woocommerce-MyAccount-navigation-link a {
        width: 100% !important;
    }
   }

/* ========================================
   TABLETTES (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {

  .woocommerce-account #Content .woocommerce {
    padding: 15px !important;
  }

    .customer-page {
        padding: 15px;
    }

    .informations {
        padding: 20px;
    }

    .empty-state {
        padding: 30px 20px;
    }

    .empty-icon {
        font-size: 3em;
    }

    .compte-rendu-card {
      flex-direction: column;
      align-items: start;
    }

    .compte-rendu-actions {
        margin-top: 15px;
    }

    .action-buttons {
        flex-direction: row;
        gap: 15px;
    }

    .action-buttons a {
        flex: 1;
        min-width: auto;
    }

    .compte-rendu-meta {
        grid-template-columns: 1fr;
    }

  }

/* ========================================
   MOBILES (max-width: 480px)
   ======================================== */
@media (max-width: 480px) {
    /* Page "Prendre rendez-vous" */
    .customer-page {
        padding: 10px;
    }

    .info-card {
        padding: 20px;
    }


    .compte-rendu-card {
        padding: 20px;
    }

    .compte-rendu-info h3 {
        font-size: 1.1em;
    }

    .meta-item {
        font-size: 0.85em;
    }


}