/* =========================================================
   ANUSZKIEWICZ.PL – KOSMOS GLOBAL (Storefront/Woo + FSE)
   - Jedno tlo kosmiczne wszedzie (z motywu potomnego)
   - Przezroczyste wrappery
   - Delikatna mgielka w header/footer
   - Spokojna paleta + szklo pod trescia
   - KASA klasyczna (order review / payment)
   - Select2/selectWoo: ciemne selecty (zostawiamy)
   - Poprawki: UWAGI/textarea (usunięcie białych pól)
   - Poprawki: usunięcie prawego panelu (sidebar) na wszystkich stronach
   - Poprawki: warianty produktu (select) – usunięcie szarego tła
   ========================================================= */


/* ===================== 0) ASSETY MOTYWU POTOMNEGO (ZMIENNE) ===================== */
:root{
  /* pliki w: storefront-child/assets/img/ */
  --bg-space: url("../img/bg-it-space-1.webp");
  --icon-goleb: url("../img/icon-goleb-list.png");
  --icon-telefon: url("../img/icon-telefon-kosmos.png");

  /* paleta */
  --text: #e9f1ff;
  --text-muted: rgba(233,241,255,.72);

  --accent-cyan: #499ce3;
  --accent-violet: #8961ba;

  --surface: rgba(11,15,50,.55);
  --surface-strong: rgba(11,15,50,.72);
  --surface-soft: rgba(19,25,83,.40);

  --border: rgba(233,241,255,.16);
  --border-strong: rgba(233,241,255,.26);

  --focus: rgba(73,156,227,.55);
  --shadow: 0 10px 28px rgba(0,0,0,.35);
}

/* Klasy pomocnicze (do użycia w Gutenberg: "Dodatkowa klasa CSS") */
.bg-kosmos{
  background-image: var(--bg-space) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
}
.icon-goleb{
  background-image: var(--icon-goleb) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
.icon-telefon{
  background-image: var(--icon-telefon) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}


/* ===================== 1) GLOBALNE TLO (NA HTML) ===================== */
html{
  background-image: var(--bg-space) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-color: #000 !important;
  min-height: 100%;
}

body{
  background: transparent !important;
  min-height: 100%;
  color: var(--text);
}

/* Na telefonach fixed bywa problematyczne */
@media (max-width: 1024px){
  html{ background-attachment: scroll !important; }
}


/* ===================== 2) WRAPPERY PRZEZROCZYSTE ===================== */
.wp-site-blocks,
.wp-block-template-part,
.wp-block-group,
.wp-block-cover,
.wp-block-cover__inner-container,
.wp-block-post-content,
.is-layout-constrained,
.is-layout-flow,
main,
#page, .site,
#content, .site-content,
#primary, .content-area, .site-main,
.hentry, .entry-content,
.woocommerce, .woocommerce-page{
  background: transparent !important;
}

/* Naglowek i stopka przezroczyste (tlo ma byc spodem) */
#masthead, .site-header,
#colophon, .site-footer{
  background: transparent !important;
}


/* ===================== 3) MGIELKA POD NAGLOWKIEM/STOPKA ===================== */
#masthead, .site-header,
#colophon, .site-footer{
  position: relative;
}

#masthead::before, .site-header::before,
#colophon::before, .site-footer::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.40);
  pointer-events: none;
}

#masthead > *, .site-header > *,
#colophon > *, .site-footer > *{
  position: relative;
}


/* ===================== 4) TEKST / LINKI ===================== */
h1,h2,h3,h4,h5,h6{ color: #ffffff; }

a{
  color: rgba(233,241,255,.85);
  text-decoration-color: rgba(73,156,227,.45);
}
a:hover, a:focus{
  color: #ffffff;
  text-decoration-color: rgba(73,156,227,.85);
}


/* ===================== 5) MENU / NAGLOWEK ===================== */
#masthead a,
.site-header a,
#masthead .main-navigation a,
.site-header .main-navigation a{
  color: rgba(233,241,255,.92) !important;
}

#masthead .main-navigation a:hover,
.site-header .main-navigation a:hover,
#masthead .main-navigation a:focus,
.site-header .main-navigation a:focus{
  color: #ffffff !important;
  text-decoration-color: rgba(73,156,227,.85) !important;
}

#masthead .main-navigation .current-menu-item > a,
#masthead .main-navigation .current_page_item > a,
.site-header .main-navigation .current-menu-item > a,
.site-header .main-navigation .current_page_item > a{
  color: #ffffff !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(73,156,227,.85);
}

/* Przycisk "Menu" na mobile */
#masthead button.menu-toggle,
.site-header button.menu-toggle{
  color: rgba(233,241,255,.95) !important;
  background: rgba(11,15,50,.55) !important;
  border: 1px solid rgba(233,241,255,.22) !important;
  border-radius: 14px;
}

/* Koszyk w naglowku */
.site-header-cart .cart-contents,
.site-header-cart .cart-contents span,
.site-header-cart .cart-contents::after{
  color: rgba(233,241,255,.92) !important;
}


/* ===================== 5B) PODMENU – CZYTELNOSC ===================== */
#masthead .sub-menu,
.site-header .sub-menu,
#masthead .main-navigation ul ul,
.site-header .main-navigation ul ul,
.site-header .primary-navigation ul ul,
.wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation__submenu-container{
  background: rgba(11,15,50,.88) !important;
  border: 1px solid rgba(233,241,255,.18) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.45) !important;
  border-radius: 14px;
  overflow: hidden;
}

#masthead .sub-menu a,
.site-header .sub-menu a,
#masthead .main-navigation ul ul a,
.site-header .main-navigation ul ul a,
.site-header .primary-navigation ul ul a,
.wp-block-navigation__submenu-container a{
  color: rgba(233,241,255,.96) !important;
  text-decoration: none;
}

#masthead .sub-menu a:hover,
.site-header .sub-menu a:hover,
#masthead .sub-menu a:focus,
.site-header .sub-menu a:focus,
#masthead .main-navigation ul ul a:hover,
.site-header .main-navigation ul ul a:hover,
#masthead .main-navigation ul ul a:focus,
.site-header .main-navigation ul ul a:focus,
.wp-block-navigation__submenu-container a:hover,
.wp-block-navigation__submenu-container a:focus{
  background: rgba(73,156,227,.22) !important;
  color: #ffffff !important;
  outline: none;
}

#masthead .sub-menu li,
.site-header .sub-menu li,
.wp-block-navigation__submenu-container li{
  background: transparent !important;
}

.wp-block-navigation__submenu-icon,
.menu-item-has-children > a::after{
  color: rgba(233,241,255,.92) !important;
}


/* ===================== 6) SZKLO POD TRESCIA ===================== */
.site-main,
.entry-content,
.woocommerce,
.woocommerce-page{
  color: var(--text);
}

/* Elementy bez “klejenia” wszystkiego na jedną płytę */
.site-main > *:not(script):not(style),
.entry-content > *:not(script):not(style),
.woocommerce > *:not(script):not(style),
.woocommerce-page > *:not(script):not(style),
.woocommerce-cart .cart-collaterals,
.woocommerce-checkout form.checkout,
.woocommerce-account .woocommerce{
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 14px;
}


/* ===================== 6B) BREADCRUMB ===================== */
.storefront-breadcrumb,
.woocommerce-breadcrumb{
  background: transparent !important;
  color: var(--text-muted);
}
.storefront-breadcrumb a,
.woocommerce-breadcrumb a{
  color: rgba(233,241,255,.78);
}


/* ===================== 7) FORMULARZE ===================== */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="search"], input[type="number"], textarea, select{
  color: var(--text);
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border);
  border-radius: 12px;
}

input:focus, textarea:focus, select:focus{
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px var(--focus);
}

::placeholder{ color: rgba(233,241,255,.55); }

/* Search w naglowku (jesli jest) */
.site-header .widget_product_search input[type="search"],
.site-header .search-field{
  color: rgba(233,241,255,.92) !important;
  background: rgba(0,0,0,.25) !important;
  border: 1px solid rgba(233,241,255,.18) !important;
  border-radius: 12px;
}


/* ===================== 8) PRZYCISKI ===================== */
.button, button, input[type="button"], input[type="submit"],
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  color: #ffffff;
  background: rgba(73,156,227,.22);
  border: 1px solid rgba(73,156,227,.35);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

.button:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{
  background: rgba(73,156,227,.32);
  border-color: rgba(73,156,227,.55);
}

/* CTA / alt */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  background: rgba(137,97,186,.22);
  border-color: rgba(137,97,186,.40);
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{
  background: rgba(137,97,186,.32);
  border-color: rgba(137,97,186,.60);
}


/* ===================== 9) PRODUKTY / CENY / SALE ===================== */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title{
  color: #ffffff;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color: rgba(233,241,255,.92);
}

.woocommerce span.onsale{
  background: rgba(137,97,186,.65);
  color: #ffffff;
  border: 1px solid rgba(233,241,255,.18);
}


/* ===================== 10) TABELE ===================== */
.woocommerce table.shop_table{
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  border-color: rgba(233,241,255,.10) !important;
  color: var(--text);
}


/* ===================== 11) KOMUNIKATY Woo ===================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  background: rgba(11,15,50,.70);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-left-width: 4px;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.woocommerce-message{ border-left-color: rgba(73,156,227,.75); }
.woocommerce-info{    border-left-color: rgba(51,85,190,.75); }
.woocommerce-error{   border-left-color: rgba(137,97,186,.75); }


/* ===================== 12) KASA (KLASYCZNA) – PRAWA KOLUMNA / PŁATNOŚCI ===================== */
/* order review */
.woocommerce-checkout #order_review{
  background: var(--surface-strong) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  color: var(--text) !important;
}
.woocommerce-checkout #order_review *{
  color: var(--text) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
.woocommerce-checkout #order_review table,
.woocommerce-checkout #order_review .shop_table,
.woocommerce-checkout #order_review tr,
.woocommerce-checkout #order_review th,
.woocommerce-checkout #order_review td{
  background: transparent !important;
}
.woocommerce-checkout #order_review th,
.woocommerce-checkout #order_review td{
  border-color: rgba(233,241,255,.12) !important;
}

/* płatności */
.woocommerce-checkout #payment,
.woocommerce-checkout #payment.woocommerce-checkout-payment{
  background: var(--surface-strong) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
}
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods li{
  background: transparent !important;
  border-color: rgba(233,241,255,.12) !important;
  color: var(--text) !important;
}
.woocommerce-checkout #payment ul.payment_methods li label{
  color: var(--text) !important;
}

/* opis metody (payment_box) */
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box *{
  background: rgba(0,0,0,.28) !important;
  color: var(--text) !important;
  border: 1px solid rgba(233,241,255,.14) !important;
  border-radius: 12px !important;
  text-shadow: none !important;
}
.woocommerce-checkout #payment div.payment_box:before{
  border-bottom-color: rgba(0,0,0,.28) !important;
}

.woocommerce-checkout #payment .place-order{
  background: transparent !important;
  color: var(--text) !important;
}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper *{
  color: rgba(233,241,255,.92) !important;
}

/* przycisk zamówienia */
.woocommerce-checkout #payment #place_order{
  background: rgba(73,156,227,.35) !important;
  border: 1px solid rgba(73,156,227,.55) !important;
  border-radius: 14px !important;
  color: #fff !important;
}
.woocommerce-checkout #payment #place_order:hover{
  background: rgba(73,156,227,.45) !important;
  border-color: rgba(73,156,227,.75) !important;
}

/* radio/checkbox */
.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"]{
  accent-color: rgba(73,156,227,.85);
}


/* ===================== 12B) KASA – UWAGI (textarea) – USUŃ BIAŁE POLA ===================== */
/* Działa dla: "Uwagi do zamówienia" + Twoich dodatkowych textarea z wtyczek pól. */
body.woocommerce-checkout textarea,
body.woocommerce-checkout .woocommerce textarea,
body.woocommerce-checkout form.checkout textarea,
body.woocommerce-checkout .woocommerce form.checkout textarea,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout #order_comments,
body.woocommerce-checkout #order_comments_field textarea{
  background: rgba(0,0,0,.28) !important;
  background-color: rgba(0,0,0,.28) !important;
  background-image: none !important;
  color: rgba(233,241,255,.95) !important;
  border: 1px solid rgba(233,241,255,.18) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  outline: none !important;
}

body.woocommerce-checkout textarea::placeholder{
  color: rgba(233,241,255,.55) !important;
}

body.woocommerce-checkout textarea:focus{
  border-color: rgba(233,241,255,.28) !important;
  box-shadow: 0 0 0 3px rgba(73,156,227,.45) !important;
  background: rgba(0,0,0,.34) !important;
}

/* iOS/Safari czasem wymusza kolor tekstu w polach */
body.woocommerce-checkout textarea{
  -webkit-text-fill-color: rgba(233,241,255,.95) !important;
}


/* ===================== 13) SORTOWANIE (WooCommerce) ===================== */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select{
  background: rgba(11,15,50,.88) !important;
  color: rgba(233,241,255,.96) !important;
  border: 1px solid rgba(233,241,255,.18) !important;
  border-radius: 14px !important;
}
.woocommerce .woocommerce-ordering select option,
.woocommerce-page .woocommerce-ordering select option{
  background: rgba(11,15,50,.92) !important;
  color: rgba(233,241,255,.96) !important;
}


/* ===================== 13B) WARIANTY PRODUKTU (SELECT) – USUŃ SZARE TŁO ===================== */
/* Dotyczy: strona produktu -> warianty (np. "Wariant zestawu") */
.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.variations_form .variations select{
  background: rgba(11,15,50,.88) !important;
  color: rgba(233,241,255,.96) !important;
  border: 1px solid rgba(233,241,255,.18) !important;
  border-radius: 14px !important;
  outline: none !important;
}

/* Lista opcji po rozwinięciu (jeżeli przeglądarka pozwala stylować option) */
.woocommerce div.product form.cart .variations select option,
.woocommerce div.product form.variations_form .variations select option{
  background: rgba(11,15,50,.95) !important;
  color: rgba(233,241,255,.96) !important;
}

/* Fokus (kliknięcie w pole) */
.woocommerce div.product form.cart .variations select:focus,
.woocommerce div.product form.variations_form .variations select:focus{
  border-color: rgba(233,241,255,.28) !important;
  box-shadow: 0 0 0 3px rgba(73,156,227,.45) !important;
}


/* ===================== 14) SELECT2/selectWoo (KASA) – pole + lista opcji ===================== */
.woocommerce-checkout .select2-container--default .select2-selection--single{
  background: rgba(11,15,50,.88) !important;
  border: 1px solid rgba(233,241,255,.18) !important;
  border-radius: 14px !important;
  min-height: 44px !important;
  padding: 6px 42px 6px 12px !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{
  color: rgba(233,241,255,.96) !important;
  line-height: 32px !important;
  -webkit-text-fill-color: rgba(233,241,255,.96) !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{
  right: 10px !important;
  height: 100% !important;
}

.woocommerce-checkout .select2-container--default .select2-dropdown{
  background: rgba(11,15,50,.92) !important;
  border: 1px solid rgba(233,241,255,.18) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.45) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.woocommerce-checkout .select2-container--default .select2-results__option{
  background: transparent !important;
  color: rgba(233,241,255,.96) !important;
}

.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected]{
  background: rgba(73,156,227,.22) !important;
  color: #ffffff !important;
}


/* ===================== 15) STOPKA ===================== */
#colophon, .site-footer{ color: var(--text); }
#colophon a, .site-footer a{ color: rgba(233,241,255,.82); }
#colophon a:hover, .site-footer a:hover{ color: #ffffff; }


/* ===================== 16) USUNIĘCIE PRAWEGO PANELU (SIDEBAR) – WSZYSTKIE STRONY ===================== */
/* Bezpiecznik CSS: chowamy widgety i robimy full-width. */
#secondary,
.widget-area,
.site-content .widget-area,
.content-area + .widget-area{
  display: none !important;
}

/* Storefront: content-area i primary na pełną szerokość */
#primary,
.content-area,
.site-content .content-area{
  width: 100% !important;
  float: none !important;
  margin-right: 0 !important;
}

/* Jeżeli motyw/układ używa flex/grida */
.site-content,
.site-main{
  flex: 1 1 auto;
}

/* Drobna korekta: na stronach bloga/archiwum bez sidebara */
@media (min-width: 768px){
  .archive .site-main,
  .blog .site-main,
  .single-post .site-main{
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}