/* Profile Page Specific Styles */
:root {
    /* Re-use variables from rewards.styles.css or define new ones */
    --profile-card-bg: var(--sidebar-bg); /* White background for cards */
    --profile-search-bg: #fff5ec; /* Very light orange for search */
    --profile-item-hover-bg: var(--bg-color); /* Light beige hover */
    --profile-icon-color: var(--icon-color);
    --profile-text-secondary: var(--text-light);
    --profile-border-color: var(--border-color);
}

.profile-content {
    /* Container for profile specific content */
    container-type: inline-size;
    container-name: profile-content; /* Keep this container name for now */
    padding-bottom: var(--spacing-unit); /* Add padding at the bottom */
}

.profile-search-bar {
    display: flex;
    align-items: center;
    background-color: var(--profile-search-bg);
    border-radius: var(--border-radius);
    padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
    margin-block-end: calc(var(--spacing-unit) * 1.5);
    border: 1px solid var(--profile-border-color);
}

.profile-search-bar input[type="search"] {
    flex-grow: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.9rem;
    padding: calc(var(--spacing-unit) * 0.25) 0;
    color: var(--text-color);
}

.profile-search-bar input[type="search"]::placeholder {
    color: var(--profile-text-secondary);
}

.profile-search-bar .search-icon {
    font-size: 1.5rem;
    color: var(--profile-icon-color);
    margin-left: calc(var(--spacing-unit) * 0.5);
}

.user-info-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-unit);
    background-color: var(--profile-card-bg);
    padding: var(--spacing-unit);
    border-radius: var(--border-radius);
    margin-block-end: calc(var(--spacing-unit) * 1.5);
    border: 1px solid var(--profile-border-color);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

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

.user-details h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-color);
}

.user-details p {
    font-size: 0.9rem;
    color: var(--profile-text-secondary);
    margin: 0;
}

.profile-options-list {
    background-color: var(--profile-card-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--profile-border-color);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    overflow: hidden; /* Clip children border-radius */
    margin-block-end: calc(var(--spacing-unit) * 1.5);
}

.profile-option-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-unit);
    padding: calc(var(--spacing-unit) * 1.25)
        var(--spacing-unit); /* More vertical padding */
    border-bottom: 1px solid var(--profile-border-color);
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.profile-option-item:last-child {
    border-bottom: none;
}

.profile-option-item:hover {
    background-color: var(--profile-item-hover-bg);
}

.profile-option-icon {
    font-size: 1.5rem;
    color: var(--profile-icon-color);
    width: 24px; /* Fixed width for alignment */
    text-align: center;
}

.profile-option-text h3 {
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    color: var(--text-color);
}

.profile-option-text p {
    font-size: 0.85rem;
    color: var(--profile-text-secondary);
    margin: 0;
}

.profile-option-arrow {
    margin-left: auto;
    font-size: 1.5rem;
    color: var(--profile-icon-color);
}

.sign-out-button-container {
    display: flex;
    justify-content: flex-end; /* Align button to the right */
    margin-top: calc(var(--spacing-unit) * 2);
}

.sign-out-button {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.5);
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
}

.sign-out-button:hover,
.sign-out-button:focus {
    background-color: #92400e; /* Darker shade */
}

/* Responsive Adjustments for Profile Page */

/* Apply responsive margins using container queries based on main-content width */
/* Consistent with rewards.styles.css */
/* Note: We query the 'main-content' container defined in rewards.styles.css */
@container main-content (min-width: 1200px) {
    .profile-content {
        margin-left: 200px;
        margin-right: 200px;
    }
}

@container main-content (min-width: 800px) and (max-width: 1199px) {
    .profile-content {
        margin-left: 100px;
        margin-right: 100px;
    }
}

@container main-content (max-width: 799px) {
    .profile-content {
        margin-left: var(--spacing-unit);
        margin-right: var(--spacing-unit);
    }
}

/* Mobile specific adjustments (using media query as it affects layout structure) */
@media (max-width: 768px) {
    .profile-content {
        padding-bottom: 70px; /* Add padding to prevent overlap with bottom nav if main-content padding is removed */
    }

    .sign-out-button-container {
        justify-content: flex-end; /* Align button to the right */
        margin-top: var(--spacing-unit);
    }

    .sign-out-button {
        text-align: center;
    }

    .profile-option-item {
        padding: var(--spacing-unit); /* Slightly less padding */
    }

    .user-info-card {
        padding: calc(var(--spacing-unit) * 0.75);
    }
}