/* ===== NAZWA USŁUGI ===== */
#sb_attribute_list_container .product-item .cap,
#sb_attribute_list_container .product-item .title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #21334F !important;
}

/* ===== CENA ===== */
#sb_attribute_list_container .product-item [class*="price"] {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #26D1CE !important;
}

/* ===== PO WYBORZE (jeszcze mocniej) ===== */
#sb_attribute_list_container .product-item:has(input[type="checkbox"]:checked) [class*="price"] {
  font-size: 20px !important;
  font-weight: 900 !important;
}

/* ===== OPIS MNIEJ WAŻNY ===== */
#sb_attribute_list_container .product-item .short,
#sb_attribute_list_container .product-item p {
  font-size: 13px !important;
  color: #6b7c93 !important;
}
/* ===== NOWOCZESNE KARTY ===== */
#sb_attribute_list_container .product-item.paid-attr__item {
  border: 1px solid #E8EEEE;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(33, 51, 79, 0.08);
  transition: background 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
}

/* ===== HOVER ===== */
#sb_attribute_list_container .product-item.paid-attr__item:hover {
  border-color: #26D1CE;
  box-shadow: 0 6px 18px rgba(33, 51, 79, 0.12);
}

/* ===== WYBRANY BOX (NAJWAŻNIEJSZE) ===== */
#sb_attribute_list_container .product-item.paid-attr__item:has(input[type="checkbox"]:checked) {
  background-color: #EFFFFE !important;
  border: 2px solid #26D1CE !important;
  box-shadow: 0 6px 18px rgba(38, 209, 206, 0.20);
}

/* ===== TEKST PO WYBORZE ===== */
#sb_attribute_list_container .product-item.paid-attr__item:has(input[type="checkbox"]:checked) .cap,
#sb_attribute_list_container .product-item.paid-attr__item:has(input[type="checkbox"]:checked) .title {
  color: #26D1CE;
  font-weight: 800;
}

/* ===== CENA ===== */
#sb_attribute_list_container .product-item [class*="price"] {
  font-size: 16px;
  font-weight: 700;
  color: #21334F;
}

/* ===== CENA PO WYBORZE ===== */
#sb_attribute_list_container .product-item:has(input[type="checkbox"]:checked) [class*="price"] {
  color: #26D1CE;
  font-weight: 800;
}

/* ===== CHECKBOX ===== */
#sb_attribute_list_container input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #26D1CE;
}
.badge.price {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #26D1CE !important;
}
/* DESKTOP + MOBILE – tylko nazwy usług */
.cap.short,
.tab.tab-col .cap.short,
.service-item .cap.short {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

/* MOBILE FIX (SimplyBook często zmienia strukturę) */
@media (max-width: 768px) {
    .cap.short,
    .tab.tab-col .cap.short,
    .service-item .cap.short {
        font-size: 22px !important;
    }
}
/* === PROMOTION CODE BOX === */
#sb_promotion_code,
.promotion-code,
.promo-code-input,
input[name="promotion_code"] {
    border: 2px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    background: #ffffff !important;
}

/* focus (kliknięcie) */
#sb_promotion_code:focus,
input[name="promotion_code"]:focus {
    border-color: #26D1CE !important;
    box-shadow: 0 0 0 3px rgba(38,209,206,0.15) !important;
    outline: none !important;
}

/* === APPLY BUTTON === */
#sb_apply_promotion,
button.apply-promo,
.promo-btn {
    background: linear-gradient(135deg, #26D1CE, #1bb3b0) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

/* hover efekt */
#sb_apply_promotion:hover,
button.apply-promo:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.15) !important;
}

/* === CAŁA SEKCJA === */
.promotion-code-wrapper,
#sb_invoice_promotion_container {
    background: #f9fafb !important;
    padding: 16px !important;
    border-radius: 14px !important;
    border: 1px solid #e5e7eb !important;
}

/* === LABEL === */
.promotion-code-wrapper label,
#sb_invoice_promotion_container label {
    font-weight: 600 !important;
    color: #21334F !important;
}
@media (max-width: 768px) {
    #sb_invoice_payment_systems_container .title,
    .invoice-payment-systems .title,
    .invoice-payment-systems-container .title {
        font-weight: 900 !important;
        font-size: 18px !important;
    }
}
/* WYŚRODKOWANIE PAY LATER */
[class*="delay"],
[class*="cash"] {
    text-align: center !important;
}

/* IKONA */
[class*="delay"]::before,
[class*="cash"]::before {
    display: block !important;
    margin: 0 auto 5px auto !important;
    text-align: center !important;
}

/* TEKST */
[class*="delay"]::after,
[class*="cash"]::after {
    display: block !important;
    text-align: center !important;
    margin: 8px auto 0 auto !important;
}

/* JEŚLI JEST IMG (banknot) */
[class*="delay"] img,
[class*="cash"] img {
    display: block !important;
    margin: 0 auto 5px auto !important;
}
/* PAY LATER - PREMIUM LOOK */
[class*="delay"],
[class*="cash"] {
    background: linear-gradient(135deg, #f0fffb 0%, #ffffff 100%) !important;
    border: 2px solid #00b894 !important;
    box-shadow: 0 10px 30px rgba(0,184,148,0.18) !important;
    position: relative !important;
}

/* IKONA 💷 DUŻA */
[class*="delay"]::before,
[class*="cash"]::before {
    content: "💷" !important;
    display: block !important;
    text-align: center !important;
    font-size: 42px !important;
    margin-bottom: 5px !important;
}

/* TEKST SELLING POINT */
[class*="delay"]::after,
[class*="cash"]::after {
    content: "Pay after service" !important;
    display: block !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #065f46 !important;
    margin-top: 5px !important;
}

/* BADGE */
[class*="delay"] span::before,
[class*="cash"] span::before {
    content: "No upfront payment" !important;
    position: absolute !important;
    top: -10px !important;
    left: 15px !important;
    background: #00b894 !important;
    color: #fff !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
}

/* HOVER */
[class*="delay"]:hover,
[class*="cash"]:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 15px 40px rgba(0,184,148,0.3) !important;
}

/* MOBILE FIX */
@media (max-width: 768px) {
    [class*="delay"]::before,
    [class*="cash"]::before {
        font-size: 36px !important;
    }
}
/* PAYMENT METHODS - PREMIUM SELECTED STATE */

/* kafelki płatności */
#sb_invoice_payment_systems_container .payment-system,
#sb_invoice_payment_systems_container [class*="payment-system"] {
    position: relative !important;
    background: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
}

/* hover komputer */
#sb_invoice_payment_systems_container .payment-system:hover,
#sb_invoice_payment_systems_container [class*="payment-system"]:hover {
    border-color: #26d1ce !important;
    box-shadow: 0 12px 30px rgba(38,209,206,0.22) !important;
}

/* wybrana metoda */
#sb_invoice_payment_systems_container .active,
#sb_invoice_payment_systems_container .selected,
#sb_invoice_payment_systems_container [class*="active"],
#sb_invoice_payment_systems_container [class*="selected"] {
    background: #eafffb !important;
    border: 3px solid #00b894 !important;
    box-shadow: 0 0 0 4px rgba(0,184,148,0.12),
                0 16px 36px rgba(0,184,148,0.25) !important;
}

/* badge selected */
#sb_invoice_payment_systems_container .active::after,
#sb_invoice_payment_systems_container .selected::after,
#sb_invoice_payment_systems_container [class*="active"]::after,
#sb_invoice_payment_systems_container [class*="selected"]::after {
    content: "✓ Selected" !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: #00b894 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 20px rgba(0,184,148,0.35) !important;
    z-index: 20 !important;
}

/* PAY LATER / CASH - ikonka */
#sb_invoice_payment_systems_container [class*="delay"] img,
#sb_invoice_payment_systems_container [class*="cash"] img {
    display: none !important;
}

#sb_invoice_payment_systems_container [class*="delay"]::before,
#sb_invoice_payment_systems_container [class*="cash"]::before {
    content: "💷" !important;
    display: block !important;
    text-align: center !important;
    font-size: 42px !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
}

/* mobile */
@media (max-width: 768px) {
    #sb_invoice_payment_systems_container .payment-system,
    #sb_invoice_payment_systems_container [class*="payment-system"] {
        border-radius: 22px !important;
        padding: 16px !important;
        margin-bottom: 16px !important;
    }

    #sb_invoice_payment_systems_container .active::after,
    #sb_invoice_payment_systems_container .selected::after,
    #sb_invoice_payment_systems_container [class*="active"]::after,
    #sb_invoice_payment_systems_container [class*="selected"]::after {
        top: 8px !important;
        right: 8px !important;
        font-size: 12px !important;
        padding: 5px 10px !important;
    }

    #sb_invoice_payment_systems_container [class*="delay"]::before,
    #sb_invoice_payment_systems_container [class*="cash"]::before {
        font-size: 38px !important;
    }
}
/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/
 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}


 #start_date-block-container .zend_form dt, start_date-block-container .zend_form dt b, start_date-block-container .zend_form dd label   {
	/* add your css rule here */
}