/*
Theme Name: Vaporio
Theme URI: https://vaporio.pl
Author: Vaporio Team
Author URI: https://vaporio.pl
Description: Premium WooCommerce theme dla sklepu e-papierosów Vaporio. Ciemny, nowoczesny design z fioletowym akcentem.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
WC requires at least: 8.0
WC tested up to: 8.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vaporio
Tags: woocommerce, dark, ecommerce, custom-colors, custom-logo, featured-images, full-width-template, rtl-language-support, sticky-post, threaded-comments, translation-ready
*/

/* ═══════════════════════════════════════════
   CSS CUSTOM PROPERTIES
═══════════════════════════════════════════ */
:root {
    --vap-ink:        #0B0C1A;
    --vap-deep:       #12133A;
    --vap-card:       #1A1B38;
    --vap-card2:      #141528;
    --vap-violet:     #7B5CF0;
    --vap-violet2:    #9B7FF4;
    --vap-violet-dim: rgba(123,92,240,0.15);
    --vap-sky:        #5BC4E8;
    --vap-cream:      #F5F4FF;
    --vap-muted:      #8B8BAA;
    --vap-white:      #FFFFFF;
    --vap-border:     rgba(123,92,240,0.18);
    --vap-border2:    rgba(255,255,255,0.06);
    --vap-red:        #E84040;
    --vap-green:      #22C55E;
    --vap-gold:       #FFB800;

    --vap-radius-sm:  8px;
    --vap-radius:     12px;
    --vap-radius-lg:  20px;
    --vap-radius-xl:  28px;

    --vap-shadow:     0 4px 24px rgba(0,0,0,0.4);
    --vap-shadow-lg:  0 16px 48px rgba(0,0,0,0.5);
    --vap-glow:       0 4px 24px rgba(123,92,240,0.4);
    --vap-glow-lg:    0 8px 40px rgba(123,92,240,0.5);

    --vap-transition: 0.2s ease;

    --vap-grad:       linear-gradient(135deg, var(--vap-violet), #6040D0);
    --vap-grad-text:  linear-gradient(135deg, var(--vap-violet), var(--vap-sky));
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--vap-ink);
    color: var(--vap-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--vap-transition); }
ul, ol { list-style: none; }

/* ═══════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

h1 { font-size: clamp(36px, 5.5vw, 72px); }
h2 { font-size: clamp(28px, 4vw, 48px); }
h3 { font-size: clamp(20px, 2.5vw, 30px); }
h4 { font-size: 20px; }
h5 { font-size: 16px; }

p { color: var(--vap-muted); line-height: 1.7; }

/* Gradient text utility */
.vap-gradient-text {
    background: var(--vap-grad-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ═══════════════════════════════════════════
   LAYOUT UTILITIES
═══════════════════════════════════════════ */
.vap-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
}

@media (max-width: 768px) {
    .vap-container { padding: 0 20px; }
}

.vap-section {
    padding: 96px 0;
}

.vap-section-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--vap-violet2);
    margin-bottom: 14px;
    display: block;
}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.vap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: var(--vap-radius);
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: transform var(--vap-transition), box-shadow var(--vap-transition), background var(--vap-transition);
    text-decoration: none;
}

.vap-btn-primary {
    background: var(--vap-grad);
    color: var(--vap-white);
    box-shadow: var(--vap-glow);
}
.vap-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--vap-glow-lg);
    color: var(--vap-white);
}

.vap-btn-secondary {
    background: transparent;
    color: var(--vap-white);
    border: 1px solid rgba(255,255,255,0.2);
}
.vap-btn-secondary:hover {
    border-color: var(--vap-violet);
    background: var(--vap-violet-dim);
}

.vap-btn-ghost {
    background: var(--vap-card);
    color: var(--vap-white);
    border: 1px solid var(--vap-border);
}
.vap-btn-ghost:hover {
    border-color: var(--vap-violet);
    background: var(--vap-violet-dim);
}

/* WooCommerce button overrides */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background: var(--vap-grad) !important;
    color: var(--vap-white) !important;
    border: none !important;
    border-radius: var(--vap-radius) !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    padding: 13px 24px !important;
    box-shadow: var(--vap-glow) !important;
    transition: transform var(--vap-transition), box-shadow var(--vap-transition) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--vap-glow-lg) !important;
    color: var(--vap-white) !important;
}

/* ═══════════════════════════════════════════
   CARDS
═══════════════════════════════════════════ */
.vap-card {
    background: var(--vap-card);
    border: 1px solid var(--vap-border);
    border-radius: var(--vap-radius-lg);
    transition: transform var(--vap-transition), box-shadow var(--vap-transition), border-color var(--vap-transition);
}
.vap-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--vap-shadow-lg);
    border-color: var(--vap-violet);
}

/* ═══════════════════════════════════════════
   BADGES
═══════════════════════════════════════════ */
.vap-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    color: var(--vap-white);
}
.vap-badge-hot   { background: var(--vap-violet); }
.vap-badge-sale  { background: var(--vap-red); }
.vap-badge-new   { background: var(--vap-green); }

/* ═══════════════════════════════════════════
   FORMS
═══════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
select,
textarea {
    background: var(--vap-card);
    border: 1px solid var(--vap-border);
    border-radius: var(--vap-radius-sm);
    color: var(--vap-white);
    font-family: inherit;
    font-size: 14px;
    padding: 12px 16px;
    width: 100%;
    transition: border-color var(--vap-transition);
    -webkit-appearance: none;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--vap-violet);
    box-shadow: 0 0 0 3px rgba(123,92,240,0.15);
}
input::placeholder, textarea::placeholder { color: var(--vap-muted); }
label { font-size: 13px; font-weight: 600; color: var(--vap-muted); display: block; margin-bottom: 6px; letter-spacing: 0.5px; }

/* ═══════════════════════════════════════════
   WOOCOMMERCE GLOBAL OVERRIDES
═══════════════════════════════════════════ */
.woocommerce,
.woocommerce-page {
    background: var(--vap-ink);
    color: var(--vap-white);
}

/* Stars */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
    color: var(--vap-gold) !important;
}
.woocommerce .star-rating { color: var(--vap-gold); }

/* Notices */
.woocommerce-message,
.woocommerce-info {
    background: var(--vap-card) !important;
    border-top-color: var(--vap-violet) !important;
    color: var(--vap-white) !important;
}
.woocommerce-error {
    background: rgba(232,64,64,0.1) !important;
    border-top-color: var(--vap-red) !important;
    color: var(--vap-white) !important;
}

/* Price */
.woocommerce .price,
.woocommerce-Price-amount { color: var(--vap-white) !important; }
ins .woocommerce-Price-amount { color: var(--vap-white) !important; }
del .woocommerce-Price-amount { color: var(--vap-muted) !important; }

/* Tables */
.woocommerce table.shop_table {
    background: var(--vap-card);
    border: 1px solid var(--vap-border);
    border-radius: var(--vap-radius-lg);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    color: var(--vap-white);
}
.woocommerce table.shop_table th {
    background: rgba(123,92,240,0.1);
    color: var(--vap-muted);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 14px 20px;
    border-bottom: 1px solid var(--vap-border);
}
.woocommerce table.shop_table td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--vap-border2);
    vertical-align: middle;
}
.woocommerce table.shop_table tr:last-child td { border-bottom: none; }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    background: var(--vap-card) !important;
    border-color: var(--vap-border) !important;
    color: var(--vap-muted) !important;
    border-radius: var(--vap-radius-sm) !important;
    margin: 0 4px !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--vap-violet) !important;
    border-color: var(--vap-violet) !important;
    color: var(--vap-white) !important;
}

/* ═══════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--vap-ink); }
::-webkit-scrollbar-thumb { background: var(--vap-violet); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--vap-violet2); }

/* ═══════════════════════════════════════════
   ACCESSIBILITY
═══════════════════════════════════════════ */
:focus-visible {
    outline: 2px solid var(--vap-violet);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════
   RESPONSIVE HELPERS
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .vap-section { padding: 64px 0; }
}
@media (max-width: 768px) {
    .vap-section { padding: 48px 0; }
}

/* ═══════════════════════════════════════════
   SIDEBAR CONTACT
═══════════════════════════════════════════ */

.site-header{
  position: relative;
  z-index: 1000;
}

.site-header__inner{
  position: relative;
  min-height: 80px;
}

.site-logo{
  display: inline-block;
  text-decoration: none;
}

.contact-radial{
  position: fixed;
  left: -27px;
  top: 46%;
  width: 54px;
  height: 54px;
  z-index: 99999;
  overflow: visible;
}

.contact-radial__check{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.contact-radial__btn{
  position: absolute;
  inset: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #9d00ff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  border: 3px solid rgba(255,255,255,.12);
  z-index: 3;
  transition: transform .22s ease;
}

.contact-radial__items{
  position: absolute;
  inset: 0;
  z-index: 2;
}

.contact-radial__item{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 42px;
  margin-left: -21px;
  margin-top: -21px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  opacity: 0;
  transform: scale(0.85) translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
  pointer-events: auto;
}

.contact-radial__check:checked ~ .contact-radial__items .contact-radial__item,
.contact-radial:hover .contact-radial__item{
  opacity: 1;
  transform: scale(1) translateY(0);
}

.contact-radial:hover .contact-radial__btn,
.contact-radial__check:checked + .contact-radial__btn{
  transform: rotate(8deg) scale(1.03);
}

.contact-radial__item:hover{
  transform: scale(1.08) translateY(-2px);
}

.tg{background:#229ED9;}
.sg{background:#3A76F0;}
.fb{background:#4267B2;}
.ig{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);}

@media (max-width: 768px){
  .contact-radial{
    left: -27px;
    top: auto;
    bottom: 18px;
  }
}
}