@use '../utils/' as *;

/* WooCommerce Css Start */

.#{$theme-prefix}-woo{
    &-top{
        background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FF 143.5%);
        box-shadow: 0px 2px 1px #E2E4EC;
        border-radius: 6px;
        padding: 30px;
        margin-bottom: 54px;

        @media #{$xs}{
            padding: 20px;
        }
    }
    &-title{
        font-size: 20px;
        line-height: 1;
    }
    &-content{
        @media #{$md, $sm, $xs}{
            margin-bottom: 30px;
        }
        & p{
            font-size: 14px;
            margin-bottom: 0;
        }
    }
    &-setting{
        @media #{$lg}{
            margin-left: -20px;
        }

        & .#{$theme-prefix}-toggle-switch{
            @media #{$sm, $xs}{
                margin-bottom: 30px;
            }
        }
    }
    &-save{
        margin-left: 80px;
        @media #{$lg}{
            margin-left: 20px;
        }
        @media #{$sm, $xs}{
            margin-left: 0;
        }
    }

    &-option{
        &-inner{
            background: var(--strb-common-white);
            box-shadow: 0px 2px 2px #E0E2EA;
            border-radius: 6px;
            padding: 32px 30px 34px;
            margin-bottom: 50px;
        }
        &-item{
            &:not(:last-child){
                padding-bottom: 30px;
                margin-bottom: 32px;
                border-bottom: 1px solid #E9EBF7;
            }
        }
        &-title{
            font-size: 15px;
            margin-bottom: 3px;
            display: inline-block;
            position: relative;
            padding-right: 46px;
            & span{
                position: absolute;
                top: 0;
                right: 0;
                font-size: 11px;
                font-weight: 800;
                color: var(--strb-common-white);
                @include gradient((1.4deg, #990049 -25.89%, #FF1875 104.27%));
                box-shadow: 0px 2px 3px rgba(153, 0, 73, 0.3);
                border-radius: 4px;
                padding: 4px 6px 3px;
                line-height: 1;
                text-transform: uppercase;
            }
        }
        &-content{
            @media #{$md, $sm, $xs}{
                margin-bottom: 15px;
            }
            & p{
                font-size: 14px;
                margin-bottom: 0;
            }
        }
        &-action{
            margin-left: 40px;

            @media #{$md, $sm, $xs}{
                margin-left: 0;
            }

            & .choices__inner{
                @media #{$xs}{
                    min-width: 100%;
                }
            }
        }
        &-input{
            & input{
                outline: 0;
                border: 0;
                border-radius: 4px;
                height: 44px;
                line-height: 44px;
                width: 100%;
                border: 1px solid rgba($color: $black, $alpha: .12);
                @extend %transition;
                padding: 0 20px;
                color: #777778;

                &:focus{
                    border-color: var(--strb-theme-primary);
                }
            }
        }
        &-save{
            padding-top: 30px;
            border-top: 1px dashed #C0C8E5;
        }
    }
}

/* My Account Dashboard Icon Styling */
.strb-profile-main-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    
    .strb-icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 8px;
        color: white;
        
        svg {
            width: 28px;
            height: 28px;
            fill: currentColor;
            
            * {
                fill: currentColor;
            }
        }
    }
    
    .strb-dashboard-icon {
        width: 28px;
        height: 28px;
        color: white;
        display: flex !important;
        align-items: center;
        justify-content: center;
        
        svg {
            width: 100%;
            height: 100%;
            fill: currentColor;
            
            * {
                fill: currentColor;
            }
        }
        
        i {
            font-size: 24px;
            line-height: 1;
        }
    }
}

/* My Account Navigation Icon Styling */
.strb-my-account-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    
    .strb-icon-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        color: inherit !important;
        
        svg {
            width: 100% !important;
            height: 100% !important;
            fill: currentColor !important;
            color: inherit !important;
            display: block !important;
            
            * {
                fill: currentColor !important;
                color: inherit !important;
            }
        }
        
        .strb-nav-icon {
            width: 100% !important;
            height: 100% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            
            svg {
                width: 100% !important;
                height: 100% !important;
                fill: currentColor !important;
                color: inherit !important;
                display: block !important;
                
                * {
                    fill: currentColor !important;
                    color: inherit !important;
                }
            }
            
            i {
                font-size: 18px !important;
                line-height: 1 !important;
                color: inherit !important;
            }
        }
    }
}