/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Mar 26, 2025, 1:13:04 PM
    Author     : tim
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&display=swap');

body {
    background-color: #000000;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
#responseContainer img {
    max-width: 100%;
}
.input-group-prepend, .input-group-text {
    border-radius: 0px 0px 0px 0px !important;
}
.card, .card-header, .card-header:first-child{
    border-radius: 0px !important;
}
#offerHeader {
    background-size: cover;
    background-repeat: no-repeat;
    text-align: left;
    text-shadow: rgb(0,0,0,0.3) 1px 0 5px;
    aspect-ratio: 3 / 2.5;
    position: relative;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1.3em;
}
#offerBuzz{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
}
#recalls {
    background-color: #3A4149;
    color: #ffffff;
}
.btn-primary.btn-round {
    border-radius: 50px;
    background-color: #0072BC !important;
    border-color: #0072BC !important;
}

.btn-primary.btn-round:hover {
    background-color: #1E3144 !important;
    border-color: #1E3144 !important;
}
.recall-left {
    background-image: url('../images/purl/background/recall-left-sm.jpg');
    background-color: #ff0b0b;
    background-position: left;
    background-repeat: no-repeat;
    background-size: auto 100%;
    color: #ffffff;
}
.recall-right {
    background-image: url('../images/purl/background/recall-right-sm.jpg');
    background-position: right;
    background-repeat: no-repeat;
    background-size: auto 100%;
}
#PowersportsView header{
    border-bottom: solid 2px #ea2229;
    color: #ffffff;
}
#AutosView header{
    border-bottom: solid 2px #0072BC;
    color: #ffffff;
}
#PowersportsView footer {
    border-top: solid 2px #ea2229;
    color: #ffffff;
    background-color: #1e1e1e;
}
#AutosView footer {
    border-top: solid 2px #0072BC;
    color: #ffffff;
    background-color: #1e1e1e;
}
.goldman-regular {
    font-family: "Goldman", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.goldman-bold {
    font-family: "Goldman", sans-serif;
    font-weight: 700;
    font-style: normal;
}
.co-red {
    color: #ea2229;
}
.border-dashed {
    border-style: dashed !important;
}
.bg-trans-25 {
    background-color: rgba(255, 255, 255, 0.25);
}
.bg-trans-25-dark {
    background-color: rgba(0, 0, 0, 0.25);
}
.bg-trans-75 {
    background-color: rgba(255, 255, 255, 0.75);
}
.ps-offer {
    background-image: url('../images/background/sxs1.jpg');
}
.ls-offer {
    background-image: url('../images/background/mtn-bg-full.png');
    background-position: center; /* Centers the image in the container */
    background-repeat: no-repeat; /* Prevents image from tiling */
    background-size: cover; /* Scales to cover the entire container without distortion */

}
.ps-offer-inner {
    background-color: rgba(0, 0, 0, 0.75);
}
.offer-container {
    container-type: inline-size; /* or size for both dimensions */
}
.scale-text {
    font-size: 12cqi;
}
.scale-text-sm {
    font-size: 8cqi;
}

/* === Countdown Dark Theme === */

.countdown-card {
    background-color: #1c1f23;          /* near-Bootstrap bg-dark */
    color: #f8f9fa;                     /* light text */
    border: 1px solid rgba(255,255,255,.1);
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}
.countdown-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

#countdown .cd-block {
    min-width: 90px;
    text-align: center;
}

#countdown .cd-value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1;
    padding: .25rem .75rem;
    background: #2b2f34;                /* dark inner block */
    color: #f8f9fa;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05),
        0 1px 2px rgba(0,0,0,.5);
}

#countdown .cd-label {
    margin-top: .25rem;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #adb5bd;                     /* muted gray text */
}

#countdown .cd-sep {
    align-self: center;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3rem);
    color: #6c757d;                     /* Bootstrap secondary */
    padding: 0 .25rem;
}

/* Alert message styling */
#cd-complete {
    background-color: #dc3545;          /* Bootstrap success green */
    color: #fff;
    border: none;
}

/* Subtle pulse when timer ends */
#cd-complete:not(.d-none) {
    animation: pulse 1s infinite alternate;
}
@keyframes pulse {
    from { box-shadow: 0 0 0 rgba(220,53,69,.4); }
    to   { box-shadow: 0 0 20px rgba(220,53,69,.8); }
}

/* Make sure separators hide cleanly on narrow screens */
@media (max-width: 380px) {
    #countdown .cd-sep { display: none; }
}

.locked > img {
    filter: grayscale(100%); /* 100% for full grayscale, adjust as needed */
    -webkit-filter: grayscale(100%); /* For older Webkit browsers */
}