/* =========================================================
   DRENA DASHBOARD
   WooCommerce / Organizer Account
========================================================= */


/* =========================================================
   1. ACCOUNT PAGE
========================================================= */

body.woocommerce-account {
    background:
        var(--drena-bg);
}


/* =========================================================
   2. MAIN ACCOUNT CONTAINER
========================================================= */

body.woocommerce-account
.woocommerce {
    max-width:
        1100px;

    margin:
        50px auto 70px;

    padding:
        32px;

    background:
        var(--drena-bg-soft);

    border:
        1px solid
        var(--drena-border-dark-soft);

    border-radius:
        var(--drena-radius-lg);

    box-shadow:
        var(--drena-shadow-lg);
}


/* =========================================================
   3. TWO COLUMN LAYOUT
========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-navigation {

    width:
        250px;

    float:
        left;
}


body.woocommerce-account
.woocommerce-MyAccount-content {

    width:
        calc(100% - 290px);

    float:
        right;

    min-height:
        260px;

    padding:
        28px;

    background:
        var(--drena-surface);

    border:
        1px solid
        var(--drena-border-light);

    border-radius:
        var(--drena-radius-md);

    color:
        var(--drena-text);

    box-shadow:
        var(--drena-shadow-sm);
}


/* =========================================================
   4. NAVIGATION
========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-navigation ul {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        var(--drena-radius-md);

    background:
        #111111;
}


body.woocommerce-account
.woocommerce-MyAccount-navigation li {

    margin:
        0;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


body.woocommerce-account
.woocommerce-MyAccount-navigation li:last-child {

    border-bottom:
        0;
}


body.woocommerce-account
.woocommerce-MyAccount-navigation a {

    display:
        block;

    padding:
        14px 16px;

    color:
        var(--drena-text-muted);

    font-size:
        14px;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        background-color
        var(--drena-transition),

        color
        var(--drena-transition),

        padding-left
        var(--drena-transition);
}


body.woocommerce-account
.woocommerce-MyAccount-navigation a:hover {

    padding-left:
        19px;

    background:
        rgba(255,83,21,.08);

    color:
        #ffffff;
}


/* Current item */

body.woocommerce-account
.woocommerce-MyAccount-navigation
.is-active a {

    background:
        rgba(255,83,21,.12);

    color:
        var(--drena-orange);

    border-left:
        3px solid
        var(--drena-orange);
}


/* =========================================================
   5. ACCOUNT CONTENT
========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content p {

    color:
        var(--drena-text);

    line-height:
        1.7;
}


body.woocommerce-account
.woocommerce-MyAccount-content strong {

    color:
        var(--drena-ink);
}


body.woocommerce-account
.woocommerce-MyAccount-content a {

    color:
        var(--drena-orange);

    text-decoration:
        none;
}


body.woocommerce-account
.woocommerce-MyAccount-content a:hover {

    color:
        var(--drena-orange-hover);
}


/* =========================================================
   6. HEADINGS
========================================================= */

body.woocommerce-account
.woocommerce h2,

body.woocommerce-account
.woocommerce h3 {

    color:
        #ffffff;
}


body.woocommerce-account
.woocommerce-MyAccount-content h2,

body.woocommerce-account
.woocommerce-MyAccount-content h3 {

    color:
        var(--drena-ink);
}


/* =========================================================
   7. FORMS
========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content input[type="text"],

body.woocommerce-account
.woocommerce-MyAccount-content input[type="email"],

body.woocommerce-account
.woocommerce-MyAccount-content input[type="password"],

body.woocommerce-account
.woocommerce-MyAccount-content input[type="tel"],

body.woocommerce-account
.woocommerce-MyAccount-content select,

body.woocommerce-account
.woocommerce-MyAccount-content textarea {

    width:
        100%;

    min-height:
        44px;

    padding:
        10px 12px;

    background:
        #ffffff;

    border:
        1px solid
        #dddddf;

    border-radius:
        var(--drena-radius-sm);

    color:
        var(--drena-ink);

    outline:
        none;
}


body.woocommerce-account
.woocommerce-MyAccount-content input:focus,

body.woocommerce-account
.woocommerce-MyAccount-content select:focus,

body.woocommerce-account
.woocommerce-MyAccount-content textarea:focus {

    border-color:
        var(--drena-orange);

    box-shadow:
        0 0 0 2px
        rgba(255,83,21,.10);
}


/* =========================================================
   8. BUTTONS
========================================================= */

body.woocommerce-account
.woocommerce button.button,

body.woocommerce-account
.woocommerce a.button,

body.woocommerce-account
.woocommerce input.button {

    background:
        var(--drena-orange) !important;

    border:
        1px solid
        var(--drena-orange) !important;

    border-radius:
        var(--drena-radius-sm) !important;

    color:
        #ffffff !important;

    font-weight:
        700 !important;

    transition:
        background-color
        var(--drena-transition),

        border-color
        var(--drena-transition),

        transform
        var(--drena-transition);
}


body.woocommerce-account
.woocommerce button.button:hover,

body.woocommerce-account
.woocommerce a.button:hover,

body.woocommerce-account
.woocommerce input.button:hover {

    background:
        var(--drena-orange-hover) !important;

    border-color:
        var(--drena-orange-hover) !important;

    transform:
        translateY(-1px);
}


/* =========================================================
   9. TABLES
========================================================= */

body.woocommerce-account
.woocommerce table {

    overflow:
        hidden;

    border:
        1px solid
        var(--drena-border-light);

    border-radius:
        var(--drena-radius-md);

    background:
        #ffffff;
}


body.woocommerce-account
.woocommerce table th {

    background:
        #f5f5f6;

    color:
        var(--drena-ink);
}


body.woocommerce-account
.woocommerce table td {

    color:
        var(--drena-text);
}


/* =========================================================
   10. RESPONSIVE
========================================================= */

@media (
    max-width: 850px
) {

    body.woocommerce-account
    .woocommerce {

        margin:
            30px 16px 60px;

        padding:
            18px;
    }


    body.woocommerce-account
    .woocommerce-MyAccount-navigation,

    body.woocommerce-account
    .woocommerce-MyAccount-content {

        width:
            100%;

        float:
            none;
    }


    body.woocommerce-account
    .woocommerce-MyAccount-navigation {

        margin-bottom:
            22px;
    }


    body.woocommerce-account
    .woocommerce-MyAccount-content {

        padding:
            22px;
    }

}