/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
    min-height: 100vh;
}

/* Notification Styles */
#notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notification {
    padding: 15px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    min-width: 300px;
    animation: slideIn 0.3s ease-out;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.notification.success {
    background: linear-gradient(135deg, #4CAF50, #45a049);
}

.notification.error {
    background: linear-gradient(135deg, #511D43, #A91E4A);
}

.notification.info {
    background: linear-gradient(135deg, #2196F3, #0b7dda);
}

.notification.warning {
    background: linear-gradient(135deg, #ff9800, #e68900);
}

.notification .close-notification {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    opacity: 0.7;
}

.notification .close-notification:hover {
    opacity: 1;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Profile Container */
.profile-container {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.profile-header {
    /* background: linear-gradient(135deg, #8B1538, #A91E4A); */
    background: linear-gradient(135deg, #511D43, #A91E4A);
    color: white;
    padding: 30px;
    text-align: center;
}

.profile-header h1 {
    font-size: 2.2rem;
    font-weight: 300;
    margin: 0;
}

/* Form Styles */
.profile-form {
    padding: 40px;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #8B1538;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(139, 21, 56, 0.1);
}

.form-group input[readonly],
.form-group select[disabled] {
    background-color: #f5f5f5;
    color: #666;
    cursor: not-allowed;
}

/* Editable fields styling */
.form-group input.editable,
.form-group select.editable {
    border-color: #511D43;
    background-color: white;
    box-shadow: 0 0 0 2px rgba(139, 21, 56, 0.05);
}

.form-group input.editable:not([readonly]),
.form-group select.editable:not([disabled]) {
    background-color: #fff;
    color: #787777;
    cursor: text;
}

/* Button Styles */
.btn {
    padding: 12px;
    border: 1px solid grey;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 5px;
}

.btn-primary {
    background: linear-gradient(135deg, #511D43, #A91E4A);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(139, 21, 56, 0.3);
}

.btn-secondary {
    background: #969798;
    color: white;
}

.btn-secondary:hover {
    background: #5a6268;
    transform: translateY(-2px);
}

.form-actions {
    text-align: center;
    /* margin-top: 30px; */
}

/* Overlay Styles */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
    
}

.overlay.show {
    z-index: 1200;
    display: flex;
    animation: fadeIn 0.3s ease-out;
}

.overlay-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 450px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease-out;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.overlay-header {
    background: linear-gradient(135deg, #511D43, #A91E4A);
    color: white;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

.overlay-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 400;
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.close-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.password-form {
    padding: 30px;
}

.password-form .form-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-top: 25px;
}

/* Loading Spinner */
.loading-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9998;
}

.loading-spinner.show {
    display: flex;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #511D43;;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-spinner p {
    margin-top: 15px;
    color: #666;
    font-size: 1.1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Hide anniversary group when not applicable */
.form-group.hidden {
    display: none;
}

/* Enhanced Responsive Design */

/* Large Desktop (1440px and above) */
@media (min-width: 1440px) {
    .profile-container {
        max-width: 700px;
    }
    
    .profile-form,
    .password-form {
        padding: 50px;
    }
    
    .profile-header h1 {
        font-size: 2.5rem;
    }
}

/* Desktop (1024px to 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .profile-container {
        max-width: 650px;
    }
    
    .profile-form,
    .password-form {
        padding: 45px;
    }
}

/* Tablet Landscape (768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    body {
        padding: 15px;
    }
    
    .profile-container {
        max-width: 600px;
        margin: 10px auto;
    }
    
    .profile-form,
    .password-form {
        padding: 35px;
    }
    
    .profile-header {
        padding: 25px;
    }
    
    .profile-header h1 {
        font-size: 2rem;
    }
    
    .form-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    
    .btn {
        min-width: 120px;
    }
}

/* Tablet Portrait (576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    body {
        padding: 10px;
    }
    
    .profile-container {
        margin: 5px auto;
        max-width: 100%;
    }
    
    .profile-form,
    .password-form {
        padding: 25px;
    }
    
    .profile-header {
        padding: 20px;
    }
    
    .profile-header h1 {
        font-size: 1.8rem;
    }
    
    .form-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .btn {
        width: 100%;
        margin: 0;
        cursor: pointer;
    }
    
    .overlay-content {
        width: 95%;
        margin: 15px;
    }
    
    .password-form .form-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .password-form .form-actions .btn {
        width: 100%;
    }
    
    .notification {
        min-width: auto;
        width: calc(100vw - 20px);
        margin: 0 10px;
    }
    
    #notification-container {
        left: 10px;
        right: 10px;
    }
}

/* Mobile Large (480px to 575px) */
@media (min-width: 480px) and (max-width: 575px) {
    body {
        padding: 5px;
    }
    
    .profile-container {
        margin: 0;
        border-radius: 8px;
    }
    
    .profile-form,
    .password-form {
        padding: 20px;
    }
    
    .profile-header {
        padding: 15px;
    }
    
    .profile-header h1 {
        font-size: 1.6rem;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-group input,
    .form-group select {
        padding: 10px 14px;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .btn {
        padding: 14px 20px;
        font-size: 1rem;
        width: 100%;
        margin: 5px 0;
    }
    
    .overlay-content {
        width: 98%;
        margin: 5px;
        border-radius: 8px;
    }
    
    .overlay-header {
        padding: 15px 20px;
    }
    
    .overlay-header h2 {
        font-size: 1.3rem;
    }
}

/* Mobile Small (320px to 479px) */
@media (max-width: 479px) {
    body {
        padding: 0;
        min-height: 100vh;
    }
    
    .profile-container {
        margin: 0;
        border-radius: 0;
        min-height: 100vh;
        box-shadow: none;
    }
    
    .profile-form,
    .password-form {
        padding: 15px;
    }
    
    .profile-header {
        padding: 12px 15px;
    }
    
    .profile-header h1 {
        font-size: 1.4rem;
        font-weight: 400;
    }
    
    .form-group {
        margin-bottom: 18px;
    }
    
    .form-group label {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
    
    .form-group input,
    .form-group select {
        padding: 12px 14px;
        font-size: 16px; /* Prevent zoom on iOS */
        border-radius: 6px;
    }
    
    .btn {
        padding: 14px 16px;
        font-size: 0.95rem;
        width: 100%;
        margin: 5px 0;
        border-radius: 6px;
    }
    
    .form-actions {
        margin-top: 25px;
    }
    
    .overlay {
        padding: 0;
    }
    
    .overlay-content {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
    }
    
    .overlay-header {
        padding: 12px 15px;
    }
    
    .overlay-header h2 {
        font-size: 1.2rem;
    }
    
    .close-btn {
        font-size: 24px;
        width: 30px;
        height: 30px;
    }
    
    .password-form {
        padding: 15px;
        min-height: calc(100vh - 60px);
    }
    
    .notification {
        min-width: auto;
        width: calc(100vw - 10px);
        margin: 0 5px;
        font-size: 0.9rem;
        padding: 12px 15px;
    }
    
    #notification-container {
        left: 5px;
        right: 5px;
        top: 10px;
    }
    
    .loading-spinner {
        backdrop-filter: blur(3px);
    }
    
    .spinner {
        width: 40px;
        height: 40px;
        border-width: 3px;
    }
    
    .loading-spinner p {
        font-size: 1rem;
        margin-top: 12px;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .btn:hover {
        transform: none;
        box-shadow: none;
    }
    
    .btn:active {
        transform: scale(0.98);
    }
    
    .form-group input:focus,
    .form-group select:focus {
        transform: scale(1.02);
    }
    
    .close-btn:hover {
        background-color: transparent;
    }
    
    .close-btn:active {
        background-color: rgba(255, 255, 255, 0.2);
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .profile-container {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    }
    
    .notification {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    }
}

/* Landscape orientation for mobile devices */
@media (max-height: 500px) and (orientation: landscape) {
    body {
        padding: 5px;
    }
    
    .profile-container {
        margin: 5px auto;
        max-height: calc(100vh - 10px);
        overflow-y: auto;
    }
    
    .profile-header {
        padding: 10px 20px;
    }
    
    .profile-header h1 {
        font-size: 1.3rem;
    }
    
    .profile-form {
        padding: 15px 20px;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-actions {
        margin-top: 20px;
    }
    
    .overlay-content {
        max-height: 95vh;
        width: 80%;
    }
}

/* Print styles */
@media print {
    body {
        background: white;
        padding: 0;
    }
    
    .profile-container {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .profile-header {
        background: #8B1538 !important;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
    
    .btn,
    .overlay,
    .loading-spinner,
    #notification-container {
        display: none !important;
    }
    
    .form-group input,
    .form-group select {
        border: 1px solid #333;
        background: transparent;
    }
}
/* 
  Append this CSS to the END of your existing stylesheet (styles.css), replacing the previous shipping CSS.
  These styles correct the alignment of the shipping address overlay, ensure consistent button fonts,
  and handle the visibility of the add/edit button to prevent duplicate Edit buttons.
  They align with your existing design (primary color, typography, spacing) and are fully responsive.
*/

/* Shipping Address Display Container */
.shipping-address-box {
    border: 2px solid #e0e0e0;
    padding: 12px 16px;
    border-radius: 8px;
    background-color: #f8f9fa;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    font-family: Arial, sans-serif;
}

.shipping-address-box p {
    margin: 0;
    flex-grow: 1;
    font-size: 1rem;
    color: #333;
    line-height: 1.5;
}

.shipping-address-box .btn {
    margin: 0;
    font-family: Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    /* letter-spacing: 0.5px; */
}

/* Overlay Styles for Shipping Address Form */
#shipping-address-overlay.overlay {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#shipping-address-overlay.overlay.show {
    display: flex;
}

.overlay-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 450px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease-out;
    padding: 30px;
    font-family: Arial, sans-serif;
}

.overlay-content h2 {
    margin: 0 0 20px 0;
    font-size: 1.5rem;
    font-weight: 400;
    color: #333;
}

.overlay-content .form-group {
    margin-bottom: 25px;
}

.overlay-content .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 400;
    color: #333;
    font-size: 0.95rem;
}

.overlay-content .form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
    font-family: Arial, sans-serif;
}

.overlay-content .form-group input:focus {
    outline: none;
    border-color: #511D43;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(139, 21, 56, 0.1);
}

.overlay-content .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 25px;
}

.overlay-content .form-actions .btn {
    font-family: Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 24px;
}

/* Ensure form-actions spacing when add-shipping-address-btn is hidden */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Ensure consistent spacing even when buttons are hidden */
    justify-content: center;
}

/* Responsive Design for Shipping Address */

/* Large Desktop (1440px and above) */
@media (min-width: 1440px) {
    .shipping-address-box {
        padding: 14px 18px;
    }
    
    .overlay-content {
        padding: 50px;
        max-width: 500px;
    }
}

/* Desktop (1024px to 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .shipping-address-box {
        padding: 12px 16px;
    }
    
    .overlay-content {
        padding: 45px;
        max-width: 450px;
    }
}

/* Tablet Landscape (768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .shipping-address-box {
        padding: 10px 14px;
    }
    
    .shipping-address-box p {
        font-size: 0.95rem;
    }
    
    .overlay-content {
        padding: 35px;
        width: 95%;
    }
}

/* Tablet Portrait (576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .shipping-address-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .shipping-address-box .btn {
        width: 100%;
    }
    
    .overlay-content {
        padding: 25px;
        width: 95%;
        margin: 15px;
    }
    
    .overlay-content .form-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .overlay-content .form-actions .btn {
        width: 100%;
    }
}

/* Mobile Large (480px to 575px) */
@media (min-width: 480px) and (max-width: 575px) {
    .shipping-address-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 14px;
    }
    
    .shipping-address-box p {
        font-size: 0.9rem;
    }
    
    .shipping-address-box .btn {
        width: 100%;
    }
    
    .overlay-content {
        padding: 20px;
        width: 98%;
        margin: 5px;
        border-radius: 8px;
    }
    
    .overlay-content .form-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .overlay-content .form-actions .btn {
        width: 100%;
    }
}

/* Mobile Small (320px to 479px) */
@media (max-width: 479px) {
    .shipping-address-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 8px 12px;
        border-radius: 6px;
    }
    
    .shipping-address-box p {
        font-size: 0.85rem;
    }
    
    .shipping-address-box .btn {
        width: 100%;
        padding: 12px 16px;
        font-size: 0.95rem;
    }
    
    .overlay-content {
        padding: 15px;
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
    }
    
    .overlay-content h2 {
        font-size: 1.2rem;
    }
    
    .overlay-content .form-group input {
        font-size: 16px;
    }
    
    .overlay-content .form-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .overlay-content .form-actions .btn {
        width: 100%;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .shipping-address-box .btn:active {
        transform: scale(0.98);
    }
    
    .overlay-content .form-group input:focus {
        transform: scale(1.02);
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .shipping-address-box {
        border: 2px solid #ddd;
    }
}

/* Landscape orientation for mobile devices */
@media (max-height: 500px) and (orientation: landscape) {
    .shipping-address-box {
        padding: 8px 12px;
    }
    
    .overlay-content {
        padding: 15px 20px;
        max-height: 95vh;
        width: 80%;
    }
}

/* Print styles */
@media print {
    .shipping-address-box {
        border: 1px solid #333;
        background: transparent;
    }
    
    .shipping-address-box .btn {
        display: none !important;
    }
    
    .overlay-content {
        display: none !important;
    }
}