/*
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: Kadence Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more.
Tags: translation-ready,accessibility-ready,two-columns,right-sidebar,left-sidebar,footer-widgets,blog,custom-logo,custom-background,custom-menu,rtl-language-support,editor-style,threaded-comments,custom-colors,featured-images,wide-blocks,full-width-template,theme-options,e-commerce
Version: 1.4.4.1771611589
Updated: 2026-02-20 18:19:49
*/

/* ==============================================================
   TABLE OF CONTENTS
   ==============================================================
   1. ACCOUNT / AUTHENTICATION PAGES
   2. GENERAL TYPOGRAPHY FIXES
   3. MY ACCOUNT DASHBOARD
      3.1 Account Greeting Header
      3.2 Dashboard Navigation Grid
      3.3 Return Navigation (Back Button)
   4. DELETE ACCOUNT FEATURE
   5. HEADER WISHLIST ICON
   6. RESPONSIVE MEDIA QUERIES
   ============================================================== */

/* ==============================================================
   1. ACCOUNT / AUTHENTICATION PAGES
   Styles for splitting login and registration forms to display 
   cleanly depending on URL parameters (e.g., ?action=register)
   ============================================================== */

/* If ?action=register is absent, hide the registration column */
.luvera-show-login-only .u-column2.col-2 {
    display: none !important;
}

/* Center and constraint the login form to look cleaner */
.luvera-show-login-only .u-column1.col-1 {
    width: 100% !important;
    max-width: 500px;
    margin: 0 auto;
    float: none !important;
}

/* If ?action=register is present, hide the login column */
.luvera-show-register-only .u-column1.col-1 {
    display: none !important;
}

/* Center and constraint the registration form */
.luvera-show-register-only .u-column2.col-2 {
    width: 100% !important;
    max-width: 500px;
    margin: 0 auto;
    float: none !important;
}

/* Wrapper alignment to ensure centered forms */
.luvera-show-login-only .u-columns.col2-set,
.luvera-show-register-only .u-columns.col2-set {
    display: flex;
    justify-content: center;
    width: 100%;
}


/* ==============================================================
   2. GENERAL TYPOGRAPHY FIXES
   Global adjustments for main headers across the site.
   ============================================================== */
.page-title,
.archive-title,
.entry-title,
h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2rem;
}


/* ==============================================================
   3. MY ACCOUNT DASHBOARD 
   A custom, card-based grid layout replacing the standard 
   WooCommerce left sidebar navigation.
   ============================================================== */

/* Completely hide the default WooCommerce navigation menu block */
.woocommerce-MyAccount-navigation {
    display: none !important;
}

/* Remove constraints and padding to ensure dashboard uses full width */
.woocommerce-account .woocommerce-MyAccount-content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0;
}

/* --- 5.1 Account Greeting Header --- */
/* The top bar welcoming the user, showing their avatar and name */
.luvera-account-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px 35px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.luvera-account-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e5e7eb;
}

.luvera-account-greeting {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.luvera-greeting-hello {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 400;
    letter-spacing: 0.3px;
}

.luvera-greeting-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}

/* --- 5.2 Dashboard Navigation Grid --- */
/* A responsive 4-column layout for dashboard links (Orders, Downloads, etc.) */
.luvera-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Styling for each individual link card */
.luvera-dashboard-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 35px 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    color: #374151;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    cursor: pointer;
}

/* Highlight border and slightly pop the card upward on hover */
.luvera-dashboard-card:hover {
    border-color: var(--global-palette1, #3b82f6);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
    color: var(--global-palette2, #1d4ed8);
    text-decoration: none;
}

/* Icon container for dashboard cards */
.luvera-card-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.luvera-card-icon svg {
    width: 36px;
    height: 36px;
    color: var(--global-palette1, #3b82f6);
    transition: color 0.25s ease, transform 0.25s ease;
}

/* Give a distinct pop effect to the icon itself when hovering the card */
.luvera-dashboard-card:hover .luvera-card-icon svg {
    color: var(--global-palette3);
    transform: scale(1.1);
}

.luvera-card-label {
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.2px;
}

/* --- 5.3 Return Navigation (Back Button) --- */
/* Simple back-button link styled to appear above content on dashboard subpages */
.luvera-account-back-nav {
    margin-bottom: 25px;
}

.luvera-back-to-dashboard {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #475569;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.luvera-back-to-dashboard:hover {
    background: var(--global-palette1, #3b82f6);
    border-color: var(--global-palette1, #3b82f6);
    color: #ffffff;
    text-decoration: none;
}

/* Animated arrow in back button */
.luvera-back-to-dashboard svg {
    transition: transform 0.2s ease;
}

.luvera-back-to-dashboard:hover svg {
    transform: translateX(-3px);
}


/* ==============================================================
   4. DELETE ACCOUNT FEATURE
   Styles for the destructive "Delete Account" flow in WooCommerce My Account
   ============================================================== */

/* Destructive dashboard card identifier (Red colors instead of brand blue) */
.luvera-dashboard-card.luvera-card-danger .luvera-card-icon svg {
    color: #dc2626;
}

.luvera-dashboard-card.luvera-card-danger:hover {
    border-color: #dc2626;
    color: #991b1b;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.15);
}

.luvera-dashboard-card.luvera-card-danger:hover .luvera-card-icon svg {
    color: #991b1b;
}

/* The confirmation view container logic */
.luvera-delete-account-wrap {
    max-width: 560px;
    margin: 0 auto;
}

/* Warning box emphasizing data loss */
.luvera-delete-warning-box {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 32px 28px;
    text-align: center;
    margin-bottom: 28px;
}

.luvera-delete-warning-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #fee2e2;
    border-radius: 50%;
    margin-bottom: 16px;
}

.luvera-delete-warning-icon svg {
    color: #dc2626;
}

.luvera-delete-warning-box h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #991b1b;
    margin: 0 0 12px 0;
}

.luvera-delete-warning-box p {
    font-size: 0.95rem;
    color: #7f1d1d;
    margin: 0 0 16px 0;
    line-height: 1.6;
}

/* Styled list summarizing what occurs upon deletion */
.luvera-delete-data-list {
    text-align: left;
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.luvera-delete-data-list li {
    position: relative;
    padding-left: 22px;
    font-size: 0.9rem;
    color: #991b1b;
    margin-bottom: 8px;
    line-height: 1.5;
}

.luvera-delete-data-list li::before {
    content: "✕";
    position: absolute;
    left: 0;
    color: #dc2626;
    font-weight: 700;
    font-size: 0.75rem;
    top: 2px;
}

/* Form structure requiring user confirmation (e.g. typing 'DELETE') */
.luvera-delete-form {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 28px;
}

.luvera-delete-label {
    display: block;
    font-size: 0.95rem;
    color: #374151;
    margin-bottom: 12px;
    font-weight: 500;
}

.luvera-delete-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.luvera-delete-input:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.luvera-delete-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    background: #dc2626;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

.luvera-delete-submit-btn:hover {
    background: #b91c1c;
}

.luvera-delete-submit-btn:active {
    transform: scale(0.98);
}

/* Notice block styling for messaging post-actions or validation failures */
.luvera-delete-notice {
    padding: 20px 24px;
    border-radius: 10px;
    font-size: 0.95rem;
}

.luvera-delete-notice--info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}


/* ==============================================================
   5. HEADER WISHLIST ICON
   Styles for the wishlist heart icon placed next to the cart icon
   in the site header.
   ============================================================== */

.luvera-header-wishlist {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* padding: 4px; */
    color: var(--global-palette9, #4b5563);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    position: relative;
}

.luvera-header-wishlist:hover {
    color: var(--global-palette1, #3b82f6);
    transform: scale(1.1);
}

.luvera-header-wishlist svg {
    display: block;
}


/* ==============================================================
   6. RESPONSIVE MEDIA QUERIES
   Adjustments for tablets and mobile devices to ensure dashboard
   cards and form elements scale gracefully.
   ============================================================== */

/* --- Mobile Breakpoint (Up to 900px) --- */
@media (max-width: 900px) {

    /* Compress Account Dashboard to 2 columns */
    .luvera-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .luvera-account-header {
        padding: 24px 28px;
    }

    .luvera-greeting-name {
        font-size: 1.2rem;
    }
}

/* --- Extra Small Mobile Breakpoint (Up to 500px) --- */
@media (max-width: 500px) {

    /* Dashboard converts to a single column list appearance instead of boxes */
    .luvera-dashboard-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .luvera-dashboard-card {
        flex-direction: row;
        justify-content: flex-start;
        padding: 20px 24px;
        gap: 16px;
    }

    .luvera-card-icon {
        width: 36px;
        height: 36px;
    }

    .luvera-card-icon svg {
        width: 28px;
        height: 28px;
    }

    .luvera-account-header {
        padding: 20px;
        gap: 16px;
    }

    .luvera-account-avatar img {
        width: 56px;
        height: 56px;
    }

    .luvera-greeting-name {
        font-size: 1.1rem;
    }

    /* Shrink the size of delete forms on mobile */
    .luvera-delete-warning-box {
        padding: 24px 20px;
    }

    .luvera-delete-form {
        padding: 20px;
    }

    .luvera-delete-submit-btn {
        font-size: 0.88rem;
        padding: 12px 16px;
    }
}