/* TV Site Plugin — buttons.css */

/*
 * Привязка к Elementor Global Colors:
 *   --e-global-color-primary    = #C9A227  (Primary)
 *   --e-global-color-secondary  = #A07D10  (Secondary / hover)
 *   --e-global-color-text       = #DADADA  (Text)
 *   --e-global-color-accent     = #F0F0F0  (Accent / Headings)
 *
 * Custom colors (Elementor ID неизвестен — используем hex напрямую):
 *   Textonbright  #0D0D0D  — текст на ярком фоне
 *   Bodycolor     #1E1E1E  — фон страницы
 *   FormStrokes   #CCCCCC
 *   Greytext      #E6E6E6
 */

:root {
    --tv-btn-primary-bg:      var(--e-global-color-primary,   #C9A227);
    --tv-btn-primary-hover:   var(--e-global-color-secondary, #A07D10);
    --tv-btn-primary-color:   #121212;   /* Textonbright */

    --tv-btn-radius:      50px;
    --tv-btn-padding:     0px 28px;
    --tv-btn-font-size:   14px;
    --tv-btn-font-weight: 700;
    --tv-btn-transition:  0.2s ease;

    /* Filter buttons */
    --tv-filter-btn-active-bg:    var(--e-global-color-primary,   #C9A227);
    --tv-filter-btn-active-color: #0D0D0D;
    --tv-filter-btn-radius:       50px;
    --tv-filter-btn-padding:      8px 20px;
}

/* ── Primary (.ybtn) ──────────────────────────────────────────────────────── */

.ybtn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    /* Кнопка без кружка */
    background:      var(--tv-btn-primary-bg);
    color:           #121212 !important;
    border:          none;
    border-radius:   var(--tv-btn-radius);
    padding:         0 28px;
    height:          50px !important;
    min-height:      50px !important;
    font-size:       16px;
    font-weight:     500;
    line-height:     1;
    cursor:          pointer;
    text-decoration: none;
    transition:      background var(--tv-btn-transition),
                     transform  var(--tv-btn-transition);
    white-space:     nowrap;
}

.ybtn:hover,
.ybtn:focus-visible {
    background:      var(--tv-btn-primary-hover);
    color:           var(--tv-btn-primary-color) !important;
    transform:       translateY(-2px);
    box-shadow:      0 6px 20px rgba(201, 162, 39, 0.35);
    outline:         none;
    text-decoration: none;
}

.ybtn:active {
    transform:  translateY(0);
    box-shadow: none;
}

/* ── Secondary / Outline (.tbtn) ──────────────────────────────────────────── */

.tbtn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    background:      transparent;
    color:           var(--tv-btn-primary-bg);
    border:          2px solid var(--tv-btn-primary-bg);
    border-radius:   var(--tv-btn-radius);
    padding:         0 28px;
    height:          50px !important;
    min-height:      50px !important;
    font-size:       16px;
    font-weight:     500;
    line-height:     1;
    cursor:          pointer;
    text-decoration: none;
    transition:      background  var(--tv-btn-transition),
                     color       var(--tv-btn-transition),
                     border-color var(--tv-btn-transition),
                     transform   var(--tv-btn-transition),
                     box-shadow  var(--tv-btn-transition);
    white-space:     nowrap;
}

.tbtn:hover,
.tbtn:focus-visible {
    background:      var(--tv-btn-primary-bg);
    color:           var(--tv-btn-primary-color);
    border-color:    var(--tv-btn-primary-bg);
    transform:       translateY(-2px);
    box-shadow:      0 6px 20px rgba(201, 162, 39, 0.35);
    outline:         none;
    text-decoration: none;
}

.tbtn:active {
    transform:  translateY(0);
    box-shadow: none;
}

/* ── Filter buttons (loop widget) ─────────────────────────────────────────── */

.tvs-filter-btn {
    display:       inline-flex;
    align-items:   center;
    background:    transparent;
    color:         var(--e-global-color-text, #DADADA);
    border:        1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--tv-filter-btn-radius);
    padding:       var(--tv-filter-btn-padding);
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background    var(--tv-btn-transition),
                   color         var(--tv-btn-transition),
                   border-color  var(--tv-btn-transition);
    white-space:   nowrap;
}

.tvs-filter-btn:hover {
    background:   rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
}

.tvs-filter-btn.active {
    background:   var(--tv-filter-btn-active-bg);
    color:        var(--tv-filter-btn-active-color);
    border-color: transparent;
}

.tvs-filter-btn.active:hover {
    background: var(--tv-btn-primary-hover);
}

/* ── Button icon circle (снаружи кнопки) ─────────────────────────────────── */

/* Обёртка: кнопка + кружок в одну строку */
.tvs-btn-wrap {
    display:        inline-flex;
    align-items:    center;
    gap:            0;
    cursor:         pointer;
    transition:     transform 0.2s ease, filter 0.2s ease;
}

.tvs-btn-icon-circle {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           50px;
    height:          50px;
    border-radius:   50%;
    background:      var(--tv-btn-primary-bg);
    flex-shrink:     0;
    transition:      background var(--tv-btn-transition),
                     transform  var(--tv-btn-transition),
                     box-shadow var(--tv-btn-transition);
    cursor:          pointer;
    border:          none;
    text-decoration: none;
}

.tvs-btn-icon-circle svg {
    stroke: #121212;
    color:  #121212;
    width:  20px;
    height: 20px;
}

/* ── Общий hover на обёртке — кнопка + кружок реагируют вместе ──────────── */

/* Сброс индивидуальных transform на детях чтобы не конфликтовало */
.tvs-btn-wrap .ybtn,
.tvs-btn-wrap .tbtn,
.tvs-btn-wrap .tvs-btn-icon-circle {
    transform:  none !important;
    box-shadow: none !important;
}

.tvs-btn-wrap:hover .ybtn,
.tvs-btn-wrap:hover .tbtn,
.tvs-btn-wrap:focus-within .ybtn,
.tvs-btn-wrap:focus-within .tbtn {
    background:   #A07D10 !important;
    color:        #121212 !important;
    border-color: #A07D10 !important;
}

.tvs-btn-wrap:hover .tvs-btn-icon-circle,
.tvs-btn-wrap:focus-within .tvs-btn-icon-circle {
    background:   #A07D10 !important;
    border-color: #A07D10 !important;
}

.tvs-btn-wrap:hover .tvs-btn-icon-circle svg,
.tvs-btn-wrap:hover .tvs-btn-icon-circle svg path,
.tvs-btn-wrap:focus-within .tvs-btn-icon-circle svg,
.tvs-btn-wrap:focus-within .tvs-btn-icon-circle svg path {
    stroke: #121212 !important;
}

.tvs-btn-wrap:hover,
.tvs-btn-wrap:focus-within {
    transform: translateY(-2px);
    filter:    drop-shadow(0 6px 16px rgba(160, 125, 16, 0.45));
}

/* ── Elementor Pro Form — стили кнопок по CSS-классу ─────────────────────── */
/* Добавляй класс кнопке в Form → Button → Advanced → CSS Classes           */
/* tvs-form-ybtn  — жёлтая с кружком                                        */
/* tvs-form-tbtn  — outline                                                  */

/* ── tvs-form-ybtn ── */

.tvs-form-ybtn .elementor-button-wrapper {
    display:     inline-flex !important;
    align-items: center !important;
    gap:         0 !important;
}

.tvs-form-ybtn .elementor-button[type="submit"] {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    background:      var(--tv-btn-primary-bg) !important;
    color:           #121212 !important;
    border:          none !important;
    border-radius:   var(--tv-btn-radius) !important;
    padding:         0 28px !important;
    height:          50px !important;
    font-size:       16px !important;
    font-weight:     500 !important;
    line-height:     1 !important;
    cursor:          pointer !important;
    transition:      background var(--tv-btn-transition),
                     transform  var(--tv-btn-transition) !important;
    white-space:     nowrap !important;
    width:           auto !important;
    flex:            none !important;
}

.tvs-form-ybtn .elementor-button[type="submit"] .elementor-button-icon {
    display: none !important;
}

.tvs-form-ybtn .elementor-button-wrapper {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.tvs-form-ybtn .elementor-button-wrapper:hover {
    transform: translateY(-2px);
    filter:    drop-shadow(0 6px 16px rgba(160, 125, 16, 0.45));
}

.tvs-form-ybtn .elementor-button-wrapper:hover .elementor-button[type="submit"] {
    background: #A07D10 !important;
}

.tvs-form-ybtn .elementor-button-wrapper:hover .tvs-form-btn-circle {
    background: #A07D10 !important;
}

/* Иконка в кружке формы — чёрная */
.tvs-form-btn-circle {
    background: var(--tv-btn-primary-bg) !important;
    color:      #121212 !important;
}

.tvs-form-btn-circle svg {
    stroke: #121212 !important;
    color:  #121212 !important;
    width:  20px;
    height: 20px;
}

/* ── tvs-form-tbtn ── */

.tvs-form-tbtn .elementor-button-wrapper {
    display:     inline-flex !important;
    align-items: center !important;
}

.tvs-form-tbtn .elementor-button[type="submit"] {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    background:      transparent !important;
    color:           var(--tv-btn-primary-bg) !important;
    border:          2px solid var(--tv-btn-primary-bg) !important;
    border-radius:   var(--tv-btn-radius) !important;
    padding:         0 28px !important;
    height:          50px !important;
    font-size:       16px !important;
    font-weight:     500 !important;
    line-height:     1 !important;
    cursor:          pointer !important;
    transition:      background var(--tv-btn-transition),
                     color      var(--tv-btn-transition),
                     transform  var(--tv-btn-transition) !important;
    white-space:     nowrap !important;
    width:           auto !important;
    flex:            none !important;
}

.tvs-form-tbtn .elementor-button[type="submit"] .elementor-button-icon {
    display: none !important;
}

.tvs-form-tbtn .elementor-button-wrapper:hover .elementor-button[type="submit"] {
    background: var(--tv-btn-primary-bg) !important;
    color:      #121212 !important;
    transform:  translateY(-2px) !important;
}

/* ── Elementor Form — Acceptance checkbox ────────────────────────────────── */

.elementor-field-type-acceptance .elementor-field-label::before,
.elementor-field-type-acceptance .elementor-checkbox label::before {
    border-color: var(--tv-btn-primary-bg) !important;
}

/* Чекбокс отмечен */
.elementor-field-type-acceptance input[type="checkbox"]:checked + .elementor-field-label::before,
.elementor-field-type-acceptance input[type="checkbox"]:checked ~ label::before {
    background-color: var(--tv-btn-primary-bg) !important;
    border-color:     var(--tv-btn-primary-bg) !important;
}

/* Нативный чекбокс если Elementor не заменяет */
.elementor-field-type-acceptance input[type="checkbox"] {
    accent-color: var(--tv-btn-primary-bg) !important;
}

/* ── Secondary button circle ──────────────────────────────────────────────── */

.tvs-btn-wrap:has(.tbtn) .tvs-btn-icon-circle {
    background:   transparent;
    border:       2px solid var(--tv-btn-primary-bg);
    width:        50px;
    height:       50px;
}

.tvs-btn-wrap:has(.tbtn) .tvs-btn-icon-circle svg,
.tvs-btn-wrap:has(.tbtn) .tvs-btn-icon-circle svg path {
    stroke: var(--tv-btn-primary-bg) !important;
    color:  var(--tv-btn-primary-bg) !important;
}

.tvs-btn-wrap:has(.tbtn):hover .tvs-btn-icon-circle {
    background:   var(--tv-btn-primary-bg) !important;
    border-color: var(--tv-btn-primary-bg) !important;
}

.tvs-btn-wrap:has(.tbtn):hover .tvs-btn-icon-circle svg {
    stroke: #121212 !important;
}