/*=======================================================================
  Global custom CSS  - SNP TEAM LTD
  Автор: Павел | ревизия 1.0 · 22 юли 2025
  -----------------------------------------------------------------------
  1. Таймер за обратно броене – по-голямо разстояние и по-широки стойности
=======================================================================*/


/* Мобилен таймер само на SHOP (архив) страница */
@media (max-width: 767px) {
  body.woocommerce-shop .wd-product-countdown,
  body.post-type-archive-product .wd-product-countdown {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    gap: 6px;
    margin: 10px 0;
  }

  body.woocommerce-shop .wd-product-countdown > span,
  body.post-type-archive-product .wd-product-countdown > span {
    display: inline-block !important;
    text-align: center;
  }

  body.woocommerce-shop .wd-product-countdown .wd-timer-value,
  body.post-type-archive-product .wd-product-countdown .wd-timer-value {
    display: block;
    width: 28px;
    height: 22px;
    line-height: 22px;
    font-weight: bold;
    background-color: #f2f2f2;
    border-radius: 5px 5px 0 0;
    box-sizing: border-box;
    font-size: 11px;
    text-align: center;
  }

  body.woocommerce-shop .wd-product-countdown .wd-timer-text,
  body.post-type-archive-product .wd-product-countdown .wd-timer-text {
    display: block;
    width: 28px;
    height: 16px;
    line-height: 16px;
    background-color: #e5e5e5;
    border-radius: 0 0 5px 5px;
    font-size: 10px;
    box-sizing: border-box;
    margin-top: 1px;
    text-align: center;
  }
}

/* Таймер – таблет версия (768px – 1024px) --- −15% от десктоп размера */
@media (min-width: 768px) and (max-width: 1024px) {
    .wd-product-countdown {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin: 10px 0;
    }

    .wd-product-countdown .wd-timer-value {
        display: block;
        width: 43px;      /* −15% от 50px */
        height: 28px;     /* −15% от 33px */
        line-height: 28px;
        font-weight: bold;
        background-color: #f2f2f2;
        border-radius: 6px 6px 0 0;
        box-sizing: border-box;
        font-size: 14px;  /* −15% от 16px */
        text-align: center;
    }

    .wd-product-countdown .wd-timer-text {
        display: block;
        width: 43px;      /* −15% от 50px */
        height: 19px;     /* −15% от 22px */
        line-height: 19px;
        background-color: #e5e5e5;
        border-radius: 0 0 6px 6px;
        font-size: 12px;  /* −15% от 14px */
        box-sizing: border-box;
        margin-top: 2px;
        text-align: center;
    }
}

/* Таймер – десктоп версия --- ЗА МАГАЗИН ЧАСТТА --- (−10%) */
@media (min-width: 1025px) {
    /* Разстояние между всяко кубче */
    .wd-product-countdown > span {
        display: inline-block;
        margin-right: 6px;
        text-align: center;
    }

    /* Числовата стойност – горната част на кубчето */
    .wd-product-countdown .wd-timer-value {
        display: block;
        width: 45px;      /* −10% от 50px */
        height: 30px;     /* −10% от 33px */
        line-height: 30px;
        font-weight: bold;
        background-color: #f2f2f2;
        border-radius: 6px 6px 0 0;
        box-sizing: border-box;
        font-size: 14px;  /* −10% от 16px */
        text-align: center;
        box-shadow: 0 0 0 2px #fff;
    }

    /* Текстовата част – долната част на кубчето */
    .wd-product-countdown .wd-timer-text {
        display: block;
        width: 45px;      /* −10% от 50px */
        height: 20px;     /* −10% от 22px */
        line-height: 20px;
        background-color: #e5e5e5;
        border-radius: 0 0 6px 6px;
        font-size: 13px;  /* −10% от 14px (закръглено) */
        box-sizing: border-box;
        text-align: center;
        box-shadow: 0 0 0 2px #fff;
    }
}