/*!
Theme Name: Maxcoach Child
Theme URI: https://maxcoach.thememove.com
Description: Child theme for Maxcoach — safe place for custom CSS and overrides that survive parent theme updates.
Author: spretni.si
Template: maxcoach
Version: 1.0.0
Text Domain: maxcoach-child
*/

/* ===========================================================
   Add your custom CSS below this line.
   Anything here overrides the parent theme and is safe from
   Maxcoach updates.
   =========================================================== */

/* ===========================================================
   Cart & Checkout — clean, centered, Shopify-style layout
   The theme hero on these pages is removed in functions.php
   (maxcoach_title_bar_type => none), so this only handles the
   content: width/gutters, two-column layout, card styling.
   =========================================================== */

/* --- Centered content with real side gutters (fixes full-bleed) --- */
.woocommerce-cart #page-content > .container,
.woocommerce-checkout #page-content > .container {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* A little breathing room at the top now that the hero is gone. */
.woocommerce-cart #page-content,
.woocommerce-checkout #page-content {
	padding-top: 48px;
	padding-bottom: 64px;
}

/* Title-bar hero also removed on single product pages (functions.php) — keep a
   bit of top margin so the content doesn't sit under the header. */
.single-product #page-content {
	padding-top: 40px;
}

/* ---------- CHECKOUT: single-column vertical flow ----------
   Order on every screen size: summary (top) -> billing -> payment (bottom),
   matching the "see what you're buying first, pay last" narrative. Centered and
   width-constrained on desktop so the fields aren't stretched. */
.woocommerce-checkout form.checkout.woocommerce-checkout {
	display: flex;
	flex-direction: column;
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}
.woocommerce-checkout #wc-stripe-express-checkout-element {
	order: 0;
}
.woocommerce-checkout #order_review_heading {
	order: 1;
	margin-bottom: 14px;
}
.woocommerce-checkout #order_review {
	order: 2;
	margin-bottom: 32px;
}
.woocommerce-checkout #customer_details {
	order: 3;
}
.woocommerce-checkout #payment {
	order: 4;
}

/* Billing/shipping sub-columns stack within the form. */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
}

/* ---------- Form fields: full-width, consistent ---------- */
.woocommerce-checkout .form-row,
.woocommerce-checkout .woocommerce-billing-fields .form-row {
	margin: 0 0 16px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout select:not(.country_select):not(.state_select) {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #d9dce1;
	border-radius: 8px;
	line-height: 1.4;
}

/* Enhanced (select2) dropdowns — country / state. Style the select2 selection
   itself so it matches the inputs, instead of wrapping it in a second box
   ("dropdown inside a field"). */
.woocommerce-checkout .select2-container {
	width: 100% !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single {
	height: 46px;
	border: 1px solid #d9dce1;
	border-radius: 8px;
	padding: 6px 14px;
	display: flex;
	align-items: center;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	color: inherit;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 44px;
	right: 8px;
}
.woocommerce form .form-row label {
	font-weight: 600;
	margin-bottom: 6px;
	display: inline-block;
}

/* The theme hides billing/shipping/additional field labels (placeholder-only
   design), so the field name disappears as soon as you type. Un-hide them —
   labels go ABOVE each input. Selector matches the theme's exact specificity so
   it wins (child stylesheet loads later). Placeholders are cleared in PHP.
   Also reveal labels marked .screen-reader-text (e.g. the address line 2 /
   apartment field) so no input is left without a visible label. */
.woocommerce-checkout .woocommerce-billing-fields .form-row > label,
.woocommerce-checkout .woocommerce-shipping-fields .form-row > label,
.woocommerce-checkout .woocommerce-additional-fields .form-row > label,
.woocommerce-checkout .woocommerce-billing-fields .form-row > label.screen-reader-text,
.woocommerce-checkout .woocommerce-shipping-fields .form-row > label.screen-reader-text,
.woocommerce-checkout .woocommerce-additional-fields .form-row > label.screen-reader-text {
	display: block;
	position: static !important; /* beats .screen-reader-text { position: absolute !important } */
	width: auto;
	height: auto;
	margin: 0 0 6px;
	padding: 0;
	clip: auto;
	clip-path: none;
	overflow: visible;
	font-weight: 600;
	white-space: normal;
}

/* ---------- "Naročnik je" account-type toggle (spec 3.14 / 3.15) ---------- */
/* Inline radio options under the label. */
.woocommerce-checkout #billing_account_type_field .woocommerce-input-wrapper {
	display: block;
	margin-top: 4px;
}
.woocommerce-checkout #billing_account_type_field input.input-radio {
	width: auto;
	margin: 0 6px 0 0;
	vertical-align: middle;
}
.woocommerce-checkout #billing_account_type_field label.radio {
	display: inline-block;
	margin: 0 24px 4px 0;
	font-weight: 400;
	vertical-align: middle;
}
/* Company fields (name / address / tax no.) are revealed only for "pravna".
   Hidden only when the JS class is present, so no-JS users still see everything. */
.woocommerce-checkout form.checkout.account-type-fizicna .company-field {
	display: none;
}

/* "Plačnik je tudi udeleženec": when ticked, the payer is the attendee, so hide
   the participant fields (Ime / Priimek / Ulica / Poštna / Kraj). Driven by the
   JS-added .payer-is-participant class, so the fields stay visible with JS off
   (safe fallback). Unticked → fields shown so the attendee's data can be entered. */
.woocommerce-checkout form.checkout.payer-is-participant .participant-field {
	display: none;
}

/* ---------- Card-brand logos on the Stripe card method ---------- */
.woocommerce-checkout .spretni-card-icons {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 10px;
	vertical-align: middle;
}
.woocommerce-checkout .spretni-card-icons img {
	height: 22px;
	width: auto;
	display: inline-block;
	border: 1px solid #eceef1;
	border-radius: 4px;
}
.woocommerce-checkout ul.payment_methods li {
	list-style: none;
}

/* ---------- Order summary: card look ---------- */
.woocommerce-checkout #order_review {
	background: #fff;
	border: 1px solid #e6e8ec;
	border-radius: 12px;
	padding: 20px 22px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}
.woocommerce-checkout #order_review_heading {
	margin-bottom: 14px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table {
	border: 0;
}
/* Product thumbnail in the order-review line item (added in functions.php). */
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
	overflow: hidden;
}
.woocommerce-checkout .co-review-thumb img {
	float: left;
	width: 48px;
	height: 48px;
	margin: 0 12px 0 0;
	border-radius: 6px;
	object-fit: cover;
}
/* Payment is its own block (detached from the summary in functions.php). Keep it
   flat like the billing fields above (no card) — just a light divider + spacing
   for separation, so the two data-entry areas look consistent. */
.woocommerce-checkout #payment {
	background: transparent;
	border: 0;
	border-top: 1px solid #e6e8ec;
	border-radius: 0;
	box-shadow: none;
	margin-top: 16px;
	padding: 20px 0 0;
}
.woocommerce-checkout #payment .payment_box {
	background: #f6f7f9;
}

/* Primary action buttons (checkout "Kupite sedaj" + cart "Na blagajno") —
   white, centered text (theme rendered it gray and bottom-aligned), full width. */
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 14px 20px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: #fff !important;
	border-radius: 8px;
}
.woocommerce #payment #place_order:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	color: #fff !important;
}

/* ---------- CART: cleanup (client request) ----------
   Hide the Empty-cart + Update-cart buttons. Update-cart is only hidden (kept in
   the DOM) so the auto-update JS can still trigger it on quantity change. */
.woocommerce-cart .actions-buttons {
	display: none !important;
}
/* Hide the info/"Cart updated" + success notices ("Košarica je posodobljena"
   etc.). Errors stay visible so coupon problems are still shown. */
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message {
	display: none;
}

/* Total row VAT note ("Vključuje 12,44 € DDV") on its own smaller, muted line. */
.woocommerce .order-total .includes_tax,
.includes_tax {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	font-weight: 400;
	color: #6b7280;
}
/* The amount span inside is forced to 20px by the theme
   (.cart-collaterals .order-total .amount) — pull it back down to match. */
.woocommerce-cart .cart-collaterals .order-total .includes_tax .amount,
.woocommerce .order-total .includes_tax .amount {
	font-size: 13px;
	font-weight: 400;
	color: #6b7280;
}

/* ---------- CART: tidy table + totals card ---------- */
.woocommerce-cart .cart-collaterals .cart_totals {
	background: #fff;
	border: 1px solid #e6e8ec;
	border-radius: 12px;
	padding: 20px 22px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}
.woocommerce-cart table.shop_table {
	border-radius: 10px;
	border-color: #e6e8ec;
}

/* Two columns on desktop: cart items left, totals right. */
@media (min-width: 992px) {
	.woocommerce-cart .woocommerce {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 40px;
	}
	.woocommerce-cart .woocommerce-notices-wrapper {
		flex: 1 1 100%;
	}
	.woocommerce-cart form.woocommerce-cart-form {
		flex: 1 1 58%;
		min-width: 0;
	}
	.woocommerce-cart .cart-collaterals {
		flex: 1 1 38%;
		width: auto !important;
		float: none;
	}
	.woocommerce-cart .cart-collaterals .cart_totals {
		width: 100% !important;
		position: sticky;
		top: 100px;
	}
}

/* ---------- Mobile: comfortable padding, single column ---------- */
@media (max-width: 991px) {
	.woocommerce-cart #page-content > .container,
	.woocommerce-checkout #page-content > .container {
		padding-left: 16px;
		padding-right: 16px;
	}
	/* Bootstrap .row has negative side margins that pull content back to the
	   screen edge, cancelling the container gutter — neutralise them so the
	   16px margin is actually visible on mobile. */
	.woocommerce-cart #page-content > .container > .row,
	.woocommerce-checkout #page-content > .container > .row {
		margin-left: 0;
		margin-right: 0;
	}
}

/* The theme reserves padding-left:110px on .cart_item at <=767px for an
   absolutely-positioned cart thumbnail. The checkout review table has no such
   thumbnail (we float a small 48px one instead), so that indent is empty space.
   Drop it — scoped to the review table so the real cart page is unaffected. */
@media (max-width: 767px) {
	body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart_item,
	body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart_item td {
		padding-left: 0;
	}
}

/* ---------- Brand button colour (client request) ----------
   Make every action button the same brown (#AE7C50) used by the old product-page
   "V košarico" Elementor button. The theme's default button was coral (#e26a6a);
   hover uses the theme's existing darker brown (#936144). Covers Elementor
   buttons, WooCommerce buttons (add-to-cart, coupon, etc.), the checkout/cart
   primary buttons, and Gutenberg button blocks. !important to beat the theme's
   per-element inline Elementor CSS and WooCommerce defaults. */
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.wp-block-button__link {
	background-color: #AE7C50 !important;
	border-color: #AE7C50 !important;
	color: #fff !important;
	fill: #fff !important;
}
.elementor-button:hover,
.elementor-button:focus,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #payment #place_order:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.wp-block-button__link:hover {
	background-color: #936144 !important;
	border-color: #936144 !important;
	color: #fff !important;
	fill: #fff !important;
}

/* ---------- Remove the redundant brown "V košarico" button (client request) ----------
   The product-page Elementor button (#eaf74d4) linked to /zakljucek-nakupa/ in a
   new tab and is superseded by the variation dropdown + add-to-cart. Hidden in
   code (element id is identical on production, so this deploys the removal there
   too) rather than via a DB/Elementor-editor edit that would not travel with the
   theme. The "PRIJAVA" heading and "Samo 15 prostih mest*" note around it are left
   in place — remove those in the Elementor editor if also unwanted. */
.elementor-element-eaf74d4 {
	display: none !important;
}