:root{
    --sep-accent: #dddddd;
    --info: #166cce;
    --success: #3aa012;
    --warning: #ccad00;
    --error: #c93030;
    --dark-text: #232323;
}

/* General Styles */
.wra-page h1.entry-title, 
.wra-page.wra-checkout .woocommerce-order, 
.wra-page.wra-cart .woocommerce-cart-form, 
.wra-page.wra-cart .cart-collaterals{ padding: 20px; }

.wra-page .inside-article{ padding: 0;}
.wra-page .entry-content{ margin-top: 0;}
.wra-page .woocommerce-NoticeGroup{ display: none !important; }

/* Layout Styles */
.wra-row{
    display: flex;  flex-wrap: wrap;
}
.wra-col.col-1-1{
    flex: 1 1 calc( 100% );
}
.wra-col.col-1-2{
    flex: 1 1 calc( 100% / 2);
}
.wra-col.col-1-3{
    flex: 1 1 calc( 100% / 3);
}
.wra-col.col-2-3{
    flex: 1 1 calc( 100% / 3 * 2);
}
@media (max-width:1024px) {
    .wra-col{
        flex: 1 1 100% !important;
    }
}
/* Titles */
.wra-page h1{
    font-size: 2em;
    font-weight: 700;
}
.wra-page h2{
    font-size: 1.5em;
    font-weight: 700;
    padding-bottom: 15px;
}
.wra-page h3{ 
    font-size: 1.25em; 
    font-weight: 700;
    padding-bottom: 15px;
}

h2.wc-bacs-bank-details-heading{ font-size: 1.1em; font-weight: 600; }
h3.wc-bacs-bank-details-account-name{ font-size: 1em; font-weight: 600; }

.shipping-title, 
.product-name,
.order-costs > span:first-child { 
    color:  var(--dark-text); }

@media (max-width:1024px) {
    .wra-page h1{ font-size: 1.75em; }
    .wra-page h2{ font-size: 1.5em; }
    .wra-page h3{ font-size: 1.25em; }

    h2.wc-bacs-bank-details-heading{ font-size: 1.1em; }
    h3.wc-bacs-bank-details-account-name{ font-size: 1em; }
}

@media (max-width:767px) {
    .wra-page h1{ font-size: 1.5em; }
    .wra-page h2{ font-size: 1.25em; }
    .wra-page h3{ font-size: 1em; }h
    
    h2.wc-bacs-bank-details-heading{ font-size: 0.9em; } 
    h3.wc-bacs-bank-details-account-name{ font-size: 0.8em;}
}

.wra-page .h3-sgu-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.5em;
}
.wra-page .h3-sgu-icon .sgu-icon{ margin-left: 5px; }

/* Buttons */
.wra-page .wra-btn, 
.wra-page .button.wra-btn{
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    background-color: var(--main-accent);
    padding: 12px;
    line-height: 1em;
    border-radius: 0;
    border:0;
}
.wra-page .wra-btn:disabled{ opacity: .5; }
.wra-page .wra-btn:disabled:hover{ cursor: not-allowed; }

.wra-page .sgu-icon::before, 
.wra-page .h3-sgu-icon .sgu-icon::before{
    display: inline-flex;
}
.wra-page .wra-btn:hover, 
.wra-page .button.wra-btn:hover{ 
    cursor: pointer;
    color: #ffffff;
    background-color: var(--main-accent);
}
.wra-page .wra-row ul,
.wra-page ul{
    list-style-type: none !important;
    padding: 0 !important;
}

/* Notices */
.wra-notice{ margin: 20px; }
.wra-notice > div {
    color: #ffffff;
    padding: 8px 12px;
}
.wra-notice .wra-info{
    background-color: var(--info);
}
.wra-notice .wra-warning{
    background-color: var(--warning);
}
.wra-notice .wra-success{
    background-color: var(--success);
}
.wra-notice .wra-error{
    background-color: var(--error);
}

span.wra-cfn{
    font-size: 15px; font-weight: 400;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
    z-index: 99;
}

span.wra-success{ 
    color: var(--success); 
}
span.wra-error{ 
    color: var(--error); 
    background-color: #ffffff;
    padding: 4px;
}

span.wra-cfn:after{ 
    font-family: 'remixicon';     
    font-size: 20px;
    position: absolute;
    transform: translateY(-100%);
}
span.wra-success:after{ content: "\EB7B"; }
span.wra-error:after{ content: "\EB99"; }

@media (max-width:767px) {
    .wra-notice { 
        position:fixed; 
        width: calc(100% - 40px);
        top: 0;
        z-index: 999999;
    }  
}

.wra-page .wra-btn.cart-button{
    margin: 0 20px 20px 20px;
    width: calc(100% - 40px);
}
.wra-page .wra-link.cart-button{
    display: flex;
    padding: 0 20px;
    width: 100%;
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 16px;
    color: var(--main-accent); 
}

.wra-page.wra-cart .order-total small{ font-size: 16px; }

.wra-page .wra-btn.checkout-btn{
    width: 100%;
}

/* Product Listings */
.wra-page .wra-product-item{
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
}
.wra-page .wra-product-item:first-child { 
    border-bottom: 1px solid var(--sep-accent); 
}

.wra-page .product-wrapper,
.wra-page .product-details,
.wra-page .product-options,
.wra-page .product-info, 
.wra-page .product-thumbnail a,
.wra-page .product-pricing,
.wra-page .product-price,
.wra-page .product-quantity, 
.wra-page .product-subtotal{
    display: flex;
}

.wra-page .product-info{ width: 100%; align-items: flex-start; }

.wra-page .product-thumbnail{ flex: 0 0 120px; }
.wra-page .product-details  { flex: 1 1 calc( 60% - 60px); flex-wrap: wrap; }
.wra-page .product-pricing  { flex: 1 1 calc( 40% - 60px); }

.wra-page .product-name     { flex: 1 1 calc( 100% - 34px); font-weight: 500;}
.wra-page .product-remove   { flex: 0 0 34px; text-align: center; line-height: 24px; }
.wra-page .product-data     { flex: 1 1 100%; }

.wra-page .product-data dl.variation{ display: none; }
.wra-page .product-data .toggle-data { cursor: pointer; font-size: 14px; font-weight: 400;}
.wra-page .product-data dl { font-size: 14px; margin-bottom: 0; }

.wra-page .cart_item .product-option a, 
.wra-page .cart_item .product-remove a{   
    display: inline-flex;
    align-items: center;
    justify-content: center; 
    line-height: 18px;
    font-weight: 500; text-align: center;
    padding: 6px; 
}

.wra-page .wra-remove { color: var(--error); }

.wra-page .product-price,
.wra-page .product-quantity, 
.wra-page .product-subtotal{ align-items: center; justify-content: center; }

.wra-page .cart_item .product-thumbnail,
.wra-page .product-details,
.wra-page .cart_item .product-price,
.wra-page .cart_item .product-subtotal{ padding: 10px; }

.wra-page .cart_item .product-name a { color: var(--main-accent);  }

.wra-page .cart_item .product-price .amount,
.wra-page .cart_item .product-subtotal .amount{ line-height: 28px; }

.wra-page .product-price{ flex: 1 1 30%; }
.wra-page .product-quantity{ flex: 1 1 40%; }
.wra-page .product-subtotal{ flex: 1 1 30%; }

.wra-page .quantity { width: auto;}

.wra-page .woocommerce .cart-collaterals .cart_totals{
    width:100%; float: unset; font-size: 16px;
}

.wra-page .woocommerce-order-overview_payment-info{ margin-bottom: 20px;}

@media (min-width: 981px){ 
    label.mobile{ display: none; } 
}
@media (max-width: 980px){
    label.mobile{ font-weight: 500; margin-right: 8px; } 
    div:not(.woocommerce-order-overview__product-listing) > .wra-product-listing li.wra-product-item:first-child{ display: none;}

    .wra-page .wra-product-item{ 
        flex-wrap: wrap; 
        padding-bottom: 10px;
        border-bottom: 1px solid var(--sep-accent); 
    }
    .wra-page .product-details{ font-size: 16px;}
    .wra-page .product-name{ font-size: 16px; font-weight: 500; }
    
    .wra-page .cart_item .product-option a, 
    .wra-page .cart_item .product-remove a{ text-align: left; font-size: 16px; line-height: 16px; }

    .wra-page .product-info{  flex-wrap: wrap; }
    .wra-page .product-thumbnail{ flex: 0 0 90px; }   
    .wra-page .product-details{ flex: 1 1 calc( 100% - 90px); }
    .wra-page .product-pricing{ flex: 1 1 100%; font-size: 14px; line-height: 14px; display: flex; flex-wrap: wrap; }

    .wra-page .product-price{ flex: 1 1 100%; display: flex; justify-content: flex-end;}
    .wra-page .product-quantity{ flex: 0 0 98px; }
    .wra-page .product-subtotal{ flex: 1 1 calc( 100% -  98px); display: flex; justify-content: flex-end;}
    
    .wra-page .product-name     { flex: 1 1 calc( 100% - 34px); font-size: 14px; line-height: 16px;}
    .wra-page .product-remove   { flex: 0 0 34px; line-height: 14px;}

    .wra-page .product-thumbnail,
    .wra-page .product-details{ padding: 8px !important; }
    .wra-page .product-price,
    .wra-page .product-subtotal{ padding: 4px !important; }

    .wra-page .cart_item .product-price .amount, 
    .wra-page .cart_item .product-subtotal .amount {
        line-height: 20px;
    }


    .wra-page .cart_item .product-thumbnail,
    .wra-page .cart_item .product-remove a{ padding: 0; }
    
    .wra-page .coupon-form{ flex-wrap: wrap; gap: 5px; }
    .wra-page .coupon-form label, .wra-page .coupon-form > span { flex: 1 1 100%; }
    .wra-page .coupon-form input, .wra-page .coupon-form button{ flex: 1 1 auto; }
}

/* Cart */

.wra-page .woocommerce-cart-form .actions { display: flex; justify-content: space-between; }
@media (max-width:980px) {
    .wra-page .woocommerce-cart-form .actions{ flex-wrap: wrap; gap: 20px;}
    .wra-page .woocommerce-cart-form .wra-btn.update-cart{ flex: 1 1 auto; }
}
/* Checkout Steps */
.wra-page .tabs-headers{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: relative;
    margin: 0;
}
.wra-page .tabs-headers::before, 
.wra-page .tabs-headers::after{
    content: "";
    display:block;
    position: absolute;
    top: 6px; height:4px;
}
.wra-page .tabs-headers::before{
    left: 20px; right:20px;
    z-index: 7;
}
.wra-page .tabs-headers::before,
.wra-page .tabs-headers > li:after{
    background-color: #bbbbbb;
}
.wra-page .tabs-headers::after{ 
    background-color: var(--main-accent);
    left: 20px; z-index: 8; 
    transition: all .5s ease-in;
}
.wra-page .tabs-headers.progress1::after{ width: 15%; }
.wra-page .tabs-headers.progress2::after{ width: 48.5%; }
.wra-page .tabs-headers.progress3::after{ width: 81.5%; }

.wra-page .tabs-headers > li{
    flex: 1 1 calc( 100% / 3 );
    text-align: center;
    position: relative;
    margin-top: 20px;
    line-height: 1.5em;
}
.wra-page .tabs-headers > li:after{
    content: "";
    display:block;
    position: absolute;
    z-index: 9;
    left:0; right:0; 
    top: -20px;
    margin: 0 auto;
    width:15px; height:15px;
    border-radius: 10px;
}
.wra-page .tabs-headers > li.active{
    font-weight: 700;
}
.wra-page .tabs-headers > li.filled:after,
.wra-page .tabs-headers > li.active:after{
    background-color: var(--main-accent);
}

.wra-page .tabs{ padding: 20px;}
.wra-page .tab { display: none; }
.wra-page .tab.active { display: block; }
.wra-page .tab-nav.tab-previous{ display: none;}
.wra-page .tab-btn.tab-prev{ margin-bottom: 20px; padding: 10px 12px;}
.wra-page .tab-btn.tab-next{ margin-top: 20px; }

@media (max-width:767px) {
    .wra-page .tabs-headers::before{ left: 0; right: 0; height: 2px;}
    .wra-page .tabs-headers::after{ left: 0; height: 3px; }
    .wra-page .tabs-headers.progress1::after{ width: 16.5%; }
    .wra-page .tabs-headers.progress2::after{ width: 50%; }
    .wra-page .tabs-headers.progress3::after{ width: 83.5%; }
    .wra-page .tabs-headers > li{ font-size: 14px; }
}

/* Checkout Fields */
.wra-page .woocommerce form input.input-text,
.wra-page .woocommerce form textarea,
.wra-page .woocommerce form .select2-container .select2-selection{
    padding: 8px;
    font-size: 16px;
    color:  var(--dark-text);
    background-color: transparent;
}
.wra-page .form-row.woocommerce-validated .select2-container .select2-selection{
    border-color: var(--success);
}
.wra-page .form-row.woocommerce-invalid .select2-container .select2-selection{
    border-color: var(--error);
}
.wra-page .woocommerce form input.input-text,
.wra-page .woocommerce form textarea,
.wra-page .select2-container .select2-selection--single,
.wra-page .select2-container--open .select2-dropdown{ 
    border: 1px solid var(--sep-accent);
    border-radius: 0; 
}

.wra-page .woocommerce form p.form-row span textarea{ resize: none;}
.wra-page .woocommerce form p.form-row span *::placeholder, 
.wra-page .woocommerce form p.form-row span .select2-selection__placeholder{ 
    color: transparent !important; 
}

.wra-page .woocommerce form p.form-row{
    position: relative;
    margin: 0 0 15px 0;
    padding: 20px 0 0 0;
}
.wra-page .woocommerce form #tab-checkout-billing p.form-row:not(.create-account) label,
.wra-page .woocommerce form #tab-order-review p.form-row label{
    display: block !important;
    position: absolute;
    color: #777777;
    transition: all 200ms;
    font-size: 16px;
    line-height: 1.5;
}
.wra-page .woocommerce form #tab-checkout-billing p.form-row:not(.filled) label{
    padding: 8px;
}
.wra-page .woocommerce form #tab-checkout-billing p.form-row.filled label{
    font-size: 14px;
    transform: translateY(-24px);
}

.wra-page .select2-container .select2-selection--single{ height: unset; }
.wra-page .select2-container .select2-selection--single .select2-selection__rendered{ padding: 0; }
.wra-page .select2-container--default .select2-selection--single .select2-selection__arrow { top: 6px; right: 6px; }
.wra-page .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 1.2;
    overflow: visible;
}
.wra-page .select2-dropdown--below{ margin-top: 4px; }
.wra-page .select2-dropdown--above{ margin-top: 38px; transform: translateY(100%);}

.wra-page p.form-row .woocommerce-input-wrapper input:focus,
.wra-page p.form-row .woocommerce-input-wrapper textarea:focus, 
.wra-page p.form-row .select2-container--default.select2-container--open .select2-selection--single{
    border-color: var(--main-accent);
}

@media (max-width:767px) {
    .wra-page .woocommerce form p.form-row{ padding: 20px 0 0 0; }
    .wra-page .woocommerce form input.input-text, 
    .wra-page .woocommerce form textarea, 
    .wra-page .woocommerce form .select2-container .select2-selection,
    .wra-page .woocommerce form #tab-checkout-billing p.form-row:not(.filled) label{
        font-size: 14px;
        padding: 4px;
    }
    .wra-page .woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox{ line-height: 1.5em; }
}


/* Checkout Order Review */
.woocommerce-checkout .shop_table,
.woocommerce-checkout .shop_table tr,
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td { border: unset !important; }

.woocommerce-checkout .wra-product-listing {
    list-style-type: none;
    padding: 0;
    margin: 0 0 10px 0;
}

#order_review{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Checkout Coupon Form */
.coupon-toggle:hover{
    cursor: pointer;
}
.coupon-toggle.open h3{
    color: var(--main-accent); 
}
#coupon-form {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--sep-accent);
}
.wra-page .coupon-form{ 
    display: flex;
    align-items: center;
    gap: 10px;
}
.wra-page .coupon-form label{
    font-size: 16px; font-weight: 500;
}
.wra-page .coupon-form:not(.cart-coupon) input.coupon-field{
    width:100%;
}
.wra-page .coupon-form input.coupon-field{
    flex: 1 1 auto;
    font-size: 16px;
    padding: 10px;
    border: 1px solid var(--sep-accent);
    background-color:transparent; 
    color: #000000; 
    outline: 0;
}
.wra-page .coupon-form input.coupon-field:focus{
    border-color: var(--main-accent); 
}
.wra-remove-coupon{ cursor: pointer; }

@media (max-width:767px) {
    .wra-btn.coupon-button{ width:100%; margin-bottom: 20px; }
}

/* Checkout Shippping */
.wra-page .woocommerce #checkout-shipping {
    padding: 10px 0;
    border-bottom: 1px solid var(--sep-accent);
}
.wra-page .woocommerce .shipping-title{
    display: block;
    width:100%;
    font-weight: 700;
    margin-bottom: 10px;
}
.wra-page .woocommerce #shipping_method > li{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px;
    border: 1px solid var(--sep-accent);
}
.wra-page .woocommerce #shipping_method > li > input{
    flex: 1 1 20px;
    margin: 0;
    margin-right: 4px;
}
.wra-page .woocommerce #shipping_method > li > label{
    flex: 1 1 calc(100% - 24px);
    font-size: 16px;
}
.wra-page .woocommerce #shipping_method > li > div{
    margin-top: 5px;
    flex: 1 1 100%;
    font-size: 14px;
}
.wra-page .woocommerce #shipping_method > li.selected{
    border-color: var(--main-accent);
    color: var(--main-accent);
    font-weight: 500;
}

/* Checkout Order Total */
#checkout-total{   
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.order-costs{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.order-costs > span:first-child{ font-weight: 700; }
.order-costs > span:last-child *{ font-weight: 400; }
.order-total { font-size: 18px;}

.wra-remove-coupon{ color: var(--error); }

/* Checkout Payment */
.woocommerce-checkout #payment.woocommerce-checkout-payment{
    background: transparent;
    border-radius: 0;   
}
.woocommerce-checkout #payment ul.wc_payment_methods{
    padding: 10px 0;
    border-bottom: 1px solid var(--sep-accent);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.woocommerce-checkout #payment li.wc_payment_method{
    padding: 8px 12px;
    border: 1px solid var(--sep-accent);
}
.woocommerce-checkout #payment li.wc_payment_method label{
    font-size: 16px;
}
.woocommerce-checkout #payment li.wc_payment_method label:hover{
    cursor: pointer;
}
.woocommerce-checkout #payment li.wc_payment_method.selected {
    border-color: var(--main-accent);
    color: var(--main-accent);
}
.woocommerce-checkout #payment li.wc_payment_method.selected label{
    font-weight: 600;
}
.woocommerce-checkout #payment ul.payment_methods li input{
    margin: 0;
}
.woocommerce-checkout #payment div.payment_box{
    background: transparent;
    margin: 0;
    padding: 0;
    font-size: 14px;
}
.wra-page #payment div.payment_box::before{ content: unset;}
.wra-page #payment div.form-row.place-order {
    padding: 10px 0; font-size: 16px;
}

.wra-page #payment .woocommerce-terms-and-conditions-wrapper{
    margin: 10px 0;
}


@media (max-width:767px) {

    .wra-page #payment div.form-row.place-order {
        font-size: 14px;
    }
    #customer_details > div { margin-bottom: 20px;}

    .tab-btn.tab-prev{ 
        width: 100%;
        margin-bottom: 20px;
    }
    .tab-btn.tab-next{
        width: 100%;
    }

    .woocommerce-checkout-review-order{
        font-size: 16px;
    }

    .wra-coupon-notice {
        position: fixed; 
        top: 0; left: 0; right: 0;
        margin: 20px;
        z-index: 100000;
    }
}

/* Thank You Page */

.wra-page .wra-thankyou-icon { display: flex; align-items: center; justify-content: center;}
.wra-page .wra-thankyou-icon.success .sgu-icon { font-size: 36px; line-height: 36px; }
.wra-page .wra-thankyou-icon.success .sgu-icon{ color: var(--success); }
.wra-page .wra-thankyou-icon.error .sgu-icon{ color: var(--error); }

.wra-page .woocommerce .woocommerce-thankyou-order-received{
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    border: 1px solid var(--sep-accent);
    padding: 10px;
    font-size: 16px;
    text-align: center;
}
.wra-page .woocommerce .wra-product-listing.overview { margin: 0; }
.wra-page .woocommerce .wra-product-listing.overview .wra-product-item,

.wra-page .woocommerce ul.order_details{ border-bottom: 1px solid var(--sep-accent); }
.wra-page .woocommerce ul.order_details li { padding: 15px; margin-right: 0;}
.wra-page .woocommerce ul.order_details li > span{ font-size: 12px; margin-bottom: 10px; }
.wra-page .woocommerce ul.order_details li > strong{ font-size: 16px; }

.wra-page .woocommerce .wra-product-listing.overview .wra-product-item:last-child{ border-bottom: unset;}

.wra-page .woocommerce .wra-product-listing.overview .product-name a{
    text-decoration: none; color: var(--main-accent);
}
.wra-page .woocommerce .wra-product-listing.overview .product-data .wc-item-meta{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.wra-page .woocommerce .wra-product-listing.overview .product-data .wc-item-meta li > *{
    margin-bottom: 0;
}
.wra-page .woocommerce .wra-product-listing.overview .product-data .wc-item-meta li{
    display: flex; flex-direction: row; justify-content: flex-start; gap: 10px;
}
.wra-page .woocommerce .woocommerce-customer-details h2{
    margin-top: 20px;
}
.wra-page .woocommerce .woocommerce-customer-details address{
    font-size: 16px;
    border: 1px solid var(--sep-accent);
    padding: 10px;
}

@media (max-width:767px) {
    .wra-page .woocommerce .woocommerce-thankyou-order-received{ font-size: 14px; }
    .wra-page .woocommerce ul.order_details{
        display: flex; 
        flex-direction: column; 
        justify-content: center;
        margin: 0 0 20px 0; 
    }
    .wra-page .woocommerce ul.order_details li{
        border-right: 0; 
        padding: 10px;
        margin-right: 0; 
        background-color: #f8f8f8;
        border-bottom: 1px solid var(--sep-accent);
    }
    .wra-page .woocommerce ul.order_details li:last-child{ border-bottom: unset;}
    .wra-page .woocommerce ul.order_details li > span{
        font-size: 13px;
        line-height: 1.8em;
    }
    .wra-page .woocommerce ul.order_details li > strong{
        font-size: 16px;
    }
    
}

.wra-loader{
	position: absolute;
    bottom: 60px;
    padding: 20px;
    width: 100%;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
	background: rgb(255 255 255 / 55%);
}
.wra-loader div{ 
	display: inline-block;
	transform-origin: 50% 45%;
	animation: loading 0.8s infinite linear;
}
.wra-loader i{ 
	font-size: 32px;
}
@keyframes loading {
	0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Divi Integration Styles */
body.wra-page:not(.et-tb) #main-content > .container { 
    width: 100%; padding: 0;
}
.wra-page .main_title{ margin-bottom: 0; }
.wra-page p.woocommerce-notice:not(.has-background):last-of-type {padding: 10px;}

.wra-page dd { margin-left:0; }