/*
Theme Name: Kindergarten Playschool Pro
Theme URI: https://www.themagnifico.net/products/playschool-wordpress-theme
Author: Themagnifico
Author URI: https://www.themagnifico.net/
Description: The Playschool WordPress Theme is a premium solution crafted to meet the needs of early childhood education centres, including preschools, daycare facilities, and nursery schools. Designed to enhance the online presence of institutions dedicated to young children, this premium theme offers a range of functionalities tailored for early learning environments. Its primary use is to create a professional and engaging website that showcases educational programs, promotes activities, and informs parents about the school’s offerings. Visually, the Playschool WordPress Theme is characterized by its bright, colourful design, which is both inviting and kid-friendly. The theme incorporates playful elements and cheerful colours that align with the joyful atmosphere of a preschool environment. High-quality images and illustrations of children engaged in various activities, such as arts and crafts, science experiments, and outdoor play, create a lively and appealing visual experience. The layout is designed to be intuitive and easy to navigate, ensuring that information is accessible and engaging for both parents and staff.
templates, pagination option and multiple inner page templates. You also have enable-disable option on all sections.
Version: 0.0.3
Requires at least: 5.0
Tested up to: 6.7
Requires PHP: 5.2.4
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kindergarten-playschool-pro
Tags: one-column, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, sticky-post, theme-options, threaded-comments
Kindergarten Playschool Pro WordPress Theme has been created by Themagnifico(themagnifico.net), 2023.
Kindergarten Playschool Pro WordPress Theme is released under the terms of GNU GPL

/* Basic Style */



@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Protest+Riot&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Protest+Riot&display=swap');
.bypostauthor {
  font-weight: 600;
}
/*--------- Site Loader --------------*/
.preloader {
  background: #fff;
  display: flex;
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 0;
  top: 0;
  position: fixed;
  z-index: 99999;
  justify-content: center;
  align-items: center;
}

.pencil {
  display: block;
  width: 60px;
  height: 10em;
}

.pencil__body1,
.pencil__body2,
.pencil__body3,
.pencil__eraser,
.pencil__eraser-skew,
.pencil__point,
.pencil__rotate,
.pencil__stroke {
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.pencil__body1,
.pencil__body2,
.pencil__body3 {
  transform: rotate(-90deg);
}

.pencil__body1 {
  animation-name: pencilBody1;
}

.pencil__body2 {
  animation-name: pencilBody2;
}

.pencil__body3 {
  animation-name: pencilBody3;
}

.pencil__eraser {
  animation-name: pencilEraser;
  transform: rotate(-90deg) translate(49px,0);
}

.pencil__eraser-skew {
  animation-name: pencilEraserSkew;
  animation-timing-function: ease-in-out;
}

.pencil__point {
  animation-name: pencilPoint;
  transform: rotate(-90deg) translate(49px,-30px);
}

.pencil__rotate {
  animation-name: pencilRotate;
}

.pencil__stroke {
  animation-name: pencilStroke;
  transform: translate(100px,100px) rotate(-113deg);
}

/* Animations */
@keyframes pencilBody1 {
  from,
	to {
    stroke-dashoffset: 351.86;
    transform: rotate(-90deg);
  }

  50% {
    stroke-dashoffset: 150.8;
 /* 3/8 of diameter */
    transform: rotate(-225deg);
  }
}

@keyframes pencilBody2 {
  from,
	to {
    stroke-dashoffset: 406.84;
    transform: rotate(-90deg);
  }

  50% {
    stroke-dashoffset: 174.36;
    transform: rotate(-225deg);
  }
}

@keyframes pencilBody3 {
  from,
	to {
    stroke-dashoffset: 296.88;
    transform: rotate(-90deg);
  }

  50% {
    stroke-dashoffset: 127.23;
    transform: rotate(-225deg);
  }
}

@keyframes pencilEraser {
  from,
	to {
    transform: rotate(-45deg) translate(49px,0);
  }

  50% {
    transform: rotate(0deg) translate(49px,0);
  }
}

@keyframes pencilEraserSkew {
  from,
	32.5%,
	67.5%,
	to {
    transform: skewX(0);
  }

  35%,
	65% {
    transform: skewX(-4deg);
  }

  37.5%, 
	62.5% {
    transform: skewX(8deg);
  }

  40%,
	45%,
	50%,
	55%,
	60% {
    transform: skewX(-15deg);
  }

  42.5%,
	47.5%,
	52.5%,
	57.5% {
    transform: skewX(15deg);
  }
}

@keyframes pencilPoint {
  from,
	to {
    transform: rotate(-90deg) translate(49px,-30px);
  }

  50% {
    transform: rotate(-225deg) translate(49px,-30px);
  }
}

@keyframes pencilRotate {
  from {
    transform: translate(100px,100px) rotate(0);
  }

  to {
    transform: translate(100px,100px) rotate(720deg);
  }
}

@keyframes pencilStroke {
  from {
    stroke-dashoffset: 439.82;
    transform: translate(100px,100px) rotate(-113deg);
  }

  50% {
    stroke-dashoffset: 164.93;
    transform: translate(100px,100px) rotate(-113deg);
  }

  75%,
	to {
    stroke-dashoffset: 439.82;
    transform: translate(100px,100px) rotate(112deg);
  }
}

aside.widget-area > aside ul.product-categories > li.cat-item, .elementor-widget-sidebar > .elementor-widget-container > aside ul.product-categories > li.cat-item {
    border-bottom: 1px solid #707070;
    padding: 10px 0;
}
.woocommerce-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px;
}

.product-card {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.product-card:hover {
    transform: scale(1.05);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.product-card img {
    width: 100%;
    height: auto;
    display: inline;
}

.product-info {
    padding: 1px;
    text-align: center;
}

.product-info h3 {
    font-size: 18px;
    margin: 10px 0;
}

.product-info .price {
    color: #28a745;
    font-weight: bold;
    font-size: 16px;
}

.product-info .description {
    font-size: 14px;
    color: #666;
    margin: 10px 0;
}

.product-info .button {
    display: inline-block;
    background: #C23519;
    color: #fff;
    font-weight: 500;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease-in-out;
}

.product-info .button:hover {
    background: #005f80;
}

.blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px;
}

.post-card {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.post-card:hover {
    transform: scale(1.05);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.post-card img {
    width: 100%;
    height: auto;
    display: block;
}

.post-info {
    padding: 15px;
font-weight : 500;
    text-align: left;
}

.post-info h3 {
    font-size: 18px;
    margin: 10px 0;
}

.post-info .date {
    font-size: 14px;
    color: #999;
    margin: 5px 0;
}

.post-info .description {
    font-size: 14px;
    color: #666;
    margin: 10px 0;
}

.post-info .button {
    display: inline-block;
    background: #0071a1;
    color: #fff;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease-in-out;
}

.post-info .button:hover {
    background: #005f80;
}

/* เริ่มต้นปรับแต่งให้แท็บมีรูปร่าง */
.side-product .tab-title {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}


/* สถานะที่เลือก (active) */
.side-product .tab-title.elementor-active {
    background-color: #0073e6; /* สีพื้นหลังเมื่อเลือก */
    color: white;
}

/* การปรับสไตล์เมื่ออยู่ในแท็บ */
.side-product .tab-title a {
    text-decoration: none;
    color: inherit;
}

.online-food-delivery-banner-section {
    display: flex;
    justify-content: center;
    align-items: center;
   // min-height: 100vh;
    text-align: center;
    padding: 20px;
}

.wp-block-cover__image-background {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.wp-block-cover__inner-container {
    max-width: 90%;
}

.woocommerce-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}

.product-card {
    background: white;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
}

@media (max-width: 768px) {
    .wp-block-cover__inner-container {
        max-width: 100%;
    }

    .woocommerce-products-grid {
        grid-template-columns: 1fr;
    }

    .product-card img {
        max-width: 100%;
        height: auto;
    }

}

/* ซ่อน Sidebar ในมือถือ */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        right: 0px;  /* เปลี่ยนจาก left เป็น right */
        top: 0;
        width: 200px;
        height: 100vh;
        background: #f8f9fa;
        transition: right 0.3s ease-in-out;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2); /* เปลี่ยนจาก 2px เป็น -2px */
        padding: 15px;
    }

    /* ปุ่ม Toggle */
    .sidebar-toggle-btn {
        position: fixed;
        top: 10px;
        right: 10px;  /* เปลี่ยนจาก left เป็น right */
        background: #007bff;
        color: white;
        border: none;
        padding: 10px 15px;
        cursor: pointer;
        z-index: 1000;
    }

    /* เมื่อ Sidebar เปิด */
    .sidebar.open {
        right: 0; /* เปลี่ยนจาก left เป็น right */
    }
}