/*
Theme Name: Blejgoma v3
Theme URI: https://blejgoma.com
Author: Blejgoma
Description: Dyqani online i Blejgoma në WooCommerce, me pamjen e njëjtë si blejgoma.com (CSS-ja dhe markup-i i faqes React janë ripërdorur në assets/live).
Version: 0.3.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: blejgoma
WC requires at least: 8.0
*/

/*
 * Only what React used to add at runtime and the live CSS therefore doesn't have:
 * react-select menus and multi values, the confirmation modal overlay and toasts.
 * Everything else comes from assets/live/css (the live site's own files).
 */

[hidden]{display:none!important}

/*
 * react-select v3 (emotion) rules that only exist while a menu is open or a value is typed.
 * Copied from the live site's CSSOM (captured with the menu open, 23 Oct); the live main CSS
 * then overrides some of them (Select__menu margin/radius, focused/selected option colours).
 */
.css-1f70tfa-container{position:relative;box-sizing:border-box;width:40px}
.css-1pahdxg-control{align-items:center;background-color:rgb(255,255,255);border-color:rgb(38,132,255);border-radius:4px;border-style:solid;border-width:1px;box-shadow:rgb(38,132,255) 0 0 0 1px;cursor:default;display:flex;flex-wrap:wrap;justify-content:space-between;min-height:38px;position:relative;transition:100ms;box-sizing:border-box;outline:0!important}
.css-1pahdxg-control:hover{border-color:rgb(38,132,255)}
.css-26l3qy-menu{top:100%;background-color:rgb(255,255,255);border-radius:4px;box-shadow:rgba(0,0,0,.1) 0 0 0 1px,rgba(0,0,0,.1) 0 4px 11px;margin-bottom:8px;margin-top:8px;position:absolute;width:100%;z-index:1;box-sizing:border-box}
.css-11unzgr{max-height:300px;overflow-y:auto;padding-bottom:4px;padding-top:4px;position:relative;box-sizing:border-box}
.css-1n7v3ny-option{background-color:rgb(222,235,255);color:inherit;cursor:default;display:block;font-size:inherit;padding:8px 12px;width:100%;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}
.css-1n7v3ny-option:active{background-color:rgb(178,212,255)}
.css-yt9ioa-option{background-color:transparent;color:inherit;cursor:default;display:block;font-size:inherit;padding:8px 12px;width:100%;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}
.css-yt9ioa-option:active{background-color:rgb(178,212,255)}
.css-9gakcf-option{background-color:rgb(38,132,255);color:rgb(255,255,255);cursor:default;display:block;font-size:inherit;padding:8px 12px;width:100%;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}
.css-1gl4k7y{color:hsl(0,0%,60%);padding:8px 12px;text-align:center;box-sizing:border-box}
.css-1g6gooi{margin:2px;padding-bottom:2px;padding-top:2px;visibility:visible;color:rgb(51,51,51);box-sizing:border-box}
.css-1rhbuit-multiValue{background-color:hsl(0,0%,90%);border-radius:2px;display:flex;margin:2px;min-width:0;box-sizing:border-box}
.css-12jo7m5{border-radius:2px;color:hsl(0,0%,20%);font-size:85%;overflow:hidden;padding:3px 3px 3px 6px;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}
.css-xb97g8{align-items:center;border-radius:2px;display:flex;padding-left:4px;padding-right:4px;box-sizing:border-box}
.css-xb97g8:hover{background-color:#FFBDAD;color:#DE350B}
.css-1fhf3k1-control{align-items:center;background-color:hsl(0,0%,95%);border-color:hsl(0,0%,90%);border-radius:4px;border-style:solid;border-width:1px;cursor:default;display:flex;flex-wrap:wrap;justify-content:space-between;min-height:38px;position:relative;transition:all 100ms;box-sizing:border-box}
.css-14jk2my-container{pointer-events:none;position:relative;box-sizing:border-box}
.Select__input input:focus{outline:0}

/* react-toast-notifications (emotion rules captured from live) */
.css-jfeqr5{box-sizing:border-box;max-height:100%;max-width:100%;overflow:hidden;padding:8px;position:fixed;z-index:1000;top:0;right:0}
.css-h2fnfe{transition:height 120ms 100ms}
.css-an5egw{background-color:rgb(227,252,239);border-radius:4px;box-shadow:rgba(0,0,0,.176) 0 3px 8px;color:rgb(0,102,68);display:flex;margin-bottom:8px;max-width:100%;transition:transform 220ms cubic-bezier(.2,0,0,1),opacity 220ms;width:360px;transform:translate3d(0,0,0)}
.css-17eabvo{background-color:rgb(54,179,126);border-top-left-radius:4px;border-bottom-left-radius:4px;color:rgb(227,252,239);flex-shrink:0;padding-bottom:8px;padding-top:8px;position:relative;overflow:hidden;text-align:center;width:30px}
.bg-toast--error .css-an5egw,.css-an5egw.bg-toast-error{background-color:#FFEBE6;color:#BF2600}
.css-an5egw.bg-toast-error .css-17eabvo{background-color:#FF5630;color:#FFEBE6}
.css-k5yfn6{animation:4000ms linear 0s 1 normal none running animation-lvbud6;background-color:rgba(0,0,0,.1);bottom:0;height:0;left:0;opacity:1;position:absolute;width:100%}
@keyframes animation-lvbud6{0%{height:100%}100%{height:0%}}
.css-rqgsqp{position:relative;z-index:1}
.css-1ad3zal{flex-grow:1;font-size:14px;line-height:1.4;min-height:40px;padding:8px 12px}
.css-4hd0gx{cursor:pointer;flex-shrink:0;opacity:.5;padding:8px 12px;transition:opacity 150ms}
.css-4hd0gx:hover{opacity:1}
.css-1uvvha{border:0;clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
.react-toast-notifications__toast--entering{transform:translate3d(120%,0,0)}
.react-toast-notifications__toast--exiting{transform:scale(.66);opacity:0}

/* "Vëmendje" confirmation modal (react-modal overlay of the live site) */
.bg-confirm{position:fixed;inset:0;z-index:1000;background:rgba(53,57,66,.75);display:flex;align-items:center;justify-content:center;padding:16px}
.bg-confirm__box{background:#fff;width:350px;max-width:100%;min-height:300px;display:flex}
.bg-confirm .ConfirmationModal__content{width:100%}

/* Infinite scroll spinner */
.ShopProducts__spinner{min-height:40px}
.ShopProducts__spinner.is-loading::after{content:"";width:28px;height:28px;margin:6px auto;border:3px solid #ddd;border-top-color:#f07e04;border-radius:50%;animation:bg-spin .8s linear infinite}
@keyframes bg-spin{to{transform:rotate(360deg)}}
.ShopProducts__empty{padding:20px 0}
.ProductStatus--out{color:#dc3545}
/* React rendered only one of the two tab bars depending on the width (800px). */
@media (min-width:800px){.MobileTabsSlider{display:none!important}}
@media (max-width:799px){.FindTiresBySize__tabs{display:none!important}}
@media (min-width:992px){.Shop__filters_button{display:none}}

/* Open menu: React rendered the white logo and an X instead of the dark logo and the burger. */
.bg-logo-open,.bg-icon-open{display:none}
.NavigationHeader--menu_open .bg-logo-default,.NavigationHeader--menu_open .bg-icon-default{display:none}
.NavigationHeader--menu_open .bg-logo-open{display:inline}
.NavigationHeader--menu_open .bg-icon-open{display:block}


/* WordPress content pages (about, terms, faq, wishlist) inside the live Page wrapper */
.bg-page{padding:20px 0 40px}
.bg-page h1{font-size:20px;text-transform:uppercase;font-weight:700;margin-bottom:20px}
.wl-empty{font-size:16px}
.faq__item{border-bottom:1px solid #ddd;padding:12px 0}
.faq__item summary{font-weight:700;cursor:pointer}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.contact-grid section{border:2px solid #ededed;padding:16px}
.contact-grid h2{font-size:14px;text-transform:uppercase;margin:0 0 8px;color:#f07e04}
@media (max-width:767px){.contact-grid{grid-template-columns:1fr}}

/* WooCommerce cart/checkout/account inside the live layout */
.woocommerce-page .bg-page .button,.woocommerce-page .bg-page button.button,.woocommerce #place_order{background:#f07e04;color:#fff;border-radius:2px;font-weight:700;text-transform:uppercase}
.woocommerce-page .bg-page .button:hover{background:#d46f03;color:#fff}
.bg-field-error{color:#dc3545;font-size:13px;margin:4px 0 0}