/**
 * Tema Lúdico para o PlayLudico
 * Este arquivo CSS transforma a aparência do site em um tema colorido e divertido
 */

:root {
    --ludico-roxo-principal: #881ddb;
    --ludico-turquesa: #3be9c3;
    --ludico-laranja: #ea5634;
    --ludico-off-white: #ffffea;
    --ludico-roxo-escuro: #390f4a;
    --ludico-azul-claro: #8bd8ff;
    --ludico-azul: #55adff;
    --ludico-amarelo: #ffdb4d;
    --ludico-verde: #76cc63;
    --ludico-rosa: #ff6c9c;
    --ludico-texto: #333333;
    --ludico-fundo: #ffffea;
    --ludico-sombra: rgba(136, 29, 219, 0.1);
}

/* Fundo do site */
body {
    background: var(--ludico-fundo);
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%2388d0ff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
    color: var(--ludico-texto);
    font-family: var(--font-body);
    font-weight: var(--font-regular);
}

/* Cabeçalho */
.custom-header {
    background: rgb(57,15,74) !important;
    border-bottom: none;
    box-shadow: 0 4px 15px var(--ludico-sombra);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.custom-header .top-bar {
    background: #fff !important;
    color: white;
    border-radius: 0 0 15px 15px;
    margin: 0 30px 10px 30px;
}

/* Logo */
.logo-header img {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.logo-header img:hover {
    transform: scale(1.15) rotate(2deg);
}

/* lines */
.sep-triangle{
    display: block;
    width: 100%;
    height: 44px;
    background: url(../images/line-triangle.png);
    position: relative;
    z-index: 10;
    margin: -4px 0 0;
}
.sep-lego{
    display: block;
    width: 100%;
    height: 77px;
    background: url(../images/line-lego.png);
    position: relative;
    z-index: 10;
    margin: -4px 0 0;
}

/* Botões e elementos de navegação */
.cart-button,
.user-login,
.user-logged-in,
.navicon i,
.main-navigation a {
    color: var(--ludico-texto);
    transition: all 0.3s ease;
}

.cart-button:hover,
.user-login:hover,
.user-logged-in:hover,
.navicon i:hover {
    color: var(--ludico-laranja);
    transform: scale(1.1);
}

/* Navegação Categorias */
nav.navbar{
    background-image: linear-gradient(to right, var(--ludico-laranja), var(--ludico-rosa)) !important;
}

/* Botões */
.button,
.button-primary,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button {
    background: var(--ludico-laranja);
    background: linear-gradient(135deg, var(--ludico-laranja) 0%, #ff9a45 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 25px;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(255, 122, 69, 0.4);
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.button:hover,
.button-primary:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background: linear-gradient(135deg, #ff9a45 0%, var(--ludico-laranja) 100%);
    transform: translateY(-3px);
    box-shadow: 0 7px 15px rgba(255, 122, 69, 0.5);
}

/* Cards e caixas */
.inside-article,
.widget,
.comments-area,
.page-header,
.woocommerce .product,
.woocommerce-products-header {
    background: white;
    border-radius: 20px;
    box-shadow: 0 5px 25px var(--ludico-sombra);
    overflow: hidden;
    border: none;
    transition: transform 0.3s ease;
}

.inside-article:hover,
.widget:hover {
    transform: translateY(-5px);
}

/* Títulos */
h1, h2, h3, h4, h5, h6 {
    color: var(--ludico-texto);
    font-weight: 700;
}

.entry-title,
.page-title {
    position: relative;
    display: inline-block;
    margin-bottom: 25px;
}

.entry-title:after,
.page-title:after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--ludico-azul) 0%, var(--ludico-verde) 100%);
    border-radius: 10px;
}

/* Produtos WooCommerce */
.woocommerce ul.products li.product {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px var(--ludico-sombra);
    padding: 15px;
    transition: all 0.3s ease;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-7px);
    box-shadow: 0 8px 25px var(--ludico-sombra);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 18px;
    padding: 10px 0;
}

.woocommerce ul.products li.product .price {
    color: var(--ludico-verde);
    font-size: 18px;
    font-weight: bold;
}

/* Rodapé */
.site-footer {
    background: linear-gradient(0deg, var(--ludico-azul-claro) 0%, var(--ludico-fundo) 100%);
    border-top: none;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin-top: 30px;
    padding-top: 15px;
    box-shadow: 0 -4px 15px var(--ludico-sombra);
}

.site-info {
    background: var(--ludico-azul);
    color: white;
    border-radius: 15px 15px 0 0;
    margin: 10px 30px 0 30px;
}

/* Animações */
@keyframes balanco {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}

.animated-title {
    animation: balanco 3s ease-in-out infinite;
    display: inline-block;
    transform-origin: center bottom;
}

/* Barra de navegação */
.main-navigation {
    background: white;
    border-radius: 15px;
    margin: 10px 0;
    box-shadow: 0 4px 10px var(--ludico-sombra);
}

.main-navigation .main-nav ul li a {
    border-radius: 10px;
    margin: 5px;
    transition: all 0.3s ease;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.sfHover > a {
    background-color: var(--ludico-amarelo);
    color: var(--ludico-texto);
}

/* Ícones temáticos para categorias */
.product-category:before {
    content: "🎮";
    font-size: 24px;
    display: block;
    margin-bottom: 10px;
}

.product-category.brinquedos:before { content: "🧸"; }
.product-category.jogos:before { content: "🎲"; }
.product-category.livros:before { content: "📚"; }
.product-category.educativos:before { content: "🔍"; }

/* Mensagem promocional */
.promo-banner {
    background: linear-gradient(135deg, var(--ludico-amarelo) 0%, var(--ludico-laranja) 100%);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 30px;
    color: var(--ludico-texto);
    text-align: center;
    font-size: 1.2em;
    box-shadow: 0 5px 15px var(--ludico-sombra);
}

/* Carousel de produtos */
.owl-carousel .owl-item {
    padding: 10px;
}

.owl-nav button.owl-prev,
.owl-nav button.owl-next {
    background-color: var(--ludico-azul) !important;
    color: white !important;
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    font-size: 24px !important;
    line-height: 30px !important;
    box-shadow: 0 3px 10px var(--ludico-sombra);
}

.owl-dots button.owl-dot span {
    background-color: var(--ludico-azul-claro) !important;
}

.owl-dots button.owl-dot.active span {
    background-color: var(--ludico-azul) !important;
}

/* Responsividade */
@media (max-width: 768px) {
    .site-header, .site-footer {
        border-radius: 15px;
    }
      .custom-header .top-bar,
    .site-info {
        margin: 0 15px;
    }
}

/* ====== TIPOGRAFIA LÚDICA ESPECÍFICA ====== */

/* Títulos principais com Sunny Spells */
h1,
.page-title,
.entry-title,
.site-title,
.hero-title {
    font-family: var(--font-title-fun);
    color: var(--ludico-roxo-principal);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

/* Subtítulos com Black to Black */
.subtitle,
.tagline,
.hero-subtitle,
h2.script-style,
.section-subtitle {
    font-family: var(--font-title-script);
    color: var(--ludico-laranja);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/* Navegação e botões com Fredoka Medium */
.main-navigation a,
.menu-item a,
.button,
.btn,
input[type="submit"] {
    font-family: var(--font-body);
    font-weight: var(--font-medium);
    letter-spacing: 0.5px;
}

/* Texto do corpo */
p,
.entry-content,
.widget-content,
li {
    font-family: var(--font-body);
    font-weight: var(--font-regular);
    line-height: 1.7;
    font-size: 1.2rem;
}

.widget ul li {
    font-size: 1rem;
}

.dropdown-item {
    font-size: 0.9rem;
}

.woocommerce-MyAccount-navigation-link a{
    font-size: 1rem;
}

details p{
    font-size: 0.9rem;
}
/* Preços com destaque */
.price,
.woocommerce-Price-amount,
.amount {
    font-family: var(--font-body);
    font-weight: var(--font-bold);
    color: var(--ludico-laranja);
    font-size: 1.25em;
}

/* Links importantes */
a.button-primary,
.wc-forward {
    font-family: var(--font-body);
    font-weight: var(--font-semibold);
}

/* Efeitos especiais para títulos */
.title-playful {
    background: linear-gradient(45deg, var(--ludico-roxo-principal), var(--ludico-turquesa));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleShine 3s ease-in-out infinite;
}

@keyframes titleShine {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}