/* 
COLORS: Spanish Palette
#d1ccc0 body bg color - hot stone
#84817a brand bg color - grey porcelain
#f7f1e3 brand text color - swan white
#227093 border color - devil blue
 */



h1.title {
	font-size: 2rem;
}

.bg-pretty {
	background-color: #d1ccc0;
}

.sexy-footer {
	background-color: #f7f1e3;
	border-top:2px solid #227093;
	margin-top: 20px;
}

.brand-chunk {
	background-color:#84817a;
	border-top:2px solid #227093;
	border-bottom:2px solid #227093;
	color:#f7f1e3;
}

.page-title {
	color: #84817a;
	margin-bottom: 20px;
}

.custom-border {
  border-color: #227093 !important; /* Use !important to override Bootstrap's default */
}

.share-block a {
	text-decoration: none;
}

.btn-outline-share {
	background-color: #fff;
  --bs-btn-color: #227093;
  --bs-btn-border-color: #227093;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #227093;
  --bs-btn-hover-border-color: #000;
  --bs-btn-focus-shadow-rgb: 0, 97, 242;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4a69bd;
  --bs-btn-active-border-color: #4a69bd;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #4a69bd;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #4a69bd;
  --bs-gradient: none;
}

.btn-create {
	background-color:#2980b9;
	color: #fff;
	border-color: #000;
}

.btn-create:hover {
	background-color: #fff;
	color: #2980b9;
	border-color: #2980b9;

}

.btn-grey-porc {
	background-color: #84817a;
  --bs-btn-color: #ffffff;
  --bs-btn-border-color: #227093;
  --bs-btn-hover-color: #84817a;
  --bs-btn-hover-bg: #ffffff;
  --bs-btn-hover-border-color: #000;
  --bs-btn-focus-shadow-rgb: 0, 97, 242;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2980b9;
  --bs-btn-active-border-color: #000000;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #4a69bd;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #4a69bd;
  --bs-gradient: none;
}

.btn-upgrade {
    background-color: #f4b400;
    border-color: #000000;
    color: #000;
    box-shadow: 0 0 8px rgba(244,180,0,.4);
}

.btn-upgrade:hover {
    background-color: #e06600;
}

.pagination .page-link {
	background-color:#84817a;
	color: #ffffff;
	border-color: #000;
}

.pagination .page-link:hover {
	background-color:#ffffff;
	color: #84817a;
	border-color: #000;
}

.pagination .page-item.active .page-link {
  background-color: #227093; /* Active background color */
  border-color: #000000;    /* Active border color */
  color: white;              /* Active text color */
}

.background-carousel-wrapper {
    position: relative;
}

#backgroundCarouselWrapper::before,
#backgroundCarouselWrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 60px;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

#backgroundCarouselWrapper::before {
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.08), rgba(0,0,0,0));
}

#backgroundCarouselWrapper::after {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.08), rgba(0,0,0,0));
}

.background-carousel-wrapper.hide-left::before {
    opacity: 0;
}

.background-carousel-wrapper.hide-right::after {
    opacity: 0;
}

.background-carousel-wrapper::before,
.background-carousel-wrapper::after {
    transition: opacity 0.2s ease;
}

.carousel-hint {
    text-align: center;
    font-size: 0.9rem;
    margin-top: 6px;
    opacity: 1;
    transition: opacity 0.6s ease;
}

.carousel-hint.hidden {
    opacity: 0;
}

.background-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 6px;
	transition: opacity 0.25s ease;
}

.background-carousel.loading {
    opacity: 0;
}

.background-carousel::-webkit-scrollbar {
    height: 8px;
}

.background-carousel::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 4px;
}

.bg-option {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    flex-shrink: 0;
}

.bg-option:hover {
    border-color: #999;
}

.bg-option.selected {
    border-color: #0d6efd;
}


.background-carousel {
    cursor: grab;
}

.background-carousel.dragging {
    cursor: grabbing;
}


/* Works in Chrome, Edge, Safari */
.element::-webkit-scrollbar {
  width: 10px;
}
.element::-webkit-scrollbar-thumb {
  background-color: #d1ccc0;
  border-radius: 1px;
}
.element::-webkit-scrollbar-track {
  background-color: #d1ccc0;
}

/* Works in Firefox */
.element {
  scrollbar-width: thin;
  scrollbar-color: #ff793f #d1ccc0;
}


.bg-option {
    user-select: none;
    -webkit-user-drag: none;
}


/* skeleton tiles */
.bg-skeleton {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0.06) 25%,
        rgba(255,255,255,0.35) 50%,
        rgba(0,0,0,0.06) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}

/* shimmer animation */
.bg-skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150px;
    width: 150px;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.6),
        transparent
    );
    animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
    0% { left: -150px; }
    100% { left: 100%; }
}