/* MOJ UPIT — header link/counter, DODAJ U UPIT button, and the /moj-upit/ list page. */

/* Header link (desktop + mobile menu): plain text, no cart/bag icon, matches KONTAKTIRAJTE NAS's
   restrained treatment rather than an ecommerce mini-cart pattern. */
/* .premio-header__inner is a 3-column grid (logo / nav / actions) -- this wrapper keeps MOJ
   UPIT + KONTAKTIRAJTE NAS together as that single third column, exactly like the CTA alone
   used to be, instead of introducing an unplanned 4th grid item that falls to a new row. */
.premio-header__actions { display: flex; align-items: center; }
.premio-header__moj-upit { margin-right: 14px; color: var(--premio-white); font-size: 11px; font-weight: 700; letter-spacing: .4px; text-decoration: none; }
.premio-header__moj-upit:hover { color: var(--premio-cyan); }
.premio-mobile-menu__moj-upit { display: block; margin-top: 18px; color: var(--premio-white); font-size: 15px; font-weight: 700; text-decoration: none; }

/* Same breakpoint the theme's own .premio-header__cta already hides at (style.css) -- this link
   isn't covered by that existing selector since it's a different class, so it needs its own
   copy of the same rule rather than showing through as a leftover desktop-only element. */
/* Desktop: the mobile-only bar shouldn't become its own (5th) grid item in .premio-header__inner
   -- display:contents lets its children (the hidden mobile MOJ UPIT link + the already-hidden
   hamburger button) participate as if they were direct children, i.e. invisible, same as before
   this existed. */
.premio-header__mobile-bar { display: contents; }

/* The mobile link's own visibility must not depend on the JS-controlled [hidden] attribute
   alone: JS toggles [hidden] purely based on item count, with no notion of viewport width, so
   without this explicit "always off above the mobile breakpoint" rule the link would pop back
   into the desktop/tablet grid (unstyled, since its only styling lives in the media query below)
   the moment an item exists, regardless of screen size. */
.premio-header__moj-upit-mobile { display: none; }

@media (max-width: 767px) {
	.premio-header__actions { display: none; }

	/* Mobile header bar: brand on the left (via .premio-header__inner's flex space-between),
	   MOJ UPIT + the hamburger grouped together on the right so they move as one unit instead of
	   MOJ UPIT floating alone in the middle of the row. */
	.premio-header__mobile-bar { display: flex; align-items: center; gap: 14px; }
	.premio-header__moj-upit-mobile { display: inline-block; color: var(--premio-white); font-size: 11px; font-weight: 700; letter-spacing: .4px; text-decoration: none; }
	.premio-header__moj-upit-mobile[hidden] { display: none; }
	.premio-header__moj-upit-mobile:hover { color: var(--premio-cyan); }
	.premio-header__moj-upit-mobile[hidden] { display: none; }
}

/* DODAJ U UPIT button: secondary/outline treatment, visually subordinate to POŠALJITE UPIT. */
.ptp-button--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--premio-navy); color: var(--premio-navy); }
.ptp-button--ghost:hover { background: var(--premio-navy); color: var(--premio-white); }

/* /moj-upit/ page */
.moj-upit { background: var(--premio-white); color: var(--premio-navy); }
.moj-upit__wrap { width: min(calc(100% - 96px), 900px); margin-inline: auto; padding-block: 64px 96px; }
.moj-upit__eyebrow { margin-bottom: 16px; color: var(--premio-cyan); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; }
.moj-upit h1 { margin: 0 0 16px; font-size: clamp(36px, 4vw, 52px); font-weight: 800; letter-spacing: -1.2px; }
.moj-upit__lede { margin: 0 0 36px; max-width: 620px; font-size: 16px; line-height: 1.65; color: var(--premio-grey); }

.moj-upit__success { margin: 0 0 24px; padding: 14px 18px; border-left: 3px solid var(--premio-cyan); background: var(--premio-light-grey); font-size: 14px; }
.moj-upit__error { margin: 0 0 24px; padding: 14px 18px; border-left: 3px solid var(--premio-navy); background: var(--premio-light-grey); font-size: 14px; }
.moj-upit__notice { margin: 0 0 24px; padding: 14px 18px; border-left: 3px solid var(--premio-grey); background: var(--premio-light-grey); font-size: 14px; color: var(--premio-navy); }

.moj-upit__empty { padding: 48px 0; border-top: 1px solid rgb(16 32 51 / .12); font-size: 15px; line-height: 1.7; }
.moj-upit__empty a { color: var(--premio-navy); font-weight: 700; }

.moj-upit__list { display: grid; gap: 0; margin-bottom: 48px; border-top: 1px solid rgb(16 32 51 / .12); }
/* Author-origin `display: grid` above otherwise beats the browser's default `[hidden]{display:none}`
   UA rule regardless of selector specificity, so JS setting listEl.hidden = true (e.g. when the last
   item is removed) would leave the old row visibly rendered until the class rule is scoped out. */
.moj-upit__list[hidden] { display: none; }
.moj-upit-item { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 24px; padding: 20px 0; border-bottom: 1px solid rgb(16 32 51 / .12); }
.moj-upit-item__image { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; background: var(--premio-light-grey); }
.moj-upit-item__image img { display: block; width: 82%; height: 82%; object-fit: contain; margin: auto; }
.moj-upit-item__body { min-width: 0; }
.moj-upit-item__name { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.moj-upit-item__specs { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--premio-grey); overflow-wrap: anywhere; }
.moj-upit-item__accessories { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--premio-navy); }
.moj-upit-item__price { margin: 0; font-size: 14px; font-weight: 700; color: var(--premio-navy); }
.moj-upit-item__remove { flex: none; padding: 8px 14px; border: 1px solid rgb(16 32 51 / .2); background: transparent; color: var(--premio-navy); font-size: 11px; font-weight: 700; letter-spacing: .5px; cursor: pointer; }
.moj-upit-item__remove:hover { border-color: var(--premio-navy); background: var(--premio-navy); color: var(--premio-white); }

.moj-upit__form { padding-top: 8px; border-top: 2px solid var(--premio-cyan); }
.moj-upit__form h2 { margin: 0 0 24px; font-size: 24px; font-weight: 800; }
.moj-upit__form form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.moj-upit-form__note { grid-column: 1 / -1; margin: 0; font-size: 11px; line-height: 1.5; color: var(--premio-grey); }
.moj-upit-form__field { display: grid; gap: 6px; font-size: 12px; font-weight: 600; }
.moj-upit-form__field:has(textarea) { grid-column: 1 / -1; }
.moj-upit__form input, .moj-upit__form textarea { width: 100%; padding: 12px 14px; border: 1px solid rgb(16 32 51 / .25); border-radius: 0; background: transparent; color: var(--premio-navy); font-size: 15px; }
.moj-upit__form textarea { min-height: 90px; resize: vertical; }
.moj-upit__form input:focus-visible, .moj-upit__form textarea:focus-visible { outline: 2px solid var(--premio-navy); outline-offset: 2px; }
.moj-upit-form__submit { grid-column: 1 / -1; display: inline-flex; justify-self: start; min-height: 52px; align-items: center; gap: 12px; padding: 16px 26px; border: 0; background: var(--premio-cyan); color: var(--premio-navy); font: 700 11px/1.3 "Poppins", sans-serif; letter-spacing: .7px; cursor: pointer; }
.moj-upit-form__submit:hover { box-shadow: inset 0 0 0 1px var(--premio-navy); }

@media (max-width: 767px) {
	.moj-upit__wrap { width: calc(100% - 40px); padding-block: 40px 64px; }
	.moj-upit-item { grid-template-columns: 72px 1fr; }
	.moj-upit-item__remove { grid-column: 1 / -1; width: 100%; margin-top: 4px; }
	.moj-upit-item__image { width: 72px; height: 72px; }
	.moj-upit__form form { grid-template-columns: minmax(0, 1fr); }
	.moj-upit-form__submit { width: 100%; justify-content: center; }
}