/* Styles pour la carte des régions de France */
body {
    font-family: inika, 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #2C2C54;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Navbar Styles */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: #E6FFE6;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-radius: 0 0 20px 20px;
	height: 30px;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Logo Section */
.navbar-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    font-size: 2.3rem;
    font-weight: bold;
    color: #000;
    transition: transform 0.3s ease-in-out;
}

.navbar-logo img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.navbar-logo:hover {
    transform: scale(1.1);
}

/* Navigation Menu */
.navbar-links {
    list-style: none;
    display: flex;
    gap: 30px;
    margin-top: 15px;
    padding: 0;
	flex-wrap: wrap;
}

.navbar-links .nav-link {
    text-decoration: none;
    color: black;
    font-size: 1.0rem;
    font-weight: 500;
    padding: 10px 20px;
    background-color: #E6FFE6;
    border-radius: 50px;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.navbar-links .nav-link:hover {
    background-color: #fff;
    color: #000;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
	transform: scale(1.1);
}

/* Hamburger Menu */
.navbar-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.navbar-toggle span {
    width: 35px;
    height: 4px;
    background: white;
    border-radius: 3px;
}

@media (max-width: 768px) {
    .navbar-links {
        flex-direction: column;
        background: #16A085;
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        display: none;
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }

    .navbar-links.active {
        display: flex;
    }

    .navbar-toggle {
        display: flex;
    }
}



/* Sous-menu déroulant */
/* 🌿 Dropdown modernisé */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    backdrop-filter: blur(12px);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    min-width: 230px;
    padding: 12px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 999;
}

.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.dropdown-menu li {
    list-style: none;
}

.dropdown-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    color: #2C3E50;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    background: transparent;
    border-left: 4px solid transparent;
}

.dropdown-link::after {
    content: '➜';
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateX(-5px);
    font-size: 0.95rem;
    color: #2C3E50;
}

.dropdown-link:hover {
    background-color: #d4ffe1;
    padding-left: 28px;
    border-left: 4px solid #2ECC71;
    border-radius: 0 10px 10px 0;
}

.dropdown-link:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* 🎯 Responsive */
@media (max-width: 768px) {
    .dropdown-menu {
        position: static;
        display: none;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: none;
        border-radius: 12px;
        padding: 0;
        width: 100%;
    }

    .navbar ul.active .dropdown-menu {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }
}

.logo-container {
    display: flex; /* Permet d'aligner l'image et le texte sur une même ligne */
    align-items: center; /* Centre verticalement l'image et le texte */
    gap: 10px; /* Ajoute un espace entre le logo et le texte */
}

.logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.logo-text {
    font-size: 2.4rem; /* Taille du texte "Tra-V" */
    font-weight: bold;
    color: #000; /* Couleur du texte */
    font-family: inika, 'Poppins', sans-serif; /* Police utilisée */
}

/* Style du bouton de déconnexion */
.logout-btn {
    margin-left: 10px;
    padding: 6px 12px;
    background-color: #dc3545; /* Rouge */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

/* Effet au survol */
.logout-btn:hover {
    background-color: #b02a37; /* Rouge foncé */
}

/* user-nav handled by navbar-liquid-glass.css */

/* ✅ Conteneur principal organisé en GRID */
.account-container {
    max-width: 1100px;
    margin: 50px auto;
    padding: 25px;
    background: radial-gradient(circle at 50% 50%, 
		#fdfffd,   /* Vert très clair, base principale */
		#fff5f5,   /* Vert pistache doux */
		#ebebeb,   /* Vert tilleul léger */
		#fff2f2,   /* Vert naturel frais */
		#d1d1d1    /* Vert feuille vive */
	);
    background-size: 300% 300%;
    animation: magmaFlow 8s infinite ease-in-out;
    border-radius: 12px;
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.08);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px; /* ✅ Espacement entre les sections */
}

@keyframes magmaFlow {
    0%   { background-position: 30% 30%; }
    20%  { background-position: 80% 40%; }
    40%  { background-position: 60% 90%; }
    60%  { background-position: 20% 70%; }
    80%  { background-position: 50% 20%; }
    100% { background-position: 30% 30%; }
}

/* ✅ Section complète qui prend toute la largeur */
.full-width {
    grid-column: span 2;
}

#profile-select {
	border: solid 2px black;
	height: 30px;
}

/* ✅ Effet hover sur les containers */
.user-details, .user-profiles, .upcoming-trips, .trip-history {
    background: #e0facb;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease-in-out;
}

.user-trav-page {
    background: #D4FFD0;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease-in-out;
	text-decoration: none;
}

.user-trav-page h2 a {
    text-decoration: none !important; /* Supprime le soulignement */
    color: inherit !important; /* Utilise la couleur du texte parent */
}

/* ✅ Organisation des sections */
.user-details { order: 1; } 
.user-profiles { order: 2; } 
.upcoming-trips { order: 3; } 
.trip-history { order: 4; }
.user-trav-page { order: 5; }

/* ✅ Effet hover sur les sous-containers */
.user-details:hover, .user-profiles:hover, .upcoming-trips:hover, .trip-history:hover, .user-trav-page:hover {
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.10);
    transform: translateY(-3px);
}

/* ✅ Organisation responsive : Passe en colonne sur petit écran */
@media (max-width: 900px) {
    .account-container {
        grid-template-columns: 1fr;
    }

    .full-width {
        grid-column: span 1;
    }
}


/* ✅ Effet hover sur les listes (Profils, Voyages) */
.profile-list li, .trip-list li {
    background: #F8F9FA;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.3s ease-in-out;
}

.profile-list li:hover, .trip-list li:hover {
    background: #E3EAF1;
    transform: translateY(-2px);
}

/* ✅ Effet hover sur les boutons */
.btn {
    display: inline-block;
    padding: 12px 15px;
    font-size: 16px;
    text-align: center;
    background: linear-gradient(135deg, #7de6a8, #1ABC9C);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 15px;
    transition: all 0.3s ease-in-out;
}

.btn:hover {
    background: linear-gradient(135deg, #1ABC9C, #7de6a8);
    transform: scale(1.05);
}

#add-profile-btn {
	position: relative;
	left: 31%;
}

#profile-form {
	overflow-y: auto;
	scrollbar-width: none !important;
}

body.modal-open {
    overflow: hidden;
}

/* ✅ Modale d'ajout de profil */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 999;
    overflow-x: hidden; /* ✅ Supprime la scrollbar horizontale */
}

/* ✅ Contenu de la modale */
.modal-content {
    background: white;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    width: 100%;
    max-width: 450px; /* ✅ Largeur maximale pour éviter le débordement */
    max-height: 650px;
    overflow-y: auto;
	scrollbar-width: none !important;
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: fadeInModal 0.3s ease-in-out;
    box-sizing: border-box; /* ✅ Empêche le dépassement */
	display: flex;
    flex-direction: column;
}

/* ✅ Animation d’apparition */
@keyframes fadeInModal {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ✅ Effet d'apparition de la modale */
.modal.active {
    visibility: visible;
    opacity: 1;
}

/* ✅ Effet d'ombre au survol */
.modal-content:hover {
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.35);
}

/* ✅ Labels */
label {
    display: block;
    margin: 10px 0 5px;
    font-weight: 600;
    color: #34495E;
    text-align: left;
}

/* ✅ Champs de saisie */
input[type="text"], input[type="number"], input[type="date"], input[type="file"], select {
    width: 100%;
    padding: 12px;
    border: 2px solid #BDC3C7;
    border-radius: 6px;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
    background: #f8f9fa;
    box-sizing: border-box; /* ✅ Évite le dépassement */
}

/* ✅ Effet focus */
input:focus, select:focus {
    border-color: #27AE60;
    outline: none;
    box-shadow: 0px 0px 10px rgba(39, 174, 96, 0.4);
}

/* ✅ Style des placeholders */
::placeholder {
    color: #95A5A6;
    font-style: italic;
}

/* ✅ Checkbox */
input[type="checkbox"] {
    margin-right: 6px;
    transform: scale(1.2);
}

/* ✅ Boutons */
.modal-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    gap: 10px;
}

.modal-buttons .btn {
    width: 48%;
    padding: 12px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s;
}

.modal-buttons .btn:hover {
    transform: scale(1.05);
}

/* ✅ Fixer les boutons en bas du modal */
.modal-footer {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 15px;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.1); /* ✅ Séparation du contenu */
}

/* ✅ Ajustement des boutons */
.modal-footer .btn {
    width: 48%;
}

/* ✅ Suppression de l'espace vide sous la modal */
.modal-content form {
    flex-grow: 1;
    overflow-y: auto;
}


.secondary {
    background: #BDC3C7;
}

.secondary:hover {
    background: #AAB7B8;
}

/* ✅ Responsive */
@media (max-width: 600px) {
    .modal-content {
        min-width: 90%;
        max-height: 80vh;
    }

    input[type="text"], input[type="number"], input[type="date"], select {
        font-size: 14px;
    }
}

/* ✅ Alertes personnalisées */
.custom-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
    z-index: 9999;
    width: 300px;
    max-width: 90%;
    animation: fadeIn 0.3s ease-in-out;
}

.custom-alert p {
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
}

.custom-alert button {
    padding: 10px 15px;
    background: #27ae60; /* ✅ Vert */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#close-modal-btn {
    background-color: #333 !important;
    color: #fff;
    border: 2px solid #555;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold; 
    cursor: pointer; 
    transition: all 0.3s ease-in-out;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* Effet au survol */
#close-modal-btn:hover {
    background-color: #d61717 !important;
    border-color: #a50c0c;
    transform: scale(1.05);
}

/* Effet lorsqu'on clique sur le bouton */
#close-modal-btn:active {
    background-color: #222;
    transform: scale(0.95); 
}


/* ✅ Animation d'apparition */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -55%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* 🌟 Conteneur global du calendrier */
.flatpickr-calendar {
    background: rgba(255, 255, 255, 0.95) !important; /* ✅ Blanc légèrement translucide */
    border: 2px solid #4CAF50 !important; /* ✅ Bordure verte nette */
    border-radius: 12px !important;
    box-shadow: 0px 10px 30px rgba(0, 128, 0, 0.2) !important;
    font-family: 'Poppins', sans-serif !important;
    width: 260px !important;
    padding: 10px !important;
    transition: transform 0.2s ease-in-out, box-shadow 0.3s ease !important;
}

/* ✅ Flou sur l’arrière-plan de la modal */
.flatpickr-calendar.open {
    transform: scale(1.03) !important;
    box-shadow: 0px 12px 35px rgba(76, 175, 80, 0.4) !important;
}

.modal.active {
    backdrop-filter: blur(15px) !important;
    background: rgba(0, 0, 0, 0.3) !important; /* ✅ Flou plus prononcé sur l'arrière-plan */
}

/* 📅 En-tête (Mois & Année) */
.flatpickr-months {
    background: #4CAF50 !important;
    color: white !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 8px 0 !important;
    font-size: 13px !important;
    font-weight: bold !important;
}

/* 🎯 Style des jours */
.flatpickr-day {
    border-radius: 5px !important;
    transition: all 0.2s ease-in-out !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    color: #065f3c !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
}

/* 🟢 Jours sélectionnés */
.flatpickr-day.selected {
    background: linear-gradient(145deg, #4CAF50, #6ae36a) !important;
    color: white !important;
    font-weight: bold !important;
    border-radius: 5px !important;
    box-shadow: 0px 0px 15px rgba(76, 175, 80, 1) !important;
    transform: scale(1.1) !important;
}

/* 🎯 Aujourd’hui */
.flatpickr-day.today {
    border: 2px solid #4CAF50 !important;
    background: #e8ffe8 !important;
    color: #065f3c !important;
    font-weight: bold !important;
    text-shadow: 0px 0px 5px rgba(76, 175, 80, 0.6) !important;
}

/* ✅ Désactivation des jours futurs */
.flatpickr-day.disabled {
    color: #ccc !important;
    background: transparent !important;
    cursor: not-allowed !important;
}

/* ✅ Effet subtil au clic */
@keyframes bounceEffect {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.flatpickr-day.selected {
    animation: bounceEffect 0.3s ease-in-out !important;
}

/* ✅ Conteneur global des documents de voyage */
fieldset {
    border: 2px solid #13a900; /* ✅ Bordure verte */
    border-radius: 8px;
    padding: 15px;
    background: #f8fff0; /* ✅ Vert pastel */
    margin-bottom: 15px;
}

/* ✅ Style du titre de section */
legend {
    font-size: 18px;
    font-weight: bold;
    color: #2C3E50;
    padding: 5px 10px;
    background: #d0f5c4;
    border-radius: 5px;
}

/* ✅ Style des labels */
label {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #34495E;
    margin-bottom: 10px;
}

/* ✅ Personnalisation des cases à cocher */
input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #13a900;
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease-in-out;
}

input[type="checkbox"]:checked {
    background: #13a900;
    border-color: #0f8700;
}

input[type="checkbox"]:checked::after {
    content: "";
    width: 6px;
    height: 11px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -58%) rotate(45deg);
}

/* ✅ Conteneur pour les champs d’upload */
.file-upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #13a900;  /* ✅ Bordure verte */
    background: #f5fff5;  /* ✅ Vert clair pour la zone */
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    text-align: center;
    position: relative;
    margin-bottom: 15px;
}

/* ✅ Effet de survol */
.file-upload-container:hover {
    background: #e8ffe8;
    border-color: #3e923e;
    transform: scale(1.02);
}

/* ✅ Icône d’upload */
.file-upload-container::before {
    content: "📂";
    font-size: 30px;
    color: #13a900;
    margin-bottom: 5px;
    display: block;
    transition: transform 0.3s ease-in-out;
}

/* ✅ Texte d'instruction */
.file-upload-text {
    font-size: 14px;
    color: #065f3c;
    font-weight: bold;
}

/* ✅ Masquer le champ d'upload natif */
.file-upload-input {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* ✅ Prévisualisation du fichier uploadé */
.file-preview {
    margin-top: 5px;
    font-size: 12px;
    color: #34495E;
    font-weight: bold;
}

/* ✅ Style du bouton "Parcourir" */
.file-upload-button {
    display: inline-block;
    background: #13a900;
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s ease-in-out;
    margin-top: 5px;
}

.file-upload-button:hover {
    background: #0f8700;
}

/* ✅ Style de la liste des profils */
.profile-list {
    list-style: none;
    padding: 0;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;	
	overflow-y: auto;
	scrollbar-width: none !important;
	max-height: 190px;
}

/* ✅ Carte de profil avec effet "Glassmorphism" */
.profile-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(72, 168, 66, 0.25); /* ✅ Vert plus profond */
    backdrop-filter: blur(6px);
    padding: 14px 18px;
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
    font-size: 17px;
    font-weight: bold;
    box-shadow: 0px 4px 10px rgba(72, 168, 66, 0.2), 
                inset 0px 2px 6px rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
	min-height: 15px;
}

/* ✅ Effet de survol amélioré */
.profile-list li:hover {
    background: rgba(96, 198, 92, 0.3); /* ✅ Vert plus subtil */
    transform: scale(1.03);
    box-shadow: 0px 8px 18px rgba(96, 198, 92, 0.4);
}

/* ✅ Lumière dynamique au survol */
.profile-list li::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(96, 198, 92, 0.25), transparent);
    transition: transform 0.4s ease-in-out;
}

.profile-list li:hover::before {
    transform: translate(50%, 50%);
}

/* ✅ Effet d’ondulation plus fluide */
@keyframes wave-effect {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-2px); }
    100% { transform: translateY(0px); }
}

.profile-list li:hover {
    animation: wave-effect 1s infinite ease-in-out;
}

/* ✅ Effet de pulsation plus discret */
@keyframes glow-effect {
    0% { box-shadow: 0px 0px 10px rgba(72, 168, 66, 0.3); }
    50% { box-shadow: 0px 0px 16px rgba(96, 198, 92, 0.45); }
    100% { box-shadow: 0px 0px 10px rgba(72, 168, 66, 0.3); }
}

.profile-list li.pulsing {
    animation: glow-effect 1.8s infinite ease-in-out;
}



/* ✅ Bouton de suppression avec design moderne */
.remove-btn {
    background: linear-gradient(145deg, #ff6b6b, #d63031); /* 🔥 Dégradé rouge */
    color: white;
    border: none;
    border-radius: 50%; /* â­• Bouton arrondi */
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    position: relative;
    box-shadow: 0px 5px 10px rgba(214, 48, 49, 0.3), 
                inset 0px 2px 4px rgba(255, 255, 255, 0.2);
}

/* ✅ Effet de survol avec rotation */
.remove-btn:hover {
    background: linear-gradient(145deg, #ff3f3f, #c0392b); /* 🔥 Rouge plus intense */
    transform: scale(1.15) rotate(-10deg); /* 🔄 Rotation légère */
    box-shadow: 0px 6px 15px rgba(231, 76, 60, 0.5);
}

/* ✅ Effet au clic avec mini-réduction */
.remove-btn:active {
    transform: scale(0.95);
    background: linear-gradient(145deg, #ff1a1a, #a93226);
    box-shadow: 0px 3px 5px rgba(214, 48, 49, 0.6);
}

/* ✅ Ajout d'une icône dynamique "X" */
.remove-btn::before {
    content: "\00D7";
    font-size: 13px;
    font-weight: bold;
    color: white;
    transition: transform 0.3s ease;
}

/* ✅ Effet d'animation lors de la suppression */
.remove-btn.removing {
    animation: explode 0.4s ease-out forwards;
}

/* ✅ Animation d'explosion */
@keyframes explode {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.7;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ✅ Effet de pulsation */
@keyframes pulse {
    0% { box-shadow: 0 0 10px rgba(231, 76, 60, 0.4); }
    50% { box-shadow: 0 0 15px rgba(231, 76, 60, 0.6); }
    100% { box-shadow: 0 0 10px rgba(231, 76, 60, 0.4); }
}

.remove-btn.pulsing {
    animation: pulse 1.5s infinite ease-in-out;
}

/* ✅ Arrière-plan flouté et masqué par défaut */
#view-profile-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* ✅ Flou léger sur l'arrière-plan */
    backdrop-filter: blur(10px);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s ease-in-out;
    z-index: 1000;
}

/* ✅ Affichage de la modale lorsqu'elle est active */
#view-profile-modal.active {
    visibility: visible;
    opacity: 1;
}

/* ✅ Conteneur principal organisé en GRID */
.profile-view-container {
    background: transparent;
    width: 80%;
    max-width: 950px;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.2);
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* ✅ Deux colonnes */
    gap: 20px;
    transform: translateY(-15px);
    opacity: 1;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 1001;
}

/* ✅ Effet d’apparition en douceur */
.profile-view-container.active {
    transform: translateY(0);
    opacity: 1;
}

/* ✅ Titre */
#profile-view-title {
    grid-column: span 2; /* ✅ Occupe toute la largeur */
    text-align: center;
    font-size: 26px;
    color: #2C3E50;
    font-weight: bold;
    margin-bottom: 15px;
}

/* ✅ Ajout d’un glow lumineux pour l’effet néon sur le bord gauche */
.profile-view-section {
    position: relative; /* ✅ Assurez-vous que les enfants prennent une référence */
    background: #ffffff;
    padding: 18px;
    border-radius: 10px;
    box-shadow: -8px 0px 15px rgba(153, 255, 162, 0.8);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	border-left: 6px solid #82fd8d;

}

/* ✅ Animation au survol */
.profile-view-section:hover {
    transform: translateY(-4px);
    box-shadow: -8px 0px 20px #48ff9e;
}

/* ✅ Titres des sections */
.profile-view-section h4 {
    font-size: 18px;
    color: #13a900;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* ✅ Texte des infos */
.profile-view-section p {
    font-size: 16px;
    color: #2C3E50;
    line-height: 1.5;
}

/* ✅ Liens des documents */
.profile-view-section a {
    color: #3498DB;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease-in-out;
}

.profile-view-section a:hover {
    color: #1f7cc1;
    text-decoration: underline;
}

/* ✅ Footer & bouton de fermeture */
.profile-view-footer {
    grid-column: span 2;
    display: flex;
    justify-content: center;
    padding-top: 15px;
}

#close-profile-btn {
    background: #e74c3c;
    color: white;
    padding: 12px 22px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    font-size: 16px;
}

#close-profile-btn:hover {
    background: #c0392b;
    transform: scale(1.05);
}

/* ✅ Responsive : Passe en colonne sur mobile */
@media (max-width: 900px) {
    .profile-view-container {
        grid-template-columns: 1fr; /* ✅ Une seule colonne */
    }

    .profile-view-footer {
        grid-column: span 1;
    }
}



/* ✅ Icône de fermeture */
.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
    color: #333;
    transition: color 0.3s ease, transform 0.2s ease;
}

.close-btn:hover {
    color: #c0392b;
    transform: scale(1.2);
}

/* ✅ Responsive */
@media (max-width: 600px) {
    .profile-view-container {
        width: 90%;
    }
}

.profile-modal-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 1000;
}

/* ✅ Active */
.profile-modal-overlay.active {
    visibility: visible;
    opacity: 1;
    display: flex; /* Réaffiche correctement */
}

/* ✅ Désactive proprement */
.profile-modal-overlay:not(.active) {
    display: none;
}


/* ✅ Conteneur des sous-modales */
.profile-modal-content {
    background: #ffffff;
    width: 45%;
    max-width: 500px;
    padding: 22px;
    border-radius: 12px;
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: relative;
    transform: translateY(-20px);
    opacity: 1;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 1001;
}


.profile-modal-content.active {
    transform: translateY(0);
    opacity: 1;
}

/* ✅ Liste des options en cases à cocher */
.profile-checkbox-group {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 15px;
    background: #f8f9f9;
    border-radius: 10px;
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.profile-checkbox-group label {
    display: flex;
    align-items: center;
    font-size: 16px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.profile-checkbox-group input {
    margin-right: 10px;
}

/* ✅ Effet hover sur les choix */
.profile-checkbox-group label:hover {
    background: #d9f2c5;
    border-radius: 8px;
}

/* ✅ Boutons */
.profile-modal-btn {
    background: #13a900;
    color: white;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    font-size: 16px;
    margin-top: 15px;
}

.profile-modal-btn:hover {
    background: #0f8700;
    transform: scale(1.05);
}

/* ✅ Responsive */
@media (max-width: 768px) {
    .profile-modal-content {
        width: 90%;
        max-width: none;
    }
}

.valid-link {
    color: green;
    font-weight: bold;
    text-decoration: none;
}

.valid-link:hover {
    text-decoration: underline;
}

/* ✅ Bouton Modifier - Effet Néon Amélioré */
.btnedit.edit-profile-btn {
    background: linear-gradient(135deg, #A3E6A5, #5DCB90); /* Dégradé vert plus intense */
    color: #2C3E50; /* Texte gris foncé */
    font-size: 15px;
    font-weight: bold;
    padding: 12px 22px;
    border: none;
    border-radius: 30px; /* ✅ Arrondi élégant */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 160px;
    height: 50px;
    text-align: center;
    margin: 15px auto 0;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0px 20px rgba(50, 255, 150, 0.5); /* ✅ Ombre néon plus marquée */
    position: relative;
    top: 90px;
    overflow: hidden;
    backdrop-filter: blur(8px); /* ✅ Flou plus intense */
}

/* ✅ Effet Pulsé Néon */
.btnedit.edit-profile-btn::before {
    content: "";
    position: absolute;
    width: 250%;
    height: 250%;
    background: radial-gradient(circle, rgba(167, 255, 175, 0.8) 10%, rgba(50, 255, 150, 0) 80%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
    border-radius: 50%;
    z-index: -1;
    opacity: 1;
    animation: neonPulse 1.5s infinite alternate ease-in-out;
}

/* ✅ Effet Glow et Élévation au Survol */
.btnedit.edit-profile-btn:hover {
    background: linear-gradient(135deg, #98E2AE, #45C77F);
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(50, 255, 150, 0.8); /* ✅ Glow plus intense */
}

/* ✅ Amplification de l’effet lumineux */
.btnedit.edit-profile-btn:hover::before {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 1;
}

/* ✅ Effet au clic */
.btnedit.edit-profile-btn:active {
    transform: translateY(3px);
    box-shadow: 0 2px 6px rgba(50, 115, 73, 0.2);
}

/* ✅ Animation Néon Pulsé (Plus Visible) */
@keyframes neonPulse {
    from {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    to {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0.9;
    }
}



/* ✅ Modale d'Édition - Fond Flouté */
#edit-profile-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* ✅ Fond semi-transparent */
    backdrop-filter: blur(10px); /* ✅ Effet de flou subtil */
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s ease-in-out;
    z-index: 1000;
}

/* ✅ Activer la modale */
#edit-profile-modal.active {
    visibility: visible;
    opacity: 1;
}

/* ✅ Conteneur de la Modale */
.profile-edit-container {
    background: #CFE8D5; /* ✅ Dégradé vert pastel doux */
    width: 50%;
    max-width: 600px;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: relative;
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ✅ Apparition en douceur */
#edit-profile-modal.active .profile-edit-container {
    transform: translateY(0);
    opacity: 1;
}

/* ✅ Champs de Formulaire */
#edit-profile-form fieldset {
    border: none;
    padding: 15px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.6); /* ✅ Légère transparence */
    border-radius: 10px;
    box-shadow: inset 0px 2px 10px rgba(0, 0, 0, 0.1);
}

/* ✅ Titres des sections */
#edit-profile-form legend {
    font-size: 18px;
    font-weight: bold;
    color: #2C3E50;
    padding: 5px 10px;
    background: #A3D9A5;
    border-radius: 5px;
    text-transform: uppercase;
}

/* ✅ Labels et Inputs */
#edit-profile-form label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #2C3E50;
    text-align: left;
    margin-bottom: 5px;
}

#edit-profile-form input {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 2px solid #A3D9A5;
    border-radius: 8px;
    background: #fff;
    outline: none;
    transition: all 0.3s ease-in-out;
}

/* ✅ Effet de focus */
#edit-profile-form input:focus {
    border-color: #45C77F;
    box-shadow: 0 0 10px rgba(69, 199, 127, 0.4);
}

/* ✅ Boutons d’Action */
.btnedit {
    background: linear-gradient(135deg, #A3D9A5, #5DCB90);
    color: #2C3E50;
    font-size: 15px;
    font-weight: bold;
    padding: 12px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 160px;
    height: 45px;
    text-align: center;
    margin: 15px auto 0;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(50, 115, 73, 0.25);
}

/* ✅ Effet au survol */
.btnedit:hover {
    background: linear-gradient(135deg, #92D5A5, #45C77F);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(50, 115, 73, 0.4);
}

/* ✅ Effet au clic */
.btnedit:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(50, 115, 73, 0.2);
}

/* ✅ Responsive */
@media (max-width: 768px) {
    .profile-edit-container {
        width: 90%;
        max-width: none;
    }
}

/* ✅ Footer de la modale d'édition */
.modal-footer-edit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #CFE8D5;
    border-radius: 0 0 12px 12px;
}

/* ✅ Bouton Sauvegarder */
#save-edit-profile-btn,
.btnedit3.edit-profile-btn {
    background: linear-gradient(135deg, #A3D9A5, #6EBF8B);
    color: #2C3E50;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    height: 45px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(50, 115, 73, 0.2);
    position: relative;
    left: 90px; /* ✅ Ajustement léger pour le placement */
}

/* ✅ Effet au survol */
#save-edit-profile-btn:hover,
.btnedit3.edit-profile-btn:hover {
    background: #8FCF98;
    box-shadow: 0 6px 12px rgba(50, 115, 73, 0.3);
}

/* ✅ Effet au clic */
#save-edit-profile-btn:active,
.btnedit3.edit-profile-btn:active {
    background: #7ABF85;
    box-shadow: 0 2px 6px rgba(50, 115, 73, 0.2);
    transform: scale(0.98);
}

/* ✅ Bouton Annuler */
.cancel-edit-profile-btn {
    background: #E74C3C !important;
    color: white !important;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    height: 45px !important;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(179, 57, 57, 0.2);
    position: relative;
    left: 25px; /* ✅ Ajustement du placement */
	bottom: 9px;
}

/* ✅ Effet au survol */
.cancel-edit-profile-btn:hover {
    background: #C0392B !important;
    box-shadow: 0 6px 12px rgba(179, 57, 57, 0.3);
}

/* ✅ Effet au clic */
.cancel-edit-profile-btn:active {
    background: #A93226 !important;
    box-shadow: 0 2px 6px rgba(179, 57, 57, 0.2);
    transform: scale(0.98);
}

/* ✅ Conteneur principal des infos utilisateur */

/* ✅ Conteneur des informations utilisateur */
.user-info-box {
    background: transparent;
    padding: 20px; /* ✅ Un peu plus d’espace */
    border-radius: 8px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* ✅ Style des textes des infos utilisateur */
.user-info-box p {
    font-size: 16px;
    color: #2C3E50;
    margin: 15px 0; /* ✅ Espacement équilibré entre les lignes */
    display: flex;
    align-items: center;
    gap: 20px; /* ✅ Ajoute un espace entre le texte et l'icône */
}



/* ✅ Fond flou pour les modales utilisateur */
.user-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    max-width: 90%;
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 1100; /* ✅ Assure qu'elles passent au-dessus des autres */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* ✅ Active la modale proprement */
.user-modal.active {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -50%);
}

/* ✅ Contenu des modales utilisateur */
.user-modal-content {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* ✅ Titres des modales */
.user-modal-content h3 {
    text-align: center;
    margin-bottom: 15px;
    color: #2C3E50;
    font-size: 18px;
    font-weight: bold;
}

/* ✅ Labels */
.user-modal-content label {
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
    display: block;
    color: #34495E;
}

/* ✅ Champs de saisie */
.user-modal-content input {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    transition: border 0.3s ease;
}

/* ✅ Effet au focus */
.user-modal-content input:focus {
    border-color: #6EBF8B;
    outline: none;
}

/* ✅ Boutons */
.btnedit3-email,
.btnedit3-password,
.btnedit3-delete {
    margin-top: 15px;
    padding: 10px 18px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    display: block;
    width: 100%;
    text-align: center;
}

/* ✅ Bouton Sauvegarder */
.btnedit3-email,
.btnedit3-password {
    background: linear-gradient(135deg, #A3D9A5, #6EBF8B);
    color: #2C3E50;
    font-weight: bold;
}

.btnedit3-email:hover,
.btnedit3-password:hover {
    background: #8FCF98;
}

/* ✅ Bouton Supprimer */
.btnedit3-delete {
    background: #E74C3C;
    color: white;
    font-weight: bold;
}

.btnedit3-delete:hover {
    background: #C0392B;
}

/* ✅ Bouton de fermeture */
.user-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
    color: #34495E;
}

.user-close-btn:hover {
    color: #E74C3C;
}

/* ✅ Style pour le bouton de suppression du compte */
#delete-account-btn {
    display: block;
    width: fit-content;
    margin: 20px auto;
    background: none;
    color: #E74C3C;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
    border: none;
}

#delete-account-btn:hover {
    color: #C0392B;
}

/* ✅ Fond assombri pour éviter les conflits */
.user-modal-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    z-index: 1090;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* ✅ Icône œil pour afficher/cacher le mot de passe */
.toggle-password {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 23px;
    margin-left: 10px;
    color: #555;
    transition: color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
}

/* ✅ Effet au survol */
.toggle-password:hover {
    color: #2C3E50;
    transform: scale(1.1);
}

/* ✅ Effet au clic */
.toggle-password:active {
    transform: scale(0.95);
}

/* ✅ État actif (quand l'œil est ouvert) */
.toggle-password.active {
    color: #28b625;
}

/* ✅ Bouton icône (remplace le bouton Modifier) */
.edit-icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #2C3E50; /* Gris foncé */
    transition: transform 0.2s ease, color 0.2s ease;
    padding: 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto; /* ✅ Pousse l'icône complètement à droite */
}

/* ✅ Effet au survol */
.edit-icon-btn:hover {
    color: #28b625; /* ✅ Vert éclatant */
    transform: scale(1.1);
}

/* ✅ Effet au clic */
.edit-icon-btn:active {
    transform: scale(0.95);
}

/* ✅ Style spécifique à l’icône */
.edit-icon-btn i {
    font-size: 18px;
}

/* ✅ Style général des sous-containers */
.edit-section {
    display: none;
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: 15px;
    transition: all 0.3s ease-in-out;
    text-align: center;
}

/* ✅ Apparition fluide */
.edit-section.active {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

/* ✅ Animation d'apparition */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ✅ Titres */
.edit-title {
    font-size: 18px;
    font-weight: bold;
    color: #2C3E50;
    margin-bottom: 15px;
}

.delete-warning {
    color: #E74C3C;
}

/* ✅ Alignement centré des éléments */
.edit-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* ✅ Inputs */
.edit-input {
    width: 90%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    text-align: center;
    font-size: 14px;
}

/* ✅ Actions */
.edit-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

/* ✅ Boutons */
.btn-save {
    background: #28b625;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-save:hover {
    background: #239b21;
}

.btn-cancel {
    background: #dcdcdc;
    color: black;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-cancel:hover {
    background: #bbb;
}

.btn-delete {
    background: #E74C3C;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-delete:hover {
    background: #C0392B;
}

/* ✅ Texte d'alerte suppression */
.delete-text {
    font-size: 14px;
    color: #E74C3C;
    font-weight: bold;
    margin-bottom: 10px;
}




/* Profile setup modal refresh */
#profile-modal.modal.active,
#profile-permit-modal.active,
#profile-vaccine-modal.active {
    backdrop-filter: blur(16px);
}

#profile-modal {
    padding: 24px;
    background: radial-gradient(circle at top, rgba(230, 255, 230, 0.28), rgba(8, 26, 14, 0.52));
}

#profile-modal .profile-modal-card {
    width: min(760px, calc(100vw - 32px));
    max-width: 760px;
    max-height: min(88vh, 940px);
    padding: 0;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(70, 123, 84, 0.18);
    background:
        radial-gradient(circle at top right, rgba(176, 233, 193, 0.34), transparent 34%),
        linear-gradient(180deg, #fbfffb 0%, #f2fbf3 100%);
    box-shadow: 0 30px 80px rgba(16, 44, 24, 0.28);
}

#profile-modal .profile-modal-card:hover {
    box-shadow: 0 32px 86px rgba(16, 44, 24, 0.3);
}

#profile-modal .profile-modal-header {
    padding: 28px 30px 18px;
    text-align: left;
    border-bottom: 1px solid rgba(75, 120, 86, 0.12);
    background: linear-gradient(135deg, rgba(222, 247, 226, 0.92), rgba(248, 255, 250, 0.94));
}

#profile-modal .profile-modal-eyebrow {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2f7a4a;
}

#profile-modal .profile-modal-header h3 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
    color: #163d26;
}

#profile-modal .profile-modal-intro {
    margin: 12px 0 0;
    max-width: 560px;
    font-size: 14px;
    line-height: 1.6;
    color: #557161;
}

#profile-modal .profile-form-layout {
    display: grid;
    gap: 18px;
    padding: 22px 22px 0;
    overflow-y: auto;
}

#profile-modal .profile-form-section {
    margin: 0;
    padding: 22px;
    border: 1px solid rgba(70, 123, 84, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 12px 24px rgba(19, 51, 29, 0.06);
}

#profile-modal .profile-form-section legend {
    padding: 0 12px;
    border-radius: 999px;
    background: #edf8ef;
    color: #2b7346;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#profile-modal label {
    margin: 14px 0 7px;
    color: #244233;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

#profile-modal input[type="text"],
#profile-modal input[type="number"],
#profile-modal input[type="date"],
#profile-modal input[type="file"] {
    border: 1px solid rgba(91, 126, 100, 0.2);
    border-radius: 14px;
    background: #f8fcf8;
    padding: 13px 14px;
    font-size: 14px;
    color: #22372c;
    box-shadow: inset 0 1px 2px rgba(15, 42, 24, 0.04);
}

#profile-modal input:focus {
    border-color: #2f8a54;
    box-shadow: 0 0 0 4px rgba(54, 151, 92, 0.14);
}

#profile-modal input[type="file"] {
    padding: 10px 12px;
}

#profile-modal input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background: #dff3e3;
    color: #255339;
    font-weight: 700;
    cursor: pointer;
}

#profile-modal .selection-trigger {
    width: 100%;
    margin-top: 8px;
    padding: 13px 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #eff9f1, #dff4e6);
    color: #1f5634;
    border: 1px dashed rgba(47, 122, 74, 0.35);
    box-shadow: none;
}

#profile-modal .selection-trigger:hover {
    background: linear-gradient(135deg, #dff4e6, #cdeed8);
    transform: translateY(-1px);
}

#profile-modal .selection-summary {
    margin: 10px 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f5faf6;
    border: 1px solid rgba(83, 118, 93, 0.12);
    color: #5c7264;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}

#profile-modal .profile-modal-footer {
    position: sticky;
    bottom: 0;
    gap: 12px;
    padding: 18px 22px 22px;
    background: linear-gradient(180deg, rgba(242, 251, 243, 0.2), #f2fbf3 32%);
    border-top: 1px solid rgba(75, 120, 86, 0.12);
    box-shadow: none;
}

#profile-modal .profile-modal-footer .btn {
    width: 100%;
    min-height: 48px;
    margin-top: 0;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 700;
}

#profile-modal .profile-primary-btn {
    background: linear-gradient(135deg, #31a85d, #237547);
    box-shadow: 0 14px 24px rgba(35, 117, 71, 0.18);
}

#profile-modal .profile-primary-btn:hover {
    background: linear-gradient(135deg, #27914f, #1d653d);
    transform: translateY(-1px);
}

#profile-modal .profile-secondary-btn,
#profile-modal #close-modal-btn {
    background: #f7faf7 !important;
    color: #294734;
    border: 1px solid rgba(82, 116, 92, 0.2);
    box-shadow: none;
}

#profile-modal .profile-secondary-btn:hover,
#profile-modal #close-modal-btn:hover {
    background: #eef6ef !important;
    color: #1d3527;
    border-color: rgba(82, 116, 92, 0.28);
    transform: translateY(-1px);
}

#profile-permit-modal,
#profile-vaccine-modal {
    padding: 20px;
    background: radial-gradient(circle at top, rgba(219, 246, 225, 0.22), rgba(10, 24, 14, 0.56));
}

#profile-permit-modal .profile-choice-card,
#profile-vaccine-modal .profile-choice-card {
    width: min(560px, calc(100vw - 28px));
    max-width: 560px;
    padding: 28px 28px 24px;
    border-radius: 24px;
    border: 1px solid rgba(74, 117, 86, 0.16);
    background:
        radial-gradient(circle at top right, rgba(205, 241, 215, 0.34), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f5fbf6 100%);
    box-shadow: 0 26px 60px rgba(14, 38, 22, 0.24);
    text-align: left;
}

#profile-permit-modal .profile-choice-card h3,
#profile-vaccine-modal .profile-choice-card h3 {
    margin: 0;
    font-size: 26px;
    color: #183d28;
}

#profile-permit-modal .profile-choice-intro,
#profile-vaccine-modal .profile-choice-intro {
    margin: 10px 0 18px;
    color: #587164;
    font-size: 14px;
    line-height: 1.55;
}

#profile-permit-modal .close-btn,
#profile-vaccine-modal .close-btn {
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f0f6f1;
    color: #315440;
}

#profile-permit-modal .close-btn:hover,
#profile-vaccine-modal .close-btn:hover {
    background: #e5f1e7;
    color: #173525;
}

#profile-permit-modal .profile-checkbox-group,
#profile-vaccine-modal .profile-checkbox-group {
    gap: 10px;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

#profile-permit-modal .profile-checkbox-group label,
#profile-vaccine-modal .profile-checkbox-group label {
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(85, 122, 95, 0.14);
    background: rgba(248, 252, 248, 0.94);
    color: #2a4736;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

#profile-permit-modal .profile-checkbox-group label:hover,
#profile-vaccine-modal .profile-checkbox-group label:hover {
    background: #eef8f0;
    border-color: rgba(49, 124, 76, 0.28);
}

#profile-permit-modal .profile-checkbox-group input,
#profile-vaccine-modal .profile-checkbox-group input,
#edit-profile-permit-modal .profile-checkbox-group input,
#edit-profile-vaccine-modal .profile-checkbox-group input {
    width: 22px;
    height: 22px;
    margin-right: 12px;
    transform: none;
    flex: 0 0 22px;
}

#profile-permit-modal .profile-checkbox-group input:checked,
#profile-vaccine-modal .profile-checkbox-group input:checked,
#edit-profile-permit-modal .profile-checkbox-group input:checked,
#edit-profile-vaccine-modal .profile-checkbox-group input:checked {
    background: linear-gradient(180deg, #33b15f, #238048);
    border-color: #238048;
}

#profile-permit-modal .profile-modal-btn,
#profile-vaccine-modal .profile-modal-btn {
    width: 100%;
    min-height: 46px;
    margin-top: 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, #31a85d, #237547);
    box-shadow: 0 14px 24px rgba(35, 117, 71, 0.16);
}

#profile-permit-modal .profile-modal-btn:hover,
#profile-vaccine-modal .profile-modal-btn:hover {
    background: linear-gradient(135deg, #27914f, #1d653d);
    transform: translateY(-1px);
}

@media (max-width: 720px) {
    #profile-modal {
        padding: 14px;
    }

    #profile-modal .profile-modal-card {
        width: calc(100vw - 12px);
        max-height: 92vh;
        border-radius: 22px;
    }

    #profile-modal .profile-modal-header {
        padding: 22px 20px 16px;
    }

    #profile-modal .profile-modal-header h3 {
        font-size: 24px;
    }

    #profile-modal .profile-form-layout {
        padding: 16px 16px 0;
    }

    #profile-modal .profile-form-section {
        padding: 18px;
        border-radius: 18px;
    }

    #profile-modal .profile-modal-footer {
        flex-direction: column;
        padding: 16px;
    }

    #profile-permit-modal .profile-choice-card,
    #profile-vaccine-modal .profile-choice-card {
        padding: 22px 18px 18px;
        border-radius: 20px;
    }
}

/* ===============================
   User Account Refresh
   =============================== */
body.user-account-page {
    background:
        radial-gradient(circle at top left, rgba(205, 244, 214, 0.78), transparent 38%),
        radial-gradient(circle at 82% 14%, rgba(255, 232, 208, 0.72), transparent 30%),
        linear-gradient(180deg, #f7fbf5 0%, #eef7f0 48%, #f8f4eb 100%);
    color: #193224;
}

body.user-account-page.modal-open {
    overflow: hidden;
}

body.user-account-page .account-shell {
    max-width: 1220px;
    margin: 42px auto 80px;
    padding: 0 24px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

body.user-account-page .full-width {
    grid-column: 1 / -1;
}

body.user-account-page .account-hero,
body.user-account-page .account-panel {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(24, 65, 45, 0.12);
    box-shadow: 0 24px 60px rgba(26, 61, 45, 0.10);
}

body.user-account-page .account-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.9fr);
    gap: 24px;
    padding: 34px;
    background:
        linear-gradient(135deg, rgba(19, 97, 57, 0.92) 0%, rgba(43, 137, 83, 0.9) 44%, rgba(217, 238, 196, 0.94) 100%);
    color: #f7fff5;
}

body.user-account-page .account-hero::after {
    content: "";
    position: absolute;
    inset: auto -90px -120px auto;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    filter: blur(4px);
}

body.user-account-page .account-hero-copy,
body.user-account-page .account-hero-card {
    position: relative;
    z-index: 1;
}

body.user-account-page .account-eyebrow,
body.user-account-page .panel-kicker,
body.user-account-page .modal-eyebrow,
body.user-account-page .profile-modal-eyebrow {
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

body.user-account-page .account-hero h1 {
    margin: 0 0 16px;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    line-height: 1.02;
    color: #fffef8;
}

body.user-account-page .account-hero-text {
    max-width: 700px;
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.8;
    color: rgba(251, 255, 250, 0.88);
}

body.user-account-page .account-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

body.user-account-page .hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fffef8;
    font-weight: 700;
}

body.user-account-page .hero-pill-soft {
    background: rgba(244, 250, 238, 0.16);
}

body.user-account-page .account-hero-card {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 26px;
    border-radius: 24px;
    background: rgba(252, 255, 249, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(14px);
}

body.user-account-page .hero-card-kicker {
    margin: 0;
    font-size: 0.88rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(251, 255, 250, 0.76);
}

body.user-account-page .account-hero-card h2 {
    margin: 0;
    font-size: 1.95rem;
    line-height: 1.1;
    color: #ffffff;
}

body.user-account-page .account-hero-card p {
    margin: 0;
    color: rgba(246, 252, 245, 0.88);
}

body.user-account-page .hero-card-detail {
    font-size: 0.96rem;
}

body.user-account-page .hero-card-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

body.user-account-page .hero-card-stats div {
    padding: 14px;
    border-radius: 18px;
    background: rgba(14, 39, 26, 0.18);
}

body.user-account-page .hero-card-stats strong {
    display: block;
    font-size: 1.55rem;
    color: #ffffff;
}

body.user-account-page .hero-card-stats span {
    font-size: 0.85rem;
    color: rgba(250, 255, 248, 0.84);
}

body.user-account-page .account-panel {
    padding: 30px;
    background: rgba(255, 252, 246, 0.82);
    backdrop-filter: blur(14px);
}

body.user-account-page .panel-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 24px;
}

body.user-account-page .panel-head h2 {
    margin: 0;
    font-size: 2rem;
    color: #173625;
}

body.user-account-page .panel-copy {
    margin: 0;
    max-width: 380px;
    font-size: 0.98rem;
    line-height: 1.7;
    color: #567062;
}

body.user-account-page .account-info-list {
    display: grid;
    gap: 14px;
}

body.user-account-page .account-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(244, 249, 239, 0.84);
    border: 1px solid rgba(29, 94, 62, 0.08);
}

body.user-account-page .account-info-label {
    color: #5d7268;
    font-size: 0.92rem;
}

body.user-account-page .account-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 24px;
}

body.user-account-page.account-guest-view .account-shell {
    grid-template-columns: 1fr;
}

body.user-account-page .account-guest-hero {
    min-height: 420px;
    align-items: stretch;
}

body.user-account-page .account-guest-card {
    justify-content: center;
}

body.user-account-page .account-guest-card h2 {
    max-width: 12ch;
}

body.user-account-page .account-guest-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

body.user-account-page .account-guest-actions .account-inline-btn {
    text-decoration: none;
    justify-content: center;
}

body.user-account-page .account-inline-btn,
body.user-account-page .account-primary-btn,
body.user-account-page .account-secondary-btn,
body.user-account-page .account-danger-btn {
    appearance: none;
    border: none;
    border-radius: 999px;
    padding: 9px 16px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
}

body.user-account-page .account-inline-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

body.user-account-page .account-primary-btn {
    background: linear-gradient(135deg, #1c8a54 0%, #2ca562 100%);
    color: #fbfff8;
    box-shadow: 0 16px 28px rgba(39, 127, 79, 0.22);
}

body.user-account-page .account-primary-btn:hover,
body.user-account-page .account-secondary-btn:hover,
body.user-account-page .account-danger-btn:hover,
body.user-account-page .account-inline-btn:hover {
    transform: translateY(-2px);
}

body.user-account-page .account-secondary-btn {
    background: #ffffff;
    color: #18442e;
    border: 1px solid rgba(24, 68, 46, 0.14);
    box-shadow: 0 12px 24px rgba(28, 63, 44, 0.08);
}

body.user-account-page .account-danger-btn {
    background: #fff4f1;
    color: #b13a31;
    border: 1px solid rgba(177, 58, 49, 0.15);
}

body.user-account-page .ghost-danger-btn {
    background: #fff8f6;
    box-shadow: none;
}

body.user-account-page .profile-list,
body.user-account-page .trip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

body.user-account-page .profile-card,
body.user-account-page .trip-account-card,
body.user-account-page .empty-card-state {
    border-radius: 24px;
    border: 1px solid rgba(28, 72, 49, 0.10);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 251, 245, 0.96) 100%);
    box-shadow: 0 18px 36px rgba(22, 57, 38, 0.08);
}

body.user-account-page .empty-card-state {
    padding: 28px;
    text-align: center;
}

body.user-account-page .empty-card-state p {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e3b2b;
}

body.user-account-page .empty-card-state span {
    color: #62796d;
    line-height: 1.6;
}

body.user-account-page .profile-card {
    padding: 22px;
}

body.user-account-page .profile-card-header,
body.user-account-page .trip-card-heading {
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

body.user-account-page .profile-card-header h3,
body.user-account-page .trip-card-heading h3 {
    margin: 0 0 6px;
    font-size: 1.28rem;
    color: #183524;
}

body.user-account-page .profile-card-header p,
body.user-account-page .trip-card-heading p,
body.user-account-page .trip-card-subtitle {
    margin: 0;
    color: #60766c;
    line-height: 1.6;
}

body.user-account-page .profile-doc-badge,
body.user-account-page .trip-dates-pill {
    align-self: flex-start;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(225, 241, 220, 0.9);
    color: #21513a;
    font-size: 0.84rem;
    font-weight: 700;
}

body.user-account-page .profile-card-meta {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

body.user-account-page .profile-card-meta p {
    margin: 0;
    color: #52685d;
}

body.user-account-page .profile-card-actions,
body.user-account-page .trip-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

body.user-account-page .add-profile-cta {
    margin-top: 22px;
}

body.user-account-page .trip-account-card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
}

body.user-account-page .trip-card-media {
    position: relative;
    min-height: 100%;
}

body.user-account-page .trip-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.user-account-page .trip-state-pill {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    backdrop-filter: blur(12px);
}

body.user-account-page .trip-state-pill.is-confirmed {
    background: rgba(254, 248, 228, 0.92);
    color: #8e6520;
}

body.user-account-page .trip-state-pill.is-honored {
    background: rgba(227, 245, 241, 0.94);
    color: #176f67;
}

body.user-account-page .trip-state-pill.is-draft {
    background: rgba(239, 251, 242, 0.92);
    color: #196d41;
}

body.user-account-page .trip-card-content {
    padding: 24px;
}

body.user-account-page .trip-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

body.user-account-page .trip-card-stats span {
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(243, 248, 238, 0.92);
    color: #355244;
    font-size: 0.84rem;
    font-weight: 700;
}

body.user-account-page .community-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, rgba(255, 250, 242, 0.95) 0%, rgba(239, 250, 239, 0.96) 100%);
}

body.user-account-page .community-cta {
    white-space: nowrap;
}

body.user-account-page .edit-section,
body.user-account-page .account-modal,
body.user-account-page .modal,
body.user-account-page .profile-modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px 18px;
    z-index: 2000;
}

body.user-account-page .edit-section.active,
body.user-account-page .account-modal.active,
body.user-account-page .modal.active,
body.user-account-page .profile-modal-overlay.active {
    display: flex;
}

body.user-account-page .account-modal-backdrop,
body.user-account-page .modal-scrim {
    position: absolute;
    inset: 0;
    background: rgba(12, 27, 19, 0.58);
    backdrop-filter: blur(8px);
}

body.user-account-page .account-modal-card,
body.user-account-page .profile-modal-card,
body.user-account-page .profile-view-container,
body.user-account-page .profile-edit-container,
body.user-account-page .profile-modal-content {
    position: relative;
    z-index: 1;
    width: min(100%, 860px);
    max-height: calc(100vh - 56px);
    overflow: auto;
    padding: 30px;
    border-radius: 30px;
    background: linear-gradient(180deg, #fffdf8 0%, #f5faf2 100%);
    border: 1px solid rgba(26, 70, 47, 0.10);
    box-shadow: 0 30px 80px rgba(8, 23, 15, 0.26);
}

body.user-account-page .account-modal-card {
    width: min(100%, 560px);
}

body.user-account-page .profile-modal-content {
    width: min(100%, 520px);
}

body.user-account-page .danger-modal-card {
    background: linear-gradient(180deg, #fff8f6 0%, #fff1ed 100%);
}

body.user-account-page .modal-close-icon {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(24, 68, 46, 0.12);
    background: rgba(255, 255, 255, 0.9);
    color: #1a3d2a;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}

body.user-account-page .modal-copy,
body.user-account-page .profile-modal-intro,
body.user-account-page .profile-choice-intro,
body.user-account-page .delete-text {
    margin: 0;
    color: #60776b;
    line-height: 1.7;
}

body.user-account-page .profile-delete-modal-card {
    width: min(100%, 620px);
    padding: 32px;
    background:
        radial-gradient(circle at top left, rgba(255, 228, 223, 0.88) 0%, rgba(255, 228, 223, 0) 34%),
        linear-gradient(180deg, #fffaf7 0%, #fff3ee 100%);
}

body.user-account-page .profile-delete-modal-head {
    display: grid;
    gap: 10px;
    padding-right: 58px;
}

body.user-account-page .profile-delete-target {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding: 18px 20px;
    border-radius: 24px;
    border: 1px solid rgba(177, 58, 49, 0.12);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body.user-account-page .profile-delete-target-avatar {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #d76355 0%, #f0a07c 100%);
    color: #fffaf7;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    box-shadow: 0 18px 28px rgba(171, 74, 61, 0.22);
}

body.user-account-page .profile-delete-target-avatar.has-photo {
    color: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

body.user-account-page .profile-delete-target-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

body.user-account-page .profile-delete-target-label,
body.user-account-page .profile-delete-impact-title {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #af5a4d;
}

body.user-account-page .profile-delete-target-name {
    margin: 0;
    color: #2d3f34;
    font-size: 1.08rem;
    font-weight: 800;
}

body.user-account-page .profile-delete-impact {
    display: grid;
    gap: 14px;
    margin-top: 18px;
    padding: 20px 22px;
    border-radius: 24px;
    border: 1px solid rgba(177, 58, 49, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 247, 243, 0.94) 100%);
}

body.user-account-page .profile-delete-impact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

body.user-account-page .profile-delete-impact-list li {
    position: relative;
    margin: 0;
    padding-left: 28px;
    color: #5e6d63;
    line-height: 1.6;
}

body.user-account-page .profile-delete-impact-list li::before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #db6d5d 0%, #efaa8f 100%);
    box-shadow: 0 0 0 4px rgba(226, 120, 98, 0.12);
}

body.user-account-page .profile-delete-actions {
    justify-content: flex-start;
}

body.user-account-page .profile-delete-actions .account-danger-btn[disabled] {
    opacity: 0.72;
    cursor: wait;
    transform: none;
}

body.user-account-page .modal-form-grid,
body.user-account-page .profile-form-layout {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

body.user-account-page .profile-form-layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.user-account-page .compact-layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.user-account-page .profile-form-section {
    min-width: 0;
    padding: 22px;
    margin: 0;
    border-radius: 24px;
    border: 1px solid rgba(26, 75, 48, 0.09);
    background: rgba(250, 253, 247, 0.92);
    display: grid;
    gap: 10px;
}

body.user-account-page .profile-form-section legend {
    padding: 0 10px;
    font-weight: 700;
    color: #1f4a32;
}

body.user-account-page .modal-form-grid label,
body.user-account-page .profile-form-section label {
    font-size: 0.92rem;
    font-weight: 700;
    color: #234734;
}

body.user-account-page .edit-input,
body.user-account-page .profile-form-section input,
body.user-account-page .profile-form-section textarea,
body.user-account-page .profile-form-section select,
body.user-account-page .selection-trigger {
    width: 100%;
    box-sizing: border-box;
    border-radius: 16px;
    border: 1px solid rgba(33, 84, 56, 0.14);
    background: #ffffff;
    padding: 13px 14px;
    font: inherit;
    color: #183625;
}

body.user-account-page .selection-trigger {
    text-align: left;
    font-weight: 700;
    background: rgba(249, 253, 246, 0.98);
}

body.user-account-page .edit-input:focus,
body.user-account-page .profile-form-section input:focus,
body.user-account-page .selection-trigger:focus {
    outline: none;
    border-color: rgba(35, 146, 82, 0.58);
    box-shadow: 0 0 0 4px rgba(68, 177, 112, 0.12);
}

body.user-account-page .selection-summary,
body.user-account-page .static-info {
    margin: 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(242, 247, 238, 0.96);
    color: #556d61;
    line-height: 1.55;
}

body.user-account-page .modal-actions,
body.user-account-page .profile-modal-footer,
body.user-account-page .profile-view-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

body.user-account-page .profile-view-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
}

body.user-account-page .profile-view-section {
    padding: 20px;
    border-radius: 22px;
    background: rgba(248, 252, 244, 0.92);
    border: 1px solid rgba(26, 75, 48, 0.08);
}

body.user-account-page .profile-view-section h4 {
    margin: 0 0 16px;
    color: #1e4731;
}

body.user-account-page .profile-view-section p {
    margin: 0 0 10px;
    color: #5b7166;
    line-height: 1.6;
}

body.user-account-page .profile-checkbox-group {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
}

body.user-account-page .profile-checkbox-group label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(246, 250, 242, 0.95);
    border: 1px solid rgba(26, 75, 48, 0.08);
    color: #325243;
}

body.user-account-page .valid-link {
    color: #1d8b56;
    font-weight: 700;
    text-decoration: none;
}

body.user-account-page .valid-link:hover {
    text-decoration: underline;
}

body.user-account-page .modal-eyebrow-danger {
    color: #b84f44;
}

body.user-account-page .account-toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 2500;
    max-width: 360px;
    padding: 14px 18px;
    border-radius: 18px;
    background: #1f4a32;
    color: #f7fff8;
    box-shadow: 0 18px 42px rgba(12, 28, 18, 0.22);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

body.user-account-page .account-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

body.user-account-page .account-toast.is-error {
    background: #b6453c;
}

body.user-account-page .account-toast.is-info {
    background: #2f6f8f;
}

body.user-account-page .hidden {
    display: none !important;
}

@media (max-width: 1100px) {
    body.user-account-page .account-shell {
        grid-template-columns: 1fr;
    }

    body.user-account-page .account-hero,
    body.user-account-page .community-panel,
    body.user-account-page .panel-head {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    body.user-account-page .account-action-grid,
    body.user-account-page .profile-form-layout,
    body.user-account-page .compact-layout,
    body.user-account-page .profile-view-grid {
        grid-template-columns: 1fr;
    }

    body.user-account-page .trip-account-card {
        grid-template-columns: 1fr;
    }

    body.user-account-page .trip-card-media {
        min-height: 220px;
    }
}

@media (max-width: 760px) {
    body.user-account-page .account-shell {
        padding: 0 16px;
        margin-top: 26px;
    }

    body.user-account-page .account-hero,
    body.user-account-page .account-panel,
    body.user-account-page .account-modal-card,
    body.user-account-page .profile-modal-card,
    body.user-account-page .profile-view-container,
    body.user-account-page .profile-edit-container,
    body.user-account-page .profile-modal-content {
        padding: 22px;
        border-radius: 24px;
    }

    body.user-account-page .profile-delete-modal-card {
        padding: 24px;
    }

    body.user-account-page .profile-delete-modal-head {
        padding-right: 42px;
    }

    body.user-account-page .profile-delete-target {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    body.user-account-page .hero-card-stats {
        grid-template-columns: 1fr;
    }

    body.user-account-page .account-info-row,
    body.user-account-page .trip-card-heading,
    body.user-account-page .profile-card-header,
    body.user-account-page .community-panel {
        flex-direction: column;
        align-items: flex-start;
    }

    body.user-account-page .account-action-grid,
    body.user-account-page .modal-actions,
    body.user-account-page .profile-modal-footer,
    body.user-account-page .profile-card-actions,
    body.user-account-page .trip-card-actions {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    body.user-account-page .account-inline-btn,
    body.user-account-page .account-primary-btn,
    body.user-account-page .account-secondary-btn,
    body.user-account-page .account-danger-btn {
        width: 100%;
    }

    body.user-account-page .profile-delete-actions .account-danger-btn,
    body.user-account-page .profile-delete-actions .account-secondary-btn {
        width: 100%;
    }

    body.user-account-page .account-toast {
        left: 16px;
        right: 16px;
        max-width: none;
    }
}

body.user-account-page .user-details,
body.user-account-page .user-profiles,
body.user-account-page .upcoming-trips,
body.user-account-page .trip-history,
body.user-account-page .user-trav-page {
    transition: box-shadow 0.24s ease, transform 0.24s ease;
}

body.user-account-page .user-details:hover,
body.user-account-page .user-profiles:hover,
body.user-account-page .upcoming-trips:hover,
body.user-account-page .trip-history:hover,
body.user-account-page .user-trav-page:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 52px rgba(21, 56, 37, 0.12);
}

body.user-account-page .community-panel a {
    text-decoration: none;
}
/* Account card polish */
body.user-account-page .profile-list,
body.user-account-page .trip-list {
    overflow: visible !important;
    max-height: none !important;
    gap: 18px;
}

body.user-account-page .profile-list-item,
body.user-account-page .trip-list-item,
body.user-account-page .profile-list li,
body.user-account-page .trip-list li {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
    overflow: visible !important;
}

body.user-account-page .profile-list li::before,
body.user-account-page .trip-list li::before {
    content: none !important;
    display: none !important;
}

body.user-account-page .profile-list li:hover,
body.user-account-page .trip-list li:hover,
body.user-account-page .profile-list-item:hover,
body.user-account-page .trip-list-item:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
}

body.user-account-page .profile-card,
body.user-account-page .trip-account-card {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

body.user-account-page .profile-card:hover,
body.user-account-page .trip-account-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 48px rgba(24, 58, 40, 0.10);
    border-color: rgba(31, 96, 60, 0.16);
}

body.user-account-page .profile-card {
    padding: 24px;
    background:
        radial-gradient(circle at top right, rgba(208, 239, 210, 0.52), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 251, 245, 0.98) 100%);
}

body.user-account-page .profile-card-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
}

body.user-account-page .profile-card-identity {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

body.user-account-page .profile-card-avatar {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(145deg, #1f7c4f, #6cbd7b);
    color: #f8fff7;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    box-shadow: 0 14px 26px rgba(36, 118, 72, 0.2);
}

body.user-account-page .profile-card-summary {
    min-width: 0;
}

body.user-account-page .profile-card-kicker {
    margin: 0 0 8px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4e7c62;
}

body.user-account-page .profile-card-subline {
    margin: 0;
    color: #60766c;
    line-height: 1.55;
}

body.user-account-page .profile-card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

body.user-account-page .profile-doc-badge {
    padding: 9px 13px;
    background: rgba(232, 243, 226, 0.92);
    border: 1px solid rgba(67, 116, 77, 0.12);
}

body.user-account-page .profile-status-chip {
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: right;
}

body.user-account-page .profile-status-chip.is-complete {
    background: rgba(225, 244, 228, 0.88);
    color: #2b6e45;
}

body.user-account-page .profile-status-chip.is-light {
    background: rgba(247, 244, 235, 0.94);
    color: #7b6a43;
}

body.user-account-page .profile-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

body.user-account-page .profile-card-facts span {
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid rgba(35, 84, 56, 0.10);
    background: rgba(246, 249, 241, 0.96);
    color: #365244;
    font-size: 0.84rem;
    font-weight: 700;
}

body.user-account-page .profile-card-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

body.user-account-page .profile-info-block {
    padding: 15px 16px;
    border-radius: 18px;
    border: 1px solid rgba(34, 87, 58, 0.10);
    background: rgba(255, 255, 255, 0.86);
}

body.user-account-page .profile-info-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5a7d67;
}

body.user-account-page .profile-info-block p {
    margin: 0;
    color: #355042;
    line-height: 1.55;
}

body.user-account-page .profile-card-actions {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(31, 84, 56, 0.09);
}

body.user-account-page .trip-account-card {
    grid-template-columns: minmax(220px, 246px) minmax(0, 1fr);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 252, 246, 0.98) 100%);
}

body.user-account-page .trip-card-media {
    min-height: 252px;
}

body.user-account-page .trip-card-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 42%;
    background: linear-gradient(180deg, rgba(7, 19, 12, 0) 0%, rgba(7, 19, 12, 0.2) 100%);
    pointer-events: none;
}

body.user-account-page .trip-card-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px;
}

body.user-account-page .trip-card-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
}

body.user-account-page .trip-card-copy {
    min-width: 0;
}

body.user-account-page .trip-card-kicker {
    margin: 0 0 8px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4f7a60;
}

body.user-account-page .trip-card-heading h3 {
    margin-bottom: 8px;
    max-width: 12ch;
}

body.user-account-page .trip-dates-pill {
    display: none;
}

body.user-account-page .trip-dates-card {
    min-width: 168px;
    max-width: 208px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(188, 179, 148, 0.28);
    background: rgba(252, 249, 241, 0.96);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body.user-account-page .trip-dates-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7a6b48;
}

body.user-account-page .trip-dates-card strong {
    display: block;
    color: #264734;
    line-height: 1.45;
    font-size: 0.94rem;
}

body.user-account-page .trip-card-subtitle {
    margin-top: -2px;
    color: #5f7568;
}

body.user-account-page .trip-card-stats {
    gap: 10px;
    margin-top: 2px;
}

body.user-account-page .trip-card-stats span {
    background: rgba(247, 248, 240, 0.96);
    border: 1px solid rgba(35, 84, 56, 0.08);
}

body.user-account-page .trip-card-actions {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(31, 84, 56, 0.09);
}

body.user-account-page .trip-state-pill.is-confirmed {
    background: rgba(255, 246, 225, 0.96);
    color: #936726;
}

body.user-account-page .trip-state-pill.is-honored {
    background: rgba(227, 245, 241, 0.96);
    color: #176f67;
}

body.user-account-page .trip-state-pill.is-draft {
    background: rgba(235, 248, 236, 0.96);
    color: #1d6b42;
}

body.user-account-page .account-secondary-btn:hover {
    background: #f6faf4;
    color: #173c29;
}

body.user-account-page .ghost-danger-btn:hover {
    background: #fff1ee;
    color: #a33931;
}

@media (max-width: 900px) {
    body.user-account-page .profile-card-header,
    body.user-account-page .trip-card-heading {
        grid-template-columns: 1fr;
    }

    body.user-account-page .profile-card-badges {
        align-items: flex-start;
    }

    body.user-account-page .profile-card-panels {
        grid-template-columns: 1fr;
    }

    body.user-account-page .trip-dates-card {
        max-width: none;
        width: 100%;
    }
}

@media (max-width: 760px) {
    body.user-account-page .profile-card {
        padding: 20px;
    }

    body.user-account-page .profile-card-identity {
        align-items: center;
    }

    body.user-account-page .profile-card-avatar {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        border-radius: 16px;
    }

    body.user-account-page .trip-card-content {
        padding: 22px;
    }

    body.user-account-page .trip-card-heading h3 {
        max-width: none;
    }
}
body.user-account-page .profile-list li,
body.user-account-page .trip-list li {
    display: block !important;
    min-height: 0 !important;
    align-items: stretch !important;
    justify-content: initial !important;
    backdrop-filter: none !important;
}
/* Profile photo and modal refresh */
body.user-account-page .profile-photo-field {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(34, 84, 56, 0.08);
    background: linear-gradient(135deg, rgba(241, 249, 240, 0.96), rgba(255, 255, 255, 0.96));
}

body.user-account-page .profile-photo-field--inline {
    grid-template-columns: 128px minmax(0, 1fr);
    min-height: 184px;
    padding: 22px;
}

body.user-account-page .profile-photo-preview,
body.user-account-page .profile-view-avatar {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(145deg, #1f7c4f, #6cbd7b);
    box-shadow: 0 18px 30px rgba(31, 112, 68, 0.18);
}

body.user-account-page .profile-photo-preview--large {
    border-radius: 34px;
}

body.user-account-page .profile-photo-image,
body.user-account-page .profile-card-avatar.has-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.user-account-page .profile-photo-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f8fff7;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

body.user-account-page .profile-photo-copy {
    display: grid;
    gap: 10px;
}

body.user-account-page .profile-upload-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4f7d66;
}

body.user-account-page .profile-upload-help {
    margin: 0;
    color: #62786d;
    line-height: 1.65;
}

body.user-account-page .profile-upload-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 12px 16px;
    border-radius: 999px;
    background: #e0facb;
    color: #000;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 14px 24px rgba(27, 80, 53, 0.18);
}

body.user-account-page .profile-upload-trigger:hover {
    background: #183d29;
    transform: translateY(-1px);
}

body.user-account-page #profile-photo,
body.user-account-page #edit-profile-photo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.user-account-page .profile-field-grid {
    display: grid;
    gap: 14px;
}

body.user-account-page .profile-field-grid.two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.user-account-page .profile-card-avatar {
    overflow: hidden;
}

body.user-account-page .profile-card-avatar.has-photo {
    padding: 0;
    background: #e7f5ea;
}

body.user-account-page .profile-view-shell {
    display: grid;
    gap: 22px;
}

body.user-account-page .profile-view-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    padding: 24px;
    border-radius: 28px;
    background: radial-gradient(circle at top right, rgba(202, 236, 205, 0.42), transparent 35%), linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 251, 243, 0.98));
    border: 1px solid rgba(33, 84, 56, 0.08);
}

body.user-account-page .profile-view-identity {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

body.user-account-page .profile-view-avatar {
    width: 96px;
    flex: 0 0 96px;
}

body.user-account-page .profile-view-copy h3 {
    margin: 0;
    color: #1d402d;
}

body.user-account-page .profile-view-meta {
    margin: 8px 0 0;
    color: #61786e;
    line-height: 1.6;
}

body.user-account-page .profile-view-status-card {
    display: grid;
    gap: 10px;
    justify-items: end;
    align-content: start;
    min-width: 190px;
    padding: 16px 18px;
    border-radius: 22px;
    background: rgba(255, 252, 245, 0.94);
    border: 1px solid rgba(186, 173, 135, 0.22);
}

body.user-account-page .profile-view-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body.user-account-page .profile-view-highlights span {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(33, 84, 56, 0.08);
    background: rgba(246, 249, 242, 0.96);
    color: #355042;
    font-size: 0.86rem;
    font-weight: 700;
}

body.user-account-page .profile-view-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

body.user-account-page .profile-view-panel {
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(30, 78, 52, 0.08);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

body.user-account-page .profile-view-panel--wide {
    grid-column: 1 / -1;
}

body.user-account-page .profile-view-panel h4 {
    margin: 0 0 18px;
    color: #1f4732;
}

body.user-account-page .profile-view-definition {
    display: grid;
    gap: 5px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(33, 84, 56, 0.08);
}

body.user-account-page .profile-view-definition:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

body.user-account-page .profile-view-definition span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5c7b68;
}

body.user-account-page .profile-view-definition strong {
    color: #334f41;
    line-height: 1.6;
}

body.user-account-page .profile-view-actions {
    margin-top: 0;
    padding-top: 18px;
    border-top: 1px solid rgba(33, 84, 56, 0.08);
}

body.user-account-page .profile-edit-container {
    width: min(100%, 980px);
    padding: 0;
    overflow: hidden;
}

body.user-account-page .profile-edit-container .profile-modal-header {
    padding: 30px 32px 18px;
    border-bottom: 1px solid rgba(33, 84, 56, 0.08);
    background: linear-gradient(135deg, rgba(225, 245, 226, 0.92), rgba(250, 255, 250, 0.96));
}

body.user-account-page .profile-edit-form-shell {
    grid-template-columns: 1fr !important;
    gap: 22px;
    margin-top: 0 !important;
    padding: 26px 30px 30px !important;
}

body.user-account-page .profile-edit-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
    gap: 18px;
}

body.user-account-page .profile-edit-overview-card {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(33, 84, 56, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 249, 242, 0.96));
}

body.user-account-page .profile-overview-value {
    margin: 0 0 10px;
    color: #224232;
    font-weight: 700;
    line-height: 1.55;
}

body.user-account-page .profile-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

body.user-account-page .edit-identity-section {
    grid-column: 1 / -1;
}

body.user-account-page .edit-profile-footer {
    margin-top: 0 !important;
    padding-top: 18px;
    border-top: 1px solid rgba(33, 84, 56, 0.08);
}

body.user-account-page .edit-profile-footer .account-primary-btn,
body.user-account-page .edit-profile-footer .account-secondary-btn,
body.user-account-page .profile-view-actions .account-primary-btn {
    width: auto;
    min-width: 180px;
}

body.user-account-page #save-edit-profile-btn {
    position: static !important;
    left: auto !important;
    min-width: 180px;
    box-shadow: 0 18px 28px rgba(33, 116, 70, 0.18);
}

body.user-account-page #profile-modal .profile-form-layout--create {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 22px 22px 26px;
}

body.user-account-page #profile-modal .profile-form-layout--create .identity-section,
body.user-account-page #profile-modal .profile-form-layout--create .profile-modal-footer {
    grid-column: 1 / -1;
}

body.user-account-page #profile-modal .profile-modal-footer.profile-modal-footer--split {
    position: static;
    bottom: auto;
    padding: 0;
    margin-top: 4px;
    background: transparent;
    border-top: none;
}

body.user-account-page .modal-close-icon:hover {
    background: #f7fbf5;
    border-color: rgba(29, 80, 54, 0.18);
    color: #173b29;
}

@media (max-width: 960px) {
    body.user-account-page .profile-view-hero,
    body.user-account-page .profile-edit-overview,
    body.user-account-page .profile-edit-grid,
    body.user-account-page #profile-modal .profile-form-layout--create {
        grid-template-columns: 1fr;
    }

    body.user-account-page .profile-view-status-card {
        justify-items: start;
        min-width: 0;
    }

    body.user-account-page .profile-view-panels {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body.user-account-page .profile-photo-field,
    body.user-account-page .profile-photo-field--inline,
    body.user-account-page .profile-view-identity,
    body.user-account-page .profile-view-hero {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }

    body.user-account-page .profile-field-grid.two-columns,
    body.user-account-page .profile-edit-grid {
        grid-template-columns: 1fr;
    }

    body.user-account-page .profile-photo-preview,
    body.user-account-page .profile-view-avatar {
        width: 92px;
    }

    body.user-account-page .profile-edit-container .profile-modal-header,
    body.user-account-page .profile-edit-form-shell {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    body.user-account-page .edit-profile-footer .account-primary-btn,
    body.user-account-page .edit-profile-footer .account-secondary-btn,
    body.user-account-page .profile-view-actions .account-primary-btn {
        width: 100%;
    }
}

/* Edit profile photo card refinement */
body.user-account-page .profile-edit-overview {
    grid-template-columns: 1fr;
}

body.user-account-page .profile-photo-field--inline {
    grid-template-columns: 156px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    min-height: 0;
    padding: 24px;
    background:
        radial-gradient(circle at top right, rgba(204, 235, 206, 0.42), transparent 38%),
        linear-gradient(135deg, rgba(244, 250, 242, 0.98), rgba(255, 255, 255, 0.98));
}

body.user-account-page .profile-photo-field--inline .profile-photo-preview {
    width: 156px;
    max-width: 100%;
    border-radius: 30px;
    justify-self: start;
}

body.user-account-page .profile-photo-field--inline .profile-photo-copy {
    align-content: start;
    justify-items: start;
    gap: 12px;
    text-align: left;
}

body.user-account-page .profile-photo-field--inline .profile-upload-label {
    margin: 0;
}

body.user-account-page .profile-photo-field--inline .profile-upload-help {
    max-width: 48ch;
    font-size: 0.98rem;
    line-height: 1.75;
}

body.user-account-page .profile-photo-field--inline .profile-upload-trigger {
    align-self: start;
    width: auto;
    max-width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    white-space: nowrap;
}

body.user-account-page .profile-photo-field--inline .selection-summary {
    width: auto;
    max-width: 100%;
    min-width: 220px;
    margin-top: 2px;
    background: rgba(248, 251, 245, 0.96);
}

body.user-account-page .profile-edit-overview-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
}

body.user-account-page .profile-edit-overview-card .profile-upload-label {
    margin-top: 0;
}

body.user-account-page .profile-edit-overview-card .profile-overview-value {
    margin: 0;
}

@media (max-width: 760px) {
    body.user-account-page .profile-photo-field--inline {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    body.user-account-page .profile-photo-field--inline .profile-photo-preview {
        width: 120px;
    }

    body.user-account-page .profile-photo-field--inline .profile-upload-trigger,
    body.user-account-page .profile-photo-field--inline .selection-summary {
        width: 100%;
        min-width: 0;
    }

    body.user-account-page .profile-edit-overview-card {
        grid-template-columns: 1fr;
    }
}
/* Edit photo button tune */
body.user-account-page .profile-photo-field--inline .profile-upload-trigger {
    min-height: 44px;
    padding: 0 18px;
    font-size: 0.96rem;
    line-height: 1;
}

body.user-account-page #edit-profile-photo-display {
    display: none !important;
}
/* Edit photo button final adjustment */
body.user-account-page .profile-photo-field--inline .profile-upload-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 46px;
    min-height: 46px;
    padding: 0 18px !important;
    line-height: 1 !important;
    text-align: center;
    vertical-align: middle;
    background: #f7faf5;
    color: #244433;
    border: 1px solid rgba(35, 84, 56, 0.14);
    box-shadow: none;
    white-space: nowrap;
}

body.user-account-page .profile-photo-field--inline .profile-upload-trigger:hover,
body.user-account-page .profile-photo-field--inline .profile-upload-trigger:focus-visible {
    background: #eef4ec;
    color: #1f3d2d;
    border-color: rgba(35, 84, 56, 0.22);
    transform: none;
    box-shadow: 0 10px 20px rgba(21, 49, 33, 0.06);
    outline: none;
}


/* Upcoming trip spacing refresh */
body.user-account-page .upcoming-trips .trip-list,
body.user-account-page .trip-history .trip-list {
    gap: 22px;
}

body.user-account-page .trip-account-card {
    grid-template-columns: minmax(230px, 252px) minmax(0, 1fr);
    align-items: stretch;
}

body.user-account-page .trip-card-content {
    gap: 18px;
    padding: 28px 30px;
}

body.user-account-page .trip-card-heading {
    grid-template-columns: 1fr;
    gap: 12px;
}

body.user-account-page .trip-card-heading h3 {
    max-width: none;
    margin: 0;
    font-size: clamp(1.9rem, 2.6vw, 2.35rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

body.user-account-page .trip-card-copy > p:not(.trip-card-kicker) {
    margin: 10px 0 0;
    max-width: 26ch;
    color: #395947;
    line-height: 1.3;
}

body.user-account-page .trip-dates-card {
    width: fit-content;
    min-width: 212px;
    max-width: 250px;
    padding: 14px 16px;
}

body.user-account-page .trip-card-subtitle {
    margin: 0;
}

body.user-account-page .trip-card-stats {
    margin-top: 0;
}

@media (max-width: 980px) {
    body.user-account-page .trip-account-card {
        grid-template-columns: 1fr;
    }

    body.user-account-page .trip-card-media {
        min-height: 224px;
    }
}

/* Trips feed sizing */
body.user-account-page .upcoming-trips,
body.user-account-page .trip-history {
    --trip-panel-max-height: clamp(520px, 72vh, 860px);
    align-self: start;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: var(--trip-panel-max-height);
    overflow: hidden;
}

body.user-account-page .trip-history {
    --trip-panel-max-height: clamp(420px, 58vh, 720px);
}

body.user-account-page .upcoming-trips .panel-head,
body.user-account-page .trip-history .panel-head {
    flex: 0 0 auto;
    margin-bottom: 14px;
}

body.user-account-page .upcoming-trips .trip-list,
body.user-account-page .trip-history .trip-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 10px;
    margin-right: -10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.user-account-page .upcoming-trips .trip-list::-webkit-scrollbar,
body.user-account-page .trip-history .trip-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

body.user-account-page .upcoming-trips .trip-empty-state,
body.user-account-page .trip-history .trip-empty-state {
    min-height: 148px;
    display: grid;
    align-content: center;
    justify-items: start;
}

@media (max-width: 980px) {
    body.user-account-page .upcoming-trips,
    body.user-account-page .trip-history {
        max-height: clamp(420px, 62vh, 680px);
    }

    body.user-account-page .upcoming-trips .trip-list,
    body.user-account-page .trip-history .trip-list {
        padding-right: 6px;
        margin-right: -6px;
    }
}

/* Upcoming trips deck refresh */
body.user-account-page .upcoming-trips {
    max-height: none;
    overflow: visible;
}

body.user-account-page .upcoming-trips .panel-head {
    margin-bottom: 18px;
}

body.user-account-page .trip-deck-shell {
    display: grid;
    gap: 14px;
}

body.user-account-page .trip-deck-stage {
    --trip-card-active-height: 232px;
    --trip-card-collapsed-height: 62px;
    position: relative;
    min-height: 0;
    height: auto;
    padding: 10px;
    overflow: visible;
    border-radius: 28px;
    border: 1px solid rgba(34, 85, 57, 0.10);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, rgba(241, 249, 239, 0.72) 100%),
        radial-gradient(circle at 18% 16%, rgba(184, 247, 202, 0.32) 0%, rgba(184, 247, 202, 0) 40%),
        radial-gradient(circle at 86% 82%, rgba(255, 221, 176, 0.20) 0%, rgba(255, 221, 176, 0) 42%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        inset 0 -18px 34px rgba(173, 209, 183, 0.12),
        0 18px 34px rgba(20, 58, 40, 0.07);
}

body.user-account-page .trip-deck-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 20%);
    pointer-events: none;
}

body.user-account-page .upcoming-trips .trip-deck-list {
    position: relative;
    display: block;
    flex: none;
    height: 100%;
    overflow: hidden !important;
    margin: 0;
    padding: 0;
    padding-right: 0;
    margin-right: 0;
}

body.user-account-page .trip-deck-list .trip-list-item {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border-radius: 0;
    box-shadow: none;
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease,
        filter 0.35s ease;
    transform-origin: 50% 0;
}

body.user-account-page .trip-deck-list .trip-list-item::before {
    display: none;
}

body.user-account-page .trip-deck-list .trip-list-item:hover {
    background: transparent !important;
}

body.user-account-page .trip-deck-list .trip-list-item.is-active {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    z-index: 40;
}

body.user-account-page .trip-deck-list .trip-list-item.is-peek-one {
    transform: translate3d(0, 210px, 0) scale(0.996);
    opacity: 0.98;
    z-index: 30;
}

body.user-account-page .trip-deck-list .trip-list-item.is-peek-two {
    transform: translate3d(0, 258px, 0) scale(0.992);
    opacity: 0.92;
    z-index: 20;
}

body.user-account-page .trip-deck-list .trip-list-item.is-peek-three {
    transform: translate3d(0, 306px, 0) scale(0.988);
    opacity: 0.86;
    z-index: 12;
}

body.user-account-page .trip-deck-list .trip-list-item.is-past {
    transform: translate3d(0, -28px, 0) scale(0.972);
    opacity: 0;
    z-index: 4;
    pointer-events: none;
}

body.user-account-page .trip-deck-list .trip-list-item.is-hidden-card {
    transform: translate3d(0, 350px, 0) scale(0.984);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

body.user-account-page .trip-deck-list .trip-account-card {
    display: block;
    height: var(--trip-card-active-height);
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 16px 28px rgba(17, 47, 31, 0.08),
        0 2px 0 rgba(255, 255, 255, 0.55) inset;
}

body.user-account-page .trip-deck-expanded {
    display: grid;
    grid-template-columns: minmax(156px, 40%) minmax(0, 1fr);
    min-height: 100%;
}

body.user-account-page .trip-deck-collapsed {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 100%;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 251, 245, 0.98) 100%);
}

body.user-account-page .trip-deck-collapsed-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

body.user-account-page .trip-deck-collapsed-main strong {
    min-width: 0;
    font-size: 0.98rem;
    color: #183726;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.user-account-page .trip-deck-collapsed-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.user-account-page .trip-deck-collapsed-state.is-confirmed {
    background: rgba(255, 246, 225, 0.94);
    color: #936726;
}

body.user-account-page .trip-deck-collapsed-state.is-draft {
    background: rgba(235, 248, 236, 0.96);
    color: #1d6b42;
}

body.user-account-page .trip-deck-collapsed-date {
    flex: 0 0 auto;
    color: #607468;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

body.user-account-page .trip-deck-list .trip-card-media {
    min-height: 100%;
}

body.user-account-page .trip-deck-list .trip-card-content {
    min-height: 0;
    gap: 10px;
    padding: 16px 18px 16px;
}

body.user-account-page .trip-deck-list .trip-card-heading {
    gap: 12px;
    align-items: start;
}

body.user-account-page .trip-deck-list .trip-card-heading h3 {
    max-width: none;
    font-size: clamp(1.34rem, 1.35vw, 1.72rem);
    line-height: 1.08;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.user-account-page .trip-deck-list .trip-card-subtitle {
    font-size: 0.88rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.user-account-page .trip-deck-list .trip-card-stats {
    gap: 6px;
}

body.user-account-page .trip-deck-list .trip-card-stats span {
    font-size: 0.72rem;
    padding: 7px 9px;
}

body.user-account-page .trip-deck-list .trip-list-item:not(.is-active) .trip-account-card {
    height: var(--trip-card-collapsed-height);
    border-radius: 20px;
    box-shadow:
        0 12px 22px rgba(17, 47, 31, 0.07),
        0 1px 0 rgba(255, 255, 255, 0.52) inset;
}

body.user-account-page .trip-deck-list .trip-list-item:not(.is-active) .trip-deck-expanded {
    display: none;
}

body.user-account-page .trip-deck-list .trip-list-item:not(.is-active) .trip-deck-collapsed {
    display: flex;
}

body.user-account-page .trip-deck-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 4px;
}

body.user-account-page .trip-deck-hint {
    margin: 0;
    max-width: 42ch;
    color: #5b7166;
    font-size: 0.84rem;
    line-height: 1.45;
}

body.user-account-page .trip-deck-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

body.user-account-page .trip-deck-counter {
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(35, 84, 56, 0.10);
    background: rgba(255, 255, 255, 0.72);
    color: #2c523d;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.user-account-page .trip-deck-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.user-account-page .trip-deck-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(44, 86, 61, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

body.user-account-page .trip-deck-dot:hover,
body.user-account-page .trip-deck-dot:focus-visible {
    transform: scale(1.08);
    background: rgba(46, 136, 81, 0.44);
    outline: none;
}

body.user-account-page .trip-deck-dot.is-active {
    width: 28px;
    background: linear-gradient(135deg, rgba(53, 158, 88, 0.98), rgba(95, 198, 126, 0.96));
    box-shadow:
        0 10px 20px rgba(43, 134, 76, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

body.user-account-page .upcoming-trips .trip-empty-state {
    min-height: 180px;
}

@media (max-width: 1120px) {
    body.user-account-page .trip-deck-stage {
        --trip-deck-stage-height: clamp(340px, 44vh, 400px);
        --trip-card-active-height: 228px;
        --trip-card-collapsed-height: 50px;
    }

    body.user-account-page .trip-deck-list .trip-list-item.is-peek-one {
        transform: translate3d(0, 196px, 0) scale(0.996);
    }

    body.user-account-page .trip-deck-list .trip-list-item.is-peek-two {
        transform: translate3d(0, 240px, 0) scale(0.992);
    }

    body.user-account-page .trip-deck-list .trip-list-item.is-peek-three {
        transform: translate3d(0, 284px, 0) scale(0.988);
    }
}

@media (max-width: 980px) {
    body.user-account-page .upcoming-trips {
        max-height: none;
    }

    body.user-account-page .trip-deck-stage {
        min-height: auto;
        height: auto;
        padding: 0;
        overflow: visible;
        background: none;
        border: 0;
        box-shadow: none;
    }

    body.user-account-page .trip-deck-stage::before {
        display: none;
    }

    body.user-account-page .trip-deck-list {
        display: grid;
        gap: 18px;
        height: auto;
        overflow: visible !important;
    }

    body.user-account-page .trip-deck-list .trip-list-item {
        position: relative;
        inset: auto;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto;
    }

    body.user-account-page .trip-deck-list .trip-account-card {
        height: auto;
    }

    body.user-account-page .trip-deck-list .trip-deck-collapsed {
        display: none;
    }

    body.user-account-page .trip-deck-list .trip-deck-expanded,
    body.user-account-page .trip-deck-list .trip-list-item:not(.is-active) .trip-deck-expanded {
        display: grid;
    }

    body.user-account-page .trip-deck-footer {
        display: none;
    }
}

/* Upcoming deck v3 */
body.user-account-page .upcoming-trips .trip-deck-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: auto;
    overflow: visible !important;
}

body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item {
    position: relative;
    inset: auto;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border-radius: 0;
    box-shadow: none;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto;
}

body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item::before {
    display: none;
}

body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-active {
    flex: 0 0 var(--trip-card-active-height);
    z-index: 3;
}

body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview {
    flex: 0 0 var(--trip-card-collapsed-height);
}

body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview + .trip-deck-item.is-preview {
    margin-top: -2px;
}

body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview .trip-deck-preview-card {
    display: flex;
}

body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview:nth-child(2) .trip-deck-preview-card {
    margin-left: 10px;
}

body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview:nth-child(3) .trip-deck-preview-card {
    margin-left: 20px;
}

body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview:nth-child(4) .trip-deck-preview-card {
    margin-left: 30px;
}

body.user-account-page .upcoming-trips .trip-deck-card {
    display: block;
    height: 100%;
}

body.user-account-page .upcoming-trips .trip-deck-card .trip-deck-expanded {
    display: grid;
    grid-template-columns: minmax(144px, 36%) minmax(0, 1fr);
    height: 100%;
}

body.user-account-page .upcoming-trips .trip-deck-card .trip-card-media {
    min-height: 100%;
}

body.user-account-page .upcoming-trips .trip-deck-card .trip-card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
}

body.user-account-page .upcoming-trips .trip-deck-card .trip-card-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

body.user-account-page .upcoming-trips .trip-deck-card .trip-card-heading h3 {
    max-width: 13ch;
    font-size: clamp(1.14rem, 1.18vw, 1.38rem);
    line-height: 1.04;
    margin-bottom: 4px;
}

body.user-account-page .upcoming-trips .trip-deck-card .trip-card-copy > p:not(.trip-card-kicker) {
    font-size: 0.88rem;
    line-height: 1.3;
}

body.user-account-page .upcoming-trips .trip-deck-card .trip-card-subtitle {
    font-size: 0.84rem;
    color: #62766a;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.user-account-page .upcoming-trips .trip-deck-card .trip-card-stats {
    gap: 6px;
}

body.user-account-page .upcoming-trips .trip-deck-card .trip-card-stats span {
    font-size: 0.68rem;
    padding: 6px 8px;
}

body.user-account-page .upcoming-trips .trip-deck-card .trip-dates-card {
    min-width: 0;
    max-width: none;
    padding: 9px 11px;
}

body.user-account-page .upcoming-trips .trip-deck-card .trip-dates-card strong {
    font-size: 0.84rem;
}

body.user-account-page .upcoming-trips .trip-deck-card .trip-card-actions {
    margin-top: auto;
    padding-top: 10px;
}

body.user-account-page .upcoming-trips .trip-deck-preview-card {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 100%;
    padding: 11px 14px;
    border-radius: 16px;
    border: 1px solid rgba(31, 84, 56, 0.10);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 251, 245, 0.98) 100%);
    box-shadow: 0 12px 22px rgba(18, 54, 36, 0.07);
    cursor: pointer;
}

body.user-account-page .upcoming-trips .trip-deck-preview-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

body.user-account-page .upcoming-trips .trip-deck-preview-main strong {
    display: block;
    min-width: 0;
    color: #173726;
    font-size: 0.88rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.user-account-page .upcoming-trips .trip-deck-preview-card .trip-deck-collapsed-date {
    flex: 0 0 auto;
    font-size: 0.74rem;
    color: #617568;
}

body.user-account-page .upcoming-trips .trip-deck-preview-card .trip-deck-collapsed-state {
    flex: 0 0 auto;
}

@media (max-width: 1120px) {
    body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview:nth-child(2) .trip-deck-preview-card {
        margin-left: 10px;
    }

    body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview:nth-child(3) .trip-deck-preview-card {
        margin-left: 20px;
    }

    body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview:nth-child(4) .trip-deck-preview-card {
        margin-left: 30px;
    }
}

@media (max-width: 980px) {
    body.user-account-page .upcoming-trips .trip-deck-list {
        display: grid;
        gap: 18px;
        height: auto;
    }

    body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview + .trip-deck-item.is-preview {
        margin-top: 0;
    }

    body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview:nth-child(2) .trip-deck-preview-card,
    body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview:nth-child(3) .trip-deck-preview-card,
    body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview:nth-child(4) .trip-deck-preview-card {
        margin-left: 0;
    }

    body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview {
        display: none;
    }

    body.user-account-page .upcoming-trips .trip-deck-card .trip-deck-expanded {
        grid-template-columns: 1fr;
    }

    body.user-account-page .trip-deck-stage {
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }
}

/* Upcoming trips redesign v4 */
body.user-account-page .upcoming-trips {
    max-height: none !important;
    overflow: visible !important;
}

body.user-account-page .upcoming-trips .panel-head {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    align-items: end;
    gap: 28px;
    margin-bottom: 18px;
}

body.user-account-page .upcoming-trips .panel-head > div {
    max-width: 280px;
}

body.user-account-page .upcoming-trips .panel-head h2 {
    max-width: 8ch;
    font-size: clamp(2.3rem, 2.8vw, 3.2rem);
    line-height: 0.94;
    letter-spacing: -0.04em;
}

body.user-account-page .upcoming-trips .panel-copy {
    max-width: 640px;
    font-size: 1.02rem;
    line-height: 1.62;
}

body.user-account-page .trip-deck-shell {
    gap: 16px;
}

body.user-account-page .trip-deck-stage {
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.user-account-page .trip-deck-stage::before {
    display: none !important;
}

body.user-account-page .upcoming-trips .trip-list,
body.user-account-page .upcoming-trips .trip-deck-list {
    overflow: visible !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
}

body.user-account-page .upcoming-trips .trip-deck-list {
    display: grid !important;
    gap: 12px !important;
    height: auto !important;
}

body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item,
body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-active,
body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item::before {
    display: none !important;
}

body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview {
    z-index: auto !important;
}

body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview:nth-child(2) {
    margin-left: 10px !important;
}

body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview:nth-child(3) {
    margin-left: 22px !important;
}

body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview:nth-child(4) {
    margin-left: 34px !important;
}

body.user-account-page .trip-focus-card {
    display: grid;
    grid-template-columns: minmax(212px, 40%) minmax(0, 1fr);
    min-height: 300px;
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid rgba(29, 87, 58, 0.1);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(246, 251, 244, 0.95) 100%),
        radial-gradient(circle at 12% 14%, rgba(194, 247, 209, 0.24) 0%, rgba(194, 247, 209, 0) 38%),
        radial-gradient(circle at 86% 84%, rgba(255, 227, 182, 0.18) 0%, rgba(255, 227, 182, 0) 42%);
    box-shadow:
        0 20px 40px rgba(18, 56, 37, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body.user-account-page .trip-focus-media {
    position: relative;
    min-height: 100%;
    background: rgba(219, 237, 227, 0.55);
}

body.user-account-page .trip-focus-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.user-account-page .trip-focus-state {
    position: absolute;
    top: 18px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: rgba(248, 252, 244, 0.92);
    box-shadow: 0 10px 24px rgba(15, 54, 34, 0.14);
}

body.user-account-page .trip-focus-state.is-confirmed {
    color: #936b1c;
}

body.user-account-page .trip-focus-state.is-honored {
    color: #176f67;
}

body.user-account-page .trip-focus-state.is-draft {
    color: #1f7a4e;
}

body.user-account-page .trip-focus-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px 18px;
    min-width: 0;
}

body.user-account-page .trip-focus-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

body.user-account-page .trip-focus-kicker {
    margin: 0;
    color: #607768;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

body.user-account-page .trip-focus-updated {
    color: #7d8f83;
    font-size: 0.82rem;
    white-space: nowrap;
}

body.user-account-page .trip-focus-heading {
    display: grid;
    gap: 8px;
    min-width: 0;
}

body.user-account-page .trip-focus-heading h3 {
    margin: 0;
    color: #173726;
    font-size: clamp(1.7rem, 2vw, 2.35rem);
    line-height: 0.96;
    letter-spacing: -0.045em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.user-account-page .trip-focus-heading p {
    margin: 0;
    color: #50685a;
    font-size: 1rem;
    line-height: 1.42;
}

body.user-account-page .trip-focus-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.user-account-page .trip-focus-meta-card {
    display: grid;
    gap: 6px;
    padding: 13px 15px;
    border-radius: 20px;
    border: 1px solid rgba(31, 84, 56, 0.12);
    background: rgba(255, 250, 244, 0.84);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

body.user-account-page .trip-focus-meta-card span {
    color: #7d6b51;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

body.user-account-page .trip-focus-meta-card strong {
    color: #1f4732;
    font-size: 1rem;
    line-height: 1.36;
}

body.user-account-page .trip-focus-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.user-account-page .trip-focus-chips span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(31, 84, 56, 0.12);
    background: rgba(246, 250, 243, 0.82);
    color: #2b5740;
    font-size: 0.81rem;
    font-weight: 700;
}

body.user-account-page .trip-focus-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
}

body.user-account-page .trip-focus-actions .account-primary-btn,
body.user-account-page .trip-focus-actions .account-secondary-btn {
    min-width: 168px;
}

body.user-account-page .trip-queue-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 22px;
    border: 1px solid rgba(29, 87, 58, 0.1);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 250, 244, 0.94) 100%),
        radial-gradient(circle at 10% 18%, rgba(191, 245, 206, 0.18) 0%, rgba(191, 245, 206, 0) 38%);
    box-shadow:
        0 14px 28px rgba(18, 56, 37, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

body.user-account-page .trip-queue-card:hover {
    transform: translateY(-2px);
    border-color: rgba(46, 129, 81, 0.22);
    box-shadow:
        0 18px 32px rgba(18, 56, 37, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

body.user-account-page .trip-queue-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

body.user-account-page .trip-queue-line {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

body.user-account-page .trip-queue-line strong {
    min-width: 0;
    color: #183726;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.16;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.user-account-page .trip-queue-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    background: rgba(246, 251, 242, 0.92);
}

body.user-account-page .trip-queue-state.is-confirmed {
    color: #936b1c;
}

body.user-account-page .trip-queue-state.is-honored {
    color: #176f67;
}

body.user-account-page .trip-queue-state.is-draft {
    color: #1d7d4f;
}

body.user-account-page .trip-queue-subline {
    margin: 0;
    color: #6a7f73;
    font-size: 0.88rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.user-account-page .trip-queue-date {
    color: #51685b;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

body.user-account-page .trip-deck-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 6px;
}

body.user-account-page .trip-deck-hint {
    margin: 0;
    max-width: 420px;
    color: #637a6b;
    font-size: 0.9rem;
    line-height: 1.42;
}

body.user-account-page .trip-deck-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.user-account-page .trip-deck-counter {
    min-width: 64px;
    justify-content: center;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #294b38;
    font-size: 0.92rem;
}

body.user-account-page .trip-deck-pagination {
    gap: 8px;
}

body.user-account-page .trip-deck-dot {
    width: 10px;
    height: 10px;
    margin: 0;
    background: rgba(51, 120, 77, 0.18);
}

body.user-account-page .trip-deck-dot.is-active {
    width: 30px;
    border-radius: 999px;
    background: linear-gradient(90deg, #4cc46f 0%, #2d9e57 100%);
    box-shadow: 0 8px 18px rgba(62, 179, 95, 0.28);
}

@media (max-width: 1180px) {
    body.user-account-page .upcoming-trips .panel-head {
        grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
        gap: 20px;
    }

    body.user-account-page .trip-focus-card {
        grid-template-columns: minmax(190px, 38%) minmax(0, 1fr);
    }
}

@media (max-width: 980px) {
    body.user-account-page .upcoming-trips .panel-head {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    body.user-account-page .upcoming-trips .panel-head > div,
    body.user-account-page .upcoming-trips .panel-copy {
        max-width: none;
    }

    body.user-account-page .upcoming-trips .panel-head h2 {
        max-width: none;
    }

    body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview:nth-child(2),
    body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview:nth-child(3),
    body.user-account-page .upcoming-trips .trip-deck-list > .trip-deck-item.is-preview:nth-child(4) {
        margin-left: 0 !important;
    }

    body.user-account-page .trip-focus-card {
        grid-template-columns: 1fr;
    }

    body.user-account-page .trip-focus-media {
        min-height: 200px;
    }

    body.user-account-page .trip-focus-meta-grid {
        grid-template-columns: 1fr;
    }

    body.user-account-page .trip-focus-actions .account-primary-btn,
    body.user-account-page .trip-focus-actions .account-secondary-btn {
        flex: 1 1 100%;
        width: 100%;
    }

    body.user-account-page .trip-queue-card {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    body.user-account-page .trip-queue-date {
        justify-self: start;
    }

    body.user-account-page .trip-deck-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Account trips ledger redesign */
body.user-account-page .upcoming-trips,
body.user-account-page .trip-history {
    position: relative;
    max-height: none !important;
    overflow: visible !important;
    border: 1px solid rgba(32, 84, 55, 0.12);
    background:
        radial-gradient(circle at 8% 0%, rgba(196, 245, 211, 0.28), transparent 34%),
        linear-gradient(155deg, rgba(255, 255, 255, 0.92), rgba(242, 249, 240, 0.88));
    box-shadow:
        0 24px 46px rgba(21, 55, 35, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

body.user-account-page .trip-history {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 224, 178, 0.24), transparent 32%),
        linear-gradient(155deg, rgba(255, 255, 255, 0.94), rgba(248, 244, 236, 0.86));
}

body.user-account-page .upcoming-trips .panel-head,
body.user-account-page .trip-history .panel-head {
    display: grid;
    grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
    align-items: end;
    gap: 22px;
    margin-bottom: 14px;
}

body.user-account-page .upcoming-trips .panel-head h2,
body.user-account-page .trip-history .panel-head h2 {
    margin: 0;
    color: #173726;
    font-size: clamp(2rem, 2.6vw, 2.9rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
}

body.user-account-page .upcoming-trips .panel-copy,
body.user-account-page .trip-history .panel-copy {
    max-width: 58ch;
    margin: 0;
    color: #587064;
    line-height: 1.58;
}

body.user-account-page .trip-section-status {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 18px;
}

body.user-account-page .trip-status-token {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(31, 84, 56, 0.12);
    background: rgba(255, 255, 255, 0.68);
    color: #476150;
    font-size: 0.84rem;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body.user-account-page .trip-status-token strong {
    color: #173726;
}

body.user-account-page .trip-status-token.is-pending {
    background: rgba(255, 248, 226, 0.82);
    color: #8a6422;
}

body.user-account-page .trip-status-token.is-paid {
    background: rgba(229, 249, 235, 0.86);
    color: #1d7144;
}

body.user-account-page .trip-status-token.is-confirmed,
body.user-account-page .trip-status-token.is-active {
    background: rgba(226, 244, 255, 0.76);
    color: #24617a;
}

body.user-account-page .trip-status-token.is-past {
    background: rgba(242, 239, 232, 0.88);
    color: #6a5e4c;
}

body.user-account-page .trip-status-token.is-cancelled {
    background: rgba(255, 232, 232, 0.82);
    color: #984242;
}

body.user-account-page .trip-status-token.is-muted {
    color: #728276;
}

body.user-account-page .trip-deck-shell,
body.user-account-page .trip-deck-stage {
    display: block;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body.user-account-page .upcoming-trips .trip-list,
body.user-account-page .trip-history .trip-list {
    display: grid !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    overflow: visible !important;
}

body.user-account-page .trip-ledger-item,
body.user-account-page .trip-ledger-item:hover {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

body.user-account-page .trip-ledger-card {
    display: grid;
    grid-template-columns: minmax(170px, 30%) minmax(0, 1fr);
    min-height: 226px;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(31, 84, 56, 0.11);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 246, 0.93)),
        radial-gradient(circle at 18% 12%, rgba(190, 245, 207, 0.18), transparent 38%);
    box-shadow:
        0 18px 36px rgba(19, 54, 35, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

body.user-account-page .trip-ledger-card.is-history-card {
    min-height: 190px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 247, 241, 0.94)),
        radial-gradient(circle at 88% 16%, rgba(255, 226, 183, 0.18), transparent 38%);
}

body.user-account-page .trip-ledger-media {
    position: relative;
    min-height: 100%;
    background: #dfeee4;
}

body.user-account-page .trip-ledger-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 44, 27, 0.04), rgba(12, 44, 27, 0.22));
    pointer-events: none;
}

body.user-account-page .trip-ledger-media img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: block;
    object-fit: cover;
}

body.user-account-page .trip-ledger-status {
    position: absolute;
    left: 16px;
    top: 16px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #2b5740;
    font-size: 0.84rem;
    font-weight: 800;
    box-shadow: 0 12px 22px rgba(13, 45, 27, 0.16);
}

body.user-account-page .trip-ledger-status.is-pending {
    color: #8a6422;
}

body.user-account-page .trip-ledger-status.is-paid {
    color: #167044;
}

body.user-account-page .trip-ledger-status.is-confirmed,
body.user-account-page .trip-ledger-status.is-active-trip {
    color: #24617a;
}

body.user-account-page .trip-ledger-status.is-past {
    color: #6a5e4c;
}

body.user-account-page .trip-ledger-status.is-cancelled {
    color: #984242;
}

body.user-account-page .trip-ledger-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
}

body.user-account-page .trip-ledger-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

body.user-account-page .trip-ledger-kicker {
    margin: 0 0 8px;
    color: #638070;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

body.user-account-page .trip-ledger-heading h3 {
    margin: 0;
    color: #173726;
    font-size: clamp(1.35rem, 1.8vw, 2rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
}

body.user-account-page .trip-ledger-time {
    flex: 0 0 auto;
    max-width: 170px;
    padding: 8px 11px;
    border-radius: 14px;
    background: rgba(244, 249, 241, 0.82);
    color: #536c5d;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: right;
}

body.user-account-page .trip-ledger-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body.user-account-page .trip-ledger-meta-card {
    min-width: 0;
    display: grid;
    gap: 6px;
    padding: 12px 13px;
    border-radius: 18px;
    border: 1px solid rgba(31, 84, 56, 0.1);
    background: rgba(255, 255, 255, 0.66);
}

body.user-account-page .trip-ledger-meta-card span {
    color: #7a8a7f;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

body.user-account-page .trip-ledger-meta-card strong {
    min-width: 0;
    color: #214832;
    font-size: 0.92rem;
    line-height: 1.34;
    overflow-wrap: anywhere;
}

body.user-account-page .trip-ledger-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
}

body.user-account-page .trip-ledger-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}

body.user-account-page .trip-ledger-chips span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(31, 84, 56, 0.1);
    background: rgba(246, 250, 243, 0.82);
    color: #2d5a42;
    font-size: 0.78rem;
    font-weight: 800;
}

body.user-account-page .trip-ledger-actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

body.user-account-page .trip-ledger-actions .account-primary-btn,
body.user-account-page .trip-ledger-actions .account-secondary-btn {
    min-height: 42px;
    padding-inline: 16px;
    white-space: nowrap;
}

@media (max-width: 980px) {
    body.user-account-page .upcoming-trips .panel-head,
    body.user-account-page .trip-history .panel-head {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    body.user-account-page .trip-ledger-card {
        grid-template-columns: 1fr;
    }

    body.user-account-page .trip-ledger-media {
        min-height: 190px;
    }

    body.user-account-page .trip-ledger-heading,
    body.user-account-page .trip-ledger-footer {
        flex-direction: column;
        align-items: stretch;
    }

    body.user-account-page .trip-ledger-time {
        max-width: none;
        text-align: left;
    }

    body.user-account-page .trip-ledger-meta {
        grid-template-columns: 1fr;
    }

    body.user-account-page .trip-ledger-actions,
    body.user-account-page .trip-ledger-actions .account-primary-btn,
    body.user-account-page .trip-ledger-actions .account-secondary-btn {
        width: 100%;
    }
}