/* ==========================================================================
   Radimposvom - R1 Checkout CSS
   Vizualni dizajn R1 sekcije na WooCommerce checkoutu

   Od v1.2.0.0 boje idu kroz CSS varijable s rpsm fallbackom: var(--rpom-X, #hex).
   Bez inline overridea izgled je IDENTICAN kao prije (radimposvom brend).
   Drugi brend (npr. MALI VELIKI) postavlja se opcijom "Brend izgled" u postavkama -
   PHP tada injektira :root varijable (vidi class-r1-checkout.php enqueue).

   Brand paleta Tea Zavacki / #radimposvom (iz brand booka):
     --rpom-copper:    #D17954  (bakar - borders, accents, hover)
     --rpom-copper-dk: #A85535  (tamni bakar - header bg; white contrast 5.23:1 ✅ WCAG AA)
     --rpom-rust:      #993A25  (rđa - tekst, naglasak, btn border; 5.92:1 na almond ✅)
     --rpom-mahogany:  #4C2E2E  (mahagonij - najtamnija smeđa; 11.47:1 na cream ✅)
     --rpom-almond:    #F3EAE1  (badem - pozadina forme)
     --rpom-cream:     #FAF9F5  (krema - gotovo bijela)
     --rpom-latte:     #EEDFC8  (latte - topli border)
     --rpom-gold:      #D7AA50  (zlato - akcent)

   WCAG AA status (contrast ratios):
     Header bg #A85535 / white text  → 5.23:1 ✅
     #993A25 on #F3EAE1              → 5.92:1 ✅
     #1e6840 on #F3EAE1 (valid)      → 5.68:1 ✅  (zamijenjena #2d7a4f = 4.41:1 ❌)
     #7A3F24 on #F3EAE1 (warning)    → 6.89:1 ✅
     #6B5048 on #F3EAE1 (neutral)    → 6.16:1 ✅
     #c0392b on #F3EAE1 (invalid)    → 4.58:1 ✅
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sakrij managed polja (billing_company, billing_eu_vat_number)
   Ostaju u DOM-u kako bi WooCommerce mogao procesirati vrijednosti,
   ali su vizualno nevidljivi - njima upravljamo kroz R1 sekciju
   -------------------------------------------------------------------------- */
.rpom-r1-managed,
.rpom-r1-managed + br {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Select2 - billing_country dropdown
   WooCommerce inicijalizira Select2 na checkout ali ne uključuje sve potrebne
   stilove. Ovo osigurava ispravan izgled i z-index bez THWCFE-a.
   -------------------------------------------------------------------------- */
.woocommerce-checkout #billing_country + .select2-container,
.woocommerce-checkout .select2-container--default {
	width: 100% !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single {
	height: 42px;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 0 10px;
	background-color: #fff;
	outline: none;
	display: flex;
	align-items: center;
	transition: border-color 0.15s;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 42px;
	padding-left: 4px;
	color: #333;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 40px;
	top: 1px;
	right: 10px;
}

.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--rpom-copper, #D17954);
	box-shadow: 0 0 0 2px rgba(209, 121, 84, 0.15);
	outline: none;
}

/* Dropdown panel */
.woocommerce-checkout .select2-dropdown {
	border: 1px solid var(--rpom-border-warm, #E0D8D0);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(76, 46, 46, 0.10), 0 1px 4px rgba(76, 46, 46, 0.06);
	overflow: hidden;
	z-index: 99999;
}

/* Search input unutar dropdowna */
.woocommerce-checkout .select2-search--dropdown .select2-search__field {
	background: var(--rpom-cream, #FAF9F5);
	border: 1px solid var(--rpom-border-warm, #E0D8D0);
	border-radius: 5px;
	padding: 7px 10px;
	font-size: 14px;
	outline: none;
}

.woocommerce-checkout .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--rpom-copper, #D17954);
}

/* Opcije - transparent border-left sprječava layout shift pri hover-u */
.woocommerce-checkout .select2-container--default .select2-results__option {
	padding: 9px 11px 9px 11px;
	font-size: 14px;
	color: #333;
	border-left: 3px solid transparent;
	transition: background 0.1s, border-color 0.1s;
}

/* Već odabrana opcija - MORA biti PRIJE highlighted zbog CSS kaskade (ista specifičnost) */
.woocommerce-checkout .select2-container--default .select2-results__option[aria-selected="true"] {
	background-color: var(--rpom-latte, #EEDFC8);
	color: var(--rpom-rust, #993A25);
	font-weight: 600;
}

/* Hover/highlight - Opcija B: almond bg + copper lijevi rub; dolazi NAKON selected */
.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--rpom-almond, #F3EAE1);
	color: var(--rpom-rust, #993A25);
	border-left-color: var(--rpom-copper, #D17954);
}

/* --------------------------------------------------------------------------
   R1 sekcija - wrapper
   -------------------------------------------------------------------------- */
.rpom-r1-section {
	margin-top: 28px;
	border: 2px solid var(--rpom-copper, #D17954);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(209, 121, 84, 0.18);
}

/* --------------------------------------------------------------------------
   Header sekcije - copper traka s toggle-om
   -------------------------------------------------------------------------- */
.rpom-r1-header {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto;
	grid-template-areas:
		"icon title toggle"
		"icon subtitle toggle";
	column-gap: 14px;
	row-gap: 2px;
	align-items: center;
	/* Header ima vlastitu varijablu (v1.2.0.1) da brend moze odvojiti boju
	   headera od boje rubova/akcenata; fallback lanac cuva rpsm izgled. */
	background: var(--rpom-header-bg, var(--rpom-copper, #D17954));
	padding: 16px 20px;
	cursor: pointer;
}

.rpom-r1-header__icon {
	grid-area: icon;
	font-size: 24px;
	align-self: center;
}

.rpom-r1-title {
	grid-area: title;
	color: #fff !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	border: none !important;
	align-self: end;
}

.rpom-r1-subtitle {
	grid-area: subtitle;
	color: #fff;
	font-size: 14px;
	line-height: 1.35;
	margin: 0;
	align-self: start;
}

/* --------------------------------------------------------------------------
   Toggle switch
   -------------------------------------------------------------------------- */
.rpom-r1-toggle {
	grid-area: toggle;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	user-select: none;
	align-self: center;
}

.rpom-r1-toggle input[type="checkbox"] {
	display: none;
}

.rpom-r1-toggle__track {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	background: rgba(255, 255, 255, 0.30);
	border: 2px solid rgba(255, 255, 255, 0.55);
	border-radius: 12px;
	transition: background 0.2s, border-color 0.2s;
	flex-shrink: 0;
}

.rpom-r1-toggle__track::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s;
}

/* Toggle - uključen */
.rpom-r1-toggle input[type="checkbox"]:checked ~ .rpom-r1-toggle__track,
.rpom-r1-toggle input:checked + .rpom-r1-toggle__track {
	background: #5a9e6f;
	border-color: #5a9e6f;
}

.rpom-r1-toggle input[type="checkbox"]:checked ~ .rpom-r1-toggle__track::after,
.rpom-r1-toggle input:checked + .rpom-r1-toggle__track::after {
	transform: translateX(20px);
}

.rpom-r1-toggle__text {
	color: #fff;
	font-size: 15px;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Forma unutar sekcije
   -------------------------------------------------------------------------- */
.rpom-r1-form {
	padding: 20px 24px 24px;
	background: var(--rpom-almond, #F3EAE1);
	border-top: 1px solid var(--rpom-latte, #EEDFC8);
}

/* Clearfix - form-row-first/last su floated elementi; bez ovoga container se ruši
   i pozadina/padding ne obuhvaćaju zadnji red s Gradom i Poštanskim brojem. */
.rpom-r1-form::after {
	content: '';
	display: table;
	clear: both;
}

/* --------------------------------------------------------------------------
   Info tekst iznad polja
   var(--rpom-rust, #993A25) na var(--rpom-almond, #F3EAE1) → 5.92:1 ✅ WCAG AA
   -------------------------------------------------------------------------- */
.rpom-r1-info {
	color: var(--rpom-rust, #993A25);
	font-size: 14px;
	margin: 0 0 16px;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Notice - za reverse charge (non-EU scenarij)
   var(--rpom-mahogany, #4C2E2E) na var(--rpom-cream, #FAF9F5) → 11.47:1 ✅
   -------------------------------------------------------------------------- */
.rpom-r1-notice {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.55;
}

.rpom-r1-notice--reverse-charge {
	background: var(--rpom-cream, #FAF9F5);
	border-left: 4px solid var(--rpom-copper, #D17954);
	color: var(--rpom-mahogany, #4C2E2E);
}

.rpom-r1-notice--reverse-charge strong {
	color: var(--rpom-rust, #993A25);
}

/* --------------------------------------------------------------------------
   Field status poruke (OIB, VIES, eSudreg)
   -------------------------------------------------------------------------- */
.rpom-r1-field-status {
	margin: -8px 0 12px;
	font-size: 13px;
	min-height: 0;
	line-height: 1.4;
}

/* #1e6840 na var(--rpom-almond, #F3EAE1) → 5.68:1 ✅ WCAG AA (zamijenjena #2d7a4f koja je bila 4.41:1 ❌) */
.rpom-r1-status-valid {
	color: #1e6840;
	font-weight: 500;
}

/* #c0392b na var(--rpom-almond, #F3EAE1) → 4.58:1 ✅ WCAG AA */
.rpom-r1-status-invalid {
	color: #c0392b;
	font-weight: 500;
}

/* var(--rpom-rust, #993A25) rust na var(--rpom-almond, #F3EAE1) → 5.92:1 ✅ WCAG AA */
.rpom-r1-status-checking {
	color: var(--rpom-rust, #993A25);
	font-style: italic;
}

/* var(--rpom-mahogany, #4C2E2E) mahogany na var(--rpom-almond, #F3EAE1) → 11.47:1 ✅ WCAG AA */
.rpom-r1-status-neutral {
	color: var(--rpom-mahogany, #4C2E2E);
}

/* var(--rpom-rust, #993A25) rust na var(--rpom-almond, #F3EAE1) → 5.92:1 ✅ WCAG AA (was var(--rpom-copper, #D17954) = 2.69:1 ❌) */
.rpom-r1-status-warning {
	color: var(--rpom-rust, #993A25);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   "Imam obrt" gumb - prikazuje se kada OIB nije u Sudskom registru
   display:block → novi red ispod warning teksta (ne remeti flow)
   border var(--rpom-rust, #993A25) na var(--rpom-almond, #F3EAE1) → 5.92:1 ✅ WCAG AA non-text contrast
   text  var(--rpom-rust, #993A25) na var(--rpom-cream, #FAF9F5)  → 6.67:1 ✅ WCAG AA
   -------------------------------------------------------------------------- */
/* Inline chip - latte (var(--rpom-latte, #EEDFC8)) pozadina, rust tekst, nema bordera ni paddinga koji bi ga odvojio */
.rpom-r1-obrt-btn {
	display: inline !important;
	margin: 0 0 0 4px;
	padding: 1px 5px;
	font-size: inherit !important;
	font-weight: 600;
	color: var(--rpom-rust, #993A25) !important;
	background: var(--rpom-latte, #EEDFC8) !important;
	border: none !important;
	border-radius: 3px;
	cursor: pointer;
	text-decoration: none;
	box-shadow: none;
	vertical-align: baseline;
	line-height: inherit;
}

.rpom-r1-obrt-btn:hover {
	background: var(--rpom-copper, #D17954) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   eSudreg info (BONUS - registar provjera)
   -------------------------------------------------------------------------- */
.rpom-r1-sudreg-status {
	margin-top: 2px;
	margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   Responsive - manji ekrani
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.rpom-r1-header {
		padding: 14px 16px;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"title toggle"
			"subtitle subtitle";
	}
	.rpom-r1-header__icon {
		display: none;
	}
	.rpom-r1-title {
		font-size: 15px !important;
		align-self: center;
	}
	.rpom-r1-subtitle {
		padding-top: 6px;
	}
	.rpom-r1-form {
		padding: 16px;
	}
}