/*
Theme Name: Interaktywni Event
Theme URI: https://inter-aktywni.pl
Description: Motyw Eventowy InteAktywni @Astra_Theme
Author: Sławek Nazaruk
Author URI: https://inter-aktywni.pl
Template: astra
Version: 1.0.0
*/


/* stylowanie wykladowców */
 
 /* style.css w motywie pochodnym */
@import url('https://fonts.googleapis.com/css2?family=DejaVu+Sans&display=swap');

body {
    font-family: 'DejaVu Sans', sans-serif;
}

 
 
 .wykladowcy-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.wykladowca {
    position: relative;
    text-align: center;
}

.wykladowca-image {
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    background-size: cover;
    background-position: center;
    border-radius: 5%;
    box-shadow: 0 0 30px 0 rgba(236, 84, 24, .3);
    position: relative;
    overflow: hidden;
	 cursor: pointer;
}

.wykladowca-image:hover {
    filter: grayscale(100%);
}



.zobacz-biogram {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px 10px;
    font-size: 0.9em;
    border-radius: 5px;
    cursor: pointer;
    display: none;
}

.wykladowca-image:hover .zobacz-biogram {
    display: block;
}

.wykladowca-info {
    margin-top: 10px;
}

.tytul-naukowy {
    font-size: 1em!important;
    margin-bottom: 0px!important;
}

.nazwa {
    font-size: 1.3em!important;
	font-weight: 700!important;
	line-height: 1.2!important;
}

/* Popup Styles */
.popup {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.popup-content {
    background-color: #fff;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
	margin-top:50px;
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-btn:hover,
.close-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.biogram-content {
    margin-top: 20px;
    text-align: justify;
    font-size: 0.9em;
}

.popup-title {
    font-size: 1.5em;
    margin-bottom: 10px;
}


/* Responsiveness */
@media (max-width: 1024px) {
    .wykladowcy-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .wykladowcy-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsiveness */
@media (max-width: 1024px) {
    .wykladowcy-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .wykladowcy-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Dodajemy nowe style dla wersji mobilnej */
@media (max-width: 480px) {
    .wykladowca {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .wykladowca-image {
        width: 50%; /* Ustawia szerokość na 50% kontenera */
        padding-top: 50%; /* Zachowanie proporcji 1:1 */
    }
}


.button-container {
    display: flex; /* Ustawia elastyczny model pudełkowy */
    justify-content: center; /* Wyśrodkowuje poziomo */
    align-items: center; /* Wyśrodkowuje pionowo */

}

.custom-button {
    background-color: #E30613; /* Ustawia czerwone tło */
    color: white; /* Ustawia biały kolor tekstu */
    border: none; /* Usuwa domyślną ramkę przycisku */
    padding: 10px 20px; /* Dodaje wewnętrzne odstępy w przycisku */
    text-transform: uppercase; /* Ustawia wszystkie litery na wielkie */
    font-weight: bold; /* Ustawia pogrubiony tekst */
    cursor: pointer; /* Ustawia kursor w postaci ręki po najechaniu */
    font-family: 'Noto Sans', sans-serif; /* Ustawia czcionkę Arial lub inną bezszeryfową */
    transform: skew(-10deg); /* Pochyla przycisk w lewo */
}

.custom-button:hover {
    background-color: #C00000; /* Zmienia kolor tła po najechaniu */
}


.miejsce {
    font-size: 0.8em!important; /* Ustawienie mniejszej czcionki */
    color: #fc644e!important; /* Ustawienie koloru tekstu */
    margin-top: 5px; /* Mały odstęp od nazwiska */
	font-weight: 500!important;
}


/* STYLE DLA CERTYFIKATÓW */

.certificate-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    margin: 0 auto;
}

.certificate-form label {
    margin-bottom: 10px;
}

.certificate-form input[type="text"] {
    margin-bottom: 20px;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.certificate-form button {
    padding: 10px 20px;
}


/* =========================================================
   Sans Souci / Laser w laryngologii - rejestracja
   Jasna wersja UI
   Shortcode: [ss_laser_registration]
   ========================================================= */

.sslaser,
.sslaser * {
	box-sizing: border-box !important;
}

.sslaser {
	width: 100% !important;
	max-width: 1120px !important;
	margin: 34px auto 70px !important;
	padding: 0 18px !important;
	color: #24324a !important;
	font-family: inherit !important;
	overflow: visible !important;
}

.sslaser__inner {
	position: relative !important;
	width: 100% !important;
	max-width: 1040px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
}

.sslaser__intro {
	max-width: 720px !important;
	margin: 0 auto 28px !important;
	text-align: center !important;
}

.sslaser__lead {
	margin: 0 !important;
	font-size: 16px !important;
	line-height: 1.8 !important;
	font-weight: 400 !important;
	color: #5f6d82 !important;
}

.sslaser__form {
	margin-top: 0 !important;
}

.sslaser__layout {
	display: grid !important;
	grid-template-columns: minmax(0, 1.15fr) minmax(310px, 0.85fr) !important;
	gap: 24px !important;
	align-items: center !important;
	max-width: 1040px !important;
	margin: 0 auto !important;
	overflow: visible !important;
}

.sslaser__main,
.sslaser-summary {
	min-width: 0 !important;
	width: 100% !important;
}

.sslaser__fieldset {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.sslaser__legend {
	display: block !important;
	width: 100% !important;
	margin: 0 0 14px 0 !important;
	padding: 0 !important;
	font-size: 28px !important;
	line-height: 1.18 !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	color: #24324a !important;
	text-align: left !important;
}

.sslaser__cards {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 16px !important;
	align-items: stretch !important;
}

/* =========================
   Karta wariantu
   ========================= */

.sslaser-card {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	padding: 18px 18px 16px !important;
	border-radius: 22px !important;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,251,255,0.98) 100%) !important;
	border: 1px solid rgba(46, 63, 96, 0.09) !important;
	box-shadow:
		0 18px 48px rgba(39, 55, 86, 0.08),
		0 6px 18px rgba(39, 55, 86, 0.05) !important;
	cursor: pointer !important;
	margin: 0 !important;
	transition:
		transform .2s ease,
		box-shadow .2s ease,
		border-color .2s ease,
		background .2s ease !important;
	overflow: visible !important;
}

.sslaser-card:hover {
	transform: translateY(-2px) !important;
	box-shadow:
		0 22px 56px rgba(39, 55, 86, 0.10),
		0 8px 20px rgba(39, 55, 86, 0.06) !important;
}

.sslaser-card.is-active {
	border-color: rgba(214, 76, 115, 0.32) !important;
	background:
		linear-gradient(180deg, #ffffff 0%, #fff8fb 100%) !important;
	box-shadow:
		0 24px 60px rgba(39, 55, 86, 0.10),
		0 0 0 1px rgba(214, 76, 115, 0.08) !important;
}

.sslaser-card.is-disabled {
	opacity: 0.62 !important;
	cursor: not-allowed !important;
}

.sslaser-card__input {
	position: absolute !important;
	top: 16px !important;
	right: 16px !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	accent-color: #d84c73 !important;
}

.sslaser-card__top {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	margin: 0 28px 16px 0 !important;
}

.sslaser-card__badge {
	display: inline-flex !important;
	align-items: center !important;
	min-height: 30px !important;
	padding: 6px 10px !important;
	border-radius: 999px !important;
	background: #eef6ff !important;
	border: 1px solid #dbeafb !important;
	color: #35618c !important;
	font-size: 12px !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
}

.sslaser-card__price {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 7px 11px !important;
	border-radius: 999px !important;
	background: #fff1f5 !important;
	border: 1px solid #f5d4de !important;
	color: #a43859 !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
	flex: 0 0 auto !important;
}

.sslaser-card__title {
	margin: 0 0 10px 0 !important;
	font-size: 26px !important;
	line-height: 1.08 !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	color: #24324a !important;
	text-transform: uppercase !important;
}

.sslaser-card__desc {
	margin: 0 0 18px 0 !important;
	font-size: 15px !important;
	line-height: 1.65 !important;
	font-weight: 400 !important;
	color: #5e6a7f !important;
}

.sslaser-card__footer {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

.sslaser-card__stock {
	display: inline-flex !important;
	align-items: center !important;
	min-height: 34px !important;
	padding: 8px 12px !important;
	border-radius: 999px !important;
	background: #f5f7fb !important;
	border: 1px solid #e3e8f1 !important;
	color: #425067 !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
}

.sslaser-card__stock.is-soldout {
	background: #fff3f5 !important;
	border-color: #f1c8d3 !important;
	color: #b14062 !important;
}

/* =========================
   Summary
   ========================= */

.sslaser-summary {
	align-self: center !important;
}

.sslaser-summary__card {
	width: 100% !important;
	padding: 24px !important;
	border-radius: 24px !important;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(252,252,255,0.98) 100%) !important;
	border: 1px solid rgba(46, 63, 96, 0.08) !important;
	box-shadow:
		0 22px 58px rgba(39, 55, 86, 0.08),
		0 6px 18px rgba(39, 55, 86, 0.05) !important;
	overflow: visible !important;
}

.sslaser-summary__eyebrow {
	margin: 0 0 14px 0 !important;
	font-size: 12px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: #7c8aa3 !important;
}

.sslaser-summary__group {
	padding-bottom: 16px !important;
	margin-bottom: 16px !important;
	border-bottom: 1px solid rgba(46, 63, 96, 0.08) !important;
}

.sslaser-summary__label {
	margin: 0 0 8px 0 !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
	font-weight: 500 !important;
	color: #7a879c !important;
}

.sslaser-summary__value {
	margin: 0 !important;
	font-size: 20px !important;
	line-height: 1.28 !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	color: #24324a !important;
	word-break: break-word !important;
}

.sslaser-summary__rows {
	padding-bottom: 16px !important;
	margin-bottom: 16px !important;
	border-bottom: 1px solid rgba(46, 63, 96, 0.08) !important;
}

.sslaser-summary__row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	font-weight: 400 !important;
	color: #5f6d82 !important;
}

.sslaser-summary__row + .sslaser-summary__row {
	margin-top: 10px !important;
}

.sslaser-summary__row strong {
	font-size: 15px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	color: #24324a !important;
	text-align: right !important;
}

.sslaser-summary__note {
	margin: 0 0 18px 0 !important;
	font-size: 14px !important;
	line-height: 1.7 !important;
	font-weight: 400 !important;
	color: #68768d !important;
}

.sslaser-summary__button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 56px !important;
	padding: 14px 18px !important;
	border: 0 !important;
	border-radius: 16px !important;
	background: linear-gradient(135deg, #d84c73 0%, #b83f63 100%) !important;
	color: #ffffff !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	text-align: center !important;
	box-shadow:
		0 14px 28px rgba(184, 63, 99, 0.20),
		0 4px 10px rgba(184, 63, 99, 0.12) !important;
	cursor: pointer !important;
	transition:
		transform .2s ease,
		box-shadow .2s ease,
		opacity .2s ease !important;
}

.sslaser-summary__button:hover:not(:disabled) {
	transform: translateY(-1px) !important;
	box-shadow:
		0 16px 32px rgba(184, 63, 99, 0.24),
		0 6px 12px rgba(184, 63, 99, 0.14) !important;
}

.sslaser-summary__button:disabled {
	opacity: 0.55 !important;
	cursor: not-allowed !important;
	box-shadow: none !important;
}

.sslaser-summary__micro {
	margin: 12px 0 0 0 !important;
	font-size: 12px !important;
	line-height: 1.6 !important;
	font-weight: 400 !important;
	color: #7d889d !important;
}

.sslaser-card:focus-within,
.sslaser-summary__button:focus-visible {
	outline: 3px solid rgba(216, 76, 115, 0.18) !important;
	outline-offset: 2px !important;
}

/* =========================
   Responsywność
   ========================= */

@media (max-width: 1080px) {
	.sslaser__layout {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}

	.sslaser-summary {
		align-self: stretch !important;
	}
}

@media (max-width: 767px) {
	.sslaser {
		margin: 24px auto 46px !important;
		padding: 0 14px !important;
	}

	.sslaser__intro {
		margin-bottom: 20px !important;
	}

	.sslaser__legend {
		font-size: 24px !important;
		line-height: 1.18 !important;
		margin-bottom: 12px !important;
	}

	.sslaser__cards {
		grid-template-columns: 1fr !important;
		gap: 14px !important;
	}

	.sslaser-card {
		padding: 16px !important;
		border-radius: 18px !important;
	}

	.sslaser-card__top {
		margin-right: 24px !important;
		margin-bottom: 14px !important;
	}

	.sslaser-card__title {
		font-size: 22px !important;
	}

	.sslaser-summary__card {
		padding: 18px !important;
		border-radius: 18px !important;
	}

	.sslaser-summary__value {
		font-size: 18px !important;
	}
}

/* =========================
   Jeśli VC / motyw ucina cienie
   dodaj klasę sslaser-row do rzędu/sekcji w VC
   ========================= */

.sslaser-row,
.sslaser-row .wpb_column,
.sslaser-row .wpb_wrapper,
.sslaser-row .vc_column-inner {
	overflow: visible !important;
}


/* =========================================================
   Laser - polish UI override
   dopisz NA KOŃCU obecnego CSS
   ========================================================= */

/* Główny układ - wszystko do góry, nie centruj w pionie */
.sslaser__layout {
	align-items: start !important;
}

.sslaser__main,
.sslaser-summary {
	align-self: start !important;
}

/* Grid kart - równa wysokość i wyrównanie do topu */
.sslaser__cards {
	align-items: stretch !important;
}

.sslaser-card {
	display: grid !important;
	grid-template-rows: auto auto 1fr auto !important;
	align-content: start !important;
	min-height: 212px !important;
	padding: 18px 18px 16px !important;
	border-radius: 24px !important;
	border: 1px solid rgba(41, 58, 90, 0.12) !important;
	background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
	box-shadow:
		0 20px 44px rgba(37, 52, 80, 0.08),
		0 8px 18px rgba(37, 52, 80, 0.05),
		inset 0 1px 0 rgba(255,255,255,0.88) !important;
	overflow: visible !important;
	transition:
		transform .22s ease,
		box-shadow .22s ease,
		border-color .22s ease,
		background .22s ease !important;
}

.sslaser-card:hover {
	transform: translateY(-2px) !important;
	border-color: rgba(216, 76, 115, 0.18) !important;
	box-shadow:
		0 24px 52px rgba(37, 52, 80, 0.10),
		0 10px 22px rgba(37, 52, 80, 0.06),
		0 0 0 1px rgba(216, 76, 115, 0.04) !important;
}

.sslaser-card.is-active {
	border-color: rgba(216, 76, 115, 0.34) !important;
	background: linear-gradient(180deg, #ffffff 0%, #fff8fb 100%) !important;
	box-shadow:
		0 26px 56px rgba(37, 52, 80, 0.11),
		0 0 0 1px rgba(216, 76, 115, 0.08),
		inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.sslaser-card.is-disabled {
	opacity: 0.6 !important;
	filter: grayscale(0.08) !important;
}

/* Radio button - lepiej osadzony i równy optycznie z ceną */
.sslaser-card__input {
	position: absolute !important;
	top: 20px !important;
	right: 18px !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	accent-color: #d84c73 !important;
	z-index: 3 !important;
}

/* Top karty - lepsze wyrównanie */
.sslaser-card__top {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto !important;
	align-items: start !important;
	column-gap: 10px !important;
	row-gap: 10px !important;
	margin: 0 34px 16px 0 !important;
	min-height: 42px !important;
}

.sslaser-card__badge {
	align-self: start !important;
	justify-self: start !important;
	display: inline-flex !important;
	align-items: center !important;
	min-height: 32px !important;
	padding: 7px 11px !important;
	border-radius: 999px !important;
	background: linear-gradient(180deg, #eef6ff 0%, #e8f1fb 100%) !important;
	border: 1px solid #d7e6f6 !important;
	color: #35597c !important;
	font-size: 12px !important;
	line-height: 1.15 !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.7) !important;
}

/* Cena - mocniejsza, bardziej czytelna */
.sslaser-card__price {
	align-self: start !important;
	justify-self: end !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 36px !important;
	padding: 8px 13px !important;
	border-radius: 999px !important;
	background: linear-gradient(180deg, #fff1f5 0%, #ffe7ee 100%) !important;
	border: 1px solid #f1cbd7 !important;
	color: #9f2f53 !important;
	font-size: 18px !important;
	line-height: 1 !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	white-space: nowrap !important;
	box-shadow:
		0 6px 14px rgba(216, 76, 115, 0.12),
		inset 0 1px 0 rgba(255,255,255,0.7) !important;
}

/* Tytuł i opis - czytelniejsza hierarchia */
.sslaser-card__title {
	margin: 0 0 12px 0 !important;
	font-size: 22px !important;
	line-height: 1.05 !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	color: #1f2e45 !important;
	text-transform: uppercase !important;
	max-width: 92% !important;
}

.sslaser-card__desc {
	margin: 0 0 18px 0 !important;
	font-size: 17px !important;
	line-height: 1.55 !important;
	font-weight: 500 !important;
	color: #55647b !important;
}

/* Footer karty - wyraźniejszy, ale spokojny */
.sslaser-card__footer {
	margin-top: auto !important;
	padding-top: 4px !important;
}

.sslaser-card__stock {
	min-height: 36px !important;
	padding: 8px 13px !important;
	border-radius: 999px !important;
	background: linear-gradient(180deg, #f7f9fc 0%, #f1f5fa 100%) !important;
	border: 1px solid #dfe7f1 !important;
	color: #3f4f67 !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

.sslaser-card__stock.is-soldout {
	background: linear-gradient(180deg, #fff3f5 0%, #ffe8ed 100%) !important;
	border-color: #efcad5 !important;
	color: #ae4062 !important;
}

/* Summary - lekko wzmacniamy, żeby trzymał poziom kart */
.sslaser-summary__card {
	padding: 26px !important;
	border-radius: 24px !important;
	border: 1px solid rgba(41, 58, 90, 0.11) !important;
	box-shadow:
		0 22px 52px rgba(37, 52, 80, 0.08),
		0 8px 18px rgba(37, 52, 80, 0.05),
		inset 0 1px 0 rgba(255,255,255,0.82) !important;
}

.sslaser-summary__value {
	font-size: 21px !important;
	line-height: 1.24 !important;
	font-weight: 800 !important;
	color: #1f2e45 !important;
}

.sslaser-summary__row {
	font-size: 16px !important;
	line-height: 1.55 !important;
}

.sslaser-summary__row strong {
	font-size: 16px !important;
	font-weight: 800 !important;
}

.sslaser-summary__button {
	min-height: 58px !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	letter-spacing: -0.01em !important;
}

/* Mobile */
@media (max-width: 767px) {
	.sslaser-card {
		min-height: 0 !important;
		padding: 16px !important;
	}

	.sslaser-card__top {
		margin: 0 28px 14px 0 !important;
	}

	.sslaser-card__price {
		font-size: 16px !important;
		padding: 8px 11px !important;
	}

	.sslaser-card__title {
		font-size: 20px !important;
		max-width: 100% !important;
	}

	.sslaser-card__desc {
		font-size: 16px !important;
	}
}

/* =========================================================
   Laser - final polish UI
   dopisz NA KOŃCU CSS
   ========================================================= */

.sslaser {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.sslaser__form {
	max-width: 1040px !important;
	margin: 0 auto !important;
}

.sslaser__legend {
	max-width: 1040px !important;
	margin: 0 auto 18px !important;
	padding: 0 !important;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
	font-size: 28px !important;
	line-height: 1.16 !important;
	font-weight: 700 !important;
	letter-spacing: -0.025em !important;
	color: #22324a !important;
	text-align: left !important;
}

.sslaser__layout {
	align-items: start !important;
	grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr) !important;
	gap: 24px !important;
}

.sslaser__main,
.sslaser-summary {
	align-self: start !important;
}

/* =========================
   KARTY
   ========================= */

.sslaser__cards {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 16px !important;
	align-items: stretch !important;
}

.sslaser-card {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	min-height: 220px !important;
	padding: 20px 20px 18px !important;
	border-radius: 22px !important;
	background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
	border: 1px solid rgba(38, 54, 84, 0.10) !important;
	box-shadow:
		0 18px 48px rgba(37, 52, 80, 0.08),
		0 6px 18px rgba(37, 52, 80, 0.05),
		inset 0 1px 0 rgba(255,255,255,0.86) !important;
	overflow: visible !important;
	transition:
		transform .22s ease,
		box-shadow .22s ease,
		border-color .22s ease,
		background .22s ease !important;
}

.sslaser-card:hover {
	transform: translateY(-2px) !important;
	border-color: rgba(216, 76, 115, 0.18) !important;
	box-shadow:
		0 22px 52px rgba(37, 52, 80, 0.10),
		0 8px 20px rgba(37, 52, 80, 0.06) !important;
}

.sslaser-card.is-active {
	border-color: rgba(216, 76, 115, 0.34) !important;
	background: linear-gradient(180deg, #ffffff 0%, #fff8fb 100%) !important;
	box-shadow:
		0 24px 58px rgba(37, 52, 80, 0.10),
		0 0 0 1px rgba(216, 76, 115, 0.06) !important;
}

.sslaser-card.is-disabled {
	opacity: 0.62 !important;
	cursor: not-allowed !important;
}

/* =========================
   TOP KARTY - jedno pod drugim
   ========================= */

.sslaser-card__top {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 10px !important;
	margin: 0 34px 16px 0 !important;
	width: calc(100% - 34px) !important;
	min-height: 76px !important;
}

.sslaser-card__badge {
	display: inline-flex !important;
	align-items: center !important;
	min-height: 30px !important;
	padding: 6px 10px !important;
	border-radius: 12px !important;
	background: #eef5fc !important;
	border: 1px solid #d9e6f4 !important;
	color: #44607e !important;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
	font-size: 12px !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
}

.sslaser-card__price {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 38px !important;
	padding: 8px 14px !important;
	border-radius: 12px !important;
	background: linear-gradient(180deg, #fff0f4 0%, #ffe7ee 100%) !important;
	border: 1px solid #f0c8d4 !important;
	color: #a33457 !important;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
	font-size: 20px !important;
	line-height: 1 !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	white-space: nowrap !important;
	box-shadow:
		0 6px 14px rgba(216, 76, 115, 0.10),
		inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

/* =========================
   RADIO - custom i w normalnym miejscu
   ========================= */

.sslaser-card__input {
	appearance: none !important;
	-webkit-appearance: none !important;
	position: absolute !important;
	top: 22px !important;
	right: 18px !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	border: 2px solid #bcc8d8 !important;
	box-shadow: 0 1px 3px rgba(31, 46, 69, 0.10) !important;
	cursor: pointer !important;
	z-index: 3 !important;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}

.sslaser-card__input:checked {
	border-color: #d84c73 !important;
	background: radial-gradient(circle, #d84c73 0 45%, #ffffff 46% 100%) !important;
	box-shadow: 0 0 0 4px rgba(216, 76, 115, 0.10) !important;
}

/* =========================
   TYPOGRAFIA KART
   ========================= */

.sslaser-card__title {
	margin: 0 0 12px 0 !important;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
	font-size: 20px !important;
	line-height: 1.15 !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	color: #1f2e45 !important;
	text-transform: none !important;
}

.sslaser-card__desc {
	margin: 0 0 18px 0 !important;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
	font-size: 16px !important;
	line-height: 1.6 !important;
	font-weight: 400 !important;
	color: #5b687d !important;
}

.sslaser-card__footer {
	margin-top: auto !important;
	padding-top: 2px !important;
}

.sslaser-card__stock {
	display: inline-flex !important;
	align-items: center !important;
	min-height: 34px !important;
	padding: 8px 12px !important;
	border-radius: 12px !important;
	background: #f5f7fb !important;
	border: 1px solid #e0e7f0 !important;
	color: #45536a !important;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
}

.sslaser-card__stock.is-soldout {
	background: #fff3f5 !important;
	border-color: #efcad5 !important;
	color: #af4263 !important;
}

/* =========================
   SUMMARY
   ========================= */

.sslaser-summary__card {
	padding: 24px !important;
	border-radius: 22px !important;
	background: linear-gradient(180deg, #ffffff 0%, #fcfcff 100%) !important;
	border: 1px solid rgba(38, 54, 84, 0.10) !important;
	box-shadow:
		0 18px 48px rgba(37, 52, 80, 0.08),
		0 6px 18px rgba(37, 52, 80, 0.05),
		inset 0 1px 0 rgba(255,255,255,0.82) !important;
}

.sslaser-summary__eyebrow,
.sslaser-summary__label,
.sslaser-summary__note,
.sslaser-summary__micro,
.sslaser-summary__row {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.sslaser-summary__value {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
	font-size: 20px !important;
	line-height: 1.28 !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	color: #1f2e45 !important;
}

.sslaser-summary__row strong {
	font-weight: 700 !important;
}

.sslaser-summary__button {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
	min-height: 56px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 767px) {
	.sslaser__legend {
		font-size: 24px !important;
		margin-bottom: 14px !important;
	}

	.sslaser__cards {
		grid-template-columns: 1fr !important;
	}

	.sslaser-card {
		min-height: 0 !important;
		padding: 16px !important;
	}

	.sslaser-card__top {
		width: calc(100% - 30px) !important;
		margin: 0 30px 14px 0 !important;
		min-height: auto !important;
	}

	.sslaser-card__price {
		font-size: 18px !important;
	}

	.sslaser-card__title {
		font-size: 19px !important;
	}

	.sslaser-card__desc {
		font-size: 15px !important;
	}
}


/* =========================================================
   Laser - opis pakietów / zakres opcji
   ========================================================= */

.sslaser-card {
	height: 100% !important;
	min-height: 0 !important;
}

.sslaser__cards {
	align-items: stretch !important;
}

.sslaser-card__desc {
	margin: 0 0 12px 0 !important;
}

.sslaser-card__section-title {
	margin: 0 0 8px 0 !important;
	font-size: 12px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: #7b879a !important;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.sslaser-card__list {
	list-style: none !important;
	margin: 0 0 14px 0 !important;
	padding: 0 !important;
	display: grid !important;
	gap: 9px !important;
}

.sslaser-card__list li {
	position: relative !important;
	margin: 0 !important;
	padding: 0 0 0 18px !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	font-weight: 400 !important;
	color: #48566c !important;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.sslaser-card__list li::before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: 0.56em !important;
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	background: #d84c73 !important;
	box-shadow: 0 0 0 4px rgba(216, 76, 115, 0.10) !important;
}

.sslaser-card__extra {
	margin: 0 0 14px 0 !important;
	padding: 10px 12px !important;
	border-radius: 12px !important;
	background: #f8fafc !important;
	border: 1px solid #e5eaf1 !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
	font-weight: 400 !important;
	color: #5f6d82 !important;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.sslaser-card__footer {
	margin-top: auto !important;
}

@media (max-width: 767px) {
	.sslaser-card__list {
		gap: 8px !important;
	}

	.sslaser-card__list li {
		font-size: 14px !important;
		line-height: 1.55 !important;
		padding-left: 16px !important;
	}

	.sslaser-card__extra {
		font-size: 13px !important;
		line-height: 1.5 !important;
	}
}

/* =========================================================
   Laser - wariant z 1 opcją
   ========================================================= */

.sslaser--single .sslaser__layout {
	grid-template-columns: minmax(0, 540px) minmax(320px, 390px) !important;
	justify-content: center !important;
}

.sslaser--single .sslaser__cards {
	grid-template-columns: minmax(0, 1fr) !important;
	max-width: 540px !important;
}

.sslaser--single .sslaser-card {
	min-height: 0 !important;
}

@media (max-width: 1080px) {
	.sslaser--single .sslaser__layout {
		grid-template-columns: 1fr !important;
	}

	.sslaser--single .sslaser__cards {
		max-width: 100% !important;
	}
}