/* Theme Name: Winnie's School of Excellence Theme URI: https://stg-winniesschoolofexcellence-wse.kinsta.cloud/ Author: The WSE Web Team Author URI: https://stg-winniesschoolofexcellence-wse.kinsta.cloud/ Description: A custom WordPress theme for Winnie's School of Excellence. Version: 1.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: winnies-school-of-excellence */ feedbucket-app{display:none !important;} @import url('https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap'); * { box-sizing: border-box; padding: 0; margin: 0; } html{scroll-behavior:smooth;} body { margin: 0; } a { text-decoration: none; } section{scroll-margin-top:95px;} /* header styling start */ header#site-header { max-width: 100%; padding: 20px; background: #000000; align-items: center; width: 100%; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 8888999; transition: all ease .3s; top:0; } .page-id-2431{background:#ffffff;} .user_area{position:relative;} .account_dropdown{ position: absolute; right: 0; top: 100%; display: none; background: #ffffff; border-radius: 6px; min-width: 180px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);} .account_dropdown ul{list-style-type:none; margin:0; padding:0;} .account_dropdown ul li{border-bottom:1px solid rgba(0,0,0,0.1);} .account_dropdown ul li a{ white-space: nowrap; display: block; padding: 15px 20px; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; color: #111111;} .site-header.sticky { position: sticky !important; left: 0; right: 0; top:0; padding: 15px 20px !important; } header#site-header .site-branding { display: flex; align-items: center; } .site-navigation ul.menu li ul { background: #ffffff; border-radius: 5px; box-shadow: 0 0 4px 0px grey; overflow: hidden; position: absolute; display: none; transition: height 0.3s ease; /* height: auto !important; */ } .site-navigation ul.menu li ul li a { color: #000000; font-size: 14px; transition: all ease 0.3s; display: flex; padding: 15px; width: 100%; } .menu-item { position: relative; /* padding-right: 20px; */ } .menu-item:has(> .sub-menu) a { padding-right: 20px; } .menu-item:has(> .sub-menu)::after { content: ''; position: absolute; right: 0px; bottom: 0; transform: translateY(-50%) rotate(0deg); width: 11px; height: 7px; background-image: url("data:image/svg+xml;utf8,"); background-size: contain; background-repeat: no-repeat; transition: transform 0.3s ease; } /* .menu-item:hover::after, */ .menu-item.active::after { transform: translateY(-50%) rotate(180deg); fill: #5ADBFF; } .menu-item::after { transform: translateY(-50%) rotate(0); fill: #5ADBFF; } .sub-menu { list-style: none; padding: 0; margin: 0; background-color: #ffffff; border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); min-width: 180px; overflow: hidden; transition: all 0.3s ease; z-index: 999; top: 20px; } .sub-menu li a { display: block; padding: 10px 16px; font-size: 15px; color: #2A2324; text-decoration: none; transition: background 0.3s, color 0.3s; } .sub-menu li a:hover { background-color: #5ADBFF; color: white; border-radius: 4px; } .site-navigation ul.menu li ul li a:hover { background: #eeeeee; } a.custom-logo-link { max-width: 185px; width: 100%; } a.custom-logo-link img { width: 100%; object-fit: contain; height: 100%; } nav.site-navigation ul li a { font-family: Urbanist; font-weight: 600; font-size: 15px; line-height: 100%; padding: 0 0; color: #ffffff; transition: all 0.3s ease; } nav.site-navigation ul li:hover a, nav.site-navigation ul li.current-menu-item a { color: #5ADBFF; } nav.site-navigation>ul { gap: 40px; display: flex; align-items: center; list-style-type: none; padding-left: 0; } .header-btns { display: flex; align-items: center; gap: 5px; } .header-btns .header-btn { font-family: Urbanist; font-weight: 500; font-size: 15px; line-height: 100%; color: #ffffff; transition: all 0.3s ease; padding:0 20px; cursor:pointer; display:flex; align-items:center; height:45px; border-radius:50px; }.header-btns .header-btn:hover{background: #222222;} .user_area:hover .header-btns .header-btn { color: #5ADBFF; } .header-btns .header-btn:hover svg path, .user_area:hover .header-btns .header-btn svg path { stroke: #5ADBFF; } .user_area:hover .account_dropdown{display:block;} a.book-session { font-family: Urbanist; font-weight: 500; font-size: 15px; line-height: 100%; color: #000000; background: #5ADBFF; padding: 15px 20px; border-radius: 9999px; transition: all 0.3s ease; margin-left:5px; } a.cart_icon {width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; transition: all ease 0.2s; border-radius: 100%; position:relative; } a.cart_icon:hover{background: #222222;} a.cart_icon svg{width:20px;} a.book-session:hover { background: #EBB211; } header .toggle-btn { display: none; } .site-navigation ul.menu li.menu-item-has-children { padding-inline-end: 0; } .site-navigation ul.menu li { align-items: center; } /* header styling end */ /* footer styling start */ footer#site-footer { background: #000000; max-width: 100%; padding: 0; padding-top: 120px; } .footer_inner { display: flex; justify-content: space-between; gap: 50px; padding-bottom: 60px; } .footer-logo { display: flex; } .footer-description p { font-family: Urbanist; font-weight: 600; font-size: 23px; line-height: 33px; color: #ffffff; margin: 0; } .footer-right .gform_heading{display:none !important;} .footer-social p { font-family: Urbanist; font-weight: 600; font-size: 20px; line-height: 32px; color: #5ADBFF; margin-top: 16px; margin-bottom: 0; } ul.social-icons { display: flex; list-style: none; padding: 0; gap: 30px; margin: 0; } ul.social-icons a i { color: #ffffff; font-size: 20px; transition: all ease 0.3s; } ul.social-icons a:hover i { color: #5adbff; } .footer-social { display: flex; flex-direction: column; gap: 25px; } .footer-left { display: flex; gap: 35px; flex-direction: column; width:23%; } .footer-center{width:54%; display: flex; gap: 100px; justify-content: center; } .footer-right { display: flex; width: 23%; justify-content: space-between; gap: 20px; } .footer-right .footer-menu{width:100%;} .footer-menu h4 { font-family: Urbanist; font-weight: 600; font-size: 22px; line-height: 32px; color: #ffffff; margin-bottom: 30px; } .footer-links { display: flex; flex-direction: column; list-style: none; gap: 18px; padding: 0; } .footer-links li a { font-family: Urbanist; font-weight: 500; font-size: 18px; color: #FFFFFFB2; transition: all ease 0.3s; border-bottom: 1px solid transparent; } .footer-links li a:hover { border-color: #ffffff; color: #ffffff; } .footer-bottom { border-top: 1px solid #292929; padding: 30px 0; } .footer-bottom p { color: #FFFFFFCC; font-family: Urbanist; font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0.6px; text-align: center; margin: 0; } /* footer styling end */ /* Other-pages-like FAQ-Privacy-start */ .only-content-sec { padding: 50px 20px 60px; width: 100%; max-width:850px; margin: 0 auto; } .only-content-sec a { color: #000000; transition: all ease .3s; font-weight:700; text-decoration:underline; } .only-content-sec a:hover { color: #5ADBFF; } .only-content-sec h1.wp-block-heading { font-size: 70px; line-height: 80px; font-weight: 700; margin: 40px 0 20px; text-transform: uppercase; } .only-content-sec h2.wp-block-heading { font-size: 60px; line-height: 70px; font-weight: 700; margin: 40px 0 20px; text-transform: uppercase; } .only-content-sec p, .only-content-sec ul li { font-size: 20px; line-height: 31px; color: #000; margin-bottom: 10px; font-weight: 500; } .only-content-sec ul { padding: 0 0 0 25px; } /* Other-pages-like FAQ-Privacy-end */ /* Login start */ .woocommerce-account .tabs-wrapper { margin: 0; width: 100%; max-width: 100%; background: #fff; border-radius: 0; box-shadow: none; padding: 0; position:relative; height: calc(100vh - 94px); display:flex; align-items:center; justify-content:flex-start; flex-direction:column; } .woocommerce-account .tabs { margin-bottom: 0; gap: 35px; top: 0; left: 0; transform: none; width: 100%; display: flex; justify-content: center; background:#ffffff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .woocommerce-account .tablink { flex: 1; border: none; color: #999999; font-weight: 600; cursor: pointer; transition: 0.3s ease; text-transform: uppercase; font-size: 15px; padding: 15px 10px; background:none !important; border-bottom:2px solid transparent; } .woocommerce-account .tablink:hover { color: #111111; } .woocommerce-account .tablink.active { color: #111111; font-weight:700; border-color:#111111; } .woocommerce-account .tabcontent { display: none; width:50%; padding:60px 20px; text-align:center; } .woocommerce-account .tabcontent h2 { margin-bottom: 20px; font-size: 22px; color: #333; text-align: center; display:none; } .woocommerce-account form p { margin: 0 !important; } .woocommerce-account form { display: flex; flex-direction: column; gap: 15px; border: none !important; padding: 0 !important; margin: 0 auto !important; max-width: 800px; } .woocommerce-account label { font-size: 14px; line-height:1.5 !important; font-weight: 500; color: #333; /* margin-bottom: 6px; */ } .woocommerce-account form input[type="text"], .woocommerce-account form input[type="email"], .woocommerce-account form input[type="password"] { padding: 20px 24px; border-radius: 50px; font-size: 16px; width: 100%; transition: border-color 0.3s ease; background: #F5F5F5; border: none; } input:focus { border: none; outline: none; } /* button.woocommerce-button, button.woocommerce-Button { padding: 12px; background-color: #0073aa; color: #fff; border: none; font-weight: 600; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease; } */ .woocommerce-account form .woocommerce-LostPassword { text-align: center; } .woocommerce-account form .woocommerce-LostPassword a { color: #333333; text-decoration: none; font-size: 14px; font-weight:500; } .woocommerce-account form .woocommerce-LostPassword a:hover { text-decoration: underline; } .woocommerce-account form .woocommerce-privacy-policy-text { font-size: 13px; color: #666; line-height: 1.5; } .woocommerce-account form .form-row button[type="submit"] { background: #5ADBFF; color: #000; font-size: 18px; width: 100%; border-radius: 50px; padding: 20px; font-weight: 600; &:hover { background: #EBB211; color: #000; } } .woocommerce-account form.woocommerce-ResetPassword { display: flex; flex-direction: column; gap: 20px; border: none !important; max-width: 500px; margin: 50px auto !important; padding: 30px !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); border-radius: 30px; } .woocommerce-account form.woocommerce-ResetPassword input[type="text"], .woocommerce-account form.woocommerce-ResetPassword input[type="email"], .woocommerce-account form.woocommerce-ResetPassword input[type="password"] { padding: 20px 24px !important; border-radius: 50px !important; font-size: 16px; width: 100% !important; transition: border-color 0.3s ease; background: #F5F5F5 !important; border: none !important; } .woocommerce-account form.woocommerce-ResetPassword .form-row-first { width: 100%; } /* Login end */ /* cart start */ .wc-block-cart__submit-button { background: #EBB211; border-radius: 50px; color: #000; font-weight: 600; &:hover { background: #5adbff; color: #000; } } .wc-block-cart-item__image img { border-radius: 10px; } .wp-block-woocommerce-filled-cart-block { max-width: 1540px; margin: 0 auto; padding: 0 20px; } .wc-block-components-product-name { font-size: 20px; font-weight: 600; color: #000; } /* cart end */ /* shop page start */ .shop-content-wraper { max-width: 100%; width: 100%; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; flex-direction: row-reverse; gap: 0; } .woocommerce .woocommerce-ordering, .woocommerce .woocommerce-breadcrumb { margin: 0; } .shop-content-wraper aside.woocommerce-sidebar { border-radius: 0; padding: 0; width: 280px; padding: 20px 0; } .shop-content-wraper #primary{width:calc(100% - 280px);} .shop-content-wraper #primary #main{ padding: 0 30px; } .shop-content-wraper #primary #main > .woocommerce-breadcrumb, .shop-content-wraper #primary #main > .woocommerce-products-header, .shop-content-wraper #primary #main .woocommerce_header_bar .left, .shop-content-wraper #primary #main > .woocommerce-ordering, .shop-content-wraper #primary #main > .woocommerce-result-count {display:none;} .ajax-category-filter{list-style-type:none; margin:0; padding:0; display:flex; gap:10px;} .ajax-category-filter li{} .ajax-category-filter li a{ border-radius: 50px; text-transform: uppercase; font-size: 12px; background: #ffffff; border: 1px solid #cccccc; padding: 13px 15px; margin: 0; color: #333333; font-weight: 500; display:block; cursor: pointer; } .ajax-category-filter li a.active, .ajax-category-filter ul li a.active:hover{ font-weight: bold; } .yith-wcan-filters { background-color: transparent; margin-bottom: 0; position: sticky; top: 97px; padding: 20px 20px; } .yith-wcan-filters .yith-wcan-filter { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #D7D7D7; } .yith-wcan-filters .yith-wcan-filter .filter-title { color: #111111; font-weight: 700; font-size: 17px; margin-bottom: 15px; } .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label { background-color: var(--yith-wcan-labels_style_background, #fff); box-shadow: none; border-radius: 0; display: inline-block; margin: 0; padding: 0; text-align: center; } .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label.active:not(.with-image), .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label:not(.with-image):not(.disabled):hover { background-color: transparent; box-shadow: none; color: inherit; } .yith-wcan-filters .yith-wcan-filter .filter-items.filter-label{margin:0; display:flex; flex-wrap:wrap; gap:10px;} .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label > a{ border-radius: 50px; text-transform: uppercase; font-size: 12px; line-height:12px; background: #ffffff; border: 1px solid #cccccc; padding: 10px 12px; margin: 0; color: #333333; font-weight: 500; display: block; cursor: pointer;} .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label:hover > a{box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); color: #111111 !important;} .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label.active > a, .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label.active:hover > a {box-shadow: none; color: #ffffff; border-color: #204ce5; background: #204ce5;} .shop-content-wraper select.orderby{ background: #ffffff !important; border: 2px solid rgba(246,246,247, 1) !important; text-transform: uppercase !important; font-size: 16px !important; border-radius: 9999px !important; appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 40px; text-transform: capitalize !important; background: white url(data:image/svg+xml;utf8,) no-repeat right 20px center; background-size: 16px; } .woocommerce ul.products li.product .price { color: #000000 !important; } .woocommerce_header_bar { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; } .shop-content-wraper li.product { max-width: calc(33.33% - 20px); width: 100% !important; margin: 0px !important; padding: 20px !important; border: 2px solid rgba(246,246,247, 1); border-radius: 10px; } .shop-content-wraper ul.products { display: flex; gap: 30px; flex-wrap:wrap; } .shop-content-wraper li.product img { border-radius: 15px; } ul.wc-block-product-filter-removable-chips__items li { border-radius: 40px !important; background: #ebb232 !important; border-color: #ebb232 !important; font-weight: 500; font-family: 'urbanist'; } .woocommerce .shop-content-wraper ul.products::before { display: none !Important; } .woocommerce .shop-content-wraper ul.products li.product .button { color: #111111; padding: 15px 30px; font-family: Urbanist; border-radius: 60px; text-transform: capitalize; text-align: center; } .shop-content-wraper li.product del span.woocommerce-Price-amount.amount bdi { font-weight: 400 !important; font-size: 18px; font-family: 'Urbanist'; } .shop-content-wraper li.product span.woocommerce-Price-amount.amount bdi { font-weight: 800 !important; font-size: 18px; font-family: 'Urbanist'; } /* Reorder prices - Sale price first, then original */ .shop-content-wraper li.product .price { display: flex !important; align-items: center; flex-wrap: wrap; } .shop-content-wraper li.product .price del { order: 2; margin-left: 8px; } .shop-content-wraper li.product .price ins { order: 1; } .shop-content-wraper li.product h2 { font-weight: 600; font-size: 20px !important; line-height: 32px; letter-spacing: 0.23px; color: #111111; text-transform: capitalize; font-family: 'Urbanist'; } .shop-content-wraper aside.woocommerce-sidebar button.wp-block-button__link.has-text-align-center.wp-element-button { border-color: #0000000f; background: #fff; padding: 12px 20px !important; } .shop-content-wraper aside ul.wp-block-categories-list.wp-block-categories li, ul.wp-block-categories-list.wp-block-categories li a { list-style: none; color: #000 !important; font-family: 'urbanist'; font-weight: 500; padding: 5px 0px; } .shop-content-wraper aside .wc-block-product-filter-price-slider__content input { border: unset !important; border-radius: 10px !important; box-shadow: 0 0 4px 0 #00000026; color: #ebb232; text-align: center; } .shop-content-wraper aside ul.wp-block-categories-list.wp-block-categories { padding-top: 20px; } .shop-content-wraper aside .wp-block-woocommerce-product-filter-price { padding: 20px 0; } /* shop page end */ /* course css start */ .ld-accordion__header { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; } .ld-accordion__item.ld-accordion__item--lesson { background: #ffffff !important; border: 1px solid #dddddd; &:hover { border-color: #8d8d8d !important; } } .ld-accordion__item-header.ld-accordion__item-header--lesson { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; } .ld-accordion__section.ld-accordion__section--lessons { border: unset !important; padding: 20px 0; } .ld-accordion__item.ld-accordion__item--final-quiz { background: #ffffff !important; border: 1px solid #dddddd; } .ld-accordion__expand-button svg { width: 20px; } a.ld-accordion__item-title.ld-accordion__item-title--lesson { font-weight: 400; font-size: 18px; line-height: 100%; } a.ld-accordion__item-title.ld-accordion__item-title--topic { font-weight: 400; font-size: 15px; line-height: 100%; } a.ld-accordion__item-title.ld-accordion__item-title--topic-quiz { font-weight: 400; font-size: 14px; line-height: 100%; } .ld-accordion__content { gap: 0; } .single-sfwd-lessons main.site-main, .single-sfwd-topic main.site-main, .single-sfwd-quiz main.site-main { max-width: 940px; margin: 0 auto; padding: 40px 20px; } .sfwd-courses-template-default main.site-main{max-width: 100%; padding: 0; margin: 0; background: #f1f1f1;} .sfwd-courses-template-default main.site-main .ld-course-status{display:none;} .ld-accordion__heading { font-size: 22px; color: #001C55; } .ld-accordion__section.ld-accordion__section--final-quizzes { border: unset; padding: 0 0 20px 0; } .ld-accordion__subheading.ld-accordion__subheading--final-quizzes { padding: 0; font-size: 22px; margin-bottom: 16px; color: #001C55; } .ld-accordion__item-title:is(a):hover { text-decoration: none !important; } .ld-tab-bar.ld-tab-bar--single p { color: #333333 !important; font-size: 16px; line-height: 24px; } .ld-featured-image { height: 400px !important; object-fit: contain; } .ld-accordion__item .ld-accordion__expand-button:before { content: unset !important; padding: 0 10px; } .ld-accordion__item .ld-accordion__expand-button { padding: 0 10px !important; } .ld-accordion.ld-breakpoint--small .ld-accordion__item--lesson { grid-template-columns: auto minmax(0px, min-content) !important; } .ld-accordion__item .ld-accordion__expand-button .ld-accordion__expand-button-text { display: none !important; } .single-sfwd-lessons main.site-main .learndash-wrapper .ld-lesson-status{ background:#F9F5E8 ; } .single-sfwd-lessons main.site-main .learndash-wrapper .ld-breadcrumbs{ background:#F9F5E8 ; } .single-sfwd-lessons main.site-main .learndash-wrapper .ld-table-list .ld-table-list-header { background:#F9F5E8; color:#000; } .single-sfwd-lessons main.site-main .learndash-wrapper .ld-table-list .ld-table-list-items{ border-width:1px; border-color:rgba(18, 18, 18, 0.11); } .single-sfwd-lessons main.site-main .learndash-wrapper .ld-table-list a.ld-table-list-item-preview{ color:#808080; align-items:center; } .single-sfwd-lessons main.site-main .learndash-wrapper .ld-table-list a.ld-table-list-item-preview:hover{ color:#000; } .single-sfwd-lessons main.site-main .learndash-wrapper:not(.ld-registration__outer-wrapper):not(.learndash-wrapper--modern) .ld-button{ background:#5ADBFF; color:#000; &:hover{ background:#EBB211; } } .single-sfwd-lessons main.site-main .learndash-wrapper .ld-breadcrumbs .ld-status.ld-status-complete, .learndash-wrapper .ld-breadcrumbs .ld-status.ld-status-progress { background: #ebb211 !important; color: #000 !important; } .single-sfwd-lessons main.site-main .learndash-wrapper .ld-progress .ld-progress-heading .ld-progress-stats .ld-progress-percentage { color: #000; } .single-sfwd-topic .learndash-wrapper .ld-topic-status, .single-sfwd-topic .learndash-wrapper .ld-breadcrumbs{ background:#F9F5E8 ; } .single-sfwd-topic .learndash-wrapper .ld-breadcrumbs .ld-status.ld-status-complete, .learndash-wrapper .ld-breadcrumbs .ld-status.ld-status-progress{ background: #ebb211 !important; color: #000 !important; } .single-sfwd-topic .learndash-wrapper .ld-progress .ld-progress-heading .ld-progress-stats .ld-progress-percentage{ color: #000 ; } .single-sfwd-topic .learndash-wrapper .ld-table-list .ld-table-list-header{ background:#F9F5E8 ; color:#000; } .single-sfwd-topic .learndash-wrapper .ld-table-list .ld-table-list-footer{ padding:0; } .single-sfwd-topic .learndash-wrapper .ld-table-list a.ld-table-list-item-preview{ align-items:center !important; color:#808080 !important; } .single-sfwd-topic .learndash-wrapper .ld-table-list a.ld-table-list-item-preview:hover{ color:#000 !important; } .single-sfwd-topic .learndash-wrapper:not(.ld-registration__outer-wrapper):not(.learndash-wrapper--modern) .ld-button{ background:#5ADBFF; color:#000; &:hover{ background:#EBB211; } } .single-sfwd-topic .learndash-wrapper .ld-table-list .ld-table-list-items { border: 1px solid hsla(0, 0%, 7%, .11); } .single-sfwd-quiz .learndash-wrapper .ld-breadcrumbs{ background:#F9F5E8 ; } .woocommerce ul.products li.product .onsale { top: 10px; right: 10px; left: auto; margin: 0; min-width: unset; min-height: unset; padding: 8px 12px; text-transform: uppercase; font-size: 11px; line-height: 12px; border-radius: 4px; background: #111111; } .woocommerce ul.products li.product a.added_to_cart{text-align: center; display: block; color: #111111;} .woocommerce .woocommerce-result-count { margin: 20px 0 0 0; } .ld-accordion__expand-button:hover { color: #001C55 !important; } .ld-accordion__expand-button:hover svg { fill: #001C55 !important; } .ld-accordion__expand-button--lesson:hover .ld-accordion__expand-button-text { border-bottom-color: #001C55 !important; } .ld-accordion__expand-button--all:hover { border-bottom-color: #001C55 !important; } .ld-accordion__item-title:is(a):focus, .ld-accordion__item-title:is(a):hover { color: #001C55 !important; } .cart_items_number{display: flex; background: #bf1111; color: #ffffff; border-radius: 100%; position: absolute; font-weight: 700; font-size: 12px; width: 20px; height: 20px; align-items: center; justify-content: center; right: 0; top: 0;} /* course css end */ .wc-block-cart-item__image img{min-width:200px;} .btn-grp{display:flex; gap:10px 20px; flex-wrap:wrap;} .thankyou_page_data{width:100%; max-width:640px; margin:80px auto; padding:0 20px;} .thankyou_page_data h2{font-size:26px; line-height:32px; color:#111111; font-weight:700; margin-bottom:15px;} .thankyou_page_data h3{font-size:18px; line-height:24px; color:#111111; font-weight:700; margin-bottom:10px; text-transform:uppercase;} .thankyou_page_data p{font-size:16px; line-height:24px; color:#333333; font-weight:500;} .thankyou_page_data img{border-radius:20px; margin-bottom:30px;} .thankyou_page_data .wp-block-separator{margin:30px 0; border-color:#cccccc; border-width:1px;} .thankyou_page_data .wp-block-buttons{gap:10px 20px; margin-top:30px;} .thankyou_page_data .wp-block-buttons a{font-size:15px; line-height:16px; color:#000000; background:#5ADBFF; font-weight:500; border:1px solid #5ADBFF; transition:all ease 0.3s; padding:15px 30px;} .thankyou_page_data .wp-block-buttons a:hover{border-color:#22b6df; background:#22b6df;} .thankyou_page_data .wp-block-buttons .wp-block-button:nth-child(2) a{border:1px solid #000000; background:#ffffff;} .thankyou_page_data .wp-block-buttons .wp-block-button:nth-child(2) a:hover{color:#ffffff; background:#000000;} .thankyou_page_data article{background:#0D388B; border-radius:16px; padding:25px;} .thankyou_page_data article h3{color:#ffffff;} .thankyou_page_data article img{border-radius:0; margin-bottom:10px;} .woocommerce-account .woocommerce-MyAccount-content{width:calc(100% - 280px); padding:40px 20px; max-width:1240px; margin:0 auto;} .woocommerce-account .woocommerce-MyAccount-content p{font-size:16px; line-height:26px; letter-spacing:0;} .woocommerce-account .woocommerce-MyAccount-content p a:not([class]){color:#000000; font-weight:700; text-decoration:underline;} .woocommerce-account .woocommerce-MyAccount-content p #account_display_name_description{font-size:13px; line-height:19px; display:block; margin-top:10px; padding-left:20px; padding-right:20px;} .woocommerce-account .woocommerce{display:flex; flex-wrap:wrap; position:relative;} .woocommerce table.shop_table{border:none; padding:0; gap:0;} .woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th{border-top:none} .woocommerce table.shop_table thead tr th{ text-transform:uppercase; font-size:13px; color:#111111; border-top:none !important; border-bottom:2px solid #111111 !important; padding:0 10px 5px 10px;} .woocommerce table.shop_table tbody tr td, .woocommerce table.shop_table tfoot tr td, .woocommerce table.shop_table tbody tr th, .woocommerce table.shop_table tfoot tr th { font-size:13px; color:#111111; border-top:none !important; border-bottom:1px solid #cccccc !important; padding:15px 10px;} .woocommerce table.shop_table tbody tr th a{color:#184CB1; } .woocommerce table.shop_table tbody tr td.woocommerce-orders-table__cell-order-actions a, .woocommerce-info a.button, .woocommerce-message a.button {padding:0; color:#184CB1; background:none; font-weight:700; letter-spacing:1px; font-size:12px; text-transform:uppercase;margin-right: 40px;} .woocommerce-message{border-color:#184CB1;} .woocommerce-message::before { content: "\e015"; color: #184CB1; } .woocommerce table.shop_table tbody tr td.woocommerce-orders-table__cell-order-actions a:not(:first-child){margin-left:10px;} .woocommerce-pagination--without-numbers{display:flex; flex-wrap:wrap; gap:20px; justify-content:center;} .woocommerce-pagination--without-numbers a.button, .woocommerce-account .woocommerce-MyAccount-content p button[type="submit"] {border:1px solid #111111; border-radius:50px; background:#ffffff; padding:15px 30px; font-size:15px; line-height:16px;} .woocommerce-pagination--without-numbers a.button:hover, .woocommerce-account .woocommerce-MyAccount-content p button[type="submit"]:hover {background:#111111; color:#ffffff;} .woocommerce-EditAccountForm{display:flex; flex-direction:row !important; flex-wrap:wrap; gap:30px !important;} .woocommerce-EditAccountForm p.form-row{margin:0; padding:0;gap:30px;} .woocommerce-EditAccountForm .clear{display:none;} .woocommerce-EditAccountForm p.form-row.woocommerce-form-row--first, .woocommerce-EditAccountForm p.form-row.woocommerce-form-row--last, .woocommerce-EditAccountForm p.form-row.woocommerce-form-row--wide {width:calc(50% - 15px);} .woocommerce-EditAccountForm fieldset{width:100%; border:none; background:#184CB1; border-radius:14px; padding:25px 25px 30px 25px; display:flex; flex-direction:column; gap:30px;} .woocommerce-EditAccountForm fieldset p.form-row.woocommerce-form-row--wide {width:100%;} .woocommerce-EditAccountForm fieldset legend{display:none;} .woocommerce-EditAccountForm fieldset p.form-row.woocommerce-form-row--wide label{color:#ffffff;} .page-id-2305{background:#ffffff;} .checkput_page{width:100%; max-width:1040px; padding:0 20px; margin:70px auto;} .checkput_page .woocommerce-checkout{display:flex; flex-wrap:wrap; gap:50px;} .checkput_page .woocommerce-checkout #customer_details{width:calc(60% - 25px); display:flex; flex-direction:column;} .checkput_page .woocommerce-checkout #customer_details .col-1, .checkput_page .woocommerce-checkout #customer_details .col-2 {width:100%;} .checkput_page .woocommerce-checkout #order_review_heading{display:none;} .checkput_page .woocommerce-checkout #order_review{width:calc(40% - 25px); display:flex; flex-direction:column;} .checkput_page .woocommerce-checkout #order_review #payment{border-radius:16px; background: #5ADBFF;} #place_order{width:100%; border-radius:60px; background:#184CB1; padding:18px 20px;} #add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box{background:#184CB1; } #add_payment_method #payment div.payment_box p, .woocommerce-cart #payment div.payment_box p, .woocommerce-checkout #payment div.payment_box p{font-size:14px; line-height:20px;} #add_payment_method #payment div.payment_box::before, .woocommerce-cart #payment div.payment_box::before, .woocommerce-checkout #payment div.payment_box::before{border: 1em solid #184CB1; border-right-color: transparent; border-left-color: transparent; border-top-color: transparent;} #add_payment_method #payment div.payment_box p, .woocommerce-cart #payment div.payment_box p, .woocommerce-checkout #payment div.payment_box p{color:#ffffff;} .woocommerce-privacy-policy-text{margin-bottom:20px;} .woocommerce-privacy-policy-text p{font-size:14px; line-height:22px;} .woocommerce-billing-fields__field-wrapper{display:flex; flex-wrap:Wrap; gap:30px 20px;} .woocommerce-billing-fields__field-wrapper .form-row{margin:0 !important; padding:0 !important; width:100%;} .woocommerce-billing-fields__field-wrapper .form-row.form-row-first, .woocommerce-billing-fields__field-wrapper .form-row.form-row-last {width:calc(50% - 10px);} .woocommerce-billing-fields__field-wrapper .form-row.validate-state, .woocommerce-billing-fields__field-wrapper .form-row.validate-postcode, .woocommerce-billing-fields__field-wrapper .form-row#billing_city_field {width:calc(33.33% - 15px);} .woocommerce form .form-row label { line-height: 1.4; font-size:14px; font-weight:600; margin-bottom:5px; } .woocommerce-additional-fields{margin-top:40px;} .checkput_page .woocommerce-checkout #customer_details .col-1 .woocommerce-billing-fields h3, .woocommerce-additional-fields h3 {margin-bottom:25px; font-size:22px; color:#111111;} .select2-container .select2-dropdown, .select2-container .select2-selection{border:none !important;} .select2-container .select2-selection--single .select2-selection__rendered{height:50px; background: #F5F5F5 !important; border: 1px solid #d7d7d7 !important; border-radius: 50px !important; padding:0 20px !Important; display:flex; align-items:center;} .page-id-2304{background:#ffffff;} .page-id-2304 .wp-block-product-new{display:none;} .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 16px !important; } .courses_page{padding:0 20px; width:100%; max-width:1140px; margin:0 auto; margin-top:70px; margin-bottom:70px;} .courses_page .grid{display:flex !important; column-gap:0 !important; flex-wrap:wrap !important; margin-left:-15px; margin-right:-15px;} .courses_page .grid .item{width:33.33%; padding-left:15px; padding-right:15px;} .courses_page .grid .item article{overflow:hidden; border-radius:10px !important;} .courses_page .grid .item .image a{display:block; line-height:0;} .courses_page .grid .item .image a img{aspect-ratio:16/9; object-fit:cover;} .page-id-3410{background:#ffffff;} .courses_page .grid .item .thumbnail .ribbon{ top: 10px; right: 10px; padding: 8px 12px; font-size: 12px; line-height: 13px; text-transform: uppercase; text-shadow: none; letter-spacing: 0.5px;} .courses_page .grid .item .separator {display:none !important;} .courses_page .grid .item .content .top-meta h3{margin-bottom:0 !important;} .courses_page .grid .item .content .bottom-meta{display:flex; flex-direction:column; gap:10px !important;} .courses_page .grid .item .content .bottom-meta .section{gap:10px; align-items:center;} .courses_page .grid .item .content .bottom-meta .section .icon{margin:0 !important; padding:0 !important; width:40px; height:40px; border-radius:100%; background:none; border:1px solid #cccccc; color:#555555; display:flex; align-items:center; justify-content:center;} .courses_page .grid .item .content .bottom-meta .total-students{display:none;} .courses_page .grid .item .content .ld-progress{margin:0;} .courses_page .grid .item .content .ld-progress .ld-progress-steps{display:none;} .courses_page .toggle-filter{padding:0; background:none; margin:0 0 20px 0; text-transform:uppercase; color:#111111; font-size:15px; letter-spacing:1px; font-weight:700; border:none;} .learndash-course-grid-filter .filter{margin-bottom:25px;} .learndash-course-grid-filter .filter label{font-weight:600; font-size:15px; margin-bottom:5px !important; display:block;} .learndash-course-grid-filter .taxonomies-wrapper .terms{margin-top:20px;} .learndash-course-grid-filter .taxonomies-wrapper .terms li label{font-weight:400; color:#333333;} .learndash-course-grid-filter .filter.price .number-wrapper input{height: 40px !important; border-radius: 50px !important; box-shadow: unset !important; background: #F5F5F5 !important; border: 1px solid #d7d7d7 !important; padding: 0 0 ! Important;} .learndash-course-grid-filter .buttons .button.blue, .learndash-course-grid-filter .buttons .button.grey {border-radius:50px;} .page_title{margin-bottom:30px !important; text-align:left; width:100%; font-size:32px;} .sfwd-courses-template-default{background:#ffffff;} .ld-tab-bar__panel{text-align:left;} .ld-featured-image{object-position:left;} .ld-tab-bar__panel p, .learndash_post_sfwd-topic p {font-size:18px !important; line-height:26px !important; margin-bottom:20px !important; font-weight:500 !important;} .ld-tab-bar__panel ul{margin-bottom:20px !important; padding-left:20px;} .ld-tab-bar__panel ul li{margin-bottom:5px;} .ld-accordion.ld-breakpoint--small .ld-accordion__item-header--lesson, .ld-accordion__item.ld-accordion__item--final-quiz { padding: 15px 20px !important; } .ld-accordion__item-steps-container { padding: 15px 10px !important; } a.ld-accordion__item-title.ld-accordion__item-title--lesson, a.ld-accordion__item-title.ld-accordion__item-title--topic, a.ld-accordion__item-title.ld-accordion__item-title--final-quiz { font-weight: 500; font-size: 16px; line-height: 100%; } .learndash-wrapper .ld-tabs { margin: 25px 0;} .learndash-wrapper .ld-tabs p {font-weight:500; font-size:16px; line-height:1.5;} .gform-theme--framework .gfield--input-type-datepicker .ginput_container_date input { --gf-local-width: 100%;} .ld-accordion__item-title:is(a):focus{outline:none !important;} .aqua_bg{background:#5ADBFF !important;} .extra_bottom_padding{ padding-bottom: 160px !important;} .ld-tab-bar__panel .ld-featured-image{display:none;} .ld-tab-bar__panel figure.wp-block-image{ margin-bottom: 30px; border-radius: 10px; overflow: hidden;} .ld-tab-bar__panel h3, .learndash_post_sfwd-topic h3 {font-size: 22px; color: #001C55; margin-bottom: 15px; margin-top: 30px;} .ld-accordion__header{margin-bottom:0 !important;} .ld-tab-bar__panel ul li, .learndash_post_sfwd-topic ul li {font-size: 18px !important; line-height: 24px !important; margin-bottom: 20px !important; font-weight: 500 !important; margin-bottom:10px;} .ld-accordion__item-icon--progress, .ld-accordion__item-attribute-icon--progress { color: #333333 !important;} .learndash-wrapper .ld-course-navigation .ld-table-list.ld-topic-list .ld-table-list-item .ld-table-list-item-preview .ld-topic-title, .learndash-wrapper .ld-course-navigation .ld-lesson-item-preview .ld-lesson-title, .learndash-wrapper .ld-table-list a.ld-table-list-item-preview {font-weight:500 !important;} .learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content h1{font-size:22px !important;} .learndash-wrapper .ld-status-icon { flex-basis: 20px !important; height: 20px !important; width: 20px !important; aspect-ratio: 1/1 !important;} .learndash-wrapper .ld-status-icon.ld-status-complete .ld-icon{font-size:8px !important;} .learndash-wrapper .ld-status-icon .ld-icon:before, .learndash-wrapper .ld-breadcrumbs .ld-status.ld-status-complete, .learndash-wrapper .ld-breadcrumbs .ld-status.ld-status-progress {color:#000000 !important;} .learndash-wrapper .wpProQuiz_content .wpProQuiz_button, .learndash-wrapper .wpProQuiz_content .wpProQuiz_button2{padding:10px 20px;} @media(max-width: 1399px) { nav.site-navigation>ul { gap: 15px; } a.custom-logo-link { max-width: 150px; width: 100%; } a.book-session{font-size:13px;} .footer-description p { font-size: 19px; line-height: 28px;} } @media (max-width: 1199px) { .shop-content-wraper li.product { max-width: calc(50% - 15px);} a.cart_icon{width:40px; height:40px;} .only-content-sec { padding: 40px 20px 60px; } .shop-content-wraper li.product h2 { font-size: 18px !important; line-height: 24px; } .menu-item:has(> .sub-menu)::after { right: -10px; } nav.site-navigation ul { gap: 30px; } a.book-session { padding: 15px 20px; font-size: 14px; display:none; } .site-navigation ul.menu li a { padding: 8px 5px; font-size: 14px; } header#site-header { flex-wrap: nowrap; gap: 0; } header .toggle-btn { display: flex; flex-direction: column; gap: 7px; min-width: 30px; } .toggle-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .toggle-btn.active span:nth-child(2) { opacity: 0; } .toggle-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -8px); } header .toggle-btn span { height: 2px; background: #5ADBFF; border-radius: 9999px; transition: all ease 0.3s; } .header-btns { width: 100%; justify-content: end; gap:0; } .site-navigation { order: 1; } .site-navigation ul.menu { display: flex; position: absolute; align-items: start; left: 0; top: 100%; width: 100%; background: #000000; flex-direction: column; flex-wrap: nowrap; gap: 20px; padding: 0 20px; overflow: auto; max-height: 0; transition: max-height 0.3s ease; margin-top: 0; /* padding-bottom: 10px; */ } .site-navigation ul.menu li.menu-item:last-child { padding-bottom: 20px; } .site-navigation ul.sub-menu li.menu-item:last-child { padding-bottom: 0; } .wc-block-cart-item__image img { min-width: 120px; } .woocommerce-cart .wp-block-woocommerce-filled-cart-block .wc-block-components-main.wc-block-cart__main tr span { font-size: 20px; } .footer_inner{flex-wrap:wrap; gap:50px;} .footer-left { width: 35%;} .footer-center { width: calc(65% - 50px); gap: 60px;} .footer-right{width:100%;} } @media (max-width: 991px) { .shop-content-wraper aside.woocommerce-sidebar { max-width: 260px; border-radius: 10px; padding: 0 30px; width: 100% !important; } .shop-content-wraper { padding: 80px 20px; } .shop-content-wraper li.product h2 { font-size: 15px !important; line-height: 20px; } .shop-content-wraper li.product span.woocommerce-Price-amount.amount bdi { font-family: 'Urbanist'; } .menu-item:has(> .sub-menu)::after { right: 0px; top: 16px; } .site-navigation ul.menu li ul { position: unset; height: 0; overflow: hidden; transition: height 0.3s ease; display: block !important; } .menu-item { width: 100%; } .site-navigation ul.menu li a { width: 100%; display: flex; } /* .toggle-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .toggle-btn.active span:nth-child(2) { opacity: 0; } .toggle-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } */ footer#site-footer { padding-top: 70px; } .footer-left { gap: 18px; } .footer-description p { font-size: 16px; line-height: 24px; } .footer-right { max-width: 400px; } .footer-social { gap: 5px; } .footer-social p { font-size: 18px; } ul.social-icons a i { font-size: 18px; } .footer-menu h4 { font-size: 18px; margin-bottom: 16px; } .footer-links { gap: 12px; } .footer-links li a { font-size: 16px; } .footer-bottom { padding: 20px 0; } .footer_inner { padding-bottom: 30px; } .shop-content-wraper select.orderby{font-size:13px;} .woocommerce .woocommerce-result-count { margin: 12px 0 0 0; font-size:13px;} .woocommerce .shop-content-wraper ul.products li.product .button{font-size:14px;} .shop-content-wraper select.orderby:focus-visible, .shop-content-wraper select.orderby:focus, .shop-content-wraper select.orderby:active { outline: none; border: none; outline-color: transparent; } .courses_page .grid .item { width: 50%;} } @media screen and (max-width: 768px){ .woocommerce-account .woocommerce-MyAccount-content { padding: 20px 20px; } .woocommerce table.shop_table_responsive tr, .woocommerce-page table.shop_table_responsive tr{margin-bottom:20px; background:#ffffff; border-radius:10px; overflow:hidden; box-shadow:0 0 10px rgba(0,0,0,0.1)} .woocommerce table.shop_table_responsive tr:last-child, .woocommerce-page table.shop_table_responsive tr:last-child{margin-bottom:0;} .woocommerce table.shop_table tbody tr td, .woocommerce table.shop_table tbody tr th{padding:15px;} .woocommerce table.shop_table tbody tr td:last-child{border-bottom:none !important;} } @media (max-width: 767px) { section{scroll-margin-top:70px;} :where(.wc-block-product-filters) .wc-block-product-filters__overlay { background-color: transparent; inset: 0; pointer-events: none; position: fixed; top: 120px !important; transition: background-color .5s; z-index: 9999; } .only-content-sec h2.wp-block-heading { font-size: 26px; line-height: 30px; margin: 25px 0 15px; } .only-content-sec p, .only-content-sec ul li {font-size: 15px;} .shop-content-wraper li.product h2 {font-size: 15px !important; line-height: 19px;} .woocommerce-account form input[type="text"], .woocommerce-account form input[type="email"], .woocommerce-account form input[type="password"] { padding: 16px 24px !important;} .woocommerce-account form .form-row button[type="submit"] { padding: 16px; } .woocommerce-account form.woocommerce-ResetPassword, .tabs-wrapper { padding: 20px !important;} .shop-content-wraper ul.products { gap: 14px;} .shop-content-wraper li.product { max-width: calc(50% - 7px); border-radius: 10px; padding: 10px !important; } .woocommerce-account form.woocommerce-ResetPassword input[type="text"], .woocommerce-account form.woocommerce-ResetPassword input[type="email"], .woocommerce-account form.woocommerce-ResetPassword input[type="password"] { padding: 16px 24px !important; } .shop-content-wraper li.product span.woocommerce-Price-amount.amount bdi {font-size: 14px;} .shop-content-wraper { padding: 40px 20px; } .shop-content-wraper #primary {max-width: 100%; order:3; } .shop-content-wraper aside.woocommerce-sidebar{max-width: 100%; order:2;} .woocommerce_header_bar{order:1;} .wc-block-cart-item__image img { min-width: unset;} .wc-block-cart table.wc-block-cart-items, .wc-block-cart table.wc-block-cart-items td, .wc-block-cart table.wc-block-cart-items th{margin-bottom:0 !important;} .thankyou_page_data { margin: 40px auto; } .checkput_page { margin: 40px auto; } .woocommerce-account .woocommerce-MyAccount-content { width: 100%; } .woocommerce-account .woocommerce-MyAccount-navigation{position:fixed; left:0; top:0; bottom:0;z-index:1; transform:translatex(-100%); } .checkput_page .woocommerce-checkout{flex-direction:column;} .checkput_page .woocommerce-checkout #customer_details, .checkput_page .woocommerce-checkout #order_review {width:100%;} .woocommerce-billing-fields__field-wrapper .form-row#billing_city_field { width: 100%; } .woocommerce-billing-fields__field-wrapper .form-row.validate-state, .woocommerce-billing-fields__field-wrapper .form-row.validate-postcode { width: calc(50% - 10px); } .courses_page { margin-bottom: 40px; } .footer-left { width: 100%; } .footer-center { width: 100%; gap: 20px; justify-content: space-between; } .footer-right{max-width:100%;} .footer-description p { font-size: 20px; line-height: 29px; } } @media screen and (max-width: 575px) { .ld-tab-bar.ld-tab-bar--single p { font-size: 14px; line-height: 22px; } .ld-accordion__heading { font-size: 20px; } a.ld-accordion__item-title.ld-accordion__item-title--lesson { font-size: 16px; } a.ld-accordion__item-title.ld-accordion__item-title--final-quiz { font-size: 16px; } .ld-accordion__item .ld-accordion__expand-button { padding-right: 10px !important; padding-left: 10px !important; } .ld-accordion__item-header.ld-accordion__item-header--lesson { padding-right: 10px !important; } .ld-featured-image { height: 300px !important; } * {text-wrap: balance;} .toggle-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 4px); } .toggle-btn.active span:nth-child(2) { opacity: 0; } .toggle-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); } header#site-header, header#site-header.sticky { padding: 14px 7px 14px 20px !important; gap: 13px; } .header-btns{gap:5px;} a.book-session { padding: 10px 12px; font-size: 12px; } header .toggle-btn { gap: 5px; min-width: 25px; } header .toggle-btn span { height: 3px; } a.custom-logo-link { max-width: 120px; min-width: 120px; } footer#site-footer { padding-top: 50px; } .footer_inner { padding-bottom: 30px; flex-direction: column; } .footer-bottom p { font-size:12px; line-height: 22px; } .shop-content-wraper select.orderby { margin-top: 30px; } .woocommerce-EditAccountForm p.form-row.woocommerce-form-row--first, .woocommerce-EditAccountForm p.form-row.woocommerce-form-row--last, .woocommerce-EditAccountForm p.form-row.woocommerce-form-row--wide { width: 100%; } .courses_page .grid .item { width: 100%;} } /* Cart Sidebar Styles */ body.cart-open { overflow: hidden; } .cart-sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 99999999; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .cart-sidebar-overlay.active { opacity: 1; visibility: visible; } .cart-sidebar { position: fixed; top: 0; right: 0; width: 100%; max-width: 431px; height: 100%; background: #fff; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); transform: translateX(100%); transition: transform 0.3s ease; display: flex; flex-direction: column; z-index: 10000; } .cart-sidebar-overlay.active .cart-sidebar { transform: translateX(0); } .cart-sidebar-header { padding: 20px 24px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; background: #fff; } .cart-sidebar-header h3 { margin: 0; font-size: 20px; font-weight: 600; color: #333; font-family: 'Urbanist', sans-serif; } .close-cart-btn { background: none; border: none; padding: 8px; cursor: pointer; color: #666; border-radius: 4px; transition: all 0.2s ease; } .close-cart-btn:hover { background: #f5f5f5; color: #333; } .cart-sidebar-content { flex: 1; overflow-y: auto; padding: 0; } .cart-items-container { padding: 20px 24px; } .cart-item { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; border-bottom: 1px solid #f0f0f0; position: relative; } .cart-item:last-child { border-bottom: none; } .cart-item-image { flex-shrink: 0; width: 60px; height: 60px; border-radius: 8px; overflow: hidden; } .cart-item-image img { width: 100%; height: 100%; object-fit: cover; } .cart-item-details { flex: 1; min-width: 0; } .cart-item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; } .cart-item-info { flex: 1; min-width: 0; } .cart-item-category { font-size: 11px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; font-family: 'Urbanist', sans-serif; } .cart-item-name { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: #333; font-family: 'Urbanist', sans-serif; } .cart-item-name a { color: #333; text-decoration: none; } .cart-item-name a:hover { color: #184CB1; } .cart-item-price { font-size: 14px; font-weight: 600; color: #184CB1; font-family: 'Urbanist', sans-serif; flex-shrink: 0; } .cart-item-quantity { display: flex; align-items: center; gap: 8px; } .quantity-btn { width: 28px; height: 28px; border: 1px solid #ddd; background: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s ease; font-family: 'Urbanist', sans-serif; } .quantity-btn:hover { background: #f5f5f5; border-color: #ccc; } .quantity-display { min-width: 20px; text-align: center; font-size: 14px; font-weight: 500; font-family: 'Urbanist', sans-serif; } .remove-cart-item { position: absolute; top: 16px; right: 0; width: 24px; height: 24px; border: none; background: transparent; color: #999; cursor: pointer; transition: all 0.2s ease; opacity: 0; visibility: hidden; } .cart-item:hover .remove-cart-item { opacity: 1; visibility: visible; } .remove-cart-item:hover { background: #f5f5f5; color: #e74c3c; } .empty-cart { text-align: center; padding: 40px 20px; } .empty-cart p { margin: 0 0 20px 0; color: #666; font-size: 16px; font-family: 'Urbanist', sans-serif; } .cart-sidebar-footer { border-top: 1px solid #eee; padding: 20px 24px; background: #fff; } #cart-sidebar .cart-subtotal { /* display: flex; */ justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 16px; font-family: 'Urbanist', sans-serif; } .subtotal-label { font-weight: 500; color: #333; } .subtotal-amount { font-weight: 600; color: #184CB1; } .cart-actions { display: flex; gap: 12px; } .cart-actions .common-btn { flex: 1; text-align: center; padding: 12px 16px; font-size: 14px; font-weight: 500; border-radius: 9999px; text-decoration: none; transition: all 0.3s ease; font-family: 'Urbanist', sans-serif; width: 100%; } .cart-actions .checkout-btn { background: #5ADBFF; color: #000000; border: 1px solid #5ADBFF; } .cart-actions .checkout-btn:hover { background: #EBB211; border-color: #EBB211 !important; } /* Mobile Responsiveness */ @media (max-width: 768px) { .cart-sidebar { max-width: 100%; width: 100%; } .cart-sidebar-header { padding: 16px 20px; } .cart-items-container { padding: 16px 20px; } .cart-sidebar-footer { padding: 16px 20px; } .cart-actions { flex-direction: column; } .cart-actions .common-btn { width: 100%; } } /* Collapsible Sidebar Styles */ .woocommerce-sidebar { position: relative; transition: all 0.3s ease; overflow: hidden; } .sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: #f8f9fa; border-bottom: 1px solid #eee; margin-bottom: 0; } .sidebar-title { margin: 0; font-size: 18px; font-weight: 600; color: #333; font-family: 'Urbanist', sans-serif; } .sidebar-toggle { background: none; border: none; padding: 8px; cursor: pointer; border-radius: 4px; transition: all 0.2s ease; color: #666; display: flex; align-items: center; justify-content: center; } .sidebar-toggle:hover { background: #e9ecef; color: #333; } .toggle-icon { display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .sidebar-content { transition: all 0.3s ease; overflow: hidden; opacity: 1; max-height: none; } /* Collapsed State */ .shop-content-wraper aside.woocommerce-sidebar.collapsed { width: 60px; min-width: 60px; } .shop-content-wraper aside.woocommerce-sidebar.collapsed .sidebar-title { opacity: 0; visibility: hidden; } .shop-content-wraper aside.woocommerce-sidebar.collapsed .sidebar-content { opacity: 0; max-height: 0; padding: 0; margin: 0; } .shop-content-wraper aside.woocommerce-sidebar.collapsed .toggle-icon { transform: rotate(90deg); margin-right: 20px; } .shop-content-wraper aside.woocommerce-sidebar.collapsed .sidebar-header { justify-content: center; padding: 15px 8px; } /* Adjust main content when sidebar is collapsed */ .shop-content-wraper { display: flex; gap: 20px; margin-top: 50px; } .shop-content-wraper #primary { transition: all 0.3s ease; flex: 1; } .shop-content-wraper .woocommerce-sidebar { flex-shrink: 0; transition: all 0.3s ease; } /* When sidebar is collapsed, main content takes full available width */ .shop-content-wraper .woocommerce-sidebar.collapsed ~ #primary, .shop-content-wraper:has(.woocommerce-sidebar.collapsed) #primary { width: 100%; max-width: 100%; } /* Mobile Responsiveness */ @media (max-width: 1199px) { .woocommerce-sidebar.collapsed { width: 50px; min-width: 50px; } .shop-content-wraper .woocommerce-sidebar.collapsed ~ #primary, .shop-content-wraper:has(.woocommerce-sidebar.collapsed) #primary { width: 100%; max-width: 100%; } .sidebar-header { padding: 12px 15px; } .sidebar-title { font-size: 16px; } } @media (max-width: 768px) { .woocommerce-sidebar.collapsed { width: 45px; min-width: 45px; } .shop-content-wraper .woocommerce-sidebar.collapsed ~ #primary, .shop-content-wraper:has(.woocommerce-sidebar.collapsed) #primary { width: 100%; max-width: 100%; } .sidebar-header { padding: 10px 12px; } .sidebar-toggle { padding: 6px; } .toggle-icon svg { width: 16px; height: 16px; } } /* Floating Cart Icon Styles */ .floating-cart-icon { position: fixed; bottom: 30px; right: 30px; z-index: 9999999; cursor: pointer; transition: all 0.3s ease; } .floating-cart-button { position: relative; width: 60px; height: 60px; background: #5ADBFF; border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(24, 76, 177, 0.3); transition: all 0.3s ease; color: #fff; } .floating-cart-button:hover { background: #0f3a8a; transform: translateY(-2px); box-shadow: 0 6px 25px rgba(24, 76, 177, 0.4); } .floating-cart-button svg { width: 24px; height: 24px; } .floating-cart-count { position: absolute; top: -5px; right: -5px; background: #5ADBFF; color: #fff; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; font-family: 'Urbanist', sans-serif; border: 2px solid #fff; min-width: 24px; } /* Only hide floating cart count when truly empty (no content at all) */ .floating-cart-count:empty { display: none; } /* Show floating cart count when it contains "0" */ .floating-cart-count:not(:empty) { display: flex; } /* Hide floating cart when sidebar is open */ body.cart-open .floating-cart-icon { opacity: 0; visibility: hidden; transform: scale(0.8); } /* Mild shake animation for floating cart */ @keyframes mildShake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); } 20%, 40%, 60%, 80% { transform: translateX(2px); } } .floating-cart-icon.shake { animation: mildShake 0.6s ease-in-out; } /* Hide floating cart on checkout page */ body.woocommerce-checkout .floating-cart-icon { display: none !important; } /* Animation on cart update */ .floating-cart-icon.updated { animation: cartPulse 0.6s ease; } @keyframes cartPulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } /* Mobile Responsiveness */ @media (max-width: 768px) { .floating-cart-icon { bottom: 20px; right: 20px; } .floating-cart-button { width: 50px; height: 50px; } .floating-cart-button svg { width: 20px; height: 20px; } .floating-cart-count { width: 20px; height: 20px; font-size: 11px; min-width: 20px; top: -3px; right: -3px; } } .floating-cart-button:hover .floating-cart-count { background-color: #0f3a8a; } #cart-sidebar .cart-item .cart-item-price .woocommerce-Price-amount.amount, .cart-sidebar-footer .subtotal-amount .woocommerce-Price-amount.amount { color: #333; } /* Cart Item Loading and Animation States */ .cart-item { transition: all 0.3s ease; transform: translateX(0); opacity: 1; max-height: 200px; overflow: hidden; } .cart-item.removing { transform: translateX(-100%); opacity: 0; max-height: 0; margin: 0; padding: 0; } .cart-item.loading { position: relative; pointer-events: none; } .cart-item.loading::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; z-index: 10; } .remove-cart-item { position: relative; transition: all 0.2s ease; } .remove-cart-item.loading { opacity: 0.5; pointer-events: none; } .remove-cart-item.loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid #ccc; border-top-color: #666; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Loading spinner for cart item */ .cart-item-loading-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border: 2px solid #f3f3f3; border-top: 2px solid #5ADBFF; border-radius: 50%; animation: spin 1s linear infinite; z-index: 20; } /* Modern Empty Cart Design */ .empty-cart { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 30px; min-height: 300px; background: none; border: none; margin: 20px 0; position: relative; overflow: hidden; } .empty-cart::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(90, 219, 255, 0.05) 0%, transparent 70%); animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(10px, -10px) rotate(1deg); } 66% { transform: translate(-5px, 5px) rotate(-1deg); } } .empty-cart-icon { position: relative; z-index: 2; margin-bottom: 24px; animation: bounce 2s ease-in-out infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } .empty-cart-icon svg { filter: drop-shadow(0 4px 12px rgba(90, 219, 255, 0.2)); transition: transform 0.3s ease; } .empty-cart:hover .empty-cart-icon svg { transform: scale(1.05); } .empty-cart-content { position: relative; z-index: 10; max-width: 320px; pointer-events: auto; } .empty-cart-title { font-size: 24px; font-weight: 700; color: #2c3e50; margin: 0 0 12px 0; font-family: 'Urbanist', sans-serif; letter-spacing: -0.5px; } .empty-cart-description { font-size: 16px; color: #6c757d; line-height: 1.6; margin: 0 0 32px 0; font-family: 'Urbanist', sans-serif; font-weight: 400; } .empty-cart-btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #5ADBFF 0%, #4ac3e6 100%); color: #000; padding: 14px 28px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 16px; font-family: 'Urbanist', sans-serif; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(90, 219, 255, 0.3); border: none; cursor: pointer; position: relative; overflow: hidden; z-index: 100; pointer-events: auto; } .empty-cart-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s ease; pointer-events: none; z-index: -1; } .empty-cart-btn:hover::before { left: 100%; } .empty-cart-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(90, 219, 255, 0.4); background: linear-gradient(135deg, #4ac3e6 0%, #3ab0d9 100%); } .empty-cart-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(90, 219, 255, 0.3); } .empty-cart-btn svg { transition: transform 0.3s ease; } .empty-cart-btn:hover svg { transform: translateX(2px); } /* Mobile Responsiveness for Empty Cart */ @media (max-width: 768px) { .empty-cart { padding: 40px 20px; margin: 15px 0; border-radius: 12px; } .empty-cart-icon svg { width: 60px; height: 60px; } .empty-cart-title { font-size: 20px; } .empty-cart-description { font-size: 14px; margin-bottom: 24px; } .empty-cart-btn { padding: 12px 24px; font-size: 14px; } } /* Enhanced WooCommerce Add to Cart Button States */ .ajax_add_to_cart { position: relative; transition: all 0.3s ease; overflow: hidden; } .ajax_add_to_cart.loading { pointer-events: none; opacity: 0.8; } .ajax_add_to_cart.loading .add-to-cart-text { opacity: 0; transform: translateY(-20px); } .ajax_add_to_cart.loading .add-to-cart-loader { opacity: 1; transform: translateY(0); } .ajax_add_to_cart.added .add-to-cart-text { opacity: 0; transform: translateY(-20px); } .ajax_add_to_cart.added .add-to-cart-success { opacity: 1; transform: translateY(0); } .add-to-cart-loader, .add-to-cart-success { position: absolute; top: 30%; transform: translate(-50%, -50%) translateY(20px); opacity: 0; transition: all 0.3s ease; display: flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; } .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.added::after { display: none; } .add-to-cart-text { transition: all 0.3s ease; display: inline-block; } /* Loading spinner for add to cart */ .add-to-cart-spinner { width: 16px; height: 16px; border: 2px solid rgba(90, 219, 255, 0.3); border-top: 2px solid #5ADBFF; border-radius: 50%; animation: spin 0.8s linear infinite; } /* Success checkmark animation */ .add-to-cart-checkmark { width: 16px; height: 16px; border-radius: 50%; background: rgba(233, 230, 237, 0.2); display: flex; align-items: center; justify-content: center; } .add-to-cart-checkmark svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 2; fill: none; } /* Hide default WooCommerce "View cart" text */ .added_to_cart { display: none !important; } /* Enhanced WooCommerce Notice Styling */ .woocommerce-message, .woocommerce-error { position: relative; padding-right: 50px; /* Make room for close button */ } /* Close button for WooCommerce notices */ .woocommerce-message .notice-close, .woocommerce-error .notice-close { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); width: 32px; height: 32px; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; opacity: 0.7; } /* Success message close button */ .woocommerce-message .notice-close { background: rgba(34, 197, 94, 0.1); color: #22c55e; } .woocommerce-message .notice-close:hover { background: rgba(34, 197, 94, 0.1); opacity: 1; transform: translateY(-50%) scale(1.1); } /* Error message close button */ .woocommerce-error .notice-close { background: rgba(239, 68, 68, 0.1); color: #ef4444; } .woocommerce-error .notice-close:hover { background: rgba(239, 68, 68, 0.1); opacity: 1; transform: translateY(-50%) scale(1.1); } .woocommerce-message .notice-close svg, .woocommerce-error .notice-close svg { width: 16px; height: 16px; } /* Enhanced View Cart button styling */ .woocommerce-message .cart-sidebar-trigger { display: inline-flex; align-items: center; gap: 6px; background: rgba(34, 197, 94, 0.1); border: 1px solid #22c55e; border-radius: 6px; padding: 8px 12px; color: #065f46; text-decoration: none; font-weight: 500; font-size: 13px; transition: all 0.3s ease; margin-left: 10px; } .woocommerce-message .cart-sidebar-trigger:hover { background: rgba(34, 197, 94, 0.2); border-color: #16a34a; color: #064e3b; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2); } .woocommerce-message .cart-sidebar-trigger svg { width: 16px; height: 16px; flex-shrink: 0; } /* Mobile responsive adjustments */ @media (max-width: 768px) { .woocommerce-message, .woocommerce-error { padding-right: 45px; } .woocommerce-message .notice-close, .woocommerce-error .notice-close { right: 10px; width: 28px; height: 28px; } .woocommerce-message .cart-sidebar-trigger { padding: 6px 10px; font-size: 12px; margin-left: 8px; } .woocommerce-message .cart-sidebar-trigger svg { width: 14px; height: 14px; } } /* Button color variations for different states */ .ajax_add_to_cart.added { background-color: #5ADBFF !important; border-color: #5ADBFF !important; } /* Pulse animation for added state */ .ajax_add_to_cart.added { animation: addedPulse 0.6s ease; } /* Coming Soon Product Styling */ .product-item.coming-soon { position: relative; } .product-status-badge { position: absolute; top: 12px; left: 12px; z-index: 10; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .woocommerce ul.products li.product a img { min-height: 315px; object-fit: cover; } .coming-soon-badge { background: linear-gradient(135deg, rgba(255, 193, 7, 0.9) 0%, rgba(255, 152, 0, 0.9) 100%); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); } .coming-soon-badge svg { width: 14px; height: 14px; flex-shrink: 0; } /* Coming Soon Button Styling */ .add-to-cart-icon-btn.coming-soon-btn { background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%); border-color: #ff9800; color: #fff; position: relative; overflow: hidden; } .add-to-cart-icon-btn.coming-soon-btn:hover { background: linear-gradient(135deg, #f57c00 0%, #e65100 100%); border-color: #f57c00; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3); } .add-to-cart-icon-btn.coming-soon-btn:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } .add-to-cart-icon-btn.coming-soon-btn:hover:before { left: 100%; } /* Coming Soon Product Overlay Effect */ .product-item.coming-soon .product-content { position: relative; } .woocommerce ul.products li.product .woocommerce-placeholder { border: none; } /* Mobile Responsive */ @media (max-width: 768px) { .product-status-badge { top: 8px; left: 8px; padding: 4px 8px; font-size: 10px; gap: 4px; } .coming-soon-badge svg { width: 12px; height: 12px; } .add-to-cart-icon-btn.coming-soon-btn { font-size: 13px; padding: 10px 16px; } .woocommerce ul.products li.product a img { min-height: auto; } } /* Coming Soon Modal Styling */ .coming-soon-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; animation: fadeIn 0.3s ease forwards; } .coming-soon-modal { background: #fff; border-radius: 16px; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); transform: scale(0.9); animation: modalSlideIn 0.3s ease forwards; } .coming-soon-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 0 24px; border-bottom: 1px solid #f0f0f0; margin-bottom: 24px; } .coming-soon-modal-header h3 { margin: 0; font-size: 24px; font-weight: 600; color: #333; } .modal-close { background: none; border: none; cursor: pointer; padding: 8px; border-radius: 50%; color: #666; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .modal-close:hover { background: #f5f5f5; color: #333; transform: scale(1.1); } .coming-soon-modal-content { padding: 0 24px 24px 24px; text-align: center; } .coming-soon-icon { margin-bottom: 20px; color: #ff9800; } .coming-soon-modal-content h4 { margin: 0 0 16px 0; font-size: 20px; font-weight: 600; color: #333; } .coming-soon-modal-content p { margin: 0 0 24px 0; color: #666; line-height: 1.6; font-size: 16px; } .coming-soon-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .btn-notify-me, .btn-continue-shopping { padding: 12px 24px; border-radius: 8px; font-weight: 500; font-size: 14px; cursor: pointer; transition: all 0.3s ease; border: none; min-width: 140px; } .btn-notify-me { background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%); color: #fff; } .btn-notify-me:hover { background: linear-gradient(135deg, #f57c00 0%, #e65100 100%); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3); } .btn-notify-me:disabled { background: #4caf50; cursor: not-allowed; transform: none; box-shadow: none; } .btn-continue-shopping { background: #f5f5f5; color: #333; border: 1px solid #e0e0e0; } .btn-continue-shopping:hover { background: #e9e9e9; border-color: #d0d0d0; } /* Modal Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalSlideIn { from { transform: scale(0.9) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } /* Prevent body scroll when modal is open */ body.modal-open { overflow: hidden; } /* Mobile Modal Responsive */ @media (max-width: 768px) { .coming-soon-modal { width: 95%; margin: 20px; } .coming-soon-modal-header { padding: 20px 20px 0 20px; margin-bottom: 20px; } .coming-soon-modal-header h3 { font-size: 20px; } .coming-soon-modal-content { padding: 0 20px 20px 20px; } .coming-soon-modal-content h4 { font-size: 18px; } .coming-soon-modal-content p { font-size: 14px; } .coming-soon-actions { flex-direction: column; gap: 8px; } .btn-notify-me, .btn-continue-shopping { width: 100%; min-width: auto; } } /* Coming Soon Single Product Page Styling */ .coming-soon-single-product { margin: 20px 0; padding: 24px; background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 152, 0, 0.1) 100%); border: 2px solid rgba(255, 152, 0, 0.2); border-radius: 12px; text-align: center; } .coming-soon-badge-single { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%); color: #fff; border-radius: 25px; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3); } .coming-soon-badge-single svg { width: 18px; height: 18px; flex-shrink: 0; } .coming-soon-description { margin: 0; color: #666; font-size: 16px; line-height: 1.6; } /* Mobile responsive for single product */ @media (max-width: 768px) { .coming-soon-single-product { margin: 16px 0; padding: 20px; } .coming-soon-badge-single { padding: 10px 16px; font-size: 12px; gap: 6px; } .coming-soon-badge-single svg { width: 16px; height: 16px; } .coming-soon-description { font-size: 14px; } } @keyframes addedPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .woocommerce .shop-content-wraper ul.products li.product .button.ajax_add_to_cart.loading::after { display: none; } /* Modern AJAX Category Filter Design */ .ajax-category-filter { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .ajax-category-filter li { margin: 0; padding: 0; } .ajax-category-filter li a { display: flex; align-items: center; justify-content: space-between; padding: 0; border-radius: 8px; text-decoration: none; color: #333333; font-family: 'Urbanist', sans-serif; font-size: 14px; font-weight: 400; transition: all 0.3s ease; position: relative; overflow: hidden; } .ajax-category-filter li a::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(90, 219, 255, 0.1), transparent); transition: left 0.5s ease; } .ajax-category-filter li a:hover::before { left: 100%; } .ajax-category-filter li a:hover { font-weight: 600; transform: translateX(4px); } .ajax-category-filter li a.active { font-weight: 600; } .ajax-category-filter li a.active:hover { transform: translateX(2px); } /* Category name and count styling */ .ajax-category-filter li a .category-name { flex: 1; text-align: left; } .ajax-category-filter li a .category-count { background: rgba(0, 0, 0, 0.1); color: #6c757d; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; min-width: 20px; text-align: center; transition: all 0.3s ease; } .ajax-category-filter li a.active .category-count { background: rgba(0, 0, 0, 0.15); color: #000; } /* Filter section header */ .filter-section { margin-bottom: 24px; padding: 20px; } .filter-section-title { font-size: 16px; font-weight: 700; color: #2c3e50; margin: 0 0 16px 0; font-family: 'Urbanist', sans-serif; display: flex; align-items: center; gap: 8px; } /* Loading state for filter */ .ajax-category-filter.loading { opacity: 0.6; pointer-events: none; } .ajax-category-filter.loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid #e9ecef; border-top: 2px solid #5ADBFF; border-radius: 50%; animation: spin 1s linear infinite; } /* Mobile responsiveness */ @media (max-width: 768px) { .ajax-category-filter li a { padding: 10px 12px; font-size: 13px; } .filter-section-title { font-size: 14px; margin-bottom: 12px; } .ajax-category-filter { gap: 6px; } .remove-cart-item { visibility: visible; opacity: 1; } } /* Product List Loading State */ .products.loading { position: relative; opacity: 0.6; pointer-events: none; min-height: 400px; } .products.loading::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); z-index: 10; backdrop-filter: blur(2px); } .products.loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid #e9ecef; border-top: 3px solid #5ADBFF; border-radius: 50%; animation: spin 1s linear infinite; z-index: 11; } /* Enhanced results counter styling */ .custom-results-counter { margin: 20px 0; padding: 12px 16px; } .custom-results-counter p { margin: 0; font-size: 14px; color: #495057; font-family: 'Urbanist', sans-serif; } .custom-results-counter .showing-count, .custom-results-counter .filtered-count, .custom-results-counter .total-count { font-weight: 600; color: #333; } /* Loading state for results counter */ .custom-results-counter.loading { opacity: 0.6; } /* Product grid loading overlay */ .shop-content-wraper.loading { position: relative; } .shop-content-wraper.loading .products { opacity: 0.4; transition: opacity 0.3s ease; } .shop-content-wraper.loading::before { content: 'Loading products...'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.95); padding: 20px 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); z-index: 100; font-family: 'Urbanist', sans-serif; font-weight: 600; color: #184CB1; display: flex; align-items: center; gap: 12px; } .shop-content-wraper.loading::after { content: ''; position: absolute; top: 50%; left: calc(50% - 80px); transform: translate(-50%, -50%); width: 20px; height: 20px; border: 2px solid #e9ecef; border-top: 2px solid #5ADBFF; border-radius: 50%; animation: spin 1s linear infinite; z-index: 101; } /* Cart Coupon Section Styling */ .cart-coupon-section { margin: 16px 0; padding: 16px 0; } .coupon-toggle { margin-bottom: 12px; cursor: pointer; } .coupon-toggle-text { font-size: 14px; color: #666; font-family: 'Urbanist', sans-serif; } .coupon-toggle-link { color: #000000; text-decoration: underline; cursor: pointer; transition: color 0.2s ease; font-weight: bold; } .coupon-toggle-link:hover { color: #5ADBFF; } .coupon-input-container { margin-top: 12px; } .coupon-input { flex: 1; padding: 10px 12px; border: 1px solid #e9ecef; border-radius: 6px; font-size: 14px; font-family: 'Urbanist', sans-serif; background: #fff; transition: all 0.3s ease; } .coupon-input:focus { outline: none; border-color: #5ADBFF; box-shadow: 0 0 0 2px rgba(90, 219, 255, 0.1); } .coupon-input::placeholder { color: #6c757d; } .apply-coupon-btn { padding: 10px 16px; background: #5ADBFF; color: #000000; border: 1px solid #5ADBFF; border-radius: 9999px; font-size: 15px; font-weight: 500; font-family: 'Urbanist', sans-serif; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 6px; min-width: 70px; justify-content: center; } .apply-coupon-btn:hover { background: #EBB211; border-color: #EBB211; } .apply-coupon-btn:disabled { opacity: 0.6; cursor: not-allowed; } .apply-coupon-btn.loading .apply-text { display: none; } .apply-coupon-btn.loading .apply-loader { display: flex !important; animation: spin 1s linear infinite; } /* Coupon Message Styling */ .coupon-message { padding: 8px 12px; border-radius: 6px; font-size: 13px; font-family: 'Urbanist', sans-serif; margin-bottom: 8px; margin-top: 8px; } .coupon-message.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .coupon-message.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; margin-top: 10px; } /* Cart Totals Section */ .cart-totals-section { border-bottom: 1px solid #e9ecef; padding-bottom: 16px; margin-bottom: 16px; } .cart-subtotal, .cart-discount-row, .cart-total { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-family: 'Urbanist', sans-serif; } .cart-subtotal { font-size: 14px; color: #6c757d; } .cart-discount-row { font-size: 14px; color: #28a745; border-top: 1px solid #f0f0f0; margin-top: 4px; padding-top: 8px; } .cart-discount-row .discount-label { display: flex; align-items: center; gap: 6px; font-weight: 500; } .cart-discount-row .discount-amount { font-weight: 600; color: #28a745; } .cart-discount-row .remove-coupon-btn { background: none; border: none; color: #dc3545; cursor: pointer; padding: 2px; border-radius: 3px; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 0; } .cart-discount-row .remove-coupon-btn:hover { background: #dc3545; color: #fff; } .cart-discount-row .remove-coupon-btn.loading { pointer-events: none; } .cart-discount-row .remove-coupon-btn.loading svg { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .cart-total { font-size: 16px; font-weight: 600; color: #333; border-top: 2px solid #e9ecef; margin-top: 8px; padding-top: 12px; } .cart-total .total-label { font-weight: 600; } .cart-total .total-amount { font-weight: 700; color: #000000; font-size: 18px; } /* Applied Coupons Display */ .applied-coupons { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .applied-coupon-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #e8f5e8; border: 1px solid #c3e6cb; border-radius: 6px; font-size: 13px; } .applied-coupon-item .coupon-code { font-weight: 600; color: #155724; font-family: 'Urbanist', sans-serif; } .remove-coupon-btn { background: none; border: none; color: #6c757d; cursor: pointer; padding: 2px; border-radius: 3px; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .remove-coupon-btn:hover { background: rgba(108, 117, 125, 0.1); color: #495057; } .coupon-input-wrapper { display: flex; gap: 6px; } /* Mobile Responsiveness for Coupon Section */ @media (max-width: 768px) { .cart-coupon-section { margin: 12px 0; } .cart-totals-section { padding-bottom: 12px; margin-bottom: 12px; } .cart-subtotal, .cart-discount-row, .cart-total { padding: 6px 0; font-size: 13px; } .cart-total { font-size: 15px; padding-top: 10px; margin-top: 6px; } .cart-total .total-amount { font-size: 16px; } .cart-discount-row .discount-label { gap: 4px; font-size: 13px; } .coupon-input-wrapper { gap: 8px; } .coupon-input { padding: 8px 10px; font-size: 13px; } .apply-coupon-btn { padding: 8px 12px; font-size: 13px; min-width: 60px; } .applied-coupon-item { padding: 6px 10px; font-size: 12px; } } /* Cart Item Quantity Controls */ .cart-item-quantity { display: flex; align-items: center; gap: 2px; margin-top: 8px; } .cart-item-quantity.virtual-product { justify-content: flex-start; } .quantity-display-only { font-size: 13px; color: #666; font-family: 'Urbanist', sans-serif; font-style: italic; } .quantity-btn { width: 28px; height: 28px; border: 1px solid #e9ecef; background: #fff; color: #495057; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; user-select: none; } .quantity-btn:hover { background: #f8f9fa; border-color: #5ADBFF; color: #5ADBFF; } .quantity-btn:active { transform: scale(0.95); } .quantity-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .quantity-display { min-width: 24px; text-align: center; font-weight: 600; font-size: 14px; color: #495057; font-family: 'Urbanist', sans-serif; } /* Cart Item Loading State */ .cart-item.loading { opacity: 0.6; pointer-events: none; } .cart-item.loading .quantity-btn { opacity: 0.5; cursor: not-allowed; } /* Mobile Responsiveness for Quantity Controls */ @media (max-width: 768px) { .quantity-btn { width: 24px; height: 24px; font-size: 12px; } .quantity-display { font-size: 13px; min-width: 20px; } .cart-item-quantity { gap: 6px; margin-top: 6px; } } .woocommerce nav.woocommerce-pagination ul, .woocommerce nav.woocommerce-pagination ul li { border: none; } .woocommerce nav.woocommerce-pagination ul { display: flex; gap: 10px; } .woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current { color: #ffffff; border-color: #204ce5; background-color: #204ce5; } .woocommerce nav.woocommerce-pagination ul li span, .woocommerce nav.woocommerce-pagination ul li a { height: 36px; width: 36px; align-items: center; justify-content: center; display: flex; box-shadow: none; border: 1px solid #cccccc; } #order_review .cart-subtotal { display: table-row; } table.shop_table a { color: #5ADBFF; } /* Course Coming Soon Styles */ .course-card.coming-soon { position: relative; } .course-card.coming-soon .course-thumbnail::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.1); pointer-events: none; } .course-status-badge.coming-soon-badge { left: 15px !important; right: unset !important; } .ld-course-card.coming-soon { opacity: 0.8; position: relative; } .ld-course-card.coming-soon .ld-course-image::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.1); pointer-events: none; } /* Course status badge positioning for courses */ .course-thumbnail { position: relative; } .ld-course-image { position: relative; }