/**
 * Bubblos teema baas — globaalsed stiilid, tüpograafia, taust.
 *
 * Kõik värvid ja muutujad tulevad theme.json kaudu CSS-muutujatena
 * (var(--wp--preset--color--*), var(--wp--preset--font-family--*)).
 *
 * Komponentide CSS-id (single-product.css, pictograms.css jne)
 * kasutavad samasid muutujaid ja muutuvad automaatselt, kui paletti uuendada.
 */

/* ───────────────────────────────────────────────────────────────────
 * Baas
 * ─────────────────────────────────────────────────────────────────── */

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--wp--preset--color--circus-teal-soft);
    color: var(--wp--preset--color--body-text);
    font-family: var(--wp--preset--font-family--roboto);
    font-size: 1rem;
    line-height: 1.6;

    /* Grunge-tekstuur CSS-iga, mitte image. Mitu kihti radial-gradient'e annavad
     * vintage-paber'i tunde ilma bandwidth-koormuseta. */
    background-image:
        radial-gradient(circle at 20% 30%, rgba(139, 111, 58, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(196, 109, 64, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(90, 154, 168, 0.02) 0%, transparent 70%);
    background-attachment: fixed;
}

/* Globaalne aksendi-värv WC ja WP plokkide jaoks */
:root {
    --bubblos-accent: var(--wp--preset--color--carnival-orange);
    --bubblos-accent-hover: var(--wp--preset--color--carnival-orange-dark);
    --bubblos-brand: var(--wp--preset--color--brass-gold);
    --bubblos-text: var(--wp--preset--color--body-text);
    --bubblos-text-light: var(--wp--preset--color--body-text-light);
    --bubblos-panel: var(--wp--preset--color--vintage-cream);
    --bubblos-panel-dark: var(--wp--preset--color--circus-teal-dark);
    --bubblos-border: rgba(139, 111, 58, 0.18);
    --bubblos-shadow: 0 8px 24px rgba(26, 52, 56, 0.12);
    --bubblos-radius-sm: 4px;
    --bubblos-radius-md: 8px;
    --bubblos-radius-lg: 12px;
}

/* ───────────────────────────────────────────────────────────────────
 * Pealkirjad — Posada display
 * ─────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--wp--preset--font-family--posada);
    font-weight: 400;
    color: var(--wp--preset--color--deep-charcoal);
    letter-spacing: 0.005em;
}

/* ───────────────────────────────────────────────────────────────────
 * Paneelid — kreem-paber, mille peal sisu kuvatakse
 * Üldine wrapper kõikidele kasti-stiilis elementidele
 * ─────────────────────────────────────────────────────────────────── */

.bubblos-panel {
    background-color: var(--bubblos-panel);
    border-radius: var(--bubblos-radius-lg);
    box-shadow: var(--bubblos-shadow);
    padding: 1.5rem;
}

/* ───────────────────────────────────────────────────────────────────
 * Nupud — globaalne stiil, mille üle saab eraldi komponendid override'ida
 * ─────────────────────────────────────────────────────────────────── */

.bubblos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: var(--bubblos-accent);
    color: var(--wp--preset--color--white);
    border: 2px solid transparent;
    border-radius: var(--bubblos-radius-md);
    font-family: var(--wp--preset--font-family--posada);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.bubblos-btn:hover,
.bubblos-btn:focus-visible {
    background: var(--bubblos-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(232, 136, 56, 0.3);
    color: var(--wp--preset--color--white);
    outline: none;
}

.bubblos-btn--secondary {
    background: transparent;
    color: var(--bubblos-accent);
    border-color: var(--bubblos-accent);
}

.bubblos-btn--secondary:hover,
.bubblos-btn--secondary:focus-visible {
    background: var(--bubblos-accent);
    color: var(--wp--preset--color--white);
    box-shadow: 0 8px 20px rgba(232, 136, 56, 0.2);
}

.bubblos-btn--ghost {
    background: transparent;
    color: var(--bubblos-text);
    border-color: var(--bubblos-border);
}

.bubblos-btn--ghost:hover,
.bubblos-btn--ghost:focus-visible {
    background: var(--bubblos-panel);
    color: var(--bubblos-text);
    box-shadow: var(--bubblos-shadow);
}

/* ───────────────────────────────────────────────────────────────────
 * Vintage-rooste-aksendid (riveted corners, ribbons)
 * Optionaalne — kasutame ainult mõnele plokile (track-cards homepage'is)
 * ─────────────────────────────────────────────────────────────────── */

.bubblos-rivet {
    width: 6px;
    height: 6px;
    background: var(--bubblos-brand);
    border: 1px solid var(--wp--preset--color--brass-dark);
    border-radius: 50%;
    position: absolute;
}

.bubblos-rivet--tl { top: 8px;    left: 8px; }
.bubblos-rivet--tr { top: 8px;    right: 8px; }
.bubblos-rivet--bl { bottom: 8px; left: 8px; }
.bubblos-rivet--br { bottom: 8px; right: 8px; }

/* ───────────────────────────────────────────────────────────────────
 * WC Blocks tugi — anname uutele plokkidele Bubblos-paleti
 * ─────────────────────────────────────────────────────────────────── */

.wc-block-button-text,
.wp-block-button .wp-element-button {
    background: var(--bubblos-accent);
    color: var(--wp--preset--color--white);
    border-radius: var(--bubblos-radius-md);
}

.wp-block-button.is-style-outline .wp-element-button {
    background: transparent;
    color: var(--bubblos-accent);
    border: 2px solid var(--bubblos-accent);
}

/* Footer: hind + CTA kõrvuti */
.bubblos-prod-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bubblos-prod-card__cta {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--wp--preset--color--carnival-orange);
    color: var(--wp--preset--color--white);
    border-radius: var(--bubblos-radius-md);
    font-family: var(--wp--preset--font-family--posada);
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    transition: all 0.2s ease;
}

.bubblos-prod-card:hover .bubblos-prod-card__cta {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Mode-spetsiifilised värvid */
.bubblos-prod-card__cta--kohale {
    background: var(--wp--preset--color--circus-teal-dark);
}

.bubblos-prod-card__cta--rent {
    background: var(--wp--preset--color--carnival-orange);
}

.bubblos-prod-card__cta--osta {
    background: var(--wp--preset--color--sage-green);
}



.bubblos-page-content-cream  .wp-block-post-content {
    margin-top: 4rem;
    background: var(--bubblos-panel);
    padding: 1.5rem;
    border-radius: var(--bubblos-radius-lg);
    box-shadow: var(--bubblos-shadow);
}

.bubblos-legal .wp-block-post-content {
 max-width: 900px; 
}

.bubblos-page-legal p,
.bubblos-page-legal ol,
.bubblos-page-legal ul {
    line-height: 1.7;  
}

.bubblos-legal strong {
    font-weight: 400; 
    font-family: var(--wp--preset--font-family--posada);
    font-size: 1.4rem;
}

.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp {
    background: var(--bubblos-panel) !important;
  
}


.dgwt-wcas-search-wrapp .dgwt-wcas-search-form {
    background: var(--wp--preset--color--vintage-cream) !important;
    border: 2px solid var(--wp--preset--color--brass-gold) !important;
    border-radius: var(--bubblos-radius-md) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
    padding: 0.4rem !important;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-search-input {
    background: var(--wp--preset--color--white) !important;
    border: 2px solid transparent !important;
    border-radius: var(--bubblos-radius-md) !important;
    font-family: var(--wp--preset--font-family--roboto) !important;
    font-size: 1rem !important;
    color: var(--wp--preset--color--deep-charcoal) !important;
    
}

.dgwt-wcas-search-filled .dgwt-wcas-search-input {
    padding: 0.6rem 0.9rem  !important;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-search-input:focus {
    border-color: var(--wp--preset--color--carnival-orange) !important;
    outline: none !important;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-search-input::placeholder {
    color: var(--wp--preset--color--body-text-light) !important;
    opacity: 0.7;
}

/* Submit button */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit {
    background: var(--wp--preset--color--carnival-orange) !important;
    color: var(--wp--preset--color--white) !important;
    border-radius: var(--bubblos-radius-md) !important;
    transition: background 0.15s ease !important;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit:hover {
    background: var(--wp--preset--color--carnival-orange-dark) !important;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit svg {
    fill: var(--wp--preset--color--white) !important;
}

/* Suggestions dropdown */

.dgwt-wcas-suggestions-wrapp {
    background: var(--wp--preset--color--vintage-cream) !important;
    border: 2px solid var(--wp--preset--color--brass-gold) !important;
    border-radius: var(--bubblos-radius-md) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2) !important;
    margin-top: 0.5rem !important;
    overflow: hidden !important;
}

.dgwt-wcas-suggestion {
    background: transparent !important;
    border-bottom: 1px solid rgba(201, 162, 92, 0.2) !important;
    padding: 0.85rem 1rem !important;
    transition: background 0.15s ease !important;
}

.dgwt-wcas-suggestion:hover,
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-active {
    background: var(--wp--preset--color--vintage-paper) !important;
}

.dgwt-wcas-suggestion:last-child {
    border-bottom: none !important;
}

.dgwt-wcas-st-title {
    color: var(--wp--preset--color--deep-charcoal) !important;
    font-family: var(--wp--preset--font-family--roboto) !important;
    font-weight: 500 !important;
}

.dgwt-wcas-st-price {
    color: var(--wp--preset--color--carnival-orange-dark) !important;
    font-weight: 600 !important;
}

/* Headings tulemustes */
.dgwt-wcas-suggestion-headline {
    background: var(--wp--preset--color--vintage-paper) !important;
    color: var(--wp--preset--color--brass-dark) !important;
    font-family: var(--wp--preset--font-family--posada) !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 0.6rem 1rem !important;
}

/* Details panel (kui Pro on aktiivne) */
.dgwt-wcas-details-wrapp {
    background: var(--wp--preset--color--vintage-cream) !important;
}

/* Mobile overlay */
.dgwt-wcas-overlay-mobile {
    background: rgba(26, 52, 56, 0.6) !important;
}

.dgwt-wcas-overlay-mobile .dgwt-wcas-search-form-wrapp {
    background: var(--wp--preset--color--vintage-cream) !important;
}

/* Sulgemise-nupp mobile-overlay'is */
.dgwt-wcas-close {
    color: var(--wp--preset--color--deep-charcoal) !important;
}

/* Preloader */
.dgwt-wcas-preloader .dgwt-wcas-loader-circular-path {
    stroke: var(--wp--preset--color--carnival-orange) !important;
}

.dgwt-wcas-style-pirx.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
    left: auto;
    right: 28px;
    pointer-events: auto;
    animation: fadeIn 300ms;
}


@keyframes bubblos-bubble-float {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.7;
    }
    25% {
        transform: translateY(-12px) translateX(6px) scale(1.04);
        opacity: 0.9;
    }
    50% {
        transform: translateY(-18px) translateX(-4px) scale(0.96);
        opacity: 0.8;
    }
    75% {
        transform: translateY(-8px) translateX(8px) scale(1.02);
        opacity: 0.85;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bubblos-newsletter__bubble {
        animation: none;
    }
}