/* =================================
WOOCOMMERCE ELEMENTOR CART FIXES
================================ */

.woocommerce-cart .elementor-widget-woocommerce-cart .product-thumbnail {
display: table-cell !important;
width: 60px !important;
vertical-align: middle !important;
}
a.woocommerce-remove-coupon, a.woocommerce-remove-coupon:hover {
	color: var(--e-global-color-primary, #202B4C) !important
}
.woocommerce-error a {
	color:#ffffff !important;
}
.woocommerce-cart .elementor-widget-woocommerce-cart .product-thumbnail img {
max-width: 50px !important;
height: auto !important;
display: block !important;
}

/* Remove the colon before product image */
.woocommerce-cart .cart td.product-thumbnail::before {
content: none !important;
}
/* 
.product-quantity{
display: none !important;
} */
dl.variation {
display: none !important;
}


/* Checkout page title ("Checkout", the theme's .page-header h1.entry-title):
   was grey (#666). Matches the site's other headings — Elementor's global
   heading font (Roboto Slab, 600) in black — and steps down on smaller
   screens. */
html body.woocommerce-checkout .page-header .entry-title {
    font-family: var(--e-global-typography-primary-font-family, "Roboto Slab"), "Roboto Slab", serif !important;
    font-weight: 600 !important;
    color: #000000 !important;
    font-size: 36px !important;
    line-height: 1.2 !important;
}
@media (max-width: 1024px) {
    html body.woocommerce-checkout .page-header .entry-title {
        font-size: 30px !important;
    }
}
@media (max-width: 767px) {
    html body.woocommerce-checkout .page-header .entry-title {
        font-size: 24px !important;
    }
}

/* Mini cart buttons, clicked (focus/active). An inherited Wise Compass rule
   set the background to TRANSPARENT here while Elementor keeps the text
   white on focus — so "View cart" went white-on-white (invisible) the moment
   it was clicked. The buttons now keep their normal look when clicked:
   View cart = the site's red with white text. */
html body .elementor-menu-cart__footer-buttons .elementor-button--view-cart:focus,
html body .elementor-menu-cart__footer-buttons .elementor-button--view-cart:active {
    background-color: var(--e-global-color-secondary, #B02D24) !important;
    border-color: var(--e-global-color-secondary, #B02D24) !important;
    color: #ffffff !important;
}

/* .elementor-widget-woocommerce-cart .woocommerce table.shop_table.cart .actions{

display: none;
} */
.elementor-38187 .elementor-element.elementor-element-269bd676 {
    --padding-bottom: 0px !important;
}

.elementor-widget-woocommerce-cart .woocommerce button.button:disabled:hover, .elementor-widget-woocommerce-cart .woocommerce button.button:disabled[disabled]:hover {
	background-color: var(--e-global-color-primary, #202B4C) !important; /* was Wise Compass light blue #5bc0de */
}

.product-video-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--e-global-color-primary, #202B4C);
	font-family: "Mulish";
	font-weight: 800;
    color: #ffffff !important;
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 20px;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.product-video-btn:hover {
    background: var(--e-global-color-primary, #202B4C);
    transform: translateY(-2px);
}

.product-video-btn .video-icon {
    font-size: 22px;
}

/* Old product-card/pack-detail CSS (tooltip cards, .digital-pack/.printed-pack, old .detail-digital-pack/.detail-printed-pack heading+price+button styling) removed here -- replaced by the .pack-tabs-wrapper / .qb-* system below, which the new book_quick_buy/book_detail_pack shortcode markup actually uses. */
/* Error Message Styling

/* Full width WooCommerce notices */
.woocommerce-notices-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    padding: 0;
}

/* Base notice styling */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    width: 100%;
    margin: 0;
    padding: 18px 24px;
    border-radius: 0;
    border: none;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

/* Error (red) — the site's red (Elementor global Secondary colour), so
   errors stand out from the dark-blue brand elements (2026-09-14). */
.woocommerce-error {
    background: var(--e-global-color-secondary, #B02D24);
    color: #ffffff !important;
}

/* Success (green) */
.woocommerce-message {
    background: #2e7d32;
    color: #ffffff !important;
}

/* Info (blue) */
.woocommerce-info {
    background: var(--e-global-color-primary, #202B4C);
    color: #ffffff !important;
}

/* Remove default WooCommerce bullet points */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
    display: none;
}
.elementor-widget-woocommerce-cart .woocommerce .input-text.qty {
    padding: 1px 1px 1px 15px !important;
}
/* View cart link inside WooCommerce notices */
.woocommerce-notices-wrapper a,
.woocommerce-message a {
    color: #ffffff !important;     /* white text */
    text-decoration: underline;    /* underline */
    font-weight: 600;
}








/* Zaheer CSS Ends Here */
.elementor-33664 .elementor-element.elementor-element-20fc3d41 .coupon .input-text {
	color: #4d4d4d !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    line-height: 28px !important;
    font-weight: bold !important;
    border: 0 !important;
    padding: 10px 14px !important;
    box-shadow: 0 1.06px 2.13px -1.06px rgba(0, 0, 0, 0.10), 0 1.06px 3.19px 0 rgba(0, 0, 0, 0.10) !important;
}

/* Mobile cart row spacing fix */
@media (max-width: 700px) {
.elementor-widget-woocommerce-cart .woocommerce table.cart tr {
padding: 0px;
}

td.product-remove{

padding: 5px 0px 0px 0px !important;
}

td.product-price{

padding: 0px !important;
}

.elementor-13541 .e-con {

--container-max-width: 990px;
}
}



/* ====================================
WOOCOMMERCE CHECKOUT BUTTONS STYLING
==================================== */

button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained {
background: var(--e-global-color-primary, #202B4C);
border: solid black 2px;
border-radius: 10px;
color: white;
}

button.wc-block-components-button.wp-element-button.wc-block-components-totals-coupon__button.contained {
border: solid var(--e-global-color-primary, #202B4C) 2px;
color: var(--e-global-color-primary, #202B4C);
}

button.wc-block-components-button.wp-element-button.wc-block-components-totals-coupon__button.contained:hover {
background-color: white;
}

/* Apply Mulish everywhere on checkout */
.woocommerce-checkout,
.woocommerce-checkout p {
font-family: 'Mulish', sans-serif !important;
}

/* Checkout action button spacing */
.wc-block-checkout__actions_row {
margin-bottom: 30px;
}

/*================================
WOOCOMMERCE CLASSIC BUTTON STYLING
================================= */

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button,
a.button.wc-backward {

height: 48px;
background: var(--e-global-color-primary, #202B4C);
color: #ffffff;
font-family: "Mulish", Sans-serif;
font-size: 18px;
font-weight: 600;
border: 0;
border-radius: 12px;
box-shadow:
0px 4.25px 6.38px -4.25px rgba(0, 0, 0, 0.10),
0px 10.64px 15.96px -3.19px rgba(0, 0, 0, 0.10);
padding: 0 16px;
line-height: 48px;
text-align: center;
}


.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover,
a.button.wc-backward:hover {
background: var(--e-global-color-primary, #202B4C);
color: white;
}

.wc-block-checkout-empty span.wp-block-button{

display: flex;
justify-content: center;
}

.wc-block-checkout-empty a.wp-block-button__link:hover{

color: white;
}

/* =================================
MISCELLANEOUS GLOBAL FIXES
================================ */


a#elementor-menu-cart__toggle_button {
background: transparent;
}


.elementor-25 .elementor-element.elementor-element-1a75fc7 .elementor-nav-menu--dropdown a {
padding-left: 10px !important;
}

.elementor-heading-title.elementor-size-default a[rel="tag"] {
pointer-events: none;
cursor: default;
text-decoration: none;
color: inherit;
}


/* Make submenu text black */
a.elementor-sub-item {
color: black !important;
}

/* Coupon error text color */
.coupon-error-notice {
color: var(--e-global-color-secondary, #B02D24);
}

/* "Already used" message shown under the coupon box when a coupon is
   removed once the checkout email becomes known — see recheckAppliedCoupons() */
.wise-coupon-error {
color: var(--e-global-color-secondary, #B02D24);
margin-top: 8px;
font-size: 13px;
display: none;
}


/*================================
THANK YOU PAGE CUSTOM STYLING
==================================*/

.thankyou-page {
background: #f9f9fb;
padding: 80px 20px;
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
font-family: "Mulish", sans-serif;
}

@media (max-width:767px)
{

.thankyou-page {
background: #f9f9fb;
padding: 20px 20px;
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
font-family: "Mulish", sans-serif;
}
}

.thankyou-container {
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,.05);
padding: 20px 20px;
max-width: 650px;
width: 100%;
text-align: center;
}

.thankyou-container h1 {
font-size: 36px;
margin-bottom: 15px;
}

/* Thank-you page headings ("Thank You for Your Order!", WooCommerce's
   "Order details"): were the theme's grey (#666) and oversized. Same
   treatment as the checkout title — Elementor's global heading font
   (Roboto Slab, 600) in black, smaller on tablet/mobile. */
html body .thankyou-container h1,
html body .thankyou-container h2,
html body .thankyou-container .woocommerce-order-details__title {
    font-family: var(--e-global-typography-primary-font-family, "Roboto Slab"), "Roboto Slab", serif !important;
    font-weight: 600 !important;
    color: #000000 !important;
    line-height: 1.2 !important;
}
html body .thankyou-container h1 {
    font-size: 36px !important;
}
html body .thankyou-container h2,
html body .thankyou-container .woocommerce-order-details__title {
    font-size: 26px !important;
    margin: 10px 0 15px !important;
}
@media (max-width: 1024px) {
    html body .thankyou-container h1 { font-size: 30px !important; }
    html body .thankyou-container h2,
    html body .thankyou-container .woocommerce-order-details__title { font-size: 22px !important; }
}
@media (max-width: 767px) {
    html body .thankyou-container h1 { font-size: 24px !important; }
    html body .thankyou-container h2,
    html body .thankyou-container .woocommerce-order-details__title { font-size: 20px !important; }
}

.thankyou-container p {
font-size: 1.1rem;
color: #555;
margin-bottom: 30px;
}

.order-summary {
text-align: left;
margin-bottom: 30px;
border: 1px solid #e8e8e8;
border-radius: 10px;
padding: 20px;
background: #fafafa;
}

.order-summary ul {
list-style: none;
padding: 0;
margin: 0;
}

.order-summary li {
margin-bottom: 10px;
color: #444;
}

.ty-btn {
display: inline-block;
background: #3c69e7;
color: #fff;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: background .3s ease;
}

.ty-btn:hover {
background: #2d53c3;
}

/* Hide customer details section */
.thankyou-page .woocommerce-customer-details {
display: none;
}

.thankyou-page a,
.thankyou-container a {
color: var(--e-global-color-primary, #202B4C) !important;
}

.thankyou-page a:hover,
.thankyou-container a:hover {
color: var(--e-global-color-primary, #202B4C) !important; /* was Wise Compass teal #2b7a7a */
opacity: 0.85;
}


@media(max-width:600px)
{
.thankyou-container h1{

font-size: 22px;
}

}


/*================================
CLASSIC CHECKOUT STYLING
==================================*/


/* Hide Billing First Name field on Classic Checkout */
.woocommerce-billing-fields #billing_first_name_field {
display: none !important;
}

@media(min-width:1025px) {
.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1 {
width: 90%;
}

#customer_details {
display: flex;
flex-flow: column nowrap;
float: left;
width: 50%;
}

#customer_details .col-2 {
width: 90%;
margin-top: 20px;
}

#order_review,
#order_review_heading {
width: 50%;
float: left;
clear: none;
}
}


/* Description text styling (optional) */
.wc-checkout-description {
margin-top: 5px;
font-size: 14px;
color: #666;
line-height: 1.5;
}



.woocommerce-checkout #payment div.payment_box{

background-color: transparent;
}

.woocommerce-checkout #payment{

background: #f2f2f2;
border-radius: 10px;
}

/* Hide Stripe country field in WooCommerce Blocks Checkout */
.p-Field[data-field="country"] {
display: none !important;
}




/* Fix checkout alignment on mobile */
@media (max-width: 768px) {
.woocommerce .col2-set,
.woocommerce .col-1,
.woocommerce .col-2,
.woocommerce-checkout .woocommerce {
width: 100% !important;
max-width: 100% !important;
padding: 0 5px !important;
margin: 0 auto !important;
box-sizing: border-box;
}

/* Prevent flex pushing everything left */
.woocommerce .col2-set {
display: block !important;
gap: 0 !important;
}

/* Fix form fields alignment */
.woocommerce form .form-row {
width: 100% !important;
float: none !important;

}

/* Prevent Stripe box from overflowing */
.wc-stripe-elements-field,
.wc-stripe-card-element {
width: 100% !important;
}

/* Fix container overflow */
.woocommerce-checkout,
.woocommerce {
overflow-x: hidden !important;
}
}


.woocommerce-checkout h3 {
font-size: 22px;
font-weight: 700;
color: #333;
font-family: "Mulish", Sans-serif;


}

.woocommerce-billing-fields > h3::before{

font-size: 22px;
font-weight: 700;
color: #333;
background: transparent;
font-family: "Mulish", Sans-serif;
}

.woocommerce-checkout .woocommerce-billing-fields > h3{

background: transparent;
}

.woocommerce-checkout #billing-details-title {
margin-top: 30px !important;
}

@media(max-width: 767px)

{
.woocommerce-checkout #billing-details-title {
margin-top: 10px !important;
}

}

.woocommerce-privacy-policy-text{


display: none;
}

/* .p-Field[data-field="country"] {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}

.p-GridCell[data-field="country"],
.p-FieldsetCell[data-field="country"] {
display: none !important;
} */


.woocommerce-checkout form .form-row .input-text, .select2-container .select2-selection--single .select2-selection__rendered, .woocommerce form .form-row select  {

color: #4d4d4d !important;
border-radius: 14px;
font-family: 'Mulish', sans-serif;
font-size: 16px !important;
font-weight: bold;
border: 0;
padding: 10px 14px;
box-shadow:
0 1.06px 2.13px -1.06px rgba(0, 0, 0, 0.10),
0 1.06px 3.19px 0 rgba(0, 0, 0, 0.10);

}

.select2-container .select2-dropdown, .select2-container .select2-selection {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0px !important;
}
.select2-results {
    background: #fff !important;
}



body.woocommerce-checkout #coupon_code::placeholder {
color: #7b7b7b !important;
}



body.woocommerce-checkout #billing_email::placeholder {
color: #7b7b7b !important;
}

button#place_order{

width: 100%;
height: 48px;
background: var(--e-global-color-primary, #202B4C);
color: #ffffff;
font-weight: 600;
border: 0;
border-radius: 100px;
box-shadow:
0px 4.25px 6.38px -4.25px rgba(0, 0, 0, 0.10),
0px 10.64px 15.96px -3.19px rgba(0, 0, 0, 0.10);
}

.checkout_coupon button.button,
.checkout_coupon input[type="submit"] {
width: 100%;
background: var(--e-global-color-primary, #202B4C);
color: #ffffff;
font-weight: 600;
line-height: 22px;
border: 0;
border-radius: 100px;
box-shadow:
0px 4.25px 6.38px -4.25px rgba(0, 0, 0, 0.10),
0px 10.64px 15.96px -3.19px rgba(0, 0, 0, 0.10);
}

.checkout_coupon button.button:hover,
.checkout_coupon button.button:focus,
.checkout_coupon button.button:active,
.checkout_coupon input[type="submit"]:hover,
.checkout_coupon input[type="submit"]:focus,
.checkout_coupon input[type="submit"]:active {
background: var(--e-global-color-primary, #202B4C);
color: #ffffff;
box-shadow:
0px 4.25px 6.38px -4.25px rgba(0, 0, 0, 0.10),
0px 10.64px 15.96px -3.19px rgba(0, 0, 0, 0.10);align-items

}
/* Always show coupon form */
.checkout_coupon.woocommerce-form-coupon {
display: block !important;
}

/* Hide the “Have a coupon?” toggle row */
.woocommerce-form-coupon-toggle {
display: none !important;
}

.woocommerce form.checkout_coupon{

border: none;
margin: 1rem 0rem 2.5rem 0rem !important;
}



.woocommerce form .form-row label{
display: none !important;
}

@media (max-width: 767px) {

form.woocommerce-checkout {
display: flex !important;
flex-direction: column !important;
}

#customer_details {
order: 1 !important;
width: 100% !important;
padding: 0px !important;
}

#order_review_heading,
#order_review {
order: 2 !important;
width: 100% !important;
}

#payment {
order: 3 !important;
width: 100% !important;
margin-top: 20px !important;
}
}




body.woocommerce-checkout .page-header {
margin-top: 40px !important;
text-align: left !important;
}

/* Left align checkout title inside Elementor Hello theme header */
body.woocommerce-checkout .page-header,
body.woocommerce-checkout .page-header .entry-title {
text-align: center !important;
margin-left: 0 !important;
margin-bottom: 30px;
}



/* Make coupon input + button sit in a neat row */
.checkout_coupon.woocommerce-form-coupon {

display: flex !important;

}

form#woocommerce-checkout-form-coupon{

width: 100%;

padding: 5px 0px 0px 0px;
gap: 12px;

}

#coupon_code::placeholder {
color: #000 !important; /* black */
opacity: 1 !important; /* ensure visible */
}



fieldset#wc-stripe-upe-form{

border: none;
padding: 0px;
}

/* a.button.wc-forward{

background: var(--e-global-color-primary, #202B4C) !important;
border: 2px solid black !important;
border-radius: 10px !important;
color: white !important;
} */


#billing_email::placeholder {
color: #000 !important;
opacity: 1 !important;
}


/*================================
AMENDS AFTER LIVE
==================================*/

.hide-billing-title #billing-details-title {
display: none !important;
}

/* Spinner inside Place Order button */
#place_order.processing {
position: relative;
opacity: 0.8;
}

#place_order.processing::after {
content: "";
width: 16px;
height: 16px;
border: 2px solid black;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.6s linear infinite;
position: absolute;
right: -25px; /* adjust to move spinner closer/farther */
top: 50%;
transform: translateY(-50%);
}

@keyframes spin {
from { transform: translateY(-50%) rotate(0deg); }
to { transform: translateY(-50%) rotate(360deg); }
}


.woocommerce-checkout #payment div.payment_box::before{

display: none;

}

a.added_to_cart.wc-forward{

display: none;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price{

color: black !important;

}


/* ===============================
New Checkout Journey CSS Code
=============================== */

/* Hide payment + billing section until auth flow completes */
.checkout-payment-wrapper {
display: none;
}

body.account-verified .checkout-payment-wrapper {
display: block;
}



.wc-auth-btn {
position: relative;
}

.btn-spinner {
position: absolute;
right: 16px;
top: 50%;
width: 18px;
height: 18px;
margin-top: -9px;

border: 2px solid #fff;
border-top-color: #C7C7C7;
border-radius: 50%;

display: none;
animation: wc-spin 0.8s linear infinite;
}

.wc-auth-btn.loading {
pointer-events: none;
opacity: 0.85;
}

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


.woocommerce-checkout input#coupon_code{

line-height: 22px !important;
border-radius: 100px !important;
}

/* Coupon code placeholder color */
#coupon_code::placeholder {
color: #7b7b7b !important;
opacity: 1;
}


.woocommerce-cart input#coupon_code{

border-radius: 100px !important;
font-size: 18px !important;
line-height: 26px !important;
}

/* Spinner inside Place Order button */
#place_order.processing {
position: relative;
opacity: 0.8;
}

#place_order.processing::after {
content: "";
width: 16px;
height: 16px;
border: 2px solid white;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.6s linear infinite;
position: absolute;
right: 10px; /* adjust to move spinner closer/farther */
top: 50%;
transform: translateY(-50%);
}

@keyframes spin {
from { transform: translateY(-50%) rotate(0deg); }
to { transform: translateY(-50%) rotate(360deg); }
}


@media (max-width: 767px)
{

button#btn-submit-email
{
margin-bottom: 20px;

}
}
/*
.woocommerce form.checkout_coupon{

margin: 0;

} */

.thankyou-page table.woocommerce-table.woocommerce-table--custom-fields.shop_table.custom-fields{

display: none !important;
}

.form-row.place-order {
width: 100%;
}

.form-row.place-order button,
.form-row.place-order .button,
#place_order {
width: 100%;
display: block;
}

.email-summary{

display: none;
}

.woocommerce-billing-fields > h3 {
position: relative;
font-size: 0;
}


body:not(.account-verified)
.woocommerce-billing-fields > h3::before {
content: "1. Log in or Create an Account";
font-size: 22px;
font-weight: 700;
}

body.account-verified
.woocommerce-billing-fields > h3::before {
content: attr(data-heading);
font-size: 22px;
font-weight: 700;
}


/* Divider below Account Details heading */
body.account-verified
.woocommerce-billing-fields > h3 {
position: relative;
padding-bottom: 14px;
margin-bottom: 24px;
}

/* Horizontal line */
body.account-verified
.woocommerce-billing-fields > h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: #e5e7eb; /* light grey divider */
}


body.account-verified .woocommerce-billing-fields > h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 10px;
}

body.account-verified .acc-email {
font-size: 16px;
color: var(--e-global-color-primary, #202B4C);
font-weight: 500;
margin-left: 6px;
}

/* Verified tick — inline SVG drawn in currentColor, so this sets its colour.
   The site's red (Elementor global Secondary colour). */
.acc-check {
display: inline-flex;
align-items: center;
margin-left: 2px;
color: var(--e-global-color-secondary, #B02D24);
transform: translateY(1px); /* optical alignment */
}



/* Email-first checkout: hide fields initially */
.woocommerce-checkout
#billing_full_name_field,
.woocommerce-checkout
#billing_phone_field,
.woocommerce-checkout
#billing_password_field {
display: none;
}

body.email-verified
#billing_full_name_field,
body.email-verified
#billing_phone_field,
body.email-verified
#billing_password_field {
display: block;
}

.show-password-input:hover{

background-color: transparent !important;

}

.woocommerce-message::before {
content: "\e015";
color: var(--e-global-color-primary, #202B4C);
}

.woocommerce-message {
border-top-color: var(--e-global-color-primary, #202B4C);

}
@media (max-width:767px)

{
.woocommerce-message {

display: flex !important;
flex-wrap: wrap !important;
gap: 20px !important;
}
}


/* .woocommerce-checkout .elementor-menu-cart__container.elementor-lightbox {
pointer-events: none;
}
 */
/* Checkout page only – hide ONLY the checkout button in side cart */
body.woocommerce-checkout 
.elementor-menu-cart__footer-buttons 
.elementor-button--checkout {
    display: none !important;
}
body.woocommerce-checkout 
.elementor-menu-cart__footer-buttons {
	
	display: flex;
justify-content: center;
}


/* Checkout page only – hide remove (X) icon in side cart */
body.woocommerce-checkout 
.elementor-menu-cart__product-remove {
    display: none !important;
}


#wc-auth-box {
margin-top:25px;
}

#wc-auth-box input {
height:46px;
margin-bottom:12px;
color: #4d4d4d !important;
border-radius: 14px;
font-family: 'Mulish', sans-serif;
font-size: 16px !important;
font-weight: bold;
border: 0;
padding: 10px 14px;
box-shadow:
0 1.06px 2.13px -1.06px rgba(0, 0, 0, 0.10),
0 1.06px 3.19px 0 rgba(0, 0, 0, 0.10);

}

/* =====================
AUTH BUTTON
===================== */

.wc-auth-btn {
width: 100%;
height: 48px;
background: var(--e-global-color-primary, #202B4C);
color: #ffffff;
font-weight: 600;
font-size: 18px;
border: 0;
border-radius: 12px;
box-shadow:
0px 4.25px 6.38px -4.25px rgba(0, 0, 0, 0.10),
0px 10.64px 15.96px -3.19px rgba(0, 0, 0, 0.10);
}

.wc-auth-btn:hover {
background: var(--e-global-color-primary, #202B4C);
color: #ffffff !important;
box-shadow:
0px 6px 10px -3px rgba(0, 0, 0, 0.15),
0px 14px 22px -2px rgba(0, 0, 0, 0.15);
}

.wc-auth-btn + .wc-auth-btn {
margin-top:12px;
}

/* =====================
OTP / ERROR STATES
===================== */

#wc-resend-otp {
display:block;
margin-top:10px;
text-align:center;
color:var(--e-global-color-primary, #202B4C);
cursor: pointer;
}

#wc-resend-otp.disabled {
pointer-events: none;
color: black;
cursor: not-allowed;
text-decoration: none !important;
}

/* Checkout sign-in step messages ("Something went wrong…", OTP errors) —
   red; the .success variant below stays green. */
#wc-auth-error {
color: var(--e-global-color-secondary, #B02D24) !important;
margin-top:10px;
}

#wc-auth-error.success {
color:#16a34a !important;
}

/* =====================
EMAIL UI
===================== */

.checkout-email-desc {
margin-top:-5px;
margin-bottom:20px;
color:#555;
font-size:14px;
}

.checkout-email-desc a {
color: black !important;
}

.shipping-helper-text{
	
margin-top: 5px;
margin-bottom:20px;
line-height: 20px;
color:#555;
font-size:14px;
font-weight: 500;
}

.shipping-helper-text a{

	color: black !important;
}

/* Billing & Payment heading — number/text left, lock icon right */
#billing-details-title.wise-billing-payment-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Lock icon — visible while locked, hidden once unlocked */
.billing-lock-icon {
    font-size: 16px;
    line-height: 1;
    color: #767676;
}
body.account-details-complete .billing-lock-icon {
    display: none;
}

/* Billing & Payment — locked/disabled state (visible, not hidden) */
#billing-payment-content.wise-locked {
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}

.checkout-welcome {
display:none;
color:#555;
margin-bottom:10px;
font-size:16px;
width:100%;
max-width:550px;
}

.email-summary {
margin-bottom:20px;
font-weight:600;
}

.email-summary .check {
color:#16a34a;
margin-left:6px;
}

/* =====================
REGISTER FIELDS (name/phone/password) — hard-enforced
!important default-hide, only shown via a body class that JS toggles. Added as a defensive
CSS backstop after these fields were observed showing up unhidden
regardless of the JS .hide() calls in class-checkout.php — this
guarantees they can never be visible outside the actual register
step, independent of whatever was causing that.
===================== */

#billing_full_name_field,
#billing_phone_field,
#billing_password_field {
display:none !important;
}

body.wise-register-fields #billing_full_name_field,
body.wise-register-fields #billing_phone_field,
body.wise-register-fields #billing_password_field {
display:block !important;
}

/* =====================
COUPON — FORCE ONE LINE
===================== */

#checkout-order-review-wrapper #woocommerce-checkout-form-coupon {
display:flex !important;
align-items:stretch;
gap:12px !important;
flex-wrap:wrap;
}

/* Coupon error/message notices usually get inserted as a child of the
   coupon form above — without this they become a 3rd flex item squeezed
   onto the same row as the input/button instead of dropping to their own
   line below. Also covers the notice appearing as a SIBLING immediately
   around the coupon form instead of nested inside it (observed after
   WooCommerce's own checkout refresh regenerates this area, which
   happens more often once shipping/billing are active post-verification
   than on a fresh guest page load) — a plain block display with no flex
   participation either way, so it's never silently squeezed to near-zero
   width or laid out unexpectedly regardless of exactly where it lands. */
#woocommerce-checkout-form-coupon .woocommerce-error,
#woocommerce-checkout-form-coupon .woocommerce-message,
#woocommerce-checkout-form-coupon .woocommerce-info,
#woocommerce-checkout-form-coupon .wise-coupon-error,
#checkout-order-review-wrapper .woocommerce-error,
#checkout-order-review-wrapper .woocommerce-message,
#checkout-order-review-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info {
flex:0 0 100% !important;
width:100% !important;
order:3;
margin:8px 0 0 0 !important;
}

/* .wise-coupon-error is intentionally display:none by default (see its
   base rule) until JS has an actual message to show — kept OUT of the
   block above so this layout fix can't override that and make an empty
   box appear on every page load; it only needs the layout fix once JS
   has already set it visible, so plain descendant scoping is enough. */
#woocommerce-checkout-form-coupon .wise-coupon-error {
flex:0 0 100% !important;
width:100% !important;
order:3;
margin:8px 0 0 0 !important;
}

#woocommerce-checkout-form-coupon .form-row {
margin:0 !important;
padding:0 !important;
width:auto !important;
float:none !important;
}

#woocommerce-checkout-form-coupon .form-row-first {
flex:1;
}

#woocommerce-checkout-form-coupon .form-row-last {
flex:0 0 auto;
}

@media (max-width: 768px) {

.checkout_coupon.woocommerce-form-coupon {
display: block !important;
}

#woocommerce-checkout-form-coupon .form-row {
width: 100% !important;
margin: 0 0 12px 0 !important;
float: none !important;
}

#woocommerce-checkout-form-coupon .form-row-last {
margin-bottom: 0 !important;
}

#woocommerce-checkout-form-coupon button,
#woocommerce-checkout-form-coupon input[type="submit"] {
width: 100% !important;
}

}



/* ========================
    KNOWLEDGE BASE CSS
=========================== */

.eckb-article-content-created-date-container, .eckb-article-content-last-updated-date-container{
	
	color: black !important;
}

h1.eckb-article-title {
    line-height: 48px;
}



/* ========================
    SORT CODE
=========================== */

.custom-wc-sort {
            position: relative;
            display: inline-block;
        }

        .custom-wc-sort-select {
            appearance: none;
            -webkit-appearance: none;
            background-color: var(--e-global-color-primary, #202B4C);
            color: #ffffff;
            font-size: 15px;
            font-weight: 600;
            padding: 12px 44px 12px 20px;
            border-radius: 999px;
            border: none;
            cursor: pointer;
            line-height: 1;
        }

        .custom-wc-sort::after {
            content: '';
            position: absolute;
            right: 18px;
            top: 50%;
            width: 6px;
            height: 6px;
            border-right: 2px solid #ffffff;
            border-bottom: 2px solid #ffffff;
            transform: translateY(-50%) rotate(45deg);
            pointer-events: none;
        }

        .custom-wc-sort-select:focus {
            outline: none;
        }

/* ========================
    SEARCH CODE
=========================== */

 .library-search-wrap {
            display: flex;
            align-items: center;
            background: #ffffff;
            border-radius: 999px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
            max-width: 420px;
        }

        .library-search-input {
            flex: 1;
            border: none !important;
            outline: none !important;
            padding: 12px 18px;
            font-size: 14px;
            border-radius: 999px;
            background: transparent;
        }

        .library-search-input::placeholder {
            color: #4d4d4d;
        }

        .library-search-button {
            background: var(--e-global-color-primary, #202B4C);
            color: #ffffff;
            border: none;
            border-radius: 999px;
            padding: 10px 22px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
        }

        .library-search-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
 button.library-search-button:hover{
    color: #ffffff;
}


 .library-no-results {
            width: 100%;
            text-align: center;
            padding: 60px 20px;
            font-size: 18px;
            font-weight: 600;
	 color: #0f172a;}

.library-no-results-hint {
    display: block;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 400;
    color: #55606e;
}

/* The theme's functions.php search snippet also prints an EMPTY
   .library-no-results next to the plugin's message; without this its 60px
   padding leaves a blank gap under "No products found". */
.library-no-results:empty {
    display: none !important;
}


@media (max-width: 768px) {

    .yith-wcan-filter .filter-content {
        display: none;
    }

    .yith-wcan-filter.is-open .filter-content {
        display: block;
    }

    .yith-wcan-filter .filter-title {
        cursor: pointer;
        position: relative;
        padding-right: 28px;
    }

    .yith-wcan-filter .filter-title::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        width: 10px;
        height: 10px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-50%) rotate(45deg);
        transition: transform 0.25s ease;
    }

    .yith-wcan-filter.is-open .filter-title::after {
        transform: translateY(-50%) rotate(-135deg);
    }
	
	 .yith-wcan-filter .filter-title {
        pointer-events: auto;
    }
}






/* ===== FORCE FILTER COLUMN WIDTH (CRITICAL) ===== */
.yith-wcan-filters {
    max-width: 320px;
}

/* ===== SPACE BETWEEN ITEMS ===== */
.yith-wcan-filter .filter-items > li {
    margin-bottom: 16px;
}

/* ===== GRID LAYOUT: FIXED CHECKBOX + TEXT ===== */
.yith-wcan-filter .filter-items label {
    display: grid;
    grid-template-columns: 22px 1fr;
    column-gap: 12px;
    align-items: start;
    cursor: pointer;
}

/* ===== CUSTOM CHECKBOX ===== */
.yith-wcan-filter input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--e-global-color-primary, #202B4C);
    border-radius: 4px;
    background-color: none;
    position: relative;
    margin-top: 2px;
}

/* Checked state */
.yith-wcan-filter input[type="checkbox"]:checked {
    background-color: var(--e-global-color-primary, #202B4C);
    border-color: var(--e-global-color-primary, #202B4C);
}

/* White tick */
.yith-wcan-filter input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ===== TEXT BLOCK ===== */
.yith-wcan-filter .term-label {
    display: block;
    max-width: 240px;
    font-size: 15px;
    line-height: 1.5;
    color: #0F172A;
    text-decoration: none;
    word-break: break-word;
}

/* Keep text dark when checked */
.yith-wcan-filter input[type="checkbox"]:checked + .term-label {
    font-weight: 500;
}

/* Space between each filter item */
.yith-wcan-filter .filter-items > li {
    padding-bottom: 16px;
}

/* Remove extra space after last item */
.yith-wcan-filter .filter-items > li:last-child {
    padding-bottom: 0;
}


/* ================================
ADDRESS FIELDS — EMAIL-FIRST LOCK //newcode
================================ */

/* Hide billing address fields until Shipping step is active */
body:not(.shipping-step-active)
#billing_address_1_field,
body:not(.shipping-step-active)
#billing_city_field,
body:not(.shipping-step-active)
#billing_postcode_field,
body:not(.shipping-step-active)
#billing_country_field {
    display: none !important;
}


/* ======================================
   REFUND POLICY TEXT CODE IN CHECKOUT
========================================= */

.woocommerce-checkout-review-order-table
tfoot
tr.wc-refund-policy-row td {
    border: none !important;
    padding-top: 10px;
    padding-bottom: 0;
    text-align: left !important;
}

.woocommerce table.shop_table{
	
	border: none;
    margin: 0;
}


.wc-refund-policy-row td {
    border-top: none;
    font-size: 14px;
}

.wc-refund-policy-link {
    color: #000;
    text-decoration: underline;
}

.wc-refund-policy-link:hover {
    text-decoration: none;
}

/* =====================================
   PHONE COUNTRY CODE SELECTOR
===================================== */
.phone-field-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 14px;
    box-shadow:
        0 1.06px 2.13px -1.06px rgba(0, 0, 0, 0.10),
        0 1.06px 3.19px 0 rgba(0, 0, 0, 0.10);
    overflow: visible;
}

.phone-country-trigger,
.phone-country-trigger:hover,
.phone-country-trigger:focus,
.phone-country-trigger:active {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent !important;
    border: none;
    border-right: 1px solid #e5e5e5;
    padding: 10px 12px;
    cursor: pointer;
    flex-shrink: 0;
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 15px;
    color: #4d4d4d !important;
    height: 46px;
    outline: none;
}
.phone-country-trigger .phone-flag {
    display: inline-flex;
    align-items: center;
    transform: translateY(-1px);
}
.phone-country-trigger .phone-dial {
    display: inline-flex;
    align-items: center;
    line-height: 0.8;
}
.phone-flag {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}
.phone-dial {
    white-space: nowrap;
}
.phone-caret {
    font-size: 10px;
    color: #999;
    margin-left: 2px;
}

.phone-field-wrap input#billing_phone {
    flex: 1;
    min-width: 0;
    border: none !important;
    box-shadow: none !important;
    height: 46px;
    padding: 10px 14px;
    font-family: 'Mulish', sans-serif;
    font-size: 16px !important;
    font-weight: bold;
    color: #4d4d4d !important;
}
.phone-field-wrap input#billing_phone:focus {
    outline: none;
}

.phone-country-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    width: 260px;
    max-height: 280px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    z-index: 9999;
    padding: 6px;
}
.phone-country-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    color: #333;
}
.phone-country-item .phone-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    flex-shrink: 0;
    transform: translateY(-1px);
}
.phone-country-item:hover {
    background: #f2f2f2;
}
.phone-country-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.phone-country-code {
    color: #888;
    font-weight: 600;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .phone-country-trigger {
        padding: 10px 8px;
        font-size: 13px;
    }
    .phone-country-dropdown {
        width: calc(100vw - 60px);
        max-width: 300px;
    }
}

/* =====================================
   BOOK DETAIL PACK — TABS + PRICE + QTY
   Shared by [book_detail_pack] (single product page, inline) and
   [book_quick_buy] (product card modal — see .qb-tabs-wrapper overrides
   further below for the modal-specific tab-pill coloring).
===================================== */
.pack-tabs-wrapper,
.pack-tabs-wrapper * {
    font-family: 'Mulish', sans-serif !important;
    box-sizing: border-box;
}
.pack-price-display {
    font-size: 28px;
    font-weight: 700;
    line-height: 35px;
    color: #0F172A;
    margin-bottom: 14px;
}
.pack-price-display .woocommerce-Price-amount {
    font-family: 'Mulish', sans-serif !important;
    font-weight: 700;
}
/* ===== Tabs ===== */
.pack-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}
.pack-tab-btn {
    border: 1px solid #e0e0e0;
    background: #f2f2f2;
    color: #666;
    border-radius: 999px;
    padding: 8px 22px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pack-tab-btn.is-digital.active {
    background: var(--e-global-color-primary, #202B4C);
    border-color: var(--e-global-color-primary, #202B4C);
    color: #ffffff;
}
.pack-tab-btn.is-printed.active {
    background: var(--e-global-color-primary, #202B4C);
    border-color: var(--e-global-color-primary, #202B4C);
    color: #ffffff;
}
.pack-tab-pane {
    display: none;
}
.pack-tab-pane.active {
    display: block;
}
/* ===== "What is included" ===== */
.pack-included {
    font-size: 14px;
    margin: 14px 0;
}
.pack-included-label {
    font-weight: 700;
    margin-right: 6px;
    color: var(--e-global-color-01a7ed7);
}
.pack-included-items {
    font-weight: 400;
    color: var(--e-global-color-01a7ed7);
}
/* ===== Quantity stepper ===== */
.pack-qty-wrapper {
    margin: 16px 0;
}
.pack-qty-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #4d4d4d;
    margin-bottom: 8px;
}
.pack-qty {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #e2e5ea;
    border-radius: 999px;
    overflow: hidden;
    width: 150px;
    background: #fbfbfd;
    box-shadow: 0 1.06px 2.13px -1.06px rgba(0, 0, 0, 0.10), 0 1.06px 3.19px 0 rgba(0, 0, 0, 0.10);
}
.pack-qty:focus-within {
    border-color: var(--e-global-color-primary, #202B4C);
}
.pack-qty-btn {
    background: transparent !important;
    border: none;
    width: 42px;
    height: 44px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    color: #333;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.pack-qty-btn:hover {
    background: rgba(32, 43, 76, 0.1) !important;
}
.pack-qty-btn:focus,
.pack-qty-btn:focus-visible {
    background: transparent !important;
}
.pack-qty-input {
    flex: 1;
    width: 100%;
    height: 44px;
    text-align: center;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent;
    font-weight: 700;
    font-size: 16px;
    color: #333;
    -moz-appearance: textfield;
}
.pack-qty-input::-webkit-outer-spin-button,
.pack-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pack-qty-input:focus {
    outline: none;
}
/* ===== Action buttons ===== */
.pack-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}
.pack-actions form.cart {
    margin: 0 !important;
    flex: 0 0 auto;
}
.pack-actions .btn {
    width: auto;
    font-weight: 600;
    font-size: 15px;
    padding: 10px 26px;
}

/* Single course page: price sits directly above the buttons with a small
   gap, and the button row has no big top margin — so when the block is
   placed in a column beside the "In-Person Booking" heading, the heading
   and the buttons line up on the same level (2026-09-22, QA request). */
.rp-detail-simple .pack-price-display,
.rp-booking-single .pack-price-display {
    margin-bottom: 8px;
}
.rp-detail-simple .pack-actions {
    margin-top: 0;
}

/* Override theme's forced 50% width on cart forms inside our pack-actions */
.pack-actions form.cart,
.pack-actions form.cart.buy-now-form {
    width: auto !important;
}

/* Add To Cart / Buy Now button colors — .detail-digital-pack and
   .detail-printed-pack are reused as classes on the pack-tab-pane divs
   in book_quick_buy/book_detail_pack, so these rules (verbatim from the
   theme) still apply to the current markup. */
.detail-digital-pack button.add-to-cart-btn {
    font-family: "Mulish";
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;
    background-color: var(--e-global-color-primary, #202B4C);
    border-color: var(--e-global-color-primary, #202B4C);
    padding: 10px 30px;
    margin-right: 4px;
}
.detail-digital-pack button.buy-now-btn {
    font-family: "Mulish";
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;
    background-color: var(--e-global-color-primary, #202B4C);
    border-color: var(--e-global-color-primary, #202B4C);
    padding: 10px 30px;
    margin-right: 20px;
}
.detail-printed-pack button.add-to-cart-btn {
    font-family: "Mulish";
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;
    background-color: var(--e-global-color-primary, #202B4C);
    border-color: var(--e-global-color-primary, #202B4C);
    padding: 10px 30px;
    margin-right: 4px;
}
.detail-printed-pack button.buy-now-btn {
    font-family: "Mulish";
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;
    background-color: var(--e-global-color-primary, #202B4C);
    border-color: var(--e-global-color-primary, #202B4C);
    padding: 10px 30px;
    margin-right: 20px;
}

@media screen and (max-width: 1100px) {
    .detail-digital-pack button.add-to-cart-btn {
        margin-right: 0px;
        margin-bottom: 20px;
    }
    .detail-printed-pack button.add-to-cart-btn {
        margin-right: 0px;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 767px) {
    .detail-digital-pack button.add-to-cart-btn,
    .detail-digital-pack button.buy-now-btn,
    .detail-printed-pack button.add-to-cart-btn,
    .detail-printed-pack button.buy-now-btn {
        font-weight: 400;
        font-size: 14px;
        padding: 10px 20px;
        margin-right: 0px;
    }
    .detail-digital-pack button.add-to-cart-btn {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 600px) {

    .pack-tabs-wrapper {
        text-align: center;
    }

    .pack-price-display {
        font-size: 22px;
        line-height: 28px;
    }

    .pack-tabs-nav {
        justify-content: center;
        gap: 8px;
    }
    .pack-tab-btn {
        padding: 7px 16px;
        font-size: 13px;
    }

    .pack-included {
        text-align: center;
    }

    .pack-qty-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .pack-qty {
        width: 140px;
    }
    .pack-qty-btn,
    .pack-qty-input {
        height: 40px;
    }

    .pack-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 20px;
    }
    .pack-actions form.cart {
        flex: 0 0 auto !important;
        display: inline-block !important;
    }
    .pack-actions .btn {
        width: auto;
        font-weight: 600;
        font-size: 14px;
        padding: 9px 20px;
    }
}

/* =====================================
   QUICK BUY — CARD PRICE
===================================== */
.qb-card-price {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #0F172A;
    text-align: center;
    margin: 4px 0 16px;
}
.qb-card-price .woocommerce-Price-amount {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
}

/* =====================================
   QUICK BUY — TRIGGER BUTTON
   (hover = overlay only; text forced white, never black)
===================================== */
.qb-trigger-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--e-global-color-primary, #202B4C);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 12px 20px;
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    overflow: hidden;
}
.qb-trigger-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: inherit;
    z-index: 0;
}
.qb-trigger-btn:hover::after {
    opacity: 1;
}
.qb-trigger-btn:hover,
.qb-trigger-btn:focus,
.qb-trigger-btn:active,
.qb-trigger-btn:hover .qb-trigger-text,
.qb-trigger-btn:focus .qb-trigger-text,
.qb-trigger-btn:active .qb-trigger-text,
.qb-trigger-btn:hover .qb-cart-icon,
.qb-trigger-btn:focus .qb-cart-icon,
.qb-trigger-btn:active .qb-cart-icon {
    color: #ffffff !important;
}
.qb-trigger-btn:focus {
    outline: none;
}
.qb-cart-icon,
.qb-trigger-text {
    position: relative;
    z-index: 1;
}
.qb-cart-icon {
    display: flex;
    align-items: center;
}

/* =====================================
   QUICK BUY — MODAL OVERLAY
===================================== */
.qb-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.55);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
body.qb-modal-open {
    overflow: hidden;
    padding-right: var(--qb-scrollbar-width, 0px);
}
.qb-modal {
    background: #ffffff;
    border-radius: 16px;
    max-width: 760px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 32px;
    font-family: 'Mulish', sans-serif;
}
.qb-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #f2f2f2;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qb-modal-close:hover {
    background: #e5e5e5;
}
.qb-modal-body {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}
.qb-modal-image {
    flex: 0 0 220px;
}
.qb-modal-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}
.qb-modal-content {
    flex: 1;
    min-width: 260px;
}
.qb-modal-title {
    font-family: 'Mulish', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: #0F172A;
    margin: 0 0 4px;
}
.qb-modal-subtitle {
    font-family: 'Mulish', sans-serif;
    font-style: italic;
    font-size: 14px;
    color: #666;
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

/* Simple-product Quick Buy: product description inside the modal.
   Only rendered by quick_buy_simple() — the variable/pack modal shows
   its "Pack Includes" columns there instead. */
.qb-modal-description {
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    margin: 0 0 18px;
}

.qb-modal-description p {
    margin: 0 0 10px;
}

.qb-modal-description p:last-child {
    margin-bottom: 0;
}

/* EPIC02 — "Join the Waiting List" CTA (cards + single course page).
   Same pill shape as .qb-trigger-btn, outlined so a waiting list course is
   visibly distinct from a purchasable one at a glance. */
.rp-waiting-list-btn,
.rp-waiting-list-btn:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 20px;
    border: 2px solid var(--e-global-color-primary, #202B4C);
    border-radius: 999px;
    background: #ffffff;
    color: var(--e-global-color-primary, #202B4C);
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.rp-waiting-list-btn:hover,
.rp-waiting-list-btn:focus {
    background: var(--e-global-color-primary, #202B4C);
    color: #ffffff;
    text-decoration: none;
    outline: none;
}

/* EPIC04 — "Book Now" (Face to Face / AI Learning) and its greyed-out
   "Fully Booked" state. */
.rp-book-now-form {
    margin: 0;
}

/* Card "Book Now" is a link (to the course page), not a submit button. */
a.rp-book-now-btn,
a.rp-book-now-btn:visited,
a.rp-book-now-btn:hover,
a.rp-book-now-btn:focus {
    color: #ffffff;
    text-decoration: none;
}

.rp-book-now-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 20px;
    border: 2px solid var(--e-global-color-primary, #202B4C);
    border-radius: 999px;
    background: var(--e-global-color-primary, #202B4C);
    color: #ffffff;
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.rp-book-now-btn:hover,
.rp-book-now-btn:focus {
    opacity: 0.88;
    color: #ffffff;
    outline: none;
}

.rp-book-now-btn.is-fully-booked,
.rp-book-now-btn.is-fully-booked:hover {
    background: #d0d0d0;
    border-color: #d0d0d0;
    color: #666666;
    opacity: 1;
    cursor: not-allowed;
}

/* EPIC04 — Grade field, required for EVERY booking (user decision,
   2026-09-15). Hidden until the email step is done, then shown:
   - new account: with the new-account fields (.wise-register-fields,
     under Password);
   - once the account is confirmed (new OR existing platform user, OTP or
     SSO): on its own under Account Details, so an existing user fills it
     in too and a new user can still see / correct it. */
body:not(.wise-register-fields):not(.account-details-complete) #billing_rp_grade_field {
    display: none !important;
}

/* Once the account is confirmed the box is put away — a new user filled it
   in while registering, so leaving it on screen looked like a stray field
   (user decision, 2026-09-23). */
body.account-details-complete #billing_rp_grade_field {
    display: none !important;
}

/* …unless it is still EMPTY: an existing platform user (OTP / SSO) never
   saw the registration fields, and Grade is required for every booking, so
   it must stay reachable. Course_Booking's script sets .rp-grade-needed. */
body.account-details-complete.rp-grade-needed #billing_rp_grade_field {
    display: block !important;
}
.qb-payment-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #666;
    margin: 8px 0 18px;
}
.qb-payment-icons img {
    height: 64px;
    width: auto;
}

/* =====================================
   QUICK BUY — TAB PILLS (outline, colored fill on hover/active)
   Scoped to .qb-tabs-wrapper only — book_detail_pack (single
   product page) tabs are untouched.
===================================== */
.qb-tabs-wrapper .pack-tab-btn {
    background: transparent;
    border: 1.5px solid #d0d0d0;
    color: #666;
}
.qb-tabs-wrapper .pack-tab-btn.is-digital {
    border-color: var(--e-global-color-primary, #202B4C);
    color: var(--e-global-color-primary, #202B4C);
    background: transparent;
}
.qb-tabs-wrapper .pack-tab-btn.is-printed {
    border-color: var(--e-global-color-primary, #202B4C);
    color: var(--e-global-color-primary, #202B4C);
    background: transparent;
}
.qb-tabs-wrapper .pack-tab-btn.is-digital:hover,
.qb-tabs-wrapper .pack-tab-btn.is-digital.active {
    background: var(--e-global-color-primary, #202B4C);
    color: #ffffff !important;
}
.qb-tabs-wrapper .pack-tab-btn.is-printed:hover,
.qb-tabs-wrapper .pack-tab-btn.is-printed.active {
    background: var(--e-global-color-primary, #202B4C);
    color: #ffffff !important;
}

/* =====================================
   QUICK BUY — INCLUDES (full-width, both packs together)
===================================== */
.qb-includes-both {
    display: flex;
    gap: 40px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.qb-includes-col {
    flex: 1;
    min-width: 160px;
}
.qb-includes-heading {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 13px;
    margin: 0 0 10px;
}
.qb-includes-digital .qb-includes-heading {
    color: var(--e-global-color-primary, #202B4C);
}
.qb-includes-printed .qb-includes-heading {
    color: var(--e-global-color-primary, #202B4C);
}
.qb-includes-list {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
}
.qb-includes-list li {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
}
.qb-includes-digital .qb-includes-list li::marker {
    color: var(--e-global-color-primary, #202B4C);
}
.qb-includes-printed .qb-includes-list li::marker {
    color: var(--e-global-color-primary, #202B4C);
}

/* =====================================
   QUICK BUY — MOBILE RESPONSIVENESS
===================================== */
@media screen and (max-width: 600px) {
    .qb-modal {
        padding: 24px 18px;
    }
    .qb-modal-body {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .qb-modal-image {
        flex: 0 0 auto;
        max-width: 200px;
    }

    .qb-payment-icons {
        display: flex;
        justify-content: center;
    }
    .qb-tabs-wrapper .pack-tabs-nav {
        justify-content: center;
    }
    .qb-tabs-wrapper .pack-actions {
        justify-content: center;
    }
    .qb-includes-both {
        flex-direction: column;
        gap: 24px;
        text-align: left !important;
        margin-left: clamp(20px, 16vw, 80px);
    }
}

/* =====================================
   SEO CONTENT BLOCK
===================================== */
.seo-content-block {
    font-family: 'Mulish', sans-serif;
    margin: 30px 0;
}
.seo-content-heading {
    font-family: 'Mulish', sans-serif;
    font-weight: 800;
    font-size: 22px !important;
    color: var(--e-global-color-primary, #202B4C);
    margin-bottom: 12px;
}
.seo-content-wrapper {
    position: relative;
}
.seo-content-body {
    max-height: 78px; /* ~3 lines at default line-height */
    overflow: hidden;
    transition: max-height 0.3s ease;
    font-size: 15px;
    line-height: 26px;
    color: #333;
}
.seo-content-body p {
    margin: 0 0 10px;
}
.seo-content-readmore {
    display: inline-block;
    margin-top: 8px;
    color: var(--e-global-color-primary, #202B4C);
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

/* =====================================
   INSPIRATION OF THE STORY
===================================== */
.wc-inspiration-of-story {
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #333;
}
.wc-inspiration-of-story p {
    margin: 0 0 14px;
}
/* Arabic script needs its own line-height/font for correct
   rendering — TinyMCE's dir="rtl" paragraphs get this automatically */
.wc-inspiration-of-story [dir="rtl"],
.wc-inspiration-of-story p:lang(ar) {
    font-family: 'Traditional Arabic', 'Arial', sans-serif;
    font-size: 20px;
    line-height: 2.2;
    text-align: right;
}

/* =====================================================================
   REACT PATHWAYS BRAND — var(--e-global-color-primary, #202B4C) everywhere, no red (2026-09-10).

   Elementor's Site Settings style every <button> with selectors such as
   `.elementor-kit-123 button`, which outrank this plugin's plain class
   selectors — that is why Quick Buy (a <button>) rendered in the theme's
   red while card "Book Now" (an <a>) did not. The `html body` prefix plus
   !important here guarantees the plugin's own buttons and the checkout
   buttons always use the brand colour, whatever the theme sets.
   ===================================================================== */

/* Primary actions — filled dark blue. */
html body .qb-trigger-btn,
html body .qb-modal .btn,
html body .add-to-cart-btn,
html body .buy-now-btn,
html body a.rp-book-now-btn,
html body button.rp-book-now-btn:not(.is-fully-booked),
html body #place_order,
html body .wc-auth-btn,
html body .woocommerce button.button,
html body .woocommerce a.button,
html body .woocommerce input.button,
html body.woocommerce-checkout button[name="apply_coupon"],
html body .library-search-button {
    background: var(--e-global-color-primary, #202B4C) !important;
    background-color: var(--e-global-color-primary, #202B4C) !important;
    border-color: var(--e-global-color-primary, #202B4C) !important;
    color: #ffffff !important;
}

/* Fully Booked stays grey — it must look unavailable. */
html body button.rp-book-now-btn.is-fully-booked {
    background: #d0d0d0 !important;
    border-color: #d0d0d0 !important;
    color: #666666 !important;
}

/* Course page (Face to Face / AI Learning): Book Now / Fully Booked sized
   to its text like the E-Learning Add To Cart / Buy Now buttons, not
   stretched across the column. Cards keep their full-width button. The
   form is also freed from the theme's forced width on form.cart. */
html body .rp-booking-single .rp-book-now-form {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
}
html body .rp-booking-single .rp-book-now-btn {
    display: inline-flex !important;
    width: auto !important;
    min-width: 180px;
    padding: 12px 32px !important;
}

/* Waiting list CTA — the site's red (Elementor global Secondary colour),
   same as the header's "Join the Waiting List" button. */
html body .rp-waiting-list-btn,
html body .rp-waiting-list-btn:visited {
    background: var(--e-global-color-secondary, #B02D24) !important;
    border-color: var(--e-global-color-secondary, #B02D24) !important;
    color: #ffffff !important;
}
html body .rp-waiting-list-btn:hover,
html body .rp-waiting-list-btn:focus {
    background: var(--e-global-color-secondary, #B02D24) !important;
    border-color: var(--e-global-color-secondary, #B02D24) !important;
    color: #ffffff !important;
    opacity: 0.88;
}

/* Course page: sized to its text like Book Now, not full width.
   Cards keep their full-width button. */
html body .rp-waiting-list-btn.rp-waiting-list-single {
    display: inline-flex !important;
    width: auto !important;
    min-width: 180px;
    padding: 12px 32px !important;
}

/* Tabs (variable-product model) — outlined, filled when active. */
html body .pack-tab-btn {
    background: transparent !important;
    border-color: var(--e-global-color-primary, #202B4C) !important;
    color: var(--e-global-color-primary, #202B4C) !important;
}
html body .pack-tab-btn.active,
html body .pack-tab-btn:hover {
    background: var(--e-global-color-primary, #202B4C) !important;
    color: #ffffff !important;
}

/* Secondary <button>s the theme would otherwise paint red. */
html body .qb-modal-close {
    background: transparent !important;
    border: none !important;
    color: var(--e-global-color-primary, #202B4C) !important;
}
html body .pack-qty-btn {
    background: #ffffff !important;
    color: var(--e-global-color-primary, #202B4C) !important;
}

/* Checkout links (Change email, Resend code, policy link). */
html body #wc-auth-box a,
html body #change-email-inline,
html body .shipping-helper-text a,
html body .checkout-welcome strong {
    color: var(--e-global-color-primary, #202B4C) !important;
}

/* Course buttons — one shape for all of them (2026-09-10). Elementor's
   global button style also sets border-radius / padding / font on every
   <button> with a selector that outranks plain classes, which is why the
   Quick Buy <button> rendered square-cornered and larger while the card
   "Book Now" <a> kept its pill shape. Forced here to match exactly. */
html body .qb-trigger-btn,
html body .qb-modal .btn,
html body .add-to-cart-btn,
html body .buy-now-btn,
html body .rp-book-now-btn,
html body .rp-waiting-list-btn {
    border-radius: 999px !important;
    padding: 12px 22px !important;
    font-family: 'Mulish', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
    height: auto !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Card buttons, all the same height (QA, 2026-09-23). Quick Buy measured
   42px while "Join the Waiting List" and "Book Now" measured 46px: same
   padding, but their 2px border adds to the box. Two pixels off the top and
   bottom padding brings the outlined buttons down to 42px as well. Must
   come after the rule above, which forces the padding with !important. */
html body .rp-book-now-btn,
html body .rp-waiting-list-btn,
html body .rp-waiting-list-btn:visited {
    box-sizing: border-box !important;
    padding: 10px 22px !important;
}

/* Checkout sign-in step buttons — "Continue" (email) and "Continue to
   Checkout" (OTP / register). They were left out of the pill rule above,
   so the theme's global 5px button corners showed through, next to the
   already-rounded Place Order and Apply coupon. Corners only: kept out of
   the rule above on purpose, as its padding/height reset would shrink
   these full-width 48px buttons. */
html body .wc-auth-btn {
    border-radius: 999px !important;
    /* Vertical centring: the button is a fixed 48px (border-box) but the
       theme's global button padding (15px top + bottom) left an 18px content
       box for a 24px line, pushing "Continue" ~3px low. Zero vertical
       padding + a 48px line centres the text exactly. `display` is left
       alone on purpose — the checkout script shows/hides these buttons by
       toggling it. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 48px !important;
}

/* Coupon code box (cart + checkout): the theme's reset.css adds
   `input:focus-visible { outline: 2px solid #000; outline-offset: 2px;
   box-shadow: 0 0 0 4px #fff }` — a white gap plus a black ring OUTSIDE the
   box's own border, so clicking into it showed two borders. Replaced with a
   single dark-blue edge: the cart box keeps its existing 2px border, the
   checkout box (no border, soft shadow) gets a 2px ring instead. */
html body.woocommerce-cart input#coupon_code:focus,
html body.woocommerce-cart input#coupon_code:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--e-global-color-primary, #202B4C) !important;
}
html body.woocommerce-checkout input#coupon_code:focus,
html body.woocommerce-checkout input#coupon_code:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--e-global-color-primary, #202B4C) !important;
}

/* All other checkout text fields (email, name, password, OTP, address,
   Grade): the theme's reset.css focus ring — black outline + white 4px
   box-shadow — drew a double border when clicked. Only that ring is
   removed. These fields have NO border: their soft shadow is their only
   edge (same as Wise Compass), so the shadow is put back exactly as the
   base rule defines it — an earlier version set it to none, which left a
   clicked field flat / invisible. The phone input is excluded: its shadow
   belongs to the .phone-field-wrap around it, and the input itself stays
   shadowless. */
html body.woocommerce-checkout form.checkout .input-text:not(#billing_phone):focus,
html body.woocommerce-checkout form.checkout .input-text:not(#billing_phone):focus-visible,
html body.woocommerce-checkout form.checkout input[type="text"]:not(#billing_phone):focus-visible,
html body.woocommerce-checkout form.checkout input[type="email"]:focus-visible,
html body.woocommerce-checkout form.checkout input[type="password"]:focus-visible,
html body.woocommerce-checkout #wc_otp:focus-visible {
    outline: none !important;
    box-shadow:
        0 1.06px 2.13px -1.06px rgba(0, 0, 0, 0.10),
        0 1.06px 3.19px 0 rgba(0, 0, 0, 0.10) !important;
}
html body.woocommerce-checkout form.checkout input#billing_phone:focus,
html body.woocommerce-checkout form.checkout input#billing_phone:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Library / All Courses search (2026-09-10). The theme's reset.css styles
   every input[type="search"] (3px corners, #666 border, padding) and, on
   keyboard focus, draws a 4px white ring + black outline. That ring around
   a square-cornered input, inside the pill-shaped wrapper, was the "double
   border" on the left while typing; the theme's button style likewise gave
   the Search button 5px corners. Forced back to the pill design here. */
html body .library-search-wrap .library-search-input,
html body .library-search-wrap .library-search-input:focus,
html body .library-search-wrap .library-search-input:focus-visible {
    border: none !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 12px 18px !important;
}

/* Keep a visible (on-brand) focus cue for keyboard users, on the whole pill. */
html body .library-search-wrap:focus-within {
    box-shadow: 0 0 0 2px rgba(32, 43, 76, 0.35), 0 6px 18px rgba(0, 0, 0, 0.08) !important;
}

html body .library-search-button {
    border-radius: 999px !important;
    padding: 10px 22px !important;
    margin: 4px !important;
    font-family: 'Mulish', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    height: auto !important;
    box-shadow: none !important;
}

/* Loop Grid pagination (All Courses) — the active page and hover were
   #1F79FF, set in the All Courses page's own Elementor custom CSS
   (post-2467.css, background without !important). Brand colour instead. */
html body .elementor-pagination .page-numbers.current,
html body .elementor-pagination a.page-numbers:not(.prev):not(.next):hover {
    background: var(--e-global-color-primary, #202B4C) !important;
    color: #ffffff !important;
}

/* The arrows themselves are CSS chevrons: a ::after box with only its top
   and right borders drawn, in #333 (All Courses page CSS). On the navy
   hover background they disappeared, so paint them white on hover/focus. */
html body .elementor-pagination a.page-numbers.prev:hover::after,
html body .elementor-pagination a.page-numbers.next:hover::after,
html body .elementor-pagination a.page-numbers.prev:focus-visible::after,
html body .elementor-pagination a.page-numbers.next:focus-visible::after {
    border-top-color: #ffffff !important;
    border-right-color: #ffffff !important;
}

/* No page to go to (e.g. Previous on page 1): WordPress renders a <span>
   instead of a link — show it greyed out and unclickable. */
html body .elementor-pagination span.page-numbers.prev,
html body .elementor-pagination span.page-numbers.next {
    background: transparent !important;
    cursor: default;
    opacity: 0.45;
}
html body .elementor-pagination span.page-numbers.prev::after,
html body .elementor-pagination span.page-numbers.next::after {
    border-top-color: #9aa3b2 !important;
    border-right-color: #9aa3b2 !important;
}

/* Previous / next arrows — their hover and focus were still #1F79FF. */
html body .elementor-pagination a.page-numbers.prev:hover,
html body .elementor-pagination a.page-numbers.next:hover,
html body .elementor-pagination a.page-numbers.prev:focus-visible,
html body .elementor-pagination a.page-numbers.next:focus-visible {
    background: var(--e-global-color-primary, #202B4C) !important;
    border-color: var(--e-global-color-primary, #202B4C) !important;
    color: #ffffff !important;
}
/* =====================================
   PRE-ORDER — "Available from …" note under Book Now (2026-10-02)
===================================== */
.rp-pre-order-note {
    margin: 8px 0 0;
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--e-global-color-primary, #202B4C);
    text-align: center;
}

.rp-detail-simple + .rp-pre-order-note,
.rp-booking-single + .rp-pre-order-note {
    text-align: left;
    font-size: 15px;
}

/* =====================================
   DUPLICATE PURCHASE — "already purchased" message above the checkout
   (Duplicate_Purchase_Guard, 2026-10-09). Stays until closed.
===================================== */
.rp-owned-notice {
    position: relative;
    margin: 0 0 20px;
    padding: 14px 44px 14px 16px;
    border-left: 4px solid var(--e-global-color-primary, #202B4C);
    border-radius: 6px;
    background: #eef0f5;
    color: #202B4C;
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

.rp-owned-notice .rp-owned-notice-close,
.rp-owned-notice .rp-owned-notice-close:hover,
.rp-owned-notice .rp-owned-notice-close:focus {
    position: absolute;
    top: 6px;
    right: 8px;
    width: auto;
    min-width: 0;
    padding: 4px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #202B4C !important;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}