/* components.css */

/*🟢 Buttons*/
.btn {display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; cursor:pointer; box-sizing:border-box; user-select:none; font-weight:var(--Medium); text-decoration:none; border:0.0625rem solid transparent}
.btn--reset {padding:0; color:inherit; background:none; border:0; font:inherit; line-height:inherit; -webkit-appearance:none; appearance:none}
.btn--L {--BtnSize:var(--ControlL); height:var(--BtnSize); padding:0 var(--InsetL); gap:var(--GapL); font-size:var(--Base); line-height:var(--BaseLine); border-radius:var(--RadiusL)}
.btn--M {--BtnSize:var(--ControlM); height:var(--BtnSize); padding:0 var(--InsetL); gap:var(--GapM); font-size:var(--Base); line-height:var(--BaseLine); border-radius:var(--RadiusM)}
.btn--S {--BtnSize:var(--ControlS); height:var(--BtnSize); padding:0 var(--InsetS); gap:var(--GapS); font-size:var(--Base); line-height:var(--BaseLine); border-radius:var(--RadiusS)}
.btn--XS {--BtnSize:var(--ControlXS); height:var(--BtnSize); padding:0 var(--InsetS); gap:var(--GapS); font-size:var(--Small); line-height:var(--SmallLine); border-radius:var(--RadiusXS)}
.btn--L > svg {height:var(--IconL)}
.btn--M > svg {height:var(--IconM)}
.btn--S > svg {height:var(--IconS)}
.btn--XS > svg {height:var(--IconXS)}
.btn--L > img {height:var(--IconL); width:auto; display:block}
.btn--M > img {height:var(--IconM); width:auto; display:block}
.btn--S > img {height:var(--IconS); width:auto; display:block}
.btn--XS > img {height:var(--IconXS); width:auto; display:block}
.btn--full-width {width:100%}
.btn--fit-content {width:fit-content}
.btn--icon {width:var(--BtnSize); padding:0; gap:0; aspect-ratio:1/1; border-radius:var(--RadiusMax)}

.btn--primary {background-color:var(--BackgroundOrangeDeep); color:var(--TextOnBackground)}
.btn--secondary {background-color:var(--BackgroundSecondary); color:var(--TextPrimary)}
.btn--tertiary {background-color:var(--BackgroundWhite); color:var(--TextSecondary)}
.btn--ghost {background-color:transparent; color:var(--TextSecondary); box-shadow:none}
.btn--outline {position:relative; padding-right:calc(var(--InsetM) + 1.25rem); background-color:var(--BackgroundWhite); color:var(--TextLink); box-shadow:inset 0 0 0 var(--StrokeM) var(--StrokeAccent)}
.btn--outline::after {content:"✓"; position:absolute; top:50%; right:var(--InsetM); transform:translateY(-50%); font-size:var(--Base); line-height:var(--BaseLine); font-weight:var(--Bold)}
.btn--green {background-color:var(--BackgroundGreen); color:var(--TextOnBackground)}
.btn--yellow {background-color:var(--BackgroundYellow); color:var(--TextPrimary)}
.btn--red {background-color:var(--BackgroundRed); color:var(--TextOnBackground)}
.btn--dark {background-color:var(--BackgroundDark); color:var(--TextOnBackground)}

.btn--primary svg *, .btn--green svg *, .btn--red svg *, .btn--dark svg * {fill:var(--IconOnBackground); stroke:none}
.btn--secondary svg *, .btn--yellow svg * {fill:var(--IconPrimary); stroke:none}
.btn--tertiary svg * {fill:var(--IconSecondary); stroke:none}
.btn--ghost svg * {fill:var(--IconSecondary); stroke:none}

.btn--shadow {box-shadow:var(--ShadowDefault)}
.btn--disabled {cursor:default; opacity:.5; pointer-events:none; box-shadow:none}

.btn--primary:not(.btn--disabled):hover {background-color:var(--BackgroundOrangeDeepHover)}
.btn--secondary:not(.btn--disabled):hover {background-color:var(--BackgroundTertiary)}
.btn--tertiary:not(.btn--disabled):hover {color:var(--TextPrimary)}
.btn--tertiary:not(.btn--disabled):hover svg * {fill:var(--IconPrimary)}
.btn--ghost:not(.btn--disabled):hover {background-color:transparent; color:var(--TextPrimary)}
.btn--ghost:not(.btn--disabled):hover svg * {fill:var(--IconPrimary); stroke:none}
.btn--green:not(.btn--disabled):hover {background-color:var(--BackgroundGreenHover)}
.btn--yellow:not(.btn--disabled):hover {background-color:var(--BackgroundYellowHover)}
.btn--red:not(.btn--disabled):hover {background-color:var(--BackgroundRedHover)}
.btn--dark:not(.btn--disabled):hover {background-color:var(--BackgroundOrangeDeep)}
.btn--shadow:not(.btn--disabled):hover {box-shadow:var(--ShadowHover)}

.btn.circle-img {padding:0; line-height:0; outline:none; border:0}

.favorites-icon {display:flex; align-items:center; justify-content:center; width:100%; height:100%; line-height:0}
.favorites-icon svg {display:block; width:var(--IconM); height:var(--IconM)}
.favorites-icon svg * {fill:currentColor; stroke:none}
.favorites-icon-filled {color:var(--BackgroundRed)}
.btn:not(.btn--disabled):hover .favorites-icon-filled {color:var(--BackgroundRedHover)}
.btn--tertiary:not(.btn--disabled):hover .favorites-icon-filled svg * {fill:currentColor !important; stroke:none !important}

.btn--icon-red svg * {fill:var(--IconRed); stroke:none}
.btn--icon-green svg * {fill:var(--IconGreen); stroke:none}
.btn--icon-blue svg * {fill:var(--IconBlue); stroke:none}
.btn--icon-orange svg * {fill:var(--IconOrangeDeep); stroke:none}
.btn--icon-yellow svg * {fill:var(--IconYellow); stroke:none}
.btn--icon-purple svg * {fill:var(--IconPurple); stroke:none}

.btn--icon-red:hover svg * {fill:var(--IconRed); stroke:none}
.btn--icon-green:hover svg * {fill:var(--IconGreen); stroke:none}
.btn--icon-blue:hover svg * {fill:var(--IconBlue); stroke:none}
.btn--icon-orange:hover svg * {fill:var(--IconOrangeDeep); stroke:none}
.btn--icon-yellow:hover svg * {fill:var(--IconYellow); stroke:none}
.btn--icon-purple:hover svg * {fill:var(--IconPurple); stroke:none}

/*🟢 Vertical Buttons*/
.vbtn {display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:var(--GapS); width:fit-content; padding:var(--InsetS) var(--InsetM); text-decoration:none; user-select:none}
.vbtn-icon {display:flex; align-items:center; justify-content:center; width:var(--ControlL); height:var(--ControlL); border-radius:var(--RadiusMax); background:var(--BackgroundWhite); box-shadow:none}
.vbtn-icon svg {display:block; width:var(--IconL); height:var(--IconL)}
.vbtn-icon--M {width:var(--ControlM); height:var(--ControlM)}
.vbtn-icon--M svg {width:var(--IconM); height:var(--IconM)}
.vbtn-label {color:var(--TextSecondary); font-size:var(--Small); line-height:var(--SmallLine)}
.vbtn:hover .vbtn-label, .vbtn--active-fill .vbtn-label, .vbtn--active-outline .vbtn-label {color:var(--TextPrimary)}

.vbtn--mono .vbtn-icon {color:var(--IconSecondary)}
.vbtn--mono .vbtn-icon svg * {fill:currentColor; stroke:none}
.vbtn--mono:hover .vbtn-icon {color:var(--IconPrimary)}
.vbtn--outline .vbtn-icon {color:inherit; box-shadow:inset 0 0 0 var(--Stroke) var(--StrokeSecondary)}
.vbtn--active-fill .vbtn-icon {background:var(--BackgroundOrangeDeep); box-shadow:var(--ShadowDefault)}
.vbtn--active-fill.vbtn--mono .vbtn-icon {color:var(--IconOnBackground)}
.vbtn--active-outline .vbtn-icon {background:var(--BackgroundWhite); box-shadow:inset 0 0 0 var(--StrokeM) var(--StrokeAccent)}

.vbtn-group {display:flex; flex-flow:row nowrap; justify-content:center; align-items:flex-start}
.vbtn--mono .vbtn--tg {background:#40B3E0}
.vbtn--mono .vbtn--wa {background:#67C15E}
.vbtn--mono .vbtn--zalo {background:#006AFF}
.vbtn--mono .vbtn--messenger {background:#0084FF}
.vbtn--mono .vbtn--instagram {background:#DD2A7B}
.vbtn--mono .vbtn--tg svg *, .vbtn--mono .vbtn--wa svg *, .vbtn--mono .vbtn--messenger svg *, .vbtn--mono .vbtn--instagram svg * {fill:var(--IconOnBackground)}
.vbtn--mono .vbtn--zalo svg * {fill:#F2F4F5}

.vbtn--mono .vbtn--secondary {background:var(--BackgroundSecondary)}
.vbtn--mono .vbtn--secondary svg * {fill:var(--IconSecondary)}
.vbtn--mono .vbtn--dark {background:var(--BackgroundDark)}
.vbtn--mono .vbtn--dark svg * {fill:var(--IconOnBackground)}

.vbtn-group--social {margin:var(--OffsetM) 0; gap:var(--GapL); justify-content:flex-start}
.vbtn-group--social .vbtn {padding:0}


/*🟢 Field Buttons*/
.btn-field {display:flex; align-items:center; justify-content:flex-start; width:100%; min-width:0; box-sizing:border-box; height:var(--ControlXL); padding:0 var(--InsetL); background:var(--BackgroundWhite); border:0; border-radius:var(--RadiusL); outline:none; cursor:pointer; text-align:left; user-select:none}
.btn-field-text {display:flex; flex:1 1 auto; flex-direction:column; justify-content:center; gap:0; min-width:0}
.btn-field-label, .btn-field-value {font-size:var(--Base); line-height:var(--BaseLine); font-weight:var(--Regular); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.btn-field-label {color:var(--TextTertiary)}
.btn-field-value {display:none; color:var(--TextPrimary)}
.btn-field.is-filled .btn-field-label {font-size:var(--Small); line-height:var(--SmallLine); color:var(--TextTertiary)}
.btn-field.is-filled .btn-field-value {display:block}
.btn--field-icon {display:flex; flex:0 0 auto; align-items:center; justify-content:center; width:var(--IconM); height:var(--IconM); margin-left:auto}
.btn--field-icon svg {width:100%; height:100%}
.btn--field-icon svg * {fill:var(--IconTertiary); stroke:none}
.btn-field--stroke-b {box-shadow:inset 0 -0.0625rem 0 var(--StrokeSecondary)}
.btn-field--stroke-r {box-shadow:inset -0.0625rem 0 0 var(--StrokeSecondary)}
.btn-field--stroke-l {box-shadow:inset 0.0625rem 0 0 var(--StrokeSecondary)}
.btn-field--stroke-b-l {box-shadow:inset 0.0625rem 0 0 var(--StrokeSecondary), inset 0 -0.0625rem 0 var(--StrokeSecondary)}
.btn-field.is-error {box-shadow:inset 0 0 0 var(--StrokeM) var(--StrokeAccent)}
.btn-field--full {flex:0 0 100%; min-width:0}
.btn-field--half {flex:0 0 calc(50% - (var(--GapL) / 2)); min-width:0}


/*🟢 Labels*/
.label {display:flex; flex-flow:row nowrap; align-items:center; justify-content:center; gap:var(--GapS); width:fit-content; text-decoration:none; user-select:none}
.label--M {height:var(--ControlXXS); padding:0 var(--InsetS); font-size:var(--Small); line-height:var(--SmallLine); border-radius:var(--RadiusS)}
.label--L {height:var(--ControlS); padding:0 var(--InsetM); font-size:var(--Small); line-height:var(--SmallLine); border-radius:var(--RadiusM)}
.label--L > svg {height:var(--IconS)}
.label--green {color:var(--TextOnBackground); background:var(--BackgroundGreen)}
.label--red {color:var(--TextOnBackground); background:var(--BackgroundRed)}
.label--yellow {color:var(--TextPrimary); background:var(--BackgroundYellow)}
.label--purple {color:var(--TextOnBackground); background:var(--BackgroundPurple)}
.label--blue {color:var(--TextOnBackground); background:var(--BackgroundBlue)}
.label--orange {color:var(--TextOnBackground); background:var(--BackgroundOrange)}
.label--white {color:var(--TextPrimary); background:var(--BackgroundWhite)}
.label--black {color:var(--TextOnBackground); background:var(--BackgroundDark)}

.label-avalible {display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-start; gap:var(--GapM); margin-bottom:var(--OffsetM); font-size:var(--Base); line-height:var(--BaseLine)}
.label-avalible-icon {display:flex; align-items:center; justify-content:center; width:var(--ControlXS); height:var(--ControlXS); padding:0; gap:0; border-radius:var(--RadiusS)}
.label-avalible-icon > svg {height:var(--IconXS)}
.avalible-icon--green {background:var(--BackgroundGreen)}
.avalible-icon--yellow {background:var(--BackgroundYellow)}
.avalible-icon--red {background:var(--BackgroundRed)}
.avalible-icon--purple {background:var(--BackgroundPurple)}
.avalible-icon--green svg *, .avalible-icon--red svg * {fill:var(--IconOnBackground); stroke:none}
.avalible-icon--yellow svg * {fill:var(--IconPrimary); stroke:none}

.label--float-top-right {position:absolute; top:0; right:var(--OffsetS); transform:translateY(-50%); z-index:2}

/*Text Limit*/
.clamp-1 {display:block; width:100%; max-width:100%; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.clamp-2,
.clamp-3 {display:-webkit-box; width:100%; max-width:100%; min-width:0; overflow:hidden; -webkit-box-orient:vertical}
.clamp-2 {-webkit-line-clamp:2; line-clamp:2}
.clamp-3 {-webkit-line-clamp:3; line-clamp:3}

/*Sort Link*/
.sort {display:inline-flex; align-items:center; gap:var(--GapS); padding:0; background:none; border:0; cursor:pointer; user-select:none; -webkit-appearance:none; appearance:none; color:var(--TextPrimary); font-size:var(--Headline); line-height:var(--HeadlineLine); font-weight:var(--SemiBold)}
.sort:hover {color:var(--TextLink)}
.sort:focus {outline:none}
.sort .link-icon {display:flex; flex:0 0 auto; width:var(--IconS); height:var(--IconS)}
.sort .link-icon svg {display:block; width:100%; height:100%}
.sort .link-icon svg * {fill:currentColor; stroke:none}

/*Inputs & Select & Checkbox*/
.input {display:block; width:100%; box-sizing:border-box; height:var(--ControlL); padding:0 var(--InsetL); font-size:var(--Base); line-height:var(--BaseLine); color:var(--TextPrimary); border-radius:var(--RadiusL); background-color:var(--BackgroundWhite); border:none; outline:none; box-shadow:none; -webkit-appearance:none; appearance:none}
.input::placeholder {color:var(--TextTertiary)}
.input:focus::placeholder {opacity:0.55}
.input--full-width {width:100%}
.input:disabled {color:var(--TextTertiary); opacity:1}
.input--date {line-height:var(--ControlL)}
.input--date::-webkit-datetime-edit,
.input--date::-webkit-datetime-edit-fields-wrapper {padding:0; line-height:var(--ControlL); display:flex; align-items:center}

.select {position:relative}
.select-control {padding-right:calc(var(--InsetL) + var(--ControlS))}
.select::after {content:""; position:absolute; right:var(--InsetL); top:50%; transform:translateY(-50%); width:var(--IconS); height:var(--IconS); pointer-events:none; background-repeat:no-repeat; background-size:100% 100%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M11.5283 5.52827C11.7886 5.26792 12.2113 5.26792 12.4716 5.52827C12.732 5.78862 12.732 6.21128 12.4716 6.47163L8.47163 10.4716C8.21128 10.732 7.78862 10.732 7.52827 10.4716L3.52827 6.47163C3.26792 6.21128 3.26792 5.78862 3.52827 5.52827C3.78862 5.26792 4.21128 5.26792 4.47163 5.52827L7.99995 9.05659L11.5283 5.52827Z' fill='%23969494'/%3E%3C/svg%3E")}
.select:has(.select-control:disabled)::after {color:var(--TextTertiary)}

.input--secondary {background-color:var(--BackgroundSecondary)}
.select--secondary .input {background-color:var(--BackgroundSecondary)}

.check-item {cursor:pointer; -webkit-tap-highlight-color:transparent}
.check-item-input {position:absolute; opacity:0; pointer-events:none}
.check-item-mark {flex:0 0 auto; width:var(--IconS); height:var(--IconS); border-radius:var(--RadiusMax); box-sizing:border-box; box-shadow:inset 0 0 0 var(--StrokeM) var(--StrokeSecondary); background:transparent; position:relative}
.check-item-input:checked + .check-item-mark {background-color:var(--BackgroundOrangeDeep); box-shadow:none}
.check-item-input:checked + .check-item-mark::after {content:"✓"; position:absolute; left:50%; top:50%; transform:translate(-50%,-52%); font-size:var(--Small); line-height:1; font-weight:var(--Bold); color:var(--IconOnBackground)}
.check-item:has(.check-item-input:focus-visible) .check-item-mark {box-shadow:inset 0 0 0 var(--StrokeM) var(--StrokeSecondary), 0 0 0 var(--StrokeM) var(--StrokeSecondary)}


/*Switch*/
.field-switch-head {display:flex; align-items:center; justify-content:flex-start; gap:var(--GapM); height:var(--ControlM)}
.field-switch-text {font-size:var(--Base); line-height:var(--BaseLine); color:var(--TextPrimary)}
.field-switch-body[hidden] {display:none}

.switch {display:inline-flex; align-items:center; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent}
.switch input {position:absolute; opacity:0; pointer-events:none}
.switch-ui {display:block; position:relative; width:3rem; height:1.75rem; border-radius:var(--RadiusMax); background-color:var(--BackgroundSecondary); transition:background-color .15s ease, box-shadow .15s ease}
.switch-ui::after {content:""; position:absolute; top:0.0625rem; left:0.0625rem; width:1.625rem; height:1.625rem; border-radius:var(--RadiusMax); background-color:var(--BackgroundWhite); box-shadow:var(--ShadowDefault); transition:transform .15s ease}
.switch input:checked + .switch-ui {background-color:var(--BackgroundOrangeDeep); box-shadow:none}
.switch input:checked + .switch-ui::after {transform:translateX(1.25rem)}
.switch input:focus-visible + .switch-ui {box-shadow:0 0 0 0.125rem rgba(0,0,0,0.18), inset 0 0 0 0.0625rem rgba(60,60,67,.18)}
.switch input:checked:focus-visible + .switch-ui {box-shadow:0 0 0 0.125rem rgba(0,0,0,0.18)}
.switch input:disabled + .switch-ui {opacity:.5}
.switch input:disabled ~ * {cursor:default}


/*Field*/
.field {position:relative; display:block}
.field-control {display:block; width:100%; box-sizing:border-box; height:var(--ControlXL); padding:0 var(--InsetL); font-size:var(--Base); line-height:var(--BaseLine); font-weight:var(--Regular); color:var(--TextPrimary); background-color:var(--BackgroundWhite); border:0; border-radius:var(--RadiusL); outline:none; appearance:none; -webkit-appearance:none}
.field-label {position:absolute; left:var(--InsetL); top:var(--InsetM); font-size:var(--Small); line-height:var(--SmallLine); color:var(--TextTertiary); pointer-events:none; opacity:0; transform:translateY(0.25rem); transition:opacity .15s ease, transform .15s ease}
.field-icon {position:absolute; right:var(--InsetL); top:50%; transform:translateY(-50%); width:var(--IconM); height:var(--IconM); pointer-events:none}
.field-icon svg {display:block; width:100%; height:100%}
.field-icon svg * {fill:var(--IconTertiary); stroke:none}
.field--select .field-control {padding-right:calc(var(--InsetL) + var(--IconS) + var(--GapS)); padding-top:var(--InsetM); padding-bottom:var(--InsetM)}
.field--select .field-control:invalid {color:var(--TextTertiary)}
.field--select .field-control:not(:invalid) {color:var(--TextPrimary); padding-top:calc(var(--InsetS) + var(--BaseLine))}
.field--select .field-control:not(:invalid) ~ .field-label {opacity:1; transform:none}
.select--full {flex:0 0 100%; min-width:0}
.select--half {flex:0 0 calc(50% - (var(--GapL) / 2)); min-width:0}
.field-control--stroke-b {box-shadow:inset 0 -0.0625rem 0 var(--StrokeSecondary)}
.field-control--stroke-r {box-shadow:inset -0.0625rem 0 0 var(--StrokeSecondary)}

/*Divider*/
.divider {display:block; width:100%; background-color:var(--StrokePrimary); margin:0 auto; padding:0; border:0}
.divider--stroke {height:var(--Stroke)}
.divider--group {height:var(--StrokeMax)}
.divider--between {margin:var(--OffsetL) auto}

/*Pill*/
.pill {display:flex; flex-flow:row nowrap; gap:var(--GapS); align-items:center; justify-content:center; height:var(--ControlS); width:fit-content; padding:0 var(--InsetM); color:var(--TextPrimary); font-size:var(--Base); line-height:var(--BaseLine); white-space:nowrap; border-radius:var(--RadiusM); background-color:var(--BackgroundSecondary); text-decoration:none; user-select:none; cursor:pointer; border:none; outline:none; box-shadow:none; appearance:none; -webkit-appearance:none}
.pill:hover {background-color:var(--BackgroundTertiary)}
.pill svg {display:block; width:var(--IconXXS); height:var(--IconXXS)}
.pill svg * {fill:currentColor; stroke:none}
.pill--reset {gap:var(--GapM); background-color:var(--BackgroundRed); color:var(--TextOnBackground)}
.pill--reset:hover {background-color:var(--BackgroundRed)}
.pill-wrap {display:flex; flex-flow:row nowrap; gap:0; border-radius:var(--RadiusM); background-color:var(--BackgroundDark)}
.pill-wrap .pill {background-color:var(--BackgroundDark); color:var(--TextOnBackground)}
.pill-wrap > .pill:first-child {padding-right:0}
.toggle-active {gap:var(--GapM); background-color:var(--BackgroundDark); color:var(--TextOnBackground)}
.toggle-active:hover {background-color:var(--BackgroundDark)}

/*Icons & Images*/
.circle-icon {display:flex; justify-content:center; align-items:center; flex:0 0 auto; position:relative; overflow:hidden; aspect-ratio:1/1; border-radius:var(--RadiusMax)}
.circle-icon--L {width:var(--ControlL); height:var(--ControlL)}
.circle-icon--L > svg {width:var(--IconXL); height:var(--IconXL)}
.circle-icon--M {width:var(--ControlM); height:var(--ControlM)}
.circle-icon--M > svg {width:var(--IconL); height:var(--IconL)}
.circle-icon--orange {background-color:var(--BackgroundOrangeDeep)}
.circle-icon--orange svg * {fill:var(--IconOnBackground); stroke:none}
.circle-icon--white {background-color:var(--BackgroundWhite)}
.circle-icon--white svg * {fill:var(--IconSecondary); stroke:none}
.circle-icon--success svg * {fill:var(--IconGreen); stroke:none}
.circle-icon--warning svg * {fill:var(--IconOrange); stroke:none}
.circle-icon--danger svg * {fill:var(--IconRed); stroke:none}
.circle-icon--shadow {box-shadow:var(--ShadowDefault)}
.circle-img {display:block; position:relative; overflow:hidden; aspect-ratio:1/1; border-radius:var(--RadiusMax); background-color:var(--BackgroundSecondary)}
.circle-img--M {width:var(--ControlM); height:var(--ControlM)}
.circle-img--XL {width:6rem; height:6rem}
.circle-img--shadow {box-shadow:var(--ShadowDefault)}
.circle-img img {display:block; width:100%; height:100%; object-fit:cover}

.img-box {display:block; position:relative; overflow:hidden; border-radius:inherit; line-height:0; background-color:var(--BackgroundSecondary)}
.img-box--M {border-radius:var(--RadiusL)}
.img-box--L {border-radius:var(--RadiusXL)}
.img-box--XL {border-radius:var(--RadiusXL)}
.img-box--21x9 {aspect-ratio:21 / 9}
.img-box--16x9 {aspect-ratio:16 / 9}
.img-box--4x3 {aspect-ratio:4 / 3}
.img-box--3x4 {aspect-ratio:3 / 4}
.img-box--1x1 {aspect-ratio:1 / 1}

.img-box > img {display:block; width:100%; height:100%; object-fit:cover; transform-origin:center; transition:transform .22s ease}
.img-box-blur,.img-box-main {position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.img-box-blur {transform:scale(1.06); filter:blur(1rem); opacity:1; transition:opacity .24s ease}
.img-box-main {transform:scale(1); opacity:0; transition:opacity .24s ease, transform .22s ease}
.img-box.is-loaded .img-box-main {opacity:1}
.img-box.is-loaded .img-box-blur {opacity:0}

.img-box--hover-scale:hover > img {transform:scale(1.06)}
.img-box--hover-scale:hover .img-box-main {transform:scale(1.06)}

.img-box .label {position:absolute; left:var(--OffsetS); bottom:var(--OffsetS); z-index:2}
.img-box .btn {position:absolute; right:var(--OffsetS); top:var(--OffsetS); z-index:2}

.img-box--city {border-radius:var(--RadiusXL)}
.img-box--city::after {content:""; position:absolute; left:0; right:0; bottom:0; height:55%; z-index:1; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); pointer-events:none}
.img-box-city-content {position:absolute; left:var(--InsetL); right:var(--InsetL); bottom:var(--InsetL); z-index:2; display:flex; flex-direction:column; gap:var(--GapXXS); min-width:0}
.img-box-city-title {color:var(--TextOnBackground); font-size:var(--Large); line-height:var(--LargeLine); font-weight:var(--SemiBold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.img-box-city-note {color:var(--TextOnBackground); font-size:var(--Small); line-height:var(--SmallLine); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.img-box-content {position:absolute; left:var(--InsetS); right:var(--InsetS); bottom:var(--InsetS); z-index:2; display:flex; flex-flow:row nowrap; align-items:center; gap:var(--GapL); padding:var(--InsetS); border-radius:var(--RadiusL); background-color:var(--BackgroundWhite); box-shadow:var(--ShadowDefault)}
.img-box-content img.img-box-content-media {display:block; flex:0 0 4rem; width:4rem; height:4rem; object-fit:cover; border-radius:var(--RadiusL)}
.img-box-content-text {min-width:0; flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:var(--GapXXS)}
.img-box-content-title {font-size:var(--Headline); line-height:var(--HeadlineLine); font-weight:var(--SemiBold); color:var(--TextPrimary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.img-box-content-note {font-size:var(--Small); line-height:var(--SmallLine); color:var(--TextTertiary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/*Cards*/
.card {display:flex; flex-direction:column; position:relative; color:var(--TextPrimary)}
.card:hover {color:currentColor}
.card:hover .img-box img {transform:scale(1.15)}
.card:hover .img-box-content img {transform:scale(1)}
.card > .label {position:absolute; top:var(--OffsetS); left:var(--OffsetS); z-index:2}
.card-content {display:flex; flex-direction:column; gap:var(--GapXXS); padding:var(--InsetS) var(--InsetXS)}
.card-title {font-size:var(--Large); line-height:var(--LargeLine); font-weight:var(--SemiBold)}
.card-price {font-size:var(--Base); line-height:var(--BaseLine); font-weight:var(--SemiBold)}
.card-details {font-size:var(--Small); line-height:var(--SmallLine)}
.card-details--icon {display:flex; flex-flow:row nowrap; gap:var(--GapXS)}
.card-details--gray {color:var(--TextSecondary)}
.card-details--gray svg * {height:var(--IconS); fill:var(--IconSecondary); stroke:none}
.card-details--light {color:var(--TextTertiary)}
.card-details--light svg * {height:var(--IconS); fill:var(--IconTertiary); stroke:none}
.card-details--clamp-3 {display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden}
.card-details--dark {color:var(--TextPrimary)}
.card--XS .card-content {gap:0; min-width:0}

/*Pagination*/
.pagination {display:flex; flex-flow:row nowrap; align-items:center; justify-content:space-between; border-radius:var(--RadiusL); background-color:var(--BackgroundSecondary)}
.pagination .btn--icon {border-radius:var(--RadiusL)}

/*🟢 List*/
.list, .list-item-content {display:flex; flex-direction:column}
.list--pad {padding:0 var(--InsetL)}
.list-item {position:relative; display:flex; flex-flow:row nowrap; align-items:center; gap:var(--GapM); min-height:var(--ControlM); padding:var(--InsetM) 0; color:var(--TextPrimary); font-size:var(--Base); line-height:var(--BaseLine); text-decoration:none; user-select:none}
.list-item[aria-current="true"]::after {content:"✓"; position:absolute; top:50%; right:var(--InsetM); transform:translateY(-50%); font-size:var(--Base); line-height:var(--BaseLine); font-weight:var(--Bold); color:var(--IconOrangeDeep)}

button.list-item {background:none; border:0; font:inherit; text-align:left; cursor:pointer; appearance:none; -webkit-appearance:none; -webkit-tap-highlight-color:transparent}
button.list-item:focus {outline:none}
button.list-item::-moz-focus-inner {border:0}

.list-item:where(a),
.list-item:where(a:hover, a:focus, a:active, a:visited) {color:var(--TextPrimary); text-decoration:none}

.list-item--pad {padding:var(--InsetM) var(--InsetL)}
.list-item-icon {flex:0 0 auto; width:var(--IconM); height:var(--IconM); stroke:none}
.list-item-icon svg, .list-item-chevron svg {width:100%; height:100%}
.list-item-icon svg * {fill:var(--IconSecondary); stroke:none}
.list-item-chevron {flex:0 0 auto; width:var(--IconXS); height:var(--IconXS)}
.list-item-chevron svg * {fill:var(--IconOrangeDeep); stroke:none}
.list-item-chevron--gray svg * {fill:var(--IconTertiary); stroke:none}

.list-item-content {flex:1 1 auto; min-width:0; gap:var(--GapXXS)}
.list-item-title {color:var(--TextPrimary)}
.list-item-hint {font-size:var(--Small); line-height:var(--SmallLine); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.list-item .label {flex:0 0 auto; margin-left:auto}

.list--divided .list-item {border-bottom:0.0625rem solid var(--StrokePrimary)}
.list--divided .list-item:last-child {border-bottom:0}

.list-item--between {justify-content:space-between}
.list-item--between > .list-item-content {flex:0 0 auto}
.list-item--between > .list-item-content:first-child {flex:1 1 auto; min-width:0}

.list-more {color:var(--TextLink)}
.list-more:where(:hover, :focus, :active, :visited) {color:var(--TextLink); text-decoration:none}
.list-more .list-item-icon {color:var(--IconOrangeDeep)}
.list-more .list-item-icon svg * {fill:currentColor; stroke:none}

.list--cards {gap:var(--GapL)}
.list-item--delete {color:var(--TextRed)}
.list-item--delete:hover {color:var(--TextRedHover)}

.list-item-media, .list-item-media-box {display:flex; flex:0 0 auto; align-items:center; justify-content:center}
.list-item-media-box {overflow:hidden; background:var(--BackgroundCanvas)}
.list-item-media-box--M {width:var(--ControlM); height:var(--ControlM); border-radius:var(--RadiusM)}
.list-item-media-box--L {width:var(--ControlXL); height:var(--ControlXL); border-radius:var(--RadiusL)}
.list-item-media-box > img {display:block; width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform .22s ease}
.list-item:hover .list-item-media-box > img {transform:scale(1.15)}
.list-item-media-box > svg {display:block; width:var(--IconM); height:var(--IconM)}
.list-item-media-box > svg * {fill:var(--IconTertiary); stroke:none}
.list-item-media-box--white {background-color:var(--BackgroundWhite)}

/*Grid*/
.grid {display:flex; flex-flow:row wrap}
.grid--cards {row-gap:var(--GapL); column-gap:var(--GapS)}
.grid--cards .card--M {flex:0 0 calc(50% - (var(--GapS) / 2)); min-width:0}