/* =====================================================================
   SSM Courses CSS - Kadence Child
   1) Zamjena Bootstrap grid klasa (col-lg-*, col-sm-*) flexboxom
      -> Kadence NE uključuje Bootstrap, a predlošci koriste te klase.
   2) Stilovi CF7 prijavnog obrasca (prije bili u <style> bloku predloška)
   3) Stilovi prikaza tečaja (naslov, meta podaci, cijena, opis)
   ===================================================================== */

/* ---------- 1. Grid: zamjena za Bootstrap ---------- */

/* Redovi s meta podacima tečaja: flex container */
.single-product .col-lg-12 {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	box-sizing: border-box;
}

.single-product .no-padding {
	padding: 0;
}

/* Stupci - desktop (>= 992px, kao Bootstrap lg breakpoint) */
.single-product .col-lg-2  { flex: 0 0 16.6666%; max-width: 16.6666%; box-sizing: border-box; padding: 0 10px; }
.single-product .col-lg-3  { flex: 0 0 25%;      max-width: 25%;      box-sizing: border-box; padding: 0 10px; }
.single-product .col-lg-4  { flex: 0 0 33.3333%; max-width: 33.3333%; box-sizing: border-box; padding: 0 10px; }

/* Tablet (768-991px, kao Bootstrap sm/md) */
@media (max-width: 991px) {
	.single-product .col-sm-3  { flex: 0 0 25%; max-width: 25%; }
	.single-product .col-sm-6  { flex: 0 0 50%; max-width: 50%; }
	.single-product .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Mobitel (< 768px): sve u jedan stupac */
@media (max-width: 767px) {
	.single-product .col-lg-2,
	.single-product .col-lg-3,
	.single-product .col-lg-4,
	.single-product .col-sm-3,
	.single-product .col-sm-6,
	.single-product .col-xs-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* ---------- 2. CF7 obrazac (prijava na tečaj) ---------- */

.single-product .wpcf7 input[type="text"],
.single-product .wpcf7 select,
.single-product .wpcf7 input[type="date"],
.single-product .wpcf7 input[type="email"],
.single-product .wpcf7 input[type="tel"],
.single-product .wpcf7 textarea {
	width: 100%;
	padding: 12px 10px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

.single-product .wpcf7 input[type="submit"] {
	width: 100%;
	background-color: #4CAF50;
	color: #fff;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.single-product .wpcf7 input[type="submit"]:hover {
	background-color: #45a049;
}

/* ---------- 3. Prikaz tečaja ---------- */

.single-product .ssm-course-meta-row {
	align-items: center;
	margin: 20px 0 10px;
}

.single-product .lbl-course {
	font-weight: 600;
	display: block;
}

.single-product .course-title {
	margin: 15px 0 10px;
	/* Po želji uskladi s dizajn sustavom SSM-a:
	   font-family: 'Playfair Display', serif; */
}

.single-product .course-price {
	font-weight: 700;
	text-align: right;
}

@media (max-width: 767px) {
	.single-product .course-price {
		text-align: left;
	}
}

.single-product .container-course-description {
	margin: 20px 0 30px;
	line-height: 1.7;
}

.single-product .product-category {
	/* Po želji: color: #EFBF04; (SSM zlatna) */
}

/* ---------- 4. Arhiva tečajeva (kartice u loopu) ---------- */

/* Isključi WooCommerce/Kadence default grid - kartice idu jedna ispod druge,
   punom širinom (kao na Massive Dynamicu) */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: 100%;
	float: none;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

/* Grid unutar kartice - zamjena za Bootstrap */
.woocommerce .col-lg-12,
.woocommerce-page .col-lg-12 {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	box-sizing: border-box;
}

.woocommerce .no-padding,
.woocommerce-page .no-padding {
	padding: 0;
}

.woocommerce .container-course .col-lg-2,
.woocommerce-page .container-course .col-lg-2 { flex: 0 0 16.6666%; max-width: 16.6666%; box-sizing: border-box; padding: 5px 10px; }

.woocommerce .container-course .col-lg-6,
.woocommerce-page .container-course .col-lg-6 { flex: 0 0 50%; max-width: 50%; box-sizing: border-box; padding: 5px 10px; }

@media (max-width: 991px) {
	.woocommerce .container-course .col-sm-2,
	.woocommerce-page .container-course .col-sm-2 { flex: 0 0 16.6666%; max-width: 16.6666%; }
	.woocommerce .container-course .col-sm-7,
	.woocommerce-page .container-course .col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
	.woocommerce .container-course .col-sm-1,
	.woocommerce-page .container-course .col-sm-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
}

@media (max-width: 767px) {
	.woocommerce .container-course .col-lg-2,
	.woocommerce .container-course .col-lg-6,
	.woocommerce .container-course .col-sm-1,
	.woocommerce .container-course .col-sm-2,
	.woocommerce .container-course .col-sm-7,
	.woocommerce-page .container-course .col-lg-2,
	.woocommerce-page .container-course .col-lg-6,
	.woocommerce-page .container-course .col-sm-1,
	.woocommerce-page .container-course .col-sm-2,
	.woocommerce-page .container-course .col-sm-7 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* Naslovna traka kartice (naslov + cijena) */
.course-list-title-bg {
	align-items: center;
	justify-content: space-between;
	/* Po želji uskladi s live izgledom, npr.:
	   background-color: #0b2545; */
	padding: 10px 15px;
}

.course-list-title-bg .title-link {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	text-decoration: none;
}

.list-product-title {
	margin: 0;
	font-size: 1.15em;
	/* Po želji: font-family: 'Playfair Display', serif; */
}

.list-product-price {
	font-weight: 700;
	white-space: nowrap;
	margin-left: 15px;
	/* Po želji: color: #EFBF04; (SSM zlatna) */
}

.container-course {
	align-items: center;
	padding: 8px 5px;
}

.spn-course {
	margin-left: 4px;
}

/* Gumb "Prijava" / "Subscribe" */
.button-register-course {
	display: inline-block;
	padding: 8px 18px;
	background-color: #4CAF50;
	color: #fff;
	border-radius: 4px;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
}

.button-register-course:hover {
	background-color: #45a049;
	color: #fff;
}

.course-hr {
	margin: 5px 0 15px;
	border: 0;
	border-top: 1px solid #e0e0e0;
}

/* ---------- 5. Fallback hero (ako Slider Revolution nije aktivan) ---------- */

.ssm-course-hero {
	width: 100%;
	min-height: 220px;
	background-color: #0b2545; /* zamijeni background-image slikom broda/hero slikom */
	background-size: cover;
	background-position: center;
	margin-bottom: 20px;
}