/* ============================================
   MRHBA ZHNI - STYLE CLIENT PAGES v2.0
   ============================================ */

:root {
    --mrhba-primary: #2B2D42;
    --mrhba-secondary: #EF233C;
    --mrhba-tertiary: #8D99AE;
    --mrhba-light: #EDF2F4;
    --mrhba-white: #FFFFFF;
}

/* ============================================
   LIENS (écrase WooCommerce)
   ============================================ */
a, 
.woocommerce-MyAccount-navigation-link a,
.woocommerce-loop-product__title a,
.woocommerce-Address-title a,
.woocommerce-order-details a {
    color: var(--mrhba-primary) !important;
    text-decoration: none;
}

a:hover,
.woocommerce-MyAccount-navigation-link a:hover {
    color: var(--mrhba-secondary) !important;
}

/* ============================================
   NAVIGATION LATÉRALE
   ============================================ */
.woocommerce-MyAccount-navigation {
    background: var(--mrhba-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

.woocommerce-MyAccount-navigation ul {
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-MyAccount-navigation li {
    margin: 0 !important;
    border-bottom: 1px solid var(--mrhba-light);
}

.woocommerce-MyAccount-navigation li a {
    display: block !important;
    padding: 14px 20px !important;
    font-weight: 500;
}

.woocommerce-MyAccount-navigation li.is-active a {
    background: var(--mrhba-secondary) !important;
    color: var(--mrhba-white) !important;
    border-left: 3px solid var(--mrhba-primary);
}

/* ============================================
   FORMULAIRES LOGIN / REGISTER
   ============================================ */
.woocommerce-form-login,
.woocommerce-form-register {
    background: var(--mrhba-white);
    border-radius: 16px;
    padding: 35px;
    max-width: 500px;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.woocommerce-form-login h2,
.woocommerce-form-register h2 {
    color: var(--mrhba-primary);
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 3px solid var(--mrhba-secondary);
    width: 100%;
}

.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row {
    margin-bottom: 20px;
}

.woocommerce-form-login label,
.woocommerce-form-register label {
    color: var(--mrhba-primary);
    font-weight: 500;
    display: block;
    margin-bottom: 8px;
}

.woocommerce-form-login input,
.woocommerce-form-register input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--mrhba-light);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.woocommerce-form-login input:focus,
.woocommerce-form-register input:focus {
    border-color: var(--mrhba-secondary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(239,35,60,0.1);
}

.woocommerce-form-login button,
.woocommerce-form-register button {
    background: var(--mrhba-secondary) !important;
    color: var(--mrhba-white) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 14px 30px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.woocommerce-form-login button:hover,
.woocommerce-form-register button:hover {
    background: var(--mrhba-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239,35,60,0.3);
}

/* BOUTON CREATE ACCOUNT */
.mrhba-register-button {
    text-align: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--mrhba-light);
}

.mrhba-register-button a {
    display: inline-block;
    background: var(--mrhba-secondary);
    color: var(--mrhba-white);
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.mrhba-register-button a:hover {
    background: var(--mrhba-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239,35,60,0.3);
}

/* LIEN BACK TO LOGIN */
#mrhba-register div:last-child a {
    display: inline-block;
    color: var(--mrhba-secondary);
    text-decoration: none;
    margin-top: 15px;
}

#mrhba-register div:last-child a:hover {
    color: var(--mrhba-primary);
    text-decoration: underline;
}

/* ============================================
   CONTENU PRINCIPAL
   ============================================ */
.woocommerce-MyAccount-content {
    background: var(--mrhba-white);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* ============================================
   TABLEAU DES RÉSERVATIONS
   ============================================ */
.mrhba-bookings-container {
    background: var(--mrhba-white);
    border-radius: 12px;
    padding: 20px;
}

.mrhba-bookings-container h2 {
    color: var(--mrhba-primary);
    font-size: 1.5rem;
    border-bottom: 3px solid var(--mrhba-secondary);
    padding-bottom: 10px;
    display: inline-block;
    margin-bottom: 20px;
}

.mrhba-bookings-table th,
.mrhba-bookings-table thead th {
    background: var(--mrhba-primary) !important;
    color: var(--mrhba-white) !important;
    padding: 12px !important;
    text-align: left !important;
    font-weight: 600 !important;
}

.mrhba-bookings-table td {
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--mrhba-light) !important;
    color: var(--mrhba-primary);
}

.mrhba-bookings-table tr:hover {
    background: var(--mrhba-light) !important;
}

/* STATUTS */
.status-confirmed,
.status-completed {
    background: #28a745;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    display: inline-block;
}

.status-pending,
.status-on-hold {
    background: #ffc107;
    color: #333;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    display: inline-block;
}

/* ============================================
   ACCOUNT DETAILS & ADDRESSES
   ============================================ */
.woocommerce-EditAccountForm,
.woocommerce-address-fields,
.edit-address {
    background: var(--mrhba-white);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.woocommerce-EditAccountForm h3,
.woocommerce-address-fields h3,
.edit-address h3 {
    color: var(--mrhba-primary) !important;
    border-bottom: 2px solid var(--mrhba-secondary);
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.woocommerce-EditAccountForm input,
.woocommerce-address-fields input,
.edit-address input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--mrhba-light);
    border-radius: 8px;
}

.woocommerce-Address {
    background: var(--mrhba-light);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.woocommerce-Address .edit {
    background: var(--mrhba-secondary) !important;
    color: var(--mrhba-white) !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    text-decoration: none !important;
    display: inline-block;
    margin-top: 12px;
}

.woocommerce-Address .edit:hover {
    background: var(--mrhba-primary) !important;
    transform: translateY(-2px);
}

/* ============================================
   LOGOUT PAGE
   ============================================ */
.logout-page-container {
    text-align: center;
    padding: 40px 20px;
    background: var(--mrhba-white);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    max-width: 500px;
    margin: 40px auto;
}

.logout-page-container h2 {
    color: var(--mrhba-primary);
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
}

.logout-page-container .button {
    background: var(--mrhba-secondary) !important;
    color: var(--mrhba-white) !important;
    border-radius: 50px !important;
    padding: 12px 30px !important;
    margin: 5px;
    display: inline-block;
    text-decoration: none;
}

.logout-page-container .button:hover {
    background: var(--mrhba-primary) !important;
    transform: translateY(-3px);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .woocommerce-MyAccount-navigation li {
        flex: 1;
        min-width: 110px;
        border: none;
    }
    
    .woocommerce-MyAccount-navigation li a {
        background: var(--mrhba-light);
        border-radius: 8px;
        text-align: center;
        padding: 10px 12px !important;
        font-size: 13px;
    }
    
    .woocommerce-MyAccount-content {
        padding: 15px;
    }
    
    .woocommerce-form-login,
    .woocommerce-form-register {
        padding: 20px;
        margin: 0 15px;
    }
    
    .mrhba-bookings-table {
        display: block;
        overflow-x: auto;
    }
}

@media (max-width: 480px) {
    .woocommerce-MyAccount-navigation li {
        min-width: 100%;
    }
    
    .mrhba-bookings-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0 !important;
    }
    
    .button,
    .woocommerce-Button {
        width: 100%;
        text-align: center;
    }
}

/* ============================================
   STYLE GLOBAL POUR TOUS LES CHAMPS
   ============================================ */

/* Inputs, selects, textareas */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--mrhba-light);
    border-radius: 8px;
    background: var(--mrhba-white);
    font-size: 14px;
    transition: all 0.3s ease;
    margin-bottom: 15px;
}

/* Focus sur tous les champs */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    border-color: var(--mrhba-secondary) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(239,35,60,0.1);
}

/* Checkbox et radio */
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    margin-right: 8px;
    accent-color: var(--mrhba-secondary);
}

/* Labels */
label {
    color: var(--mrhba-primary);
    font-weight: 500;
    display: block;
    margin-bottom: 8px;
}

/* Placeholder */
input::placeholder,
textarea::placeholder {
    color: var(--mrhba-tertiary);
    opacity: 0.7;
}

/* Boutons génériques */
button,
.button,
.woocommerce-Button,
.woocommerce-button {
    background: var(--mrhba-secondary) !important;
    color: var(--mrhba-white) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

button:hover,
.button:hover,
.woocommerce-Button:hover {
    background: var(--mrhba-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239,35,60,0.3);
}

/* ============================================
   PAGE ACCOUNT DETAILS (champs spécifiques)
   ============================================ */
.woocommerce-EditAccountForm .form-row {
    margin-bottom: 20px;
}

.woocommerce-EditAccountForm input {
    width: 100%;
}

/* ============================================
   PAGE ADDRESSES (billing/shipping)
   ============================================ */
.woocommerce-address-fields .form-row {
    margin-bottom: 20px;
}

.woocommerce-address-fields input,
.woocommerce-address-fields select,
.woocommerce-address-fields textarea {
    width: 100%;
}

/* ============================================
   PAGE CHECKOUT (si nécessaire)
   ============================================ */
.woocommerce-checkout input,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--mrhba-light);
    border-radius: 8px;
}

/* ============================================
   PAGE CART (quantité)
   ============================================ */
.woocommerce-cart input.input-text.qty {
    width: 80px;
    text-align: center;
    padding: 8px;
}

/* ============================================
   RESPONSIVE DESIGN - MRHBA ZHNI
   ============================================ */

/* TABLETTE (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .woocommerce-MyAccount-content {
        padding: 20px;
    }
    
    .mrhba-bookings-table th,
    .mrhba-bookings-table td {
        padding: 8px !important;
        font-size: 13px;
    }
    
    .woocommerce-form-login,
    .woocommerce-form-register {
        padding: 25px;
        margin: 0 20px;
    }
}

/* MOBILE (481px - 768px) */
@media (max-width: 768px) {
    /* Navigation du compte en ligne */
    .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .woocommerce-MyAccount-navigation li {
        flex: 1;
        min-width: 110px;
        border: none;
    }
    
    .woocommerce-MyAccount-navigation li a {
        background: var(--mrhba-light);
        border-radius: 8px;
        text-align: center;
        padding: 10px 12px !important;
        font-size: 13px;
    }
    
    /* Contenu principal */
    .woocommerce-MyAccount-content {
        padding: 15px;
    }
    
    /* Formulaires Login/Register */
    .woocommerce-form-login,
    .woocommerce-form-register {
        padding: 20px;
        margin: 0 15px;
    }
    
    .woocommerce-form-login h2,
    .woocommerce-form-register h2 {
        font-size: 24px;
    }
    
    /* Tableau des réservations en mode carte */
    .mrhba-bookings-table,
    .mrhba-bookings-table thead,
    .mrhba-bookings-table tbody,
    .mrhba-bookings-table tr,
    .mrhba-bookings-table th,
    .mrhba-bookings-table td {
        display: block;
    }
    
    .mrhba-bookings-table thead {
        display: none;
    }
    
    .mrhba-bookings-table tr {
        border: 1px solid var(--mrhba-light);
        border-radius: 12px;
        margin-bottom: 15px;
        padding: 10px;
        background: var(--mrhba-white);
    }
    
    .mrhba-bookings-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0 !important;
        border-bottom: 1px solid var(--mrhba-light) !important;
        font-size: 13px;
    }
    
    .mrhba-bookings-table td:last-child {
        border-bottom: none !important;
    }
    
    .mrhba-bookings-table td:before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--mrhba-primary);
        width: 40%;
        font-size: 12px;
    }
    
    /* Labels pour tableau responsive */
    .mrhba-bookings-table td:nth-of-type(1):before { content: "🆔 ID"; }
    .mrhba-bookings-table td:nth-of-type(2):before { content: "🏛️ Tour"; }
    .mrhba-bookings-table td:nth-of-type(3):before { content: "📅 Date"; }
    .mrhba-bookings-table td:nth-of-type(4):before { content: "👥 Participants"; }
    .mrhba-bookings-table td:nth-of-type(5):before { content: "💰 Total"; }
    .mrhba-bookings-table td:nth-of-type(6):before { content: "📊 Status"; }
    
    /* Account details */
    .woocommerce-EditAccountForm {
        padding: 15px;
    }
    
    .woocommerce-EditAccountForm .form-row {
        margin-bottom: 15px;
    }
    
    /* Adresses en colonne */
    .woocommerce-Addresses {
        flex-direction: column;
    }
    
    .woocommerce-Address {
        padding: 15px;
        margin-bottom: 15px;
    }
}

/* PETIT MOBILE (moins de 480px) */
@media (max-width: 480px) {
    /* Navigation en colonne */
    .woocommerce-MyAccount-navigation li {
        min-width: 100%;
    }
    
    /* Formulaires */
    .woocommerce-form-login,
    .woocommerce-form-register {
        padding: 15px;
        margin: 0 10px;
    }
    
    .woocommerce-form-login h2,
    .woocommerce-form-register h2 {
        font-size: 22px;
    }
    
    .woocommerce-form-login input,
    .woocommerce-form-register input {
        padding: 10px 12px !important;
        font-size: 13px;
    }
    
    .woocommerce-form-login button,
    .woocommerce-form-register button {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
    
    /* Boutons pleine largeur */
    .button,
    .woocommerce-Button,
    .woocommerce-button,
    button[type="submit"] {
        width: 100%;
        text-align: center;
        margin: 5px 0;
    }
    
    /* Tableau réservations - version empilée */
    .mrhba-bookings-container {
        padding: 12px;
    }
    
    .mrhba-bookings-container h2 {
        font-size: 1.2rem;
    }
    
    .mrhba-bookings-table td {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .mrhba-bookings-table td:before {
        width: 100%;
        margin-bottom: 3px;
    }
    
    /* Page logout */
    .logout-page-container {
        padding: 30px 15px;
        margin: 20px 15px;
    }
    
    .logout-page-container h2 {
        font-size: 24px;
    }
    
    .logout-page-container .button {
        display: block;
        width: 100%;
        margin: 10px 0;
        text-align: center;
    }
    
    /* Adresses */
    .woocommerce-Address .edit,
    .woocommerce-Address .add {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Account details */
    .woocommerce-EditAccountForm {
        padding: 12px;
    }
    
    .woocommerce-EditAccountForm label {
        font-size: 13px;
    }
    
    /* Checkout */
    .woocommerce-checkout .form-row {
        margin-bottom: 15px;
    }
}

/* TRÈS PETIT MOBILE (moins de 380px) */
@media (max-width: 380px) {
    .woocommerce-form-login,
    .woocommerce-form-register {
        padding: 12px;
        margin: 0 8px;
    }
    
    .woocommerce-form-login h2,
    .woocommerce-form-register h2 {
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    .mrhba-bookings-table td {
        font-size: 12px;
    }
    
    .mrhba-bookings-table td:before {
        font-size: 11px;
    }
}