/* Scoped UI styling aligned with the dashboard look */
.user-panel {
    color: #131b1f;
}

.user-panel a {
    text-decoration: none;
}

/* Layout */
.user-panel .layout {
    min-height: 100vh;
    background-color: #ffffff;
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    max-width: 1400px;
}

.user-panel .profile-aside {
    position: sticky;
    top: 2.5rem;
    width: 20rem;
    margin-left: 2.5rem;
}

.user-panel .profile-menu {
    width: 100%;
    color: #131b1f;
    padding: .9375rem 1.25rem;
    background-color: #fff;
    border: 1px solid var(--color-zinc-200);
}

.user-panel .profile-menu__section {
    margin-bottom: 1.5625rem;
}

.user-panel .profile-menu-section__title {
    margin: .25rem 0 .5rem;
    margin-top: 1.5625rem;
    color: rgba(19, 27, 31, .5);
    font-size: .75rem;
    font-weight: 700;
}

/* Menu items */
.user-panel .profile-menu-item {
    width: 100%;
    color: #131b1f;
    display: flex;
    align-items: center;
    padding: .9375rem 0;
    position: relative;
    border-radius: 8px;
}

.user-panel .profile-menu-item::before {
    content: " ";
    position: absolute;
    top: .9375rem;
    right: -1.25rem;
    width: 4px;
    background-color: #131b1f;
    height: calc(100% - 1.875rem);
    border-radius: 100px 0 0 100px;
    transition: opacity .12s ease-in-out;
    opacity: 0;
}

.user-panel .profile-menu-item--selected::before {
    opacity: 1;
}

.user-panel .profile-menu-item__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 0 0 .9375rem;
    background-color: #fafafa;
}

.user-panel .profile-menu-item__icon svg {
    width: 1.375rem;
    height: 1.375rem;
    object-fit: contain;
}

.user-panel .profile-menu-item__container {
    flex: 1 1 0;
    min-width: 0;
    color: #131b1f;
}

.user-panel .profile-menu-item__title {
    margin: 0;
    line-height: 1.71;
    font-size: .875rem;
    font-weight: 500;
}

.user-panel .profile-menu-item__caption {
    margin: 0;
    line-height: 2.2;
    font-size: .6875rem;
    font-weight: 300;
    color: rgba(19,27,31,.65);
}

/* Menu item dividers */
.user-panel .profile-menu .profile-menu__section > a.profile-menu-item.has-divider::after {
    content: "";
    position: absolute;
    bottom: 0;
    /* align after-line with text block (icon width + its left margin) */
    inset-inline-start: calc(2.75rem + .9375rem);
    inset-inline-end: 0;
    border-bottom: 1px solid rgba(19, 27, 31, .1);
    pointer-events: none;
}

/* Cards */
.user-panel .card {
    background: #fff;
    border: 1px solid var(--color-zinc-200);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.user-panel .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* .user-panel .card:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.06);
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(229, 231, 235, 0.8);
}

.user-panel .card:hover::before {
    opacity: 1;
} */

/* Stats cards specific styling */
/* .user-panel .card .flex {
    align-items: center;
} */

.user-panel .card .w-14 {
    flex-shrink: 0;
}

.user-panel .card .flex-1 {
    min-width: 0;
}

/* Utilities */
.user-panel .muted {
    color: rgba(19,27,31,.65);
}

.user-panel .toolbar {
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(6px);
    background: rgba(255,255,255,.8);
    border-bottom: 1px solid #e5e7eb;
    margin: -2rem -2rem 1.5rem;
    padding: .75rem 2rem;
}

/* Activity list styling */
.user-panel .card .divide-y > div {
    transition: all 0.2s ease-in-out;
}

.user-panel .card .divide-y > div:hover {
    background: linear-gradient(90deg, rgba(249, 250, 251, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
    transform: translateX(4px);
}

.user-panel .card .w-2 {
    flex-shrink: 0;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Reservations specific styles */
.user-panel .reservation-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e5e7eb;
}

.user-panel .reservation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
}

.user-panel .status-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.user-panel .status-confirmed {
    background-color: #dcfce7;
    color: #166534;
}

.user-panel .status-pending {
    background-color: #fef3c7;
    color: #92400e;
}

.user-panel .status-completed {
    background-color: #dbeafe;
    color: #1e40af;
}

.user-panel .status-cancelled {
    background-color: #fee2e2;
    color: #991b1b;
}

.user-panel .reservation-image {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
}

.user-panel .reservation-actions {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    position: relative;
    margin-top: 1.5rem;
}

.user-panel .reservation-actions::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.15) 50%, transparent 100%);
}

.user-panel .reservation-actions:hover {
    background: rgba(255, 255, 255, 0.98);
    border-top-color: rgba(99, 102, 241, 0.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.user-panel .action-button {
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
}

.user-panel .action-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.user-panel .action-button:hover::before {
    left: 100%;
}

.user-panel .stats-grid {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 1rem;
    padding: 2rem;
}

.user-panel .stat-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.user-panel .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* --- Minimal enhancements for Reservations page --- */
/* Minimal select */
.user-panel .ui-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    color: #111827;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.65rem center;
}

.user-panel .ui-select:focus {
    outline: none;
    border-color: rgba(59,130,246,.35);
    box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}

/* Minimal button system (soft/outline) */
.user-panel .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: all .2s ease-in-out;
    background-color: #fff;
    color: #111827;
}

.user-panel .btn svg { width: 1rem; height: 1rem; }

.user-panel .btn:focus { outline: none; box-shadow: 0 0 0 4px rgba(59,130,246,.12); }

.user-panel .btn:hover { transform: translateY(-1px); }

/* Variants */
.user-panel .btn-primary {
    color: #1d4ed8;
    background: rgba(59,130,246,.08);
    border-color: rgba(59,130,246,.2);
}
.user-panel .btn-primary:hover { background: rgba(59,130,246,.12); }

.user-panel .btn-neutral {
    color: #374151;
    background: rgba(17,24,39,.03);
    border-color: rgba(17,24,39,.08);
}
.user-panel .btn-neutral:hover { background: rgba(17,24,39,.06); }

.user-panel .btn-amber {
    color: #92400e;
    background: rgba(245,158,11,.10);
    border-color: rgba(245,158,11,.25);
}
.user-panel .btn-amber:hover { background: rgba(245,158,11,.14); }

.user-panel .btn-green {
    color: #166534;
    background: rgba(34,197,94,.10);
    border-color: rgba(34,197,94,.25);
}
.user-panel .btn-green:hover { background: rgba(34,197,94,.14); }

.user-panel .btn-purple {
    color: #6d28d9;
    background: rgba(124,58,237,.10);
    border-color: rgba(124,58,237,.25);
}
.user-panel .btn-purple:hover { background: rgba(124,58,237,.14); }

/* Minimal reservation card adjustments */
.user-panel .reservation-card {
    border-radius: 14px;
    border-color: #e5e7eb;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.user-panel .reservation-card:hover {
    transform: none;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
    border-color: rgba(229,231,235,.9);
}

/* Status badge with dot */
.user-panel .status-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    border: 1px solid rgba(0,0,0,.06);
}

.user-panel .status-badge::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: currentColor;
    opacity: .85;
}

/* Softer placeholder image */
.user-panel .reservation-image {
    background: #f3f4f6;
    color: #9ca3af;
}

/* Minimal stats grid */
.user-panel .reservations-page .stats-grid {
    background: transparent;
    padding: 0;
}

.user-panel .reservations-page .stat-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.user-panel .reservations-page .stat-card:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

.user-panel-header{
    margin: 0 0 1.875rem;
    font-size: 1.25rem;
    font-weight: 700;
}

/* Minimal pagination */
.user-panel .pagination .page-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #4b5563;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    transition: all .2s ease-in-out;
}

.user-panel .pagination .page-btn:hover:not([disabled]) {
    color: #111827;
    background: #f9fafb;
}

.user-panel .pagination .page-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.user-panel .pagination .page-btn.is-active {
    color: #1d4ed8;
    border-color: rgba(59,130,246,.25);
    background: rgba(59,130,246,.08);
}

/* Mobile bottom nav spacing to prevent overlap */
@media (max-width: 767.98px) {
    .user-panel {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}

/* Alpine.js cloak to prevent FOUC */
[x-cloak] { display: none !important; }
/* ===== Profile (Jabama‑like) ===== */
.user-panel .edit-profile{width:100%;color:#131b1f}
.user-panel .edit-profile__head{margin:0 0 1.875rem;font-size:1.25rem;font-weight:700}
.user-panel .edit-profile__container{width:100%;display:block;border-radius:.625rem;background-color:#fff;border:1px solid #ddd;box-shadow:0 0 10px 0 rgba(0,0,0,.07)}
.user-panel .edit-profile__wrapper{padding:0 2.5rem}
.user-panel .edit-profile__field{display:flex;align-items:flex-start;padding:1.1875rem 0 1.25rem;}
.user-panel .edit-profile__title{margin:0;flex-shrink:0;width:16.666667%;line-height:1.86;padding-top:.6875rem;font-size:.875rem;font-weight:400}
.user-panel .edit-profile__label{margin:0;width:66.25%;display:block}
.user-panel .edit-profile__label--name{display:flex;gap:.75rem}
.user-panel .edit-profile__name{flex:0 0 250px;max-width:250px}
.user-panel .edit-profile__name--wide{flex:0 0 500px;max-width:500px}
.user-panel .edit-profile__textarea{width:100%;color:#131b1f;display:block;resize:vertical;min-height:6.25rem;max-height:13.125rem;border-radius:.5rem;border:none;border-bottom:1px solid #e0e0e0;padding:.8125rem .9375rem;background-color:#fff;font-size:.875rem;font-weight:400;transition:all .2s ease-in-out}
.user-panel .edit-profile__textarea:hover{border-bottom-color:#131b1f}
.user-panel .edit-profile__textarea:focus{outline:none;border-bottom-color:#131b1f;border-bottom-width:2px}
.user-panel .edit-profile__textarea::placeholder{opacity:1;color:#9e9e9d;direction:rtl;font-weight:300;text-align:right}
.user-panel .edit-profile__divider{margin:0;width:100%}
.user-panel .edit-profile__divider--dash{height:1px;background-repeat:round;background-size:6px 1px;background-image:linear-gradient(90deg,transparent,transparent 2px,#e1e1e1 0,#e1e1e1)}
.user-panel .edit-profile__footer{display:flex;border-top:1px solid #e1e1e1;padding:1.5625rem 1.875rem 1.875rem}
.user-panel .edit-profile__button{display:flex;justify-content:center;align-items:center;cursor:pointer;border:none;margin:0;background-color:transparent;min-height:2.8125rem;border-radius:.625rem}
.user-panel .edit-profile__button:focus{outline:none}
.user-panel .edit-profile__button--submit{color:#fff;min-width:7.5rem;margin-left:1.25rem;background-color:#1b262c;border:1px solid transparent;font-size:1rem;font-weight:700}
.user-panel .edit-profile__button--discard{color:#131b1f;min-width:6.375rem;background-color:rgba(27,38,44,.05);font-size:.875rem;font-weight:400}

/* Avatar */
.user-panel .user-avatar{width:100%;padding:2.5rem 0 1.3125rem}
.user-panel .user-avatar__container{display:flex;align-items:center}
.user-panel .user-avatar__wrapper{width:16.666667%}
.user-panel .user-avatar__cover{margin:0;display:block;position:relative;width:3.75rem;height:3.75rem}
.user-panel .user-avatar__image{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;border:1px solid #ddd}
.user-panel .user-avatar__button{cursor:pointer;border:none;margin:0;background-color:transparent;display:flex;align-items:center;line-height:1.64;padding:.625rem 0;color:#2c7df9;white-space:nowrap;font-size:.875rem;font-weight:500}
.user-panel .user-avatar__button:focus{outline:none}

/* Inputs */
.user-panel .custom-input{width:100%}
.user-panel .custom-input__field{width:100%;color:#131b1f;display:block;padding:0 .9375rem;border-radius:.5rem;border:none;border-bottom:1px solid #e0e0e0;min-height:3rem;background-color:transparent;font-size:1rem;font-weight:400;transition:all .2s ease-in-out}
.user-panel .custom-input__field--compact{min-height:2.25rem;padding:0 .75rem}
.user-panel .custom-input__field:hover{border-bottom-color:#131b1f}
.user-panel .custom-input__field:focus{outline:none;border-bottom-color:#131b1f;border-bottom-width:2px}
.user-panel .custom-input__field:disabled{border-bottom-color:#e0e0e0;background-color:#f9f9f9}
.user-panel .custom-input__field::placeholder{opacity:1;color:#9e9e9e;direction:rtl;font-weight:300;text-align:right;font-size:.875rem}
.user-panel .custom-input__field select,.user-panel select.custom-input__field{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M7 5.929L12.183.746a.624.624 0 11.884.883L7.442 7.254a.623.623 0 01-.884 0L.933 1.63a.624.624 0 11.884-.883L7 5.929z' fill='%23131b1f'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.9375rem center;padding-right:2.5rem;cursor:pointer}
.user-panel .custom-input__label{margin:0;width:100%;display:block}
.user-panel .custom-input__label--ltr{direction:ltr}
.user-panel .custom-input__label--disabled{position:relative}
.user-panel .custom-input__label--disabled::before{content:" ";width:1.5rem;height:1.5rem;top:50%;right:12px;position:absolute;pointer-events:none;background-size:contain;transform:translateY(-50%);background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23131B1F' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M20 13a8 8 0 01-8 8h0a8 8 0 01-8-8V6.912c0-.513.388-.951.9-.991a11.268 11.268 0 006.463-2.688.989.989 0 011.274 0A11.262 11.262 0 0019.1 5.921c.512.04.9.478.9.991V13z'/%3E%3Cpath d='M15.319 10.341l-4.148 4.148L8.682 12'/%3E%3C/g%3E%3C/svg%3E")}
.user-panel .custom-input__label--placeholder-ltr input::placeholder{direction:ltr;text-align:left}

/* Profile: boxed fields (light border like inputs) */
.user-panel .edit-profile .custom-input__field,
.user-panel .edit-profile .edit-profile__textarea,
.user-panel .edit-profile .modern-select__trigger,
.user-panel .edit-profile .birthday-selection__input{border:1px solid #e0e0e0;border-bottom-width:1px;background-color:#fff;box-shadow:none;outline:none}
.user-panel .edit-profile .custom-input__field:hover,
.user-panel .edit-profile .edit-profile__textarea:hover,
.user-panel .edit-profile .modern-select__trigger:hover,
.user-panel .edit-profile .birthday-selection__input:hover{border-color:#d0d0d0;border-bottom-color:#d0d0d0}
.user-panel .edit-profile .custom-input__field:focus,
.user-panel .edit-profile .edit-profile__textarea:focus,
.user-panel .edit-profile .modern-select__trigger--active,
.user-panel .edit-profile .birthday-selection__input--open{border-color:#bdbdbd;border-bottom-color:#bdbdbd;border-bottom-width:1px;box-shadow:none;outline:none}
.user-panel .edit-profile .custom-input__field:disabled{background-color:#f9f9f9;border-color:#e0e0e0;border-bottom-color:#e0e0e0}

/* Modern Select */
.user-panel .modern-select{position:relative;width:100%}
.user-panel .modern-select__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 .75rem;min-height:2.25rem;border-radius:.5rem;border:none;border-bottom:1px solid #e0e0e0;background-color:transparent;cursor:pointer;transition:all .2s ease-in-out;font-size:1rem;font-weight:400;color:#131b1f}
.user-panel .modern-select__trigger:hover{border-bottom-color:#131b1f}
.user-panel .modern-select__trigger--active{border-bottom-color:#131b1f;border-bottom-width:2px}
.user-panel .modern-select__placeholder{color:#9e9e9e;font-weight:300}
.user-panel .modern-select__icon{width:.8125rem;height:.5rem;flex-shrink:0;transition:transform .2s ease-in-out;margin-right:.5rem}
.user-panel .modern-select__icon--open{transform:rotate(180deg)}
.user-panel .modern-select__dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;background-color:#fff;border:1px solid #e0e0e0;border-radius:.5rem;box-shadow:0 4px 12px rgba(0,0,0,.1);z-index:50;overflow:hidden;max-height:12rem;overflow-y:auto}
.user-panel .modern-select__option{padding:.625rem .75rem;cursor:pointer;transition:all .15s ease-in-out;color:#131b1f;font-size:1rem;font-weight:400}
.user-panel .modern-select__option:hover{background-color:#f5f5f5}
.user-panel .modern-select__option--selected{background-color:#f0f0f0;font-weight:500;color:#131b1f}
.user-panel .modern-select__option--selected:hover{background-color:#e8e8e8}

/* Gender */
.user-panel .gender-selection{width:100%;cursor:pointer}
.user-panel .gender-selection__container{position:relative;min-height:3rem}
.user-panel .gender-selection__wrapper,.user-panel .gender-selection__wrapper::before{top:0;left:0;width:100%;position:absolute}
.user-panel .gender-selection__wrapper::before{content:" ";opacity:0;height:100%;pointer-events:none;border-radius:.5rem;transition:opacity .1s ease-in-out;box-shadow:0 0 10px 0 rgba(0,0,0,.07)}
.user-panel .gender-selection__input{width:100%;color:#131b1f;display:block;user-select:none;position:relative;padding:0 .9375rem;min-height:3rem;line-height:3rem;transition:all .1s ease-in-out;border-radius:.5rem;background-color:transparent;border:.0625rem solid #e0e0e0;cursor:pointer;font-size:1rem;font-weight:400}
.user-panel .gender-selection__input::after{content:" ";position:absolute;top:50%;left:1.0625rem;width:.8125rem;height:.5rem;pointer-events:none;background-size:contain;transform:translateY(-50%);background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M7 5.929L12.183.746a.624.624 0 11.884.883L7.442 7.254a.623.623 0 01-.884 0L.933 1.63a.624.624 0 11.884-.883L7 5.929z' fill='%23131b1f'/%3E%3C/svg%3E")}

/* Birthday */
.user-panel .birthday-selection{width:100%;position:relative;cursor:pointer}
.user-panel .birthday-selection__input{width:100%;color:#131b1f;display:block;user-select:none;padding:0 .9375rem;min-height:3rem;line-height:3rem;border-radius:.5rem;background-color:transparent;border:none;border-bottom:1px solid #e0e0e0;font-size:1rem;font-weight:400;position:relative;transition:all .2s ease-in-out}
.user-panel .birthday-selection__input:hover{border-bottom-color:#131b1f}
.user-panel .birthday-selection__input--open{border-bottom-color:#131b1f;border-bottom-width:2px}
.user-panel .birthday-selection__input::after{content:" ";position:absolute;top:50%;left:1.0625rem;width:.8125rem;height:.5rem;pointer-events:none;background-size:contain;transform:translateY(-50%);background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M7 5.929L12.183.746a.624.624 0 11.884.883L7.442 7.254a.623.623 0 01-.884 0L.933 1.63a.624.624 0 11.884-.883L7 5.929z' fill='%23131b1f'/%3E%3C/svg%3E");transition:transform .2s ease-in-out}
.user-panel .birthday-selection__input--open::after{transform:translateY(-50%) rotate(180deg)}
.user-panel .birthday-selection__input--empty{color:#9e9e9e;font-weight:300}
.user-panel .birthday-selection__container{position:absolute;top:calc(100% + .25rem);left:0;right:0;background-color:#fff;border:1px solid #e0e0e0;border-radius:.5rem;box-shadow:0 4px 12px rgba(0,0,0,.1);z-index:50;overflow:hidden}
.user-panel .scroll-picker{padding:1rem}
.user-panel .scroll-picker__title{margin:0 0 1rem;font-size:.875rem;font-weight:500;color:#131b1f;text-align:center}
.user-panel .scroll-picker__container{display:flex;gap:1rem;justify-content:center}
.user-panel .scroll-picker__item{flex:1;max-width:120px}
.user-panel .s-picker{position:relative;display:flex;flex-direction:column;height:225px}
.user-panel .s-picker__action{position:absolute;left:0;right:0;z-index:10;pointer-events:none}
.user-panel .s-picker__action--prev{top:0;height:45px;background:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,.8) 50%,transparent 100%)}
.user-panel .s-picker__action--next{bottom:0;height:45px;background:linear-gradient(to top,#fff 0%,rgba(255,255,255,.8) 50%,transparent 100%)}
.user-panel .s-picker__button{width:100%;height:45px;border:none;background:transparent;cursor:pointer;pointer-events:auto;position:relative;display:flex;align-items:center;justify-content:center}
.user-panel .s-picker__button::before{content:"";width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent}
.user-panel .s-picker__button--prev::before{border-bottom:8px solid #131b1f}
.user-panel .s-picker__button--next::before{border-top:8px solid #131b1f}
.user-panel .s-picker__container{flex:1;position:relative;overflow:hidden;margin:45px 0}
.user-panel .s-picker__wrapper{position:relative;width:100%;height:100%}
.user-panel .s-picker__options{list-style:none;margin:0;padding:0;position:absolute;top:0;left:0;right:0;transition:transform 0.3s ease-out;will-change:transform}
.user-panel .s-picker__option{position:relative;left:0;right:0;text-align:center;color:#131b1f;font-size:1rem;font-weight:400;cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:center;height:45px;line-height:1;white-space:nowrap;transition:opacity 0.2s ease,font-weight 0.2s ease,font-size 0.2s ease}
.user-panel .s-picker__option--selected{font-weight:700;color:#131b1f;font-size:1.1rem;opacity:1!important;line-height:1}
.user-panel .s-picker__highlight{position:absolute;top:50%;left:0;right:0;height:45px;margin-top:-22.5px;pointer-events:none;z-index:5}
.user-panel .s-picker__highlight::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background-color:rgba(19,27,31,.15);z-index:1}
.user-panel .s-picker__highlight::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background-color:rgba(19,27,31,.15);z-index:1}

/* Custom file upload */
.user-panel .custom-file-upload {
    min-height: 48px;
}

.user-panel .custom-file-upload:hover {
    background-color: #f9fafb;
}

/* Helpers */
.user-panel .flex-initial{flex:1 1 0;min-width:0}