.search-results {
	font-family: Montserrat;
	color: #333333;
	position: relative;
	height: 100vh;
	box-sizing: border-box;
	overflow: hidden;
}

.address-option {
	display: flex;
	color: #2dbe4d;
	font-size: 14px;
    font-weight: 500;
    padding: 10px;
}
.address-option.reserved {
	color: rgb(97, 97, 97);
}
.address-option.selected {
	background: rgba(255, 248, 79, 0.17);
}

.status-tag {
	text-align: left;
    font-family: 'SFProText';
    color: #6bba1c;
    font-weight: 500;
    font-size: 18px;
    width: calc(100% - 24px);
    margin-left: 5px;
    margin-right: 5px;
}
.status-tag.reserved {
	background-color: rgba(97, 97, 97, 0.1);
	color: rgb(97, 97, 97);
}

.star-icon {
	background: url('../assets/star-grey.svg');
	background-size: 100% 100%;
	width: 34px;
	height: 34px;
	margin-right: 5px;
}
.star-icon.yellow {
	background: url('../assets/star-yellow.svg');
}

.info-icon {
	background: url('../assets/info.svg'); 
	width: 22px; 
	height: 22px;
	cursor: pointer;
}

.title {
	font-size: 24px;
	font-weight: 600;
	line-height: 24px;
	font-family: 'Montserrat';
	color: black;
}

.subtitle {
	font-size: 16px;
	font-weight: 600;
	line-height: 16px;
	font-family: 'Montserrat';
	color: black;
}

.label-text {
	font-family: 'SFProText';
	font-size: 14px;
	font-weight: 400;
	color: #757575;
}

.block-details-wrapper {
	display: flex; 
	padding: 16px 16px; 
	box-sizing: border-box; 
	position: relative;
	height: calc(100% - 52px);
}

.block-details-container .search-wrapper {
	display: flex; 
	margin-bottom: 30px; 
	position: relative; 
	z-index: 2;
}

.block-panel {
	width: 396px; 
	background: white; 
	border-radius: 10px; 
	color: black;
	position: relative; 
	z-index: 1;
	overflow: hidden;
}

.block-panel-content {
	overflow: auto; 
	max-height: calc(90vh);
}

.block-panel-header {
	border-bottom: 1px solid #f3f3f3;
}

.close-icon {
	color: rgba(0, 0, 0, 0.54); 
	position: absolute; 
	top: 0; 
	right: 0; 
	font-weight: bold;
	display: none;
}

.block-panel-section {
	padding: 16px; 
	border-bottom: 1px solid #f3f3f3;
}

.scrollable-section {
	overflow: auto; 
	max-height: calc(100vh - 233px);
}

.map-container {
	height: 100%; 
	width: 100%; 
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 1;
}

.success-gif-container {	
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
	width: 100%; 
	height: 224px;
}
.success-gif-container.img0 {background-image: url('../assets/success-gifs/0.gif'); }
.success-gif-container.img1 {background-image: url('../assets/success-gifs/1.gif'); }
.success-gif-container.img2 {background-image: url('../assets/success-gifs/2.gif'); }
.success-gif-container.img3 {background-image: url('../assets/success-gifs/3.gif'); }
.success-gif-container.img4 {background-image: url('../assets/success-gifs/4.gif'); }
.success-gif-container.img5 {background-image: url('../assets/success-gifs/5.gif'); }
.success-gif-container.img6 {background-image: url('../assets/success-gifs/6.gif'); }
.success-gif-container.img7 {background-image: url('../assets/success-gifs/7.gif'); }
.success-gif-container.img8 {background-image: url('../assets/success-gifs/8.gif'); }
.success-gif-container.img9 {background-image: url('../assets/success-gifs/9.gif'); }
.success-gif-container.img10 {background-image: url('../assets/success-gifs/10.gif'); }
.success-gif-container.img11 {background-image: url('../assets/success-gifs/11.gif'); }
.success-gif-container.img12 {background-image: url('../assets/success-gifs/12.gif'); }
.success-gif-container.img13 {background-image: url('../assets/success-gifs/13.gif'); }
.success-gif-container.img14 {background-image: url('../assets/success-gifs/14.gif'); }
.success-gif-container.img15 {background-image: url('../assets/success-gifs/15.gif'); }
.success-gif-container.img16 {background-image: url('../assets/success-gifs/16.gif'); }
.success-gif-container.img17 {background-image: url('../assets/success-gifs/17.gif'); }

/* ── Level-Up Panel ─────────────────────────────────────────── */
.lup-panel-content {
	font-family: 'SFProText';
	color: #757575;
	width: 100%;
	box-sizing: border-box;
}

.lup-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.lup-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #f9f9f9;
	border: 1px solid #ebebeb;
	border-radius: 20px;
	padding: 4px 10px;
	font-family: 'SFProText';
	font-size: 13px;
	color: #555;
}
.lup-badge-icon {
	font-size: 15px !important;
	color: #f37442;
}
.lup-badge-label {
	font-weight: 400;
}
.lup-badge-value {
	font-weight: 700;
	color: #1a1a1a;
}

.lup-buy-btn {
	cursor: pointer;
	margin-left: auto;
	border: 1px solid #EA794C;
	border-radius: 16px;
	font-family: 'SFProText';
	font-size: 14px;
	font-weight: 500;
	padding: 4px 8px;
	color: #EA794C;
}
.lup-offer-btn {
	margin-left: auto;
	border: 1px solid;
	padding: 2px 6px;
	border-radius: 25px;
	color: #EA794C;
	text-decoration: none;
	font-size: 13px;
}

.lup-marks-section {
	margin-top: 16px;
}
.lup-marks-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 6px;
}
.lup-marks-title {
	font-weight: 600;
	font-size: 14px;
	color: #1a1a1a;
}
.lup-marks-count {
	font-size: 13px;
	font-weight: 600;
	color: #1a1a1a;
}
.lup-marks-sep {
	color: #aaa;
	font-weight: 400;
}
.lup-marks-hint {
	font-size: 13px;
	color: #999;
	margin: 6px 0 16px;
}

.lup-progress-track {
	height: 7px;
	background: #e8e8e8;
	border-radius: 50px;
	overflow: hidden;
	position: relative;
}
.lup-progress-fill {
	height: 100%;
	border-radius: 50px;
	background: linear-gradient(90deg, #6bba1c 0%, #8fd432 60%, #b0e84a 100%);
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}
.lup-progress-fill::after {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
	animation: lup-shimmer 2s infinite;
	border-radius: 50px;
}
@keyframes lup-shimmer {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(200%); }
}

.lup-action {
	/* button wrapper — no extra spacing needed, big-button provides it */
}

.lup-perfect-blox {
	display: flex;
	align-items: center;
	font-family: 'SFProText';
	font-size: 14px;
	font-weight: 600;
	color: #555;
}

/* ── Level-Up Confirm Modal ─────────────────────────────────── */
.lup-confirm-title {
	font-family: 'SFPROTEXT';
	font-size: 24px;
	text-align: center;
	margin: 28px 0 20px;
	line-height: 1.35;
	color: #1a1a1a;
}
.lup-confirm-name {
	color: #ea794c;
	font-weight: 700;
}
.lup-confirm-cost-row {
	display: flex;
	gap: 12px;
	margin-bottom: 24px;
	justify-content: center;
}
.lup-confirm-cost-card {
	flex: 1;
	max-width: 180px;
	background: #fdf6f2;
	border: 1px solid #f5ddd0;
	border-radius: 10px;
	padding: 12px 16px;
	text-align: center;
}
.lup-confirm-cost-label {
	font-size: 12px;
	color: #999;
	margin-bottom: 4px;
	font-family: 'SFProText';
}
.lup-confirm-cost-value {
	font-size: 20px;
	font-weight: 700;
	color: #ea794c;
	font-family: 'SFProText';
}
.lup-confirm-cost-coins {
	color: #b58a00;
}
.lup-confirm-currency {
	font-size: 13px;
	font-weight: 400;
	color: #aaa;
}
.lup-confirm-submit:disabled,
.lup-confirm-submit.loading {
	opacity: 0.65;
	pointer-events: none;
}

/* ── Level-Up Success Modal ─────────────────────────────────── */
.lup-success-modal {
	font-family: 'SFPROTEXT';
}
.lup-success-title {
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 20px;
	line-height: 1.3;
	color: #1a1a1a;
}
.lup-success-stats {
	display: flex;
	gap: 10px;
	margin-bottom: 24px;
}
.lup-stat-card {
	flex: 1;
	background: #f9f9f9;
	border: 1px solid #ebebeb;
	border-radius: 10px;
	padding: 12px 8px;
	text-align: center;
}
.lup-stat-card-coins {
	background: #fffbf0;
	border-color: #f0e0a0;
}
.lup-stat-label {
	font-size: 11px;
	color: #999;
	margin-bottom: 4px;
	font-family: 'SFProText';
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.lup-stat-value {
	font-size: 18px;
	font-weight: 700;
	color: #ea794c;
	font-family: 'SFProText';
}
.lup-stat-value-coins {
	color: #b58a00;
}

.custom-intercom-launcher {
	position: fixed;
    bottom: 20px;
    right: 65px;
    z-index: 1;
    background: #3047EC;
    cursor: pointer;
    box-shadow: 0 1px 6px 0 rgb(0 0 0 / 6%), 0 2px 32px 0 rgb(0 0 0 / 16%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
}
.custom-intercom-launcher > div {
	display: flex;
    width: 35px;
    height: 35px;
    margin: auto;
    fill: rgb(255, 255, 255);
}

#transition-overlay {
	background: white; 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 396px; 
	height: 100%; 
	border-radius: 8px; 
	display: flex; 
	z-index: 2;
}

.fade .block-panel {	
	transition: opacity 0.5s;
	opacity: 1;
}
.fade.out .block-panel {
	transition: none;
	opacity: 0;
}
.fade #transition-overlay {
	transition: opacity 0.5s;	
	opacity: 1;
}
.fade.out #transition-overlay {	
	opacity: 0;
}

#notification-container {
	position: absolute; 
	bottom: 90px; 
	right: 70px; 
	z-index: 5;
}

#owned-blox {
	width: 375px;
    height: 56px;
    background: white;
    position: absolute;
    top: 70px;
    right: 24px;
    z-index: 3;
    border-radius: 8px;    
    box-sizing: border-box;
    max-height: 85%;    
    overflow: hidden;
}
#owned-blox.expanded, #owned-memory.expanded, #mint-cart.expanded {
	height: auto;
}
#owned-blox .blox-list-header, #owned-memory .blox-list-header,  #mint-cart .blox-list-header{
	display: flex; 
	padding: 16px;
}
#owned-blox.expanded .blox-list-header, #mint-cart.expanded .blox-list-header {
	border-bottom: 1px solid #f3f3f3;
}
#owned-blox .expand, #owned-memory .expand, #mint-cart .expand {
	display: flex;
}
#owned-blox .collapse, #owned-memory .collapse, #mint-cart .collapse {
	display: none;
}
#owned-blox.expanded .expand, #owned-memory.expanded .expand, #mint-cart.expanded .expand {
	display: none;
}
#owned-blox.expanded .collapse, #owned-memory.expanded .collapse, #mint-cart.expanded .collapse {
	display: flex;
}
#owned-blox #my-blox-list {
	padding: 16px; 
	max-height: calc(80vh - 108px); 
	box-sizing: border-box; 
	overflow: auto;
}

#owned-memory {
    width: 375px;
    height: auto;
    background: white;
    position: absolute;
    top: 140px;
    right: 24px;
    z-index: 1;
    border-radius: 8px;
    box-sizing: border-box;
    max-height: 85%;
    overflow: hidden;
}

.list-of-bar{
	margin-top: 40%;
}

.memory-step-title {
	margin-block: unset;
    font-weight: 600;
    font-size: 20px;
	font-family: SFProText;
}

.memory-step-detail{
	color: #757575;
	font-family: SFProText;
	font-size: 16px;
	margin-top: 8px;
    margin-bottom: 24px;
}


.social-account{
	cursor: pointer;
	margin: 8px 8px 0px 0px;
	width: 24px;
    height: 24px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#cookie-warning {
	position: absolute;
	bottom: 5%;
	right: 10%;
	z-index: var(--z-bottom-nav);
	background: white;
	border: 1px solid #f3f3f3;
	border-radius: 8px;
	padding: 16px;
	width: 375px;
	font-family: 'SFPROTEXT';
	color: black;
	font-size: 16px;
	line-height: 20px;
	box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.13);
	display: none;
	box-sizing: border-box;
}

.pressed-menu-btn {
	background: #f3f3f3;
    border-radius: 8px;
}

.communtiy-name{
	display: flex;    
	margin-top: 12px;
}

.choose-wallet-title{
    font-family: SFPROTEXT;
    font-weight: 400;
    font-size: 20px;
}

.select-wallet-button, .select-payment-button{
	width: 100%;
    padding: 10px;
    background: #FFFFFF;
    margin: 10px;
    border: 1px solid #DEDEDE;
    cursor: pointer;
}

.select-wallet-button:hover, .select-payment-button:hover{
	background-color: #DEDEDE;
}

.select-wallet-button:disabled{
	background: #DEDEDE;
	cursor: none;
}

.select-payment-button{
	display: flex;
    align-items: center;
    justify-content: center;
}

.checkout{
	display: none;flex-direction: column;align-items: center;
}

.checkout-active {
	display: flex;
}

.success-checkout-modal{
	width: 450px  !important;
	height: auto !important;
	padding: 24px;
}
.success-checkout-modal .success-gif-container {
	background-size: cover;    
    height: 197px;
    border-radius: 8px;
}

#contract-address-of-city{
	background: #F3F3F3;
    border: none;
    border-radius: 8px;
    padding: 14px;
    color: #757575;
    font-family: 'SFPROTEXT';
    max-width: 90%;
    width: inherit;
}

.modal.opensea-link-modal {
    width: 554px;
    height: 258px;
	padding: 24px;
}

#opensea_link::placeholder {
    color: #DEDEDE;
}

.modal.auto-import-blox-modal{
	padding: 1%;
	margin: 0 auto;
	height: 320px;
}

.moments-shortcuts {
	display: none;
}
.show-moments-shortcuts .moments-shortcuts {
	display: block;
}
/* Ensure moments-shortcuts displays as flex for proper horizontal scrolling */
.show-moments-shortcuts .moments-shortcuts.mobile-only {
	display: flex;
}

/* Moment shortcut circle visibility: mobile vs desktop */
.shortcut-circle .moment-shortcut-desktop {
	display: none;
}
@media screen and (min-width: 813px) {
	.shortcut-circle .moment-shortcut-mobile {
		display: none;
	}
	.shortcut-circle .moment-shortcut-desktop {
		display: block;
	}
}
/* On tablets (813px–1024px), show the mobile shortcut (lazy-loaded) instead of desktop */
@media screen and (min-width: 813px) and (max-width: 1024px) {
	.shortcut-circle .moment-shortcut-mobile {
		display: block !important;
	}
	.shortcut-circle .moment-shortcut-desktop {
		display: none !important;
	}
}
.show-moments-shortcuts #mobile-search-toggle {
	/*margin-top: 70px;*/
}

.search-title{
	color: white;font-size: 42px;font-family: Montserrat;
}

.blox-details-tab {
	color: #757575; 
	font-weight: 400; 
	padding: 16px;
}
.blox-details-tab.selected {
	color: #EA794C; 
	font-weight: 700; 
	border-bottom: 2px solid;
}
.blox-details-content {
	display: none;
	color: #EA794C; 
}
.blox-details-content.selected {
	display: block;
}
.memories-content {
	display: none;
}
.memories-content.selected {
	display: block;
}

.memory-creation-options-overlay {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 4;
	display: none;
}
.memory-creation-options-overlay.show {
	display: flex;
}

/* Hide memory creation overlay on desktop - mobile only */
@media screen and (min-width: 813px) {
	body:has(.search-results.server-desktop) .memory-creation-options-overlay,
	body:has(.search-results.server-desktop) .memory-creation-options-overlay.show {
		display: none !important;
	}
}


.tab-panel {
    display: flex;
    flex-direction: row;
    font-family: 'SFProText';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
}

.tab-panel div {
    width: 50%;
    text-align: center;
    color: #757575;
}

.tab-active {
    color: #F37442 !important;
}

.collection-stage-header {
	font-family: 'SFProText';
	font-size: 24px;
	font-weight: 600;
	color: #757575;
	margin-bottom: 4px;
	margin-left: 10px;"
}


/* Style for the checkbox container */
.checkbox-container {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    cursor: pointer;
    user-select: none;
}

/* Hide the default radio button */
.checkbox-container input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

/* Style for the custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border: 1px solid #ccc;
    border-radius: 20px;
}

/* Style for the custom checkbox when it's checked */
.checkbox-container input[type="checkbox"]:checked + .checkmark {
    background-color: #EA794C;
    border: 1px solid #EA794C;
}

/* Style for the checkmark inside the custom checkbox */
.checkmark::after {
    content: "";
    position: absolute;
    display: none;
}

/* Style for the checkmark inside the custom checkbox when it's checked */
.checkbox-container input[type="checkbox"]:checked + .checkmark::after {
    display: block;
    content: "\2713";
    font-size: 16px;
    color: white;
    top: 1px;
    left: 5px;
}


.my-tokens {
    display: flex;
    flex-direction: row;
    padding: 16px;
    border: 1px solid #DEDEDE;
    box-sizing: border-box;
    border-radius: 16px;
    align-items: baseline;
}

.my-tokens-header {
    font-family: SFProText;
    color: #757575;
    margin-block: unset;
}

.my-tokens-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 16px;
}


.my-metarent {
    width: 33%;
    border-right: 1px solid #DEDEDE;
    box-sizing: border-box;
}

.my-metacoin {
    width: 33%;
    padding-left: 16px;
    box-sizing: border-box;
    border-right: 1px solid #DEDEDE;
}

.my-credit {
    width: 33%;
    padding-left: 16px;
    box-sizing: border-box;
}

span.my-amount, span.my-address {
    color: #000000;
    font-family: SFProText;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    margin-left: 1%;
}

span.my-address {
    font-size: 20px;
    padding-right: 3%;
}

.connect-to-external {
    color: #F37442;
    font-family: 'Montserrat';
    font-weight: 600;
    font-size: 18px;
    padding-right: 2%;
    margin-block: unset;
    cursor: pointer;
}

.blox-gallery-for-user {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.blox-card-panel {
    display: flex;
    flex-direction: column;
    width: calc(33% - 13px);
    height: auto;
    background: #FFFFFF;
    border: 1px solid #DEDEDE;
    box-sizing: border-box;
    border-radius: 16px;
    margin-right: 13px;
    margin-bottom: 13px;
}

/*Overwrite the initial css of address_transaction tier-level.css */
.tier-label {
    width: 30px !important;
}

.tier-label .level {
    font-size: 14px !important;
}

.blox-card-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
}

.blox-info-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.blox-number {
    width: auto;
    color: #000000;
    font-size: 24px;
    font-weight: bold;
    margin: unset;
    font-family: SFProText;
    padding-right: 5%;
    cursor: pointer;
}

.blox-tier-level {
    width: 15%;
}

.metarent-info {
    width: 100%;
}

.blox-received-type-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    font-size: 14px;
}

.blox-received-type {
    font-family: SFProText;
    color: #757575;
    padding-left: 3%;
}

.action-items-button {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	line-height: 18px;
	color: #F37442;
	text-align: center;
	cursor: pointer;
}

/* Featured memories area*/
.featured-memories-container {
  font-family: Arial, sans-serif;
  padding: 20px 0;
  border-radius: 12px;
  background: #fff;
  max-width: 700px;
  margin: auto;
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
}

.tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.tab-btn {
  padding: 10px 18px;
  border-radius: 9999px;
  background-color: #f2f2f2;
  border: none;
  color: #666;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s, color 0.3s;
}

/* Brand tint + ink label (AA); both sides come from tokens so they flip together. */
.tab-btn.active {
  background-color: #ffe4e1;
  background-color: color-mix(in srgb, var(--ds-brand, #EA794C) 14%, var(--ds-card, #FFFFFF));
  color: var(--ds-ink, #1A1A1A);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}




@media screen and (min-width: 813px) {
	.mobile-only {
		display: none !important;
	}

	/* Homepage map is a fixed, full-viewport app — it must never scroll on
	   desktop. Mobile already locks body scroll (<=812px); mirror that on
	   desktop, but scope it to the map homepage's <main class="search-results">
	   so the other (scrollable) pages that share this stylesheet are unaffected.
	   (a11y.js renames this element's id to #main-content at runtime.) */
	body:has(main.search-results) {
		overflow: hidden;
		overscroll-behavior: none;
	}

	.block-details-container.drawer {
		position: absolute;
	    top: 0px;
	    left: 0;
	    height: calc(100vh - 52px);
	}
	.block-details-container.drawer .block-interface {
		height: 100%;
	}
	.block-details-container.drawer .block-panel {
		height: 100%;
		border-radius: 0;
	}

	.footer-ui {
		position: absolute;
		width: 260px;
		bottom: 2%;
		left: 50%;
		transform: translateX(-50%);
		background: white;
        border-radius: 16px;
	}
	.footer-ui.padded {
		padding: 16px;
	}

	.block-interface .block-panel .hide-when-contracted {
		height: 100%;
	}
	.block-panel .hide-when-contracted .dynamic-height-section {
		height: calc(100% - 146px);
	}


}

/* Bottom navigation positioning is structural, not phone-only. Its
   visibility remains controlled by .mobile-only and the server-mode rules. */
.bottom-nav {
	position: absolute;
	bottom: 0;
	width: 100%;
	left: 0;
	background: white;
	border-top: 1px solid #f4f4f4;
	border-bottom: 1px solid #f4f4f4;
	display: flex;
	height: 66px;
	color: #757575;
	z-index: 2;
}

.bottom-nav .bottom-nav-icon {
	border: 1px solid;
	border-radius: 100%;
	margin: auto;
	padding: 5px;
}

.bottom-nav-icon-active {
	border: 2px solid #EA794C !important;
	color: #EA794C;
	background-color: #FFEFE9;
}

/* A narrow desktop user agent still receives the desktop template. Do not
   expose mobile controls whose target views were intentionally not rendered. */
body:has(.search-results.server-desktop) .mobile-only {
	display: none !important;
}

/* ═══════════════════════════════════════════
   iPad / Tablet Overrides (813px – 1024px)
   Use the mobile shell only when the server rendered mobile markup. Stateful
   force-hide classes must continue to win so views do not stack.
   ═══════════════════════════════════════════ */
@media screen and (min-width: 813px) and (max-width: 1024px) and (pointer: coarse) {
	.search-results.server-mobile #mobile-home-view.mobile-only:not(.force-hide),
	.search-results.server-mobile .moments-shortcuts.mobile-only:not(.force-hide),
	.search-results.server-mobile .moments-shortcuts .moments-shortcuts-wrapper,
	.search-results.server-mobile .expand-block-details.mobile-only:not(.force-hide),
	.search-results.server-mobile #mobile-memories-view.mobile-only:not(.force-hide),
	.search-results.server-mobile #my-assets.mobile-only:not(.force-hide) {
		display: flex !important;
	}

	.search-results.server-mobile #mobile-discover-results.mobile-only:not(.force-hide) {
		display: block !important;
	}

	.search-results.server-mobile .shortcut-circle .moment-shortcut-mobile {
		display: block !important;
	}

	.search-results.server-mobile .shortcut-circle .moment-shortcut-desktop {
		display: none !important;
	}

	.search-results.server-mobile .bottom-nav.mobile-only:not(.force-hide) {
		display: flex !important;
	}

	.search-results.server-mobile #mobile-home-view:not(.force-hide) {
		height: calc(100% - 66px) !important;
		width: 100% !important;
	}

	.search-results.server-mobile .block-details-wrapper > .mobile-only[style*="border-top"]:not(.force-hide) {
		display: block !important;
	}
}

/* ═══════════════════════════════════════════
   iPad Landscape & Orientation Support
   ═══════════════════════════════════════════ */
@media screen and (min-width: 813px) and (max-width: 1366px) and (orientation: landscape) and (pointer: coarse) {
	.search-results.server-mobile #mobile-home-view.mobile-only:not(.force-hide),
	.search-results.server-mobile .moments-shortcuts.mobile-only:not(.force-hide),
	.search-results.server-mobile .expand-block-details.mobile-only:not(.force-hide),
	.search-results.server-mobile #mobile-memories-view.mobile-only:not(.force-hide),
	.search-results.server-mobile #my-assets.mobile-only:not(.force-hide) {
		display: flex !important;
	}

	.search-results.server-mobile #mobile-discover-results.mobile-only:not(.force-hide) {
		display: block !important;
	}

	.search-results.server-mobile .shortcut-circle .moment-shortcut-mobile {
		display: block !important;
	}

	.search-results.server-mobile .shortcut-circle .moment-shortcut-desktop {
		display: none !important;
	}

	.search-results.server-mobile .bottom-nav.mobile-only:not(.force-hide) {
		display: flex !important;
	}

	.search-results.server-mobile #mobile-home-view .landmark-card,
	.search-results.server-mobile #mobile-home-view .mobile-feed-tabs {
		max-width: 600px;
		margin: 0 auto;
	}
}

/* ═══════════════════════════════════════════
   Mint Cart Widget  (.mc-*)
   ═══════════════════════════════════════════ */

#mint-cart-container {
    position: absolute;
    width: 375px;
    top: 135px;
    right: 24px;
    z-index: 2;
}

.mc-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.13);
    overflow: hidden;
}

/* Header */
.mc-header {
    gap: 8px;
    align-items: center;
}

.mc-header-icon {
    font-size: 20px;
    color: #ea794c;
    flex-shrink: 0;
}

.mc-header-title {
    font-family: 'Montserrat';
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    flex: 1;
}

.mc-count {
    font-weight: 400;
    color: #757575;
}

.mc-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #ea794c;
    font-family: 'SFProText';
    font-size: 13px;
    gap: 2px;
    flex-shrink: 0;
    position: absolute;
    right: 16px;
}

/* Collapsed strip */
.mc-collapsed {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    gap: 8px;
}

.mc-collapsed-label {
    font-family: 'SFProText';
    font-size: 14px;
    color: #757575;
    margin: auto 0;
}

.mc-timer-highlight {
    color: #ea794c;
    font-weight: 600;
}

/* Expanded item list */
.mc-item-list {
    padding: 0 12px;
    max-height: calc(70vh - 160px);
    overflow: auto;
}

.mc-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f7f7f7;
    gap: 8px;
}

.mc-item:last-child {
    border-bottom: none;
}

.mc-item-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 8px;
    flex: 1;
    min-width: 0;
}


.mc-item-name {
    font-family: 'SFProText';
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-item-price {
    font-family: 'SFProText';
    font-size: 15px;
    color: #757575;
    flex-shrink: 0;
}

.mc-item-remove {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.38);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
}

.mc-item-remove:hover {
    color: #ea794c;
}

/* Footer */
.mc-footer {
    padding: 12px 16px;
    border-top: 1px solid #f3f3f3;
}

.mc-footer-timer {
    font-family: 'SFProText';
    font-size: 13px;
    color: #757575;
    text-align: center;
    margin-bottom: 8px;
}

/* Cart toast */
.mc-toast {
    background: #1a1a1a;
    color: #fff;
    font-family: 'SFProText';
    font-size: 13px;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
    text-align: center;
    animation: mc-toast-in 0.2s ease;
}

.mc-toast--error {
    background: #c0392b;
}

@keyframes mc-toast-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════
   Cart Action Buttons (block detail panel)
   ═══════════════════════════════════════════ */

#batch-actions-wrapper {
    margin-top: 8px;
}

.cart-btn {
    font-family: 'SFProText';
    font-size: 15px;
    height: 44px;
    font-weight: 600;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.cart-btn-icon {
    font-size: 18px;
}

.cart-btn.mint-btn {
    background: white;
    color: #ea794c;
    border: 1.5px solid #ea794c;
    transition: background 0.15s;
}

.cart-btn.mint-btn:hover {
    background: #fee8df;
}

.cart-btn.added-to-cart {
    background: #f0fdf4;
    color: #16a34a;
    border: 1.5px solid #86efac;
    cursor: default;
    pointer-events: none;
}

.cart-btn.remove-from-cart {
    background: white;
    color: #757575;
    border: 1.5px solid #d1d5db;
    transition: background 0.15s, border-color 0.15s;
}

.cart-btn.remove-from-cart:hover {
    background: #fef2f2;
    border-color: #f87171;
    color: #dc2626;
}

@media screen and (max-width: 812px) {
	body {
		overflow-y: hidden;
    	overscroll-behavior: none;
	}
	
	body:not(:has(.search-results.server-desktop)) .desktop-only {
		display: none !important;
	}

	.search-results {	
		padding: 0;
		position: fixed;
	    width: 100%;
	    top: 0;
	    left: 0;
	    height: 100%;
	}

	.block-details-wrapper {
		padding: 0;
		height: calc(100% - 62px);		
	}
	.block-details-wrapper.expanded {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
	}

	.block-details-container {
		width: 100%;
		min-height: 100%;
    	position: relative;
	}
	.block-details-container .search-wrapper {
		padding: 15px;
	}	

	.block-panel {
	    width: auto;
	    height: auto;
	    max-height: 68px;
	    min-height: 68px;
	    box-sizing: border-box;
	    /*transition: max-height 0.75s;*/
	    border-radius: 10px 10px 0px 0px;
	}
	.block-panel.show-states {
		max-height: 100%;
	}
	.block-interface.expanded .block-panel {		
    	box-shadow: none;
    	border-radius: 0;
    	overflow: hidden;
    	max-height: 100vh;
    	height: 100%;
	}

	.block-interface.expanded .show-more {
		display: none;
	}
	.block-interface .show-less {
		display: flex; 
		font-size: 14px; 
		color: #f37442; 
		font-family: 'SFProText'; 
		margin: auto; 
		margin-right: 0;
	}
	.block-interface:not(.expanded) .show-less {
		display: none;
	}
	.collapse-bar {
		display: none;
	}
	.block-interface.expanded .collapse-bar {
		display: flex;
		padding: 10px;
	}

	.block-panel-content {
		height: auto;
		max-height: 0;
		/*transition: max-height 0.75s;*/
	}
	.block-interface.expanded .block-panel .block-panel-content {		
		max-height: calc(100% - 51px);
	}

	.block-panel-header {
		box-sizing: border-box;
    	height: 65px;
    	padding-top: 3px;
    	border-bottom: none;
	}
	.block-interface.expanded .block-panel .block-panel-header {
		padding-top: 8px;
		border-bottom: 1px solid #f3f3f3;
	}

	.block-interface {
		position: absolute;
    	bottom: 0px;
    	z-index: 2;
    	max-height: 100%;
    	overflow: scroll;
    	width: 100%;
    	border-radius: 0;    	    	
	}
	.block-interface.expanded {
		height: 100%;
	}

	.expand-bar {
		margin-bottom: 2px;
    	margin-top: -8px;
	}
	.expand-bar > div {
		display: flex;
	    color: #f37442;
	    font-family: 'SFPROTEXT';
	    margin: auto;
	    font-size: 14px;
	}			
	
	.block-interface.expanded .block-panel .close-icon {
		display: block;
	}

	.expanded .hide-when-expanded {
		display: none;
	}

	.block-interface .block-panel .hide-when-contracted {		
		max-height: 100%;
		overflow: hidden;
		height: calc(100% - 80px);
	}
	.block-interface:not(.expanded) .block-panel .hide-when-contracted {
		max-height: 0;
    	overflow: hidden;
    	opacity: 0;
    	transition: none;
	}		
	.block-panel .hide-when-contracted .dynamic-height-section {
		/* height: calc(100% - 44px) !important; */
		/*height: calc(100% - 80px) !important;*/
	}

	.top-menu {
		border-top: 1px solid #f3f3f3; 
		padding: 16px 24px; 
		position: absolute; 
		top: 62px; 
		left: 0; 
		z-index: 5; 
		min-height: calc(100% - 62px); 
		background: white; 
		box-sizing: border-box;
		width: 100%;
	}


	.section-divider {
		padding:16px;border-bottom: 1px solid #F4F4F4;border-top: 1px solid #F4F4F4;
	}

	.section-leading-header {
		font-family: Montserrat;font-size: 20px;font-style: normal;font-weight: 600;
		margin-block-start: unset;
		margin-block-end: unset;
	}

	.gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom {
		display: none;
	}

	.map-container {
		height: 100%;
	}

	.scrollable-section {
		max-height: calc(100% - 132px);
		overflow-x: hidden;
	}

	.footer-ui {
		position: relative;
    	background: white;
	}
	.footer-ui.fixed-bottom {
		position: absolute; 
		width: 100%; 
		bottom: 0;
		box-sizing: border-box; 
		left: 0; 
		padding: 16px;
	}

	.custom-intercom-launcher {
	    bottom: 80px;
	    right: 20px;
	}

	#transition-overlay {
		width: 100%;
		height: 200px;
	    bottom: 0;
	    top: auto;
	}

	#notification-container {
		right: auto;
		left: 10px;
	}

	#owned-blox {
		width: 100%;
	    position: relative;
	    top: 0;
	    left: 0;
	}
	#owned-blox.expanded {
		height: 100%;
		max-height: 100%;
	}
	#owned-blox .blox-list-header {
		display: none;
	}
	#owned-blox #my-blox-list {
		max-height: calc(100% - 108px);
	}

	#cookie-warning {
		right: 0;
		bottom: 66px;
		width: 100%;
		z-index: calc(var(--z-bottom-nav) + 1);
		border-radius: 8px 8px 0 0;
	}

	.modal.auth-modal.checkout-modal {
    	height: 55%;
	}

	/* Success modal: centred floating card, NOT a bottom-sheet */
	.modal.success-checkout-modal {
		bottom: auto !important;
		top: auto !important;
		left: auto !important;
		width: calc(100vw - 32px) !important;
		max-width: 400px !important;
		height: auto !important;
		max-height: 90dvh;
		overflow-y: auto;
		border-radius: 16px !important;
		padding: 20px !important;
		padding-bottom: 20px !important;
	}

	.modal.success-checkout-modal p {
		margin-block-start: unset !important;
    	margin-block-end: unset !important;
    	padding-bottom: 6px !important;
	}

	.success-checkout-modal .success-gif-container {
		height: 160px !important;
	}

	.search-title{
		font-size: 24px;
	}

	.search-container.click-away-root {
    	width: 350px !important;
	}

	.tab {
        width: 100% !important;
        display: none;
    }

    .active {
        display: block;
    }

	#my-memories, #my-collections{
		padding: 5%;
        float: unset;
        width: unset !important;
        position: relative;
	}

	.my-metarent {
        width: 100%;
        border: none;
    }

    .my-metacoin, .my-credit {
        width: 50%;
		padding-left: unset;
    }

    .my-credit {
        padding-left: 16px;
    }

    .my-tokens {
        max-width: 100%;
    }

    .blox-card-panel {
        width: 100%;
        margin-bottom: 16px;
    }

	.mobile-asset-level-modal-container{

	}

	/* Level-up confirm dialog: override bottom-sheet left:0 + add margin:auto
	   so it centres as a flex item inside .modal-container */
	#level-up-confirm {
		left: auto;
		right: auto;
		margin: auto;
		padding-bottom: 18px; /* undo base .modal padding-bottom:82px on mobile */
	}
}

/* ============================================================
   BLOX CARD DETAIL ACCORDION (bcd-* prefix)
   Shared styles for MetaRent Breakdown + Transaction History
   Used on both profile page and mobile assets view
   ============================================================ */

.bcd-accordion {
    border-top: 1px solid #F0F0F0;
}

.bcd-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.bcd-accordion-trigger:hover {
    background: #FAFAFA;
}

.bcd-accordion-label {
    font-family: 'SFProText';
    font-weight: 600;
    font-size: 13px;
    color: #555;
}

.bcd-accordion-chevron {
    font-size: 18px;
    color: #EA794C;
    transition: transform 0.25s;
    flex-shrink: 0;
}

.bcd-accordion-body {
    padding: 0 14px 8px;
}

/* --- Detail rows (MetaRent breakdown) --- */
.bcd-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #F8F8F8;
}

.bcd-detail-row:last-of-type {
    border-bottom: none;
}

.bcd-detail-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bcd-detail-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.bcd-icon-base     { color: #AAA; }
.bcd-icon-community { color: #6BBA1C; }
.bcd-icon-attention { color: #EA794C; }
.bcd-icon-total    { color: #EA794C; }

.bcd-detail-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bcd-detail-name {
    font-family: 'SFProText';
    font-size: 12px;
    color: #555;
}

.bcd-detail-sub {
    font-family: 'SFProText';
    font-size: 10px;
    color: #AAA;
}

.bcd-sub-community { color: #6BBA1C; }
.bcd-sub-attention { color: #EA794C; }

.bcd-detail-value {
    font-family: 'SFProText';
    font-size: 13px;
    font-weight: 600;
    color: #333;
    flex-shrink: 0;
}

.bcd-value-community { color: #6BBA1C; }
.bcd-value-attention { color: #EA794C; }

/* Total row highlight */
.bcd-detail-row--total {
    background: #FFF5F0;
    border-radius: 6px;
    padding: 7px 8px;
    margin-top: 4px;
    border-bottom: none;
}

.bcd-name-total {
    font-family: 'SFProText';
    font-size: 13px;
    font-weight: 600;
    color: #EA794C;
}

.bcd-value-total {
    font-size: 14px;
    font-weight: 700;
    color: #EA794C;
}

/* Storage mini-progress (inside breakdown) */
.bcd-storage-row {
    background: #F9F9F9;
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 8px;
}

.bcd-storage-header-row,
.bcd-storage-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bcd-storage-label {
    font-family: 'SFProText';
    font-size: 11px;
    color: #888;
}

.bcd-storage-count {
    font-family: 'SFProText';
    font-size: 11px;
    font-weight: 600;
    color: #555;
}

.bcd-storage-bar {
    height: 5px;
    background: #E0E0E0;
    border-radius: 3px;
    overflow: hidden;
    margin: 6px 0;
}

.bcd-storage-fill {
    height: 100%;
    background: linear-gradient(90deg, #EA794C 0%, #F37442 100%);
    border-radius: 3px;
    transition: width 0.3s;
}

.bcd-storage-hint {
    font-family: 'SFProText';
    font-size: 10px;
    color: #AAA;
}

.bcd-storage-rate {
    font-family: 'SFProText';
    font-size: 10px;
    font-weight: 600;
    color: #6BBA1C;
}

/* --- Transaction items --- */
.bcd-tx-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 8px 8px 10px;
    margin-bottom: 6px;
    border-left: 3px solid #EA794C;
    border-radius: 0 6px 6px 0;
    background: #F9F9F9;
}

.bcd-tx-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.bcd-tx-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bcd-tx-type {
    font-family: 'SFProText';
    font-size: 12px;
    font-weight: 600;
    color: #333;
}

.bcd-tx-date {
    font-family: 'SFProText';
    font-size: 10px;
    color: #888;
}

.bcd-tx-desc {
    font-family: 'SFProText';
    font-size: 10px;
    color: #AAA;
}

.bcd-tx-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}

.bcd-tx-amount {
    font-family: 'SFProText';
    font-size: 13px;
    font-weight: 600;
}

.bcd-tx-status {
    font-family: 'SFProText';
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
}

.bcd-tx-more {
    display: block;
    width: 100%;
    text-align: center;
    padding: 6px;
    background: none;
    border: none;
    color: #EA794C;
    font-family: 'SFProText';
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
}

.bcd-tx-more:hover { text-decoration: underline; }

.bcd-tx-empty {
    text-align: center;
    padding: 20px;
    color: #CCC;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.bcd-tx-empty .material-icons-outlined {
    font-size: 28px;
    opacity: 0.5;
}

.bcd-tx-empty p {
    font-family: 'SFProText';
    font-size: 12px;
    margin: 0;
}

@media screen and (max-width: 812px) {
    .bcd-accordion-trigger {
        padding: 10px 12px;
    }

    .bcd-accordion-body {
        padding: 0 12px 8px;
    }
}

/* ============================================================
   Transitions & Animations — Metablox
   View Transitions API (Chrome 111+ / Safari 18+) for view
   switches; CSS keyframe classes for panel entry.
   ============================================================ */

/* --- Keyframes --- */
@keyframes vt-fade-in        { from { opacity: 0; } }
@keyframes vt-fade-out       { to   { opacity: 0; } }
/* Desktop: slide from the right; mobile: lift from below */
@keyframes block-panel-enter-x { from { opacity: 0; transform: translateX(28px); } }
@keyframes block-panel-enter-y { from { opacity: 0; transform: translateY(16px); } }

/* Block-panel entrance: added via JS after innerHTML replacement */
@media (prefers-reduced-motion: no-preference) {
    .block-panel-enter {
        animation: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both block-panel-enter-x;
    }
}
@media (max-width: 812px) and (prefers-reduced-motion: no-preference) {
    .block-panel-enter {
        animation-name: block-panel-enter-y;
    }
}

/* --- View Transitions API root crossfade ---
   Applied to: mobile-view switches, tab panels, checkout steps,
   level-up state transitions. Falls back gracefully.            */
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
        animation: 180ms ease-out both vt-fade-out;
    }
    ::view-transition-new(root) {
        animation: 200ms ease-out both vt-fade-in;
    }
}

/* Honour prefers-reduced-motion: collapse all durations to zero. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-image-pair(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation-duration: 0ms !important;
    }
}