.color-default,
.color-default * {
	color:var(--default) !important;
}
.color-primary,
.color-primary * {
	color:var(--primary) !important;
}
.color-light,
.color-light * {
	color:var(--light) !important;
}

.mb-2, .my-2 {
    margin-bottom: 0.5rem !important;
}
.mb-3, .my-3 {
    margin-bottom: 1rem !important;
}
.mb-4, .my-4 {
	margin-bottom: 1.5rem !important;
}
.mb-5, .my-5 {
	margin-bottom: 3rem !important;
}
.mb-6, .my-6 {
	margin-bottom: 4.5rem !important;
}
.mt-2, .my-2 {
    margin-top: 0.5rem !important;
}
.mt-3, .my-3 {
    margin-top: 1rem !important;
}
.mt-4, .my-4 {
	margin-top: 1.5rem !important;
}
.mt-5, .my-5 {
	margin-top: 3rem !important;
}
.mt-6, .my-6 {
	margin-top: 4.5rem !important;
}

/* OVERRIDE */
a,
legend {
	color:var(--primary);
}

legend {
	border-bottom: 1px dashed var(--primary);
}

img {
	max-width:100%;
}

hr {
	border-top:1px solid #f5f5f5;
	margin:1em 0;
	height:2px;
	width:100%;
}


*[type="submit"],
*[type="button"],
*[type="text"],
*[type="tel"],
select,
textarea,
button,
.btn,
.select2-selection {
	/*border:2px solid var(--primary);*/
	border-radius:0;
	
	/*height:3.5em;*/
	
	padding:0.4em 0.7em !important;
	
	font-size:1.1em !important;
	line-height:1.5em !important;

	height:auto !important; /* allow label multiline */
}

/* Bootstrap's .input-group-btn deliberately sets font-size:0 on itself (removes
   the whitespace gap between grouped buttons) -- the "font-size:1.1em !important"
   above is relative to THAT parent, so a .btn placed inside an input-group-btn
   (e.g. the coin public-share copy/open/renew icon buttons) collapsed to
   font-size:0, and since the padding above is also in em (relative to the
   button's OWN font-size), the whole button shrank to just its border.
   Icons in the share-link box were invisible as a result. Restoring an
   absolute font-size here lets the em-based padding/line-height above resolve
   normally again. */
.input-group-btn > .btn {
	font-size:14px !important;
}
.input-group-btn > .btn + .btn {
	/* Bootstrap's default glues grouped buttons together (-1px overlap, no
	   gap). A small gap is used instead, matching the spacing of the
	   list/edit/delete buttons elsewhere on this page (view_buttons.php). */
	margin-left:4px !important;
}

/* Coin public-share link box (frontend/views/user-coin/view.php) -- the text
   input and the icon buttons next to it both inherit the em-based sizing
   above, but from DIFFERENT ambient font-sizes (the input isn't inside
   .input-group-btn, the buttons are, and that container's own font-size:0
   throws off the em math for anything relying on the parent instead of an
   absolute value) -- they never came out the same pixel height. Forcing the
   exact same absolute box model on both sides here is more reliable than
   chasing the em cascade. Also: no gap by default between the input and the
   FIRST button (Bootstrap glues that edge on purpose, margin-left:-1px on
   .input-group-btn:last-child > .btn) -- a gap is added there too, same as
   before the other buttons. */
.coin-share-input-group .form-control,
.coin-share-input-group .input-group-btn > .btn {
	height:38px !important;
	padding:6px 12px !important;
	font-size:14px !important;
	line-height:1.42857143 !important;
	box-sizing:border-box !important;
}
.coin-share-input-group .input-group-btn > .btn:first-child {
	margin-left:4px !important;
}

input[type="text"],
input[type="checkbox"],
input[type="tel"],
select,
textarea {
	border:2px solid var(--default-light);
	border-radius:0 !important;
}

.form-control input[type="text"],
.form-control input[type="checkbox"],
.form-control input[type="tel"],
.form-control select,
.form-control textarea {
	border:2px solid var(--default-light);
}

.is-invalid {
	border: 2px solid var(--error) !important;
}

.iti input[type=tel] {
	padding-left:52px !important;
}

input[type="checkbox"] {
	/*border:1px solid var(--primary);*/
	background-color:#b2d8b9;
}

form label {
	font-size:1em;
}
form div.required label.control-label:after,
form div.required label:after {
  content:" * ";
  color:red;
}

span.logo-lg  {
	display:block;
}
span.logo-lg img {
	max-height:35px;
	max-width:150px;
	height:auto;
	width:auto;
}
span.logo-mini  {
	display:none;
}
span.logo-mini img {
	max-height:35px;
	max-width:75px;
	height:auto;
	width:auto;
}

ul.d-inline li {
	display:inline;
	padding-right:15px;
}

/*************** BOOTSTRAP > ******************/
.d-block {
	display:block !important;

/*************** < BOOTSTRAP ******************/}

/*************** LOADER > ******************/
.ajax-loader-wrapper,
.ajax-loader-bg {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:998;
}
.ajax-loader-bg {
	background-color:#0066CC;
	opacity:0.7;
}
.ajax-loader-info {
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-150px;
	transform:translateX(-50%);
	width: 90%;
	max-width: 500px;
	min-height: 100px;
	text-align:center;
	font-size: 2em;
	z-index:999;
	color:#FFF;
}
.ajax-loader {
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-50px;
	transform:translateX(-50%);
	width: 90%;
	max-width: 300px;
	height: 100px;
	text-align: center;
	font-size: 10px;
	z-index:999;
}
.ajax-loader > div {
	background-color: #FFF;
	height: 100%;
	width: 15px;
	display: inline-block;
	margin:2px;

	-moz-animation: sk-stretchdelay 1.2s infinite ease-in-out; /* Firefox */
	-o-animation: sk-stretchdelay 1.2s infinite ease-in-out; /* Opera */
	-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
	animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.ajax-loader .rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
	-moz-animation-delay: -1.1s;
	-o-animation: -1.1s;
}
.ajax-loader .rect3 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
	-moz-animation-delay: -1.0s;
	-o-animation: -1.0s;
}
.ajax-loader .rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
	-moz-animation-delay: -0.9s;
	-o-animation: -0.9s;
}
.ajax-loader .rect5 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
	-moz-animation-delay: -0.8s;
	-o-animation: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
	0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
	20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
	0%, 40%, 100% { 
	transform: scaleY(0.4);
		-webkit-transform: scaleY(0.4);
	}  20% { 
		transform: scaleY(1.0);
		-webkit-transform: scaleY(1.0);
	}
}
/*************** < LOADER ******************/

.navbar-toggle .icon-bar {
	background-color:#FFF;
}

.nav-pills > li.active > a, 
.nav-pills > li.active > a:hover, 
.nav-pills > li.active > a:focus,
.pagination > .active > a, 
.pagination > .active > span, 
.pagination > .active > a:hover, 
.pagination > .active > span:hover, 
.pagination > .active > a:focus, 
.pagination > .active > span:focus {
	background-color:var(--primary);
}

h1, h2, h3, h4, h5, h6 {
	color:var(--primary);
}

.header {
	width:100%;
	display:block;
	
	color:var(--primary);
	border-bottom:1px solid var(--primary);
	
	text-align:center;
	
	padding:7px;
	margin-bottom:35px;
}

.centered {
	float:none;
	margin:0 auto;
}

/* BUTTON */
.btn {
	border-radius:0;
}

.btn-primary {
	background-color:var(--primary);
}

.btn-list {
	padding:0;
	margin:0;
}

.btn-list a,
.btn-list button {
	margin-bottom:10px;
}

/* MODAL */
.bootstrap-dialog.type-primary .modal-header {
	background-color:var(--primary);
}

.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
	max-height:none;
}

/* NAVBAR */
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
	border-color:var(--primary);
}
.navbar-custom {
	background-color:var(--primary);
	color:#FFF;
}

.account-nav .list-group-item.active,
.account-nav .list-group-item.active:hover,
.account-nav .list-group-item.active:focus {
	background-color:var(--primary);
	border-color:var(--primary);
}

.languages {
	margin: 15px 0 0 15px;
}
.languages a {
	/* padding: 0 6px; */
	padding-right: 15px;
	font-weight: bold;
	opacity: 0.7;
	text-decoration: none;
}
.languages a.active {
	opacity: 1;
	text-decoration: underline;
}
.languages a:hover {
	opacity: 1;
}

.navbar-brand {
	padding:8px 15px;
}
.navbar-brand,
.navbar-custom a {
	color:#FFF;
}

.navbar-custom a:HOVER,
.navbar-custom a:FOCUS {
	color:#000;
}

.dropdown.active + a,
.dropdown.active + a:hover, 
.dropdown.active + a:focus {
	background-color:var(--primary) !important;
}

.dropdown-menu {
	padding:0;
}
.dropdown-menu > li > a,
.dropdown-menu > li > button {
	padding:10px 20px;
}

.dropdown-menu .active > a,
.dropdown-menu .active > a:hover, 
.dropdown-menu .active > a:focus {
	background-color:var(--primary) !important;
}

.active > a {
	background-color:#f5f5f5;
	color:var(--primary);
}

.active .badge {
	background-color:var(--primary);
}

.footer {
    /* height: 60px; */ /* mycode */
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}
.footer .social-wrapper {
	text-align:right;
}
.footer ul.social li {
	display:inline-block;
	padding:0;
	margin:0 0 5px 5px;
}
.footer ul.social {
	padding:0;
}
.footer ul.social a {
	/*color:#6ec281;*/
	text-decoration:none;
	text-align:center;
	border-radius: 50%;
	display:inline-block;
	background-color:none;
	border:2px solid var(--primary);
	color:var(--primary);
	width:1.5em;
	height:1.5em;
	line-height:1.1em;
	font-size:1.5em;
}
.footer ul.social a:hover {
	background-color:var(--primary);
	border:2px solid var(--primary);
	color:#fff;
}
.footer ul.social a i {
	font-size:0.7em;
}

.copyright {
	font-size:0.8em;
}

.powered {
	font-size:0.8em;
}

.powered span.company {
	font-size:1.2em;
	font-weight:bold;
}

.error-oops {
	color:var(--primary);
	font-size:10em;
	font-weight:bold;
}

div:has(.is-invalid) + .invalid-feedback {
	display:block;
}

.invalid-feedback {
	width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--error);
}

form div.required label.control-label:after {
  content:" * ";
  color:#a94442;
}

.sticky {
	position:fixed !important;
}

.captcha-image{
	cursor:pointer;
	display:block;
	margin-right:10px;
}

.thumb-wrapper {
	width:75px;
	/* Deliberately NOT overflow:hidden (tried 2026-10-29, reverted same day) --
	   .coin-container-tab/.coin-container-tab-reverse (the alvéolo's little
	   half-moon pincer, common/web/css/base.css) is positioned with a
	   NEGATIVE margin specifically to poke outside .coin-container's own box
	   -- that's the whole visual effect. overflow:hidden here clipped it off
	   (confirmed live by Fabio: visible in favourites, missing in the
	   shop-cart/checkout listings, the one difference being whether
	   .thumb-wrapper happened to render with slack beyond its own 75px or
	   not). Turned out unnecessary anyway: a floated child that's
	   self-sized via a padding-bottom:100% trick (.coin-container/
	   .photo-container both are) renders at its own correct height inside a
	   plain, non-cleared parent regardless -- verified directly, this was
	   never actually collapsing to begin with. */
}

.thumb {
	width:75px;
	height:75px;
	background-repeat:no-repeat;
	background-size:auto 100%;
	background-position:center center;
}

.search-result-item {
	overflow:hidden;
	border-bottom:1px dashed #000;
}
.search-result-item p:first-child {
	float:left;
}
.search-result-item p:first-child {
	float: right;
}

.signup-desc {
	background-color:var(--primary);
	color:white;
	margin-bottom:15px;
}

.btn-item-add .view-item {
	/*margin:15px 15px;*/
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
	height:100%;
	
	align-items: center;
	justify-content: center;
	flex-direction: row;
	
	white-space:normal;
}

.btn-item-add,
.btn-item {
	margin:15px 0 15px 0;
	position: relative;
}

/* Same custom checkbox look used project-wide (.checkbox-label/.checkbox-mark,
   see the shop cart) -- .usercoin-card-checkbox only adds the "float over the
   card, hidden until Select mode is on" part on top of it. */
label.usercoin-card-checkbox {
	display: none;
	position: absolute;
	bottom: -15px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	width: 25px;
	height: 25px;
	margin: 0;
	padding-left: 0;
}
/* Reserves room below the card for the checkbox instead of overlapping the
   coin's own state/collection labels already printed there. */
.usercoin-selecting .btn-item {
	margin-bottom: 45px;
}
.usercoin-selecting label.usercoin-card-checkbox {
	display: block;
}

/* Bootstrap's inline buttons have no built-in row-wrap spacing -- on a narrow
   viewport they wrap onto a new line with zero gap (touching top/bottom) and
   go ragged (no consistent left edge). A flex container with `gap` fixes
   both: a consistent gap in every direction regardless of how many items
   wrap, no manual &nbsp; spacing needed. display:none until JS shows it
   (adds .usercoin-toolbar-visible, since plain .show()/.hide() would fight
   over which "visible" display value to restore). */
.usercoin-toolbar {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.usercoin-toolbar.usercoin-toolbar-visible {
	display: flex;
}
.usercoin-toolbar-item {
	display: inline-flex;
	align-items: center;
}

/* Same fix as .usercoin-toolbar above, applied to the filters row -- Bootstrap's
   .col-md-* grid only stacks to full width below the 992px breakpoint, so at
   in-between widths (or a narrow-but-still-"sm" viewport) the fields stayed
   locked to their desktop percentage width, each shrinking to a sliver with a
   big blank gutter on either side instead of actually reflowing. A flex
   container sidesteps the breakpoint entirely: every field gets a sane
   min-width and wraps as soon as it doesn't fit, with a real, even gap. */
#usercoin-search {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	/* Cancels Bootstrap's .row margin:0 -15px -- that negative margin exists
	   only to be offset by .col-*'s own 15px padding, which is removed below
	   (gap replaces it). Left uncancelled, the whole row rendered 15px to the
	   left of every other element on the page. */
	margin-left: 0;
	margin-right: 0;
	/* Breathing room below the LAST wrapped line, however many there end up
	   being -- without this, the next row (the "Select" button) sat flush
	   against it whenever the filters wrapped onto more than one line. */
	margin-bottom: 10px;
}
/* Bootstrap's .row::before/::after clearfix (content:" "; display:table;)
   is harmless on a normal float-based row, but once this row is display:flex
   those generated-content pseudo-elements become real (invisible, 0-width)
   FLEX ITEMS -- which then ate one `gap` worth of space before the actual
   first field, pushing only the first one 10px further right than every
   other field/row on the page. Not needed for a flex container anyway
   (nothing to clear). */
#usercoin-search::before,
#usercoin-search::after {
	content: none;
	display: none;
}
#usercoin-search > [class*="col-"] {
	flex: 1 1 160px;
	padding-left: 0;
	padding-right: 0;
}
/* The "Filtrar" submit button (always the last field) still wraps/grows like
   every other field (so it shares a row with whatever fits, same as the
   rest -- true flex-wrap redistribution, not a fixed "N per row"), just
   capped so it never balloons to the full row width when it ends up alone. */
#usercoin-search > [class*="col-"]:last-child {
	max-width: 200px;
}
/* Bootstrap's .form-group (wrapping each $form->field()) carries its own
   15px margin-bottom, stacking on top of the 10px flex `gap` above whenever
   the fields wrap onto more than one line -- and again below the last line,
   before #usercoin-search's own margin-bottom. Net effect: a 25px gap
   wherever a line-wrap happened, vs. the 10px gap everywhere else on the
   page (e.g. header -> filters), which has no .form-group involved.
   Zeroed here so `gap`/margin-bottom above are the only source of
   vertical spacing. */
#usercoin-search .form-group {
	margin-bottom: 0;
}

label.checkbox-label.usercoin-inline-checkbox {
	display: inline-block;
	position: relative;
	width: 25px;
	height: 25px;
	margin: 0 8px 0 0;
	padding-left: 0;
	vertical-align: middle;
}

.view-item-fill:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.view-item-fill {
	background-repeat:no-repeat; 
	background-position:center; 
	background-size:cover;
}

.view-item label { 
	display:block;
	
	width:100%;
	
	z-index:99;
	position:absolute;
	bottom:5px; 
	/* top:35px; */
	left:0;
	
	padding:2px;
}
/*
.btn-item label:HOVER {
	cursor:pointer;
}
*/
.view-item label > div {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#fff;
	width:auto;
	height:100%;
	margin:0 7px 7px 7px;
	/*padding:5%;*/
	z-index:0;
	opacity:.6;
}
.view-item label > span {
	position:relative;
	display:block;
	width:100%;
	text-align:center;
	color:#000;
}
.view-item span.state {
	font-size:0.8em;
	font-style:italic;
	display:block;
}
.view-item span.collection {
	font-size:0.8em;
	display:block;
}

.btn-item-menu {
	visibility:hidden;
	
	width:100%;
	
	position:absolute;
	top:-5%;
	left:1%;
	text-align:center;
	
	z-index:99;
}
.btn-item-menu a {
	margin-right:1%;
}

span.title {
	font-size:0.9em;
	
	font-weight:bold;
	font-style:italic;
	
	display:block;
	/*
	width:100%;
	text-align:center;
	
	margin-top:10px;
	*/
}

table.detail-view th {
	width: 25%;
}

table.detail-view td {
	width: 75%;
}

.favorite-add {

}

.favorite-delete {
	color:var(--primary);
	font-size:1.5em;
}

.affix {
	top: 75px;
	z-index: 9999 !important;
}

.home-icon {
	font-size:2.5em;
	color: var(--primary);
}

/*************************************/
/* The checkbox */
/* Customize the label (the container) */
.checkbox-label {	
	display: block;
	position: relative;
	padding-left: 35px;
	/*margin-bottom: 12px;*/
	cursor: pointer;
	font-size: 1em;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin:50% 50%;
	margin-top:-12px;
	margin-left:auto;
	width:100%;
}

/* Hide the browser's default checkbox */
.checkbox-label input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

/* Create a custom checkbox */
.checkbox-mark {
	position: absolute;
	top: -3px;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	border:2px solid var(--primary);
}

input.is-invalid ~ .checkbox-mark {
	border: 2px solid var(--error) !important;
}

/* On mouse-over, add a grey background color */
.checkbox-label:hover input ~ .checkbox-mark {
	background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-label input:checked ~ .checkbox-mark {
	background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkbox-mark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.checkbox-label input:checked ~ .checkbox-mark:after {
	display: block;
}

/* Style the checkmark/indicator */
.checkbox-label .checkbox-mark:after {
	left: 8px;
	top: 3px;
	width: 6px;
	height: 12px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* The radio button */
.radio {
	display: block;
	position: relative;
	padding-left: 10px;
	margin-bottom: 12px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.radio label {
	font-size: 1.5em;
	font-weight:none;
}

.radio span {
	display:block;
}

/* Hide the browser's default radio button */
.radio input[type="radio"] {
    position: absolute;
	top:0;
	left:-30px;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkround {
    position: absolute;
    top: 4px;
    left: -10px;
    height: 20px;
    width: 20px;
    background-color: #fff ;
    border-color:var(--primary);
    border-style:solid;
    border-width:2px;
    border-radius: 50%;
}


/* When the radio button is checked, add a blue background */
.radio input[type="radio"]:checked ~ .checkround {
    background-color: #fff;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkround:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio input[type="radio"]:checked ~ .checkround:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio .checkround:after {
	position:absolute;
    left: 2px;
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background:var(--primary);
}

/*************************************/
/************* SWITCH ****************/
/*************************************/
/* The switch - the box around the slider */
.switch-wrapper {
	line-height:2em;
	font-size:1em;
	color:var(--primary);
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 5px;
  bottom: 5px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--primary);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--primary);
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/*************************************/

.progress-wrapper {
	position:relative;
	overflow:visible;
	width:100%;
	/* Same value both sides -- replaces the old "top:25px
	   + height:50px" hack, which only pushed the bar down to make room for the
	   top badges and left nothing symmetric below. Badge clearance above/below
	   the bar is now reserved with real padding (below), so this margin is
	   pure, equal spacing to whatever comes before/after each bar. */
	margin:10px 0;
	/* Reserves room for the top-left/top-right badges, which float above the
	   bar itself (positioned via .progress-label.top-* below). Bottom must
	   match exactly (the percentage badge below had a
	   visibly bigger gap above it than the top badges have below them) --
	   both badges share the same height, so equal padding gives an equal
	   gap on both sides of the bar. 23px = badge's own ~18px box height + a
	   flat 5px gap (26px/~8px gap read as still
	   too far from the bar). If .badge's own padding/font-size ever changes,
	   recompute this (and .progress-label.marker's height below, which
	   spans exactly that same 5px gap). */
	padding-top:23px;
	padding-bottom:23px;
}
.progress-wrapper .progress {
	height:8px; /* was 3px -- the green fill was barely visible */
	/* Bootstrap's own .progress class ships "margin-bottom:20px" (built for
	   stacking several bars with normal document-flow spacing) -- never
	   neutralized here, so it was silently adding a phantom 20px gap between
	   the bar and everything below it inside our own wrapper. That gap is
	   exactly why the percentage badge sat 20px below the marker instead of
	   touching it (confirmed against a live screenshot).
	   All of .progress-wrapper's own padding-top/padding-bottom math above
	   (and .progress-label.progress-marker's height) assumes this is 0. */
	margin-bottom:0;
}
.progress-label {
	position:absolute;
	left:0;

	display:block;
}
.progress-label.top-left {
	/* Absolute positioning is relative to .progress-wrapper's own box edge,
	   ignoring its padding -- so top:0 sits flush with the wrapper's top,
	   inside the padding-top reserved above. */
	top:0;
	/*background:green;*/
}
.progress-label.top-right {
	top:0;
	left:auto;
	right:0;
}
.progress-label.progress-marker {
	/* Thin tick at the TRUE percentage point, from the bar's own top down
	   through the 5px gap to the percentage badge just below it -- makes the
	   badge read as a "position marker" pinned to the bar instead of a
	   floating number. top/height mirror
	   .progress-wrapper's padding-top (23px) and its 5px gap (see above):
	   23px + 8px bar height = 31px, up to the badge's own top at 36px.
	   Named "progress-marker", not the generic ".marker" already used
	   elsewhere in this file (image markers, with its own padding/opacity/
	   z-index) -- reusing that name let those rules leak into this one and
	   inflated the 2x13px tick into a big padded box. */
	top:23px;
	height:13px;
	width:2px;
	left:0; /* overridden inline per instance to the true, unclamped percentage */
	background-color:var(--primary);
	transform:translateX(-50%);
}
.progress-label.bottom {
	/* Bootstrap's default .badge is a near-full pill (border-radius:10px on
	   an ~18px-tall box) -- this badge sits flush-LEFT at the percentage
	   mark (see ModelUI::ProgressBar()'s $leftStyle), i.e. exactly where
	   .progress-marker points at it, so the marker was landing right on
	   that rounded top-left corner: mathematically touching (confirmed via
	   getBoundingClientRect -- both at the same pixel), but visually reading
	   as a gap, since the corner curve carves away the solid colour there.
	   A flatter radius keeps the badge's top edge solid at the touch point
	   (confirmed via a live measurement). */
	border-radius:4px;
	/* Flush with the wrapper's own bottom edge, inside padding-bottom above
	   (was a fixed 'top' offset tuned to a fixed wrapper height -- switched
	   to 'bottom' so it stays correctly placed now that the wrapper's height
	   is content-driven instead of a fixed 50px). */
	top:auto;
	bottom:0;
	/* 'left' is set inline per instance (clamp() between 0% -- flush with
	   .top-left -- and 100% minus this same width -- flush with .top-right,
	   see ModelUI::ProgressBar()'s PROGRESS_LABEL_BOTTOM_WIDTH_PX). min-width
	   must match the px value used in that clamp() or the two drift apart. */
	min-width:48px;
	text-align:center;
	/*background:red;*/
}
.badge {
	width:auto;
}
.badge-primary,
.badge-info {
	background-color:var(--primary);
}
/* Stock Bootstrap 3 warning/success hues (same values already used for the
   "Weight by Materials" chart palette, see ModelUI::ProgressBar()'s caller in
   user-collection/view.php) -- kept consistent with the rest of the site's
   palette rather than an arbitrary yellow/green. */
.badge-warning {
	background-color:#f0ad4e;
}
.badge-success {
	background-color:#5cb85c;
}

/* Destaque de notificações por ler (Fabio, 2026-10-28) -- #d9534f é o
   mesmo vermelho de .btn-danger já usado no resto do site (ver o
   comentário de .status-toast.error acima), não uma cor nova.
   badge-unread só é aplicado quando $unreadNotificationCount > 0
   (frontend/views/layouts/main.php), por isso não precisa de condição
   nenhuma aqui -- a presença da classe já É a condição. */
#notification-counter.badge-unread {
	background-color:#d9534f;
}

/* Sino a "tremer" periodicamente enquanto houver notificações por ler --
   puramente CSS (@keyframes + infinite), sem JS/timer nenhum: o tremor
   acontece só nos últimos ~8% de cada ciclo de 4s, dando o efeito de
   "pulso de X em X segundos" em vez de um tremor contínuo, que seria
   mais uma distracção do que um destaque. */
@keyframes bell-shake {
	0%, 92%, 100% { transform: rotate(0deg); }
	93% { transform: rotate(-12deg); }
	94% { transform: rotate(10deg); }
	95% { transform: rotate(-8deg); }
	96% { transform: rotate(6deg); }
	97% { transform: rotate(-4deg); }
	98% { transform: rotate(2deg); }
	99% { transform: rotate(0deg); }
}
.glyphicon-bell.has-unread-notifications {
	display:inline-block;
	transform-origin:50% 0%;
	animation:bell-shake 4s ease-in-out infinite;
}

/* Base .coin-container/.coin-container-img rules live in common/web/css/base.css
   (shared with backend) -- this just adds the frontend-only CSS shape used
   for text wrap-around next to the coin image. */
.coin-container-img {
	shape-outside: inset(20px 50px 10px 0 round 50px);
}

.coin-desc > div {
	color:#000;
}

.coin-desc span {
	line-height:35px;
}

.coin-desc .title {
	margin:0;
	font-size:1.5em;
	text-align:left;
}

.coin-price-table-header {
	margin-top:15px;
	background-color:#f5f5f5; 
	color:gray; 
	padding:5px 0;
}

.coin-price-table {
	padding:0;
}

.axis {
	position:absolute;
	top:0;
	left:50%;
	margin-left:-1px;
	
	width:0;
	height:100%;
	
	border:2px dashed #CCC;
	
	z-index:0;
}

.axis-90:HOVER {
	transform: rotate(-90deg);
}
.axis-180:HOVER {
	transform: rotate(-180deg);
}
.axis-90,
.axis-180 {
	transform:none;
	cursor:crosshair;
}
.axis-90:HOVER + .axis.axis-90,
.axis-180:HOVER + .axis.axis-180 {
	display:none;
}

.coin-displayer {
	margin-top:50px;
}

.gallery {
	position:relative;
}
/* Set on the underlying .gallery (build/src-js/shop-gallery.src.js) for as
   long as the "view larger" popup is open on top of it -- display:none is
   the strongest available guarantee that it can't be painted or interacted
   with, on top of the popup already unbinding its zoom instance. */
.gallery-lightbox-source-hidden {
	display:none;
}
.gallery:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.gallery-counter {
	position:absolute;
	top:15px;
	left:15px;
	z-index:1;
}
.gallery-state {
	position:absolute;
	top:15px;
	right:15px;
	z-index:2;
}

.gallery-prev,
.gallery-next {
	position:absolute;
	width:40px;
	height:40px;
	padding:5px;
	background-color:#FFF;
	border:1px solid #CCC;
	top:50%;
	margin-top:-25px;
	z-index:1;
	cursor:pointer;
	
	color:#CCC;
	font-size:23px;
}

.gallery-prev {	
	left:0;
}

.gallery-next {
	right:0;
}

.gallery-expand {
	position:absolute;
	bottom:-36px;
	left:50%;
	transform:translateX(-50%);
	z-index:1;
	width:32px;
	height:32px;
	display:flex;
	align-items:center;
	justify-content:center;
	background-color:#FFF;
	border:1px solid #CCC;
	color:#CCC;
	font-size:16px;
	cursor:pointer;
}

/* Popup opened by .gallery-expand (frontend/views/shop/_gallery.php, single-
   product detail page only, see build/src-js/shop-gallery.src.js) -- shows
   the current gallery photo much bigger for a closer look at condition. */
/* Bootstrap's own default z-index (1050 for .modal, 1040 for its backdrop)
   is NOT actually the highest on this page: .affix (the shop sidebar,
   frontend/web/css/site.css) sits at z-index:9999 !important, and
   .toast-cart at 10000 -- both establish their own stacking context via
   position:fixed same as the modal, so whichever number is bigger wins the
   whole page's paint order, full stop, regardless of DOM order or the
   modal's own overlay semantics. On some layouts/viewports that let one of
   those sit visually in the same screen area as this popup, on top of it.
   Forcing both the modal and its backdrop above everything else on the
   page removes that ambiguity entirely. */
.gallery-lightbox-modal {
	z-index:1000000 !important;
}
/* Not scoped to just this modal's own backdrop -- Bootstrap 3 appends
   .modal-backdrop as a plain sibling in <body>, not nested inside the
   .modal element, so there's no reliable CSS selector tying one to the
   other; boosting the backdrop globally is harmless since a backdrop only
   ever exists while SOME modal is open, and it should always sit right
   below that modal regardless of which one it is. */
.modal-backdrop {
	z-index:999999 !important;
}
.gallery-lightbox-modal .modal-body {
	position:relative;
	padding:0;
}
.gallery-lightbox-photo {
	position:relative;
	width:100%;
	height:70vh;
	/* Modern mobile browsers treat touch listeners as passive by default,
	   which silently IGNORES e.preventDefault() calls made inside them --
	   jquery.zoom's own touch handling (build/src-js/shop-gallery.src.js)
	   calls preventDefault() on touchstart/touchmove exactly to stop the
	   browser's native touch-and-drag zoom/pan from kicking in, but on a
	   real phone that call was very likely a silent no-op, letting the
	   native gesture through underneath the JS-driven one (confirmed live,
	   2026-08-07: a screenshot mid-gesture showed the SITE FOOTER visible
	   below the "zoomed" photo -- only explainable by the whole page being
	   natively panned/zoomed, not by any of the .zoom-instance-management
	   fixes tried before this one). touch-action:none is the CSS-level,
	   reliable way to disable the browser's own gesture handling for this
	   element regardless of passive-listener behavior.  */
	touch-action:none;
}
.gallery-lightbox-img {
	width:100%;
	height:100%;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	touch-action:none;
}
/* Explicit on/off control for the popup's own hover-zoom lens -- hover-
   activated zoom felt too easily triggered for deliberate, close inspection
   here, unlike the small gallery thumbnail, where hover-to-zoom stays
   automatic, matching the rest of the shop. Off by default on
   every fresh open; same visual language as .gallery-expand (bottom-center,
   same button size) since this replaces it as the popup's own dedicated
   control once inside the lightbox. Hidden entirely on touch/no-hover
   devices (JS-toggled 'hidden' class) -- there's nothing to toggle there,
   the popup image already only ever uses native pinch-zoom. */
.gallery-lightbox-zoom-toggle {
	position:absolute;
	bottom:0;
	/*
	left:50%;
	transform:translateX(-50%);
	*/
	right:0;
	z-index:3;
	width:32px;
	height:32px;
	display:flex;
	align-items:center;
	justify-content:center;
	background-color:#FFF;
	border:1px solid #CCC;
	color:#CCC;
	font-size:16px;
	cursor:pointer;
}
.gallery-lightbox-zoom-toggle.active {
	color:var(--primary);
	border-color:var(--primary);
}
/* .gallery-lightbox-prev/-next intentionally carry the SAME .gallery-prev/
   .gallery-next classes too (see _gallery.php) -- reuses that button's
   exact, already-correct look instead of a second hand-rolled copy; the
   -lightbox- classes here are only JS hooks (build/src-js/shop-gallery.src.js),
   not a separate visual style. .modal-body is position:relative (above),
   playing the same role .gallery itself plays for the small thumbnail's own
   prev/next, so left:0/right:0 lines up the same way. Likewise
   .gallery-lightbox-photo (position:relative) plays .gallery's role for the
   .gallery-counter/.gallery-state badges reused inside it below -- their
   base top:15px/left:15px/right:15px rules already line them up with each
   other, no override needed here. */

.photo-container {
	width:100%;
	
	position:relative;
	z-index:1;
	
	float:left;
	/*padding:0 7px;*/
}
.photo-container:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}
.photo-container-img {
	background-repeat:no-repeat;
	background-size:auto 100%;
	background-position:center center;
	width:100%;
	height:100%;
	
	position:absolute;
	z-index:1;
}

.zoomImg {
	cursor: -moz-zoom-in; 
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
}

/* found in #shop-cart-items */
.table .form-group {
	margin:7px 0 0 0;
}

/* PAGE INDEX */
.menu-index [class*='col'] {
	/*border:2px solid transparent;*/
}
.menu-index [class*='col']:hover {
	border:4px solid var(--primary);
}
.menu-index a {
	color:var(--default);
	text-decoration:none;
	display:block;
	width:100%;
	height:100%;
}
.index-icon-img-wrap {
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.index-icon-img-wrap img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
}
.menu-index h2 {
	font-weight: 800;
	font-size: 1.6em;
	margin-top: 12px;
}
.index-icon-stat {
	margin: 2px 0 14px;
}
.index-icon-stat-number {
	display: block;
	font-size: 3em;
	font-weight: 800;
	line-height: 1;
	color: var(--primary);
	font-variant-numeric: tabular-nums;
	transition: transform .15s ease;
}
.menu-index [class*='col']:hover .index-icon-stat-number {
	transform: scale(1.06);
}
.index-icon-stat-label {
	display: block;
	margin-top: 4px;
	font-size: 1.05em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--default);
}

.shop-product-th {
	position:relative; /* for marker out of stock position */
	margin-bottom:25px;
}

.shop-product-th-desc {
	clear:both;
}

.shop-product-th-desc .title {
	/*text-align:left;*/
	display:block;
	width:100%;
	margin-top:5px;
}
.shop-product-th-desc .title2 {
	font-size:0.75em;
	vertical-align:top;
	display:block;
	width:100%;
	margin-top:2px;
}
.shop-product-th-desc .price {
	font-size:1.1em;
	color:var(--primary);
	font-style:italic;
	font-weight:bold;
	display:block;
	width:100%;
	margin-top:2px;
}

.shop-price {
	font-size:1.5em;
	font-weight:bold;
	font-style:italic;
	color:var(--primary);
}

.shop-cart-checkout .help-block:not(:empty) {
	background-color:#f8d7da;
	border:1px solid #f5c6cb;
	color:#721c24;
	padding:7px 5px;
	font-size:0.8em;
}

.shop-cart-badge {
	margin-left:5px;
	margin-top:-10px;
}

.toast-cart {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 10000;
	max-width: 320px;
	background: #fff;
	border-left: 4px solid #5cb85c;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.25);
	padding: 12px 30px 12px 16px;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-cart.show {
	opacity: 1;
	transform: translateY(0);
}

.toast-cart-close {
	position: absolute;
	top: 6px;
	right: 10px;
	cursor: pointer;
	color: #999;
	font-size: 1.2em;
	line-height: 1;
}

.toast-cart-close:hover {
	color: #333;
}

.toast-cart-title {
	font-weight: bold;
	margin-bottom: 4px;
}

.toast-cart-actions {
	margin-top: 8px;
	text-align: right;
}

/* Generic "A X.../X!" status pill -- Google Docs/Sheets-style save indicator,
   shown for any action needing a round-trip to the server (model-ui-widgets.
   src.js, shared with the backend build -- see its own "status toast"
   comment block). Bottom-LEFT on purpose, opposite corner
   from .toast-cart (bottom-right), so the two can never visually collide. */
.status-toast {
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 10000;
	background: rgba(51, 51, 51, 0.92);
	color: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.25);
	padding: 10px 16px;
	font-size: 0.9em;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.status-toast.show {
	opacity: 1;
	transform: translateY(0);
}

/* Success/error variants reuse the same Bootstrap 3 palette already used
   elsewhere on this page (#5cb85c is .toast-cart's own success border-left;
   #d9534f matches .btn-danger), not a new colour choice. Default (no class)
   stays the neutral grey above, for the in-progress state (nothing to judge
   yet). */
.status-toast.success {
	background: rgba(92, 184, 92, 0.95);
}

.status-toast.error {
	background: rgba(217, 83, 79, 0.95);
}

.shop-cart-summary {
	/*float:right;*/
	background-color:#f5f5f5;
}

.shop-cart-adresses {
	position:relative; /* needs to ajax refresh and center loading (absolute position) */
}

.shop-cart-qty {
	max-width:50px;
	width:100%;
	margin:0;
	padding:4px 2px;
	text-align:center;
}

#shop-cart-items tbody td {
	vertical-align:middle !important;
}

.shop-order-item-wrapper:nth-child(odd) {
	clear:both;
}
.shop-order-item {
	background:#f5f5f5;
	padding:15px;
	text-align:left;
}
.shop-order-price {
	font-weight:bold;
	font-size:1.5em;
	text-align:right;
}
.shop-order-info {
	font-size:1em;
	margin-bottom:15px;
}
.shop-order-info2 {
	font-size:0.85em;
}
.shop-order-menu a {
	width:1.3em;
	height:1.5em;
	
	color:var(--primary);
	font-size:1em;
	line-height:0.5em;
	text-align:center;
	
	padding:5px;
	
	display:inline-block;
	
	margin-top:10px;
	margin-left:5px;
	
	background:#f5f5f5;
	/*border:1px solid var(--primary);*/
}
.shop-order-menu a:hover {
	background:var(--primary);
	color:white;
}

ul.ls-credit-card {
	list-style-type:none;
	padding:0;
	margin:0;
}
ul.ls-credit-card li {
	display:inline-block;
	margin-right:7px
}
ul.ls-credit-card img {
	width:50px;
	height:auto;
}

img.disabled {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	opacity:0.6;
}

/* Out-of-stock treatment: a small badge at the BOTTOM of the coin slot,
   centered (never covers the photo, nor .gallery-counter/.gallery-state --
   both anchored top:15px -- coin detail/patina matters even on sold-out
   pieces) + everything else in the card/product page dimmed to grayscale,
   EXCEPT the photo itself and this badge, so "unavailable" reads at a
   glance without hiding the item. Replaces the old .marker (a 60%-wide
   stamp image centered over the whole card, opaque white background --
   effectively blocked the photo). */
.shop-product-th-img,
.shop-product-gallery-wrap {
	position: relative;
}
.shop-product-oos-badge {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	background-color: var(--error);
	color: #fff;
	font-size: .75em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 3px 10px;
	border-radius: 3px;
	white-space: nowrap;
}
.shop-product-unavailable {
	filter: grayscale(100%);
	opacity: .55;
}
/* Stock-alert button/confirmation (frontend/views/user-stock-alert/_btn_add.php
   and _btn_delete.php) -- see _product_card.php, rendered in its own wrapper
   between .shop-product-th-img and .shop-product-th-desc, deliberately NOT
   inside either: inside .shop-product-th-img it fought the absolutely-
   positioned .shop-product-oos-badge for the same bottom-of-image space
   (found live 2026-09-02, F5 manual QA -- text unreadable, badge/button
   overlapping); .coin-container's float:left with no clearfix also meant
   adding any in-flow content there grew .shop-product-th-img's own box
   height, which in turn dragged the badge's bottom:8px anchor down with it,
   so the two kept re-colliding no matter the button's own margin. Inside
   .shop-product-th-desc it would have been caught by .shop-product-
   unavailable's grayscale/opacity, which deliberately excludes the badge and
   any other stock-related CTA (see that rule's own comment) -- a dimmed
   "notify me" button reads as no less clickable, but should stay reasonably
   visible like the ribbon does. A small margin-top is all this needs; the
   image container above it is completely unaffected. */
.shop-product-stock-alert {
	margin-top: 6px;
	text-align: center;
}
/* .shop-product-unavailable is applied directly to specific elements (title/
   price row, the disabled add-to-cart button) rather than to a shared
   ancestor -- View/Favorite stay their own actions, not tied to stock, so
   they're deliberately left out and never wrapped in it. The gallery's own
   .gallery-counter/.gallery-state badges (DodgerBlue/var(--primary)) get the
   same treatment via .shop-product-gallery-oos below -- targeted directly
   too, so the photo underneath is never touched by the filter. */
.shop-product-gallery-oos .gallery-counter,
.shop-product-gallery-oos .gallery-state {
	filter: grayscale(100%);
	opacity: .55;
}

/* Shop search/sort row (frontend/views/shop/index.php) -- a single line on
   desktop; see the @media(max-width:576px) override below for mobile, where
   the fixed-width dropdown/button used to force the whole row wider than
   the screen instead of wrapping. */
.shop-search-form-row {
	display: flex;
	gap: 8px;
}
.shop-search-form-sort {
	flex: 0 0 auto;
	width: auto;
}
.shop-search-form-q {
	flex: 1 1 auto;
	min-width: 0;
}
.shop-search-form-btn {
	flex: 0 0 auto;
}

#user-address-primary fieldset.radio,
#user-address-primary label.radio {
	padding:0;
}

.subscription li {
	border:0;
}
.subscription-card {
	/* Horizontal margin deliberately left at 0 -- .subscription is a
	   col-md-4 (or, on mobile, a full-width column), which already has its
	   own 15px left/right padding (Bootstrap's shared column rule, applies
	   at every breakpoint). That alone lines every card's outer edge up
	   with the comparison table below (a plain col-md-12, same padding,
	   no card-like margin of its own) -- at any screen size, no nth-child
	   tricks needed. The old margin:15px (all 4 sides) + nth-child(1)/(3n)
	   zeroing only the 1st/last card's outer side "worked" only for the
	   two OUTER desktop columns, never for the middle one, and broke
	   completely once mobile stacks each card into its own full-width row
	   (every card became an "outer" edge, but only 2 of the 3 had the
	   zeroing rule). */
	border:1px solid var(--primary);
	margin:15px 0;
}
.subscription-card:hover {
	-webkit-box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);  /* Chrome, Safari, iOS */
    -moz-box-shadow:    0px 4px 6px rgba(0, 0, 0, 0.3);  /* Firefox antigo */
    box-shadow:         0px 4px 6px rgba(0, 0, 0, 0.3);  /* standard */
}
.subscription h2 {
	color:var(--primary);
	font-weight:bold;
}
.subscription-products {
	margin-bottom:30px;
}
table.subscription-comparison {
	
}
table.subscription-comparison td:nth-of-type(1) {
	text-align:left;
}

.faq-header {
	font-size:1.5em;
	color:var(--primary);
	border-bottom:1px solid var(--primary);
	margin-bottom:15px;
	display:inline-block;
}
.faq-topic {
	margin-bottom:25px;
}
.faq-question {
	font-weight:bold;
	font-size:1.25em;
	color:var(--primary);
}
.faq-answer {
	
}

/*Added*/
.clearfix {
  clear: both;
}
.clearfix:after {
  clear: both; 
  content: "";
  display: table; 
}

.w100 {
	width:100%;
}
.mt-1 {
	margin-top:15px;
}
.mt-2 {
	margin-top:30px;
}
.mt-3 {
	margin-top:45px;
}
.mb-1 {
	margin-bottom:15px;
}
.mb-2 {
	margin-bottom:30px;
}
.mb-3 {
	margin-bottom:45px;
}
.ml-1 {
	margin-left:15px;
}
.ml-2 {
	margin-left:30px;
}
.ml-3 {
	margin-left:45px;
}
.mr-1 {
	margin-right:15px;
}
.mr-2 {
	margin-right:30px;
}
.mr-3 {
	margin-right:45px;
}

.fs-1 {
	font-size:1em;
}
.fs-1_25 {
	font-size:1.25em;
}
.fs-1_5 {
	font-size:1.5em;
}
.fs-2 {
	font-size:2em;
}


.f-bold {
	font-weight:bold;
}

.f-small {
	font-size:0.8em;
	font-style:italic;
}

.f-big {
	font-size:1.3em;
	font-style:italic;
	font-weight:bold;
}

.ls-bb-1 {
	border-bottom:2px dashed var(--primary);
	margin-bottom:20px;
}

.ls-bb-1 [class^="col-"] div {
	border-bottom:1px solid #CCC;
	margin-bottom:10px;
}
.ls-bb-1 [class^="col-"] div:has(.thumb),
.ls-bb-1 [class^="col-"] div:has(.badge) {
	border-bottom:0;
}

/* Status badge colors ([class$="s-*"]) live in common/web/css/base.css
   (shared with backend). */

/*****************************************
CHANGE EXTENSIONS/PLUGINS DEFAULTS
******************************************/
/* SELECT2 */
/* padding/font-size/line-height/height come from the shared input/.btn
   selector above -- only the border is select2-specific. */
.select2-selection {
	border-radius:0 !important;
	border:2px solid var(--default-light) !important;
}
.select2-selection__arrow {
	padding:0.4em 1em !important;
	top:0 !important;
	height:100% !important;
}
.select2-selection__clear {
	right:40px !important;
	top:9px !important;
}
/* .select2-container--krajee-bs3 highlighted/aria-selected rules live in
   common/web/css/base.css (shared with backend). */
/* FILE UPLOAD */
.file-input {
	
}
.file-preview {
	/*border:none;*/
	padding:0;
}
.file-preview-frame {
	margin:1% !important;
	width:98%;
}
.file-drop-zone {
	margin:0;
	padding:0;
}
.file-default-preview {
	margin:0;
	padding:0;
}
.file-preview-frame img,
.file-default-preview img {
	margin:0;
	max-height:100%;
	max-width:100%;
	width:auto !important;
	height:100% !important;
}
.fileinput-remove.close {
	margin:0.2em;
	width:1em;
	height:1em;
	font-size:3em;
	background-color:#a94442;
	display:block;
	z-index:99;
	opacity:1;
	color:#fff;
}
.file-input .btn-file {
	float:right;
}
.krajee-default.file-preview-frame .kv-file-content {
	width:100% !important;
	/*height:100% !important;*/
	height:200px !important;
	align-items:flex-start !important;
}

/* Alert close button — Bootstrap 3 renders button after body, causing float:right to place it at bottom */
.alert {
	position: relative;
	padding-right: 40px;
}
.alert .close {
	position: absolute;
	top: 8px;
	right: 10px;
}

@media(max-width:992px) {
	.lg-center {
		float:none;
		text-align:center;
		display:block;
		width:100%;
	}
	.lg-center * {
		float:none !important;
		text-align:center !important;
	}
	
	span.logo-lg {
		display:none;
	}
	span.logo-mini {
		display:block;
	}
	.thumb {
		margin:0 auto;
	}
	.coin-displayer {
		margin-top:75px;
	}
	#catalog-results {
		margin-top:75px;
	}
	.shop-product-th {
		margin-top:10px;
	}
	.shop-order-item,
	.shop-order-item * {
		text-align:center !important;
	}
	.shop-order-menu a {
		float:none !important;
	}
}

@media(max-width:767px) {
	/* .languages has Bootstrap's .pull-left (float:left !important) -- fine
	   on desktop (navbar items sit in a row anyway), but in the collapsed
	   mobile menu it makes the first nav item ("Coins"/"Moedas") wrap up
	   alongside it instead of starting its own full-width row like every
	   other item below it. Its own margin-left:15px (site.css, desktop
	   rule) also stacks on top of the container's own inset that already
	   aligns the nav items -- zeroed here so it lines up with them instead
	   of sitting 15px further right. */
	.languages {
		float: none !important;
		clear: both;
		margin-left: 0;
	}

	.md-center {
		float:none;
		text-align:center;
		display:block;
		width:100%;
	}
	.md-center * {
		float:none !important;
		text-align:center !important;
	}
	/*
	.col-sm-2 {
		width:50%;
		padding-right:15px;
		padding-left:15px;
		margin-bottom:15px;
	}
	*/
	
	/* Bootstrap's own responsive default makes ".navbar-nav .open .dropdown-menu"
	   transparent below 768px (see bootstrap.css), so the whole collapsed panel
	   -- top-level items and submenus alike -- shows .navbar-custom's blue
	   straight through, instead of just the navbar bar and the active/selected
	   item like on desktop. Restore a normal white panel here (matching that
	   desktop convention) instead of only compensating with white link text. */
	.navbar-custom .navbar-collapse {
		background-color:#fff;
		border-top:1px solid rgba(0,0,0,.1);
	}
	.navbar-custom .navbar-collapse a {
		color:#333;
	}
	/* The rule above (specificity-tied with Bootstrap's own
	   ".dropdown-menu > .active > a { color:#fff }") loads later in the
	   cascade and was winning, leaving the active/selected sub-item's text
	   dark against its own blue background. Re-assert white here with a
	   more specific selector so the selected item stays legible. */
	.navbar-custom .navbar-collapse .dropdown-menu .active > a {
		color:#fff;
	}
	/* Separate each submenu group from the next top-level item with a
	   horizontal rule, so submenu items aren't mistaken for belonging to
	   the item below them. */
	.navbar-custom .navbar-collapse .dropdown-menu {
		border-bottom:2px solid var(--primary);
		padding-bottom:5px;
		margin-bottom:5px;
	}

	.shop-product-th {
		margin-top:25px;
	}
	
	#footer-links,
	.footer .social-wrapper {
		text-align:center;
		float:none !important;
	}
	
	.footer {
		text-align:center;
	}
}

@media(max-width:576px) {

	/* Stack the sort dropdown, search box, and buttons full-width instead of
	   forcing them onto one cramped/overflowing row. */
	.shop-search-form-row {
		flex-wrap: wrap;
	}
	.shop-search-form-sort,
	.shop-search-form-q,
	.shop-search-form-btn {
		flex: 1 1 100%;
		width: 100%;
	}

	/*
	.shop-cart-actions {
		text-align:center;
	}
	*/

	.sm-center {
		float:none;
		text-align:center;
		display:block;
		width:100%;
	}
	.sm-center * {
		float:none !important;
		text-align:center !important;
	}
	
	.shop-cart-qty {
		padding:2px 1px;
		font-size:0.75em;
	}
	
	.shop-cart-actions a,
	.shop-cart-actions input,
	.shop-cart-actions button {
		margin-bottom:15px;
	}
}

/* Homepage module cards (frontend/views/site/_module_launch_widget.php) --
   replaces the usual stat number/label when a module isn't launched yet
   (common\models\ModuleAvailability). Compact version of the full-page
   countdown's own style (frontend/views/site/countdown.php). */
.module-launch-countdown {
	display: flex;
	justify-content: center;
	gap: 0;
}
.module-launch-countdown > div {
	padding: 0 8px;
	position: relative;
}
.module-launch-countdown > div:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: #e0e0e0;
}
.module-launch-countdown span {
	display: block;
	font-size: 1.4rem;
	font-weight: 700;
	color: #1e90ff;
	line-height: 1.1;
}
.module-launch-countdown label {
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.6;
}
.module-launch-badge {
	font-size: 0.85em;
	padding: 6px 14px;
}