/* =============================================
   Click'nChick — Main Stylesheet
   =============================================
   Matches the original inline CSS for 100% visual parity.
   ============================================= */

/* ── Fonts ── */
@font-face {
    font-family: 'Barlow Condensed Medium';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: local('Barlow Condensed Medium'), url('/assets/fonts/BarlowCondensed-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Barlow Condensed Regular';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: local('Barlow Condensed Regular'), url('/assets/fonts/BarlowCondensed-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Barlow Condensed Light';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: local('Barlow Condensed Light'), url('/assets/fonts/BarlowCondensed-Light.woff') format('woff');
}

@font-face {
    font-family: 'Barlow Condensed Thin';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: local('Barlow Condensed Thin'), url('/assets/fonts/BarlowCondensed-Thin.woff') format('woff');
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/MaterialIcons-Regular.eot);
    src: local('Material Icons'), local('MaterialIcons-Regular'),
        url(/assets/fonts/MaterialIcons-Regular.woff2) format('woff2'),
        url(/assets/fonts/MaterialIcons-Regular.woff) format('woff'),
        url(/assets/fonts/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

/* ── Reset & Base ── */
* {
    position: relative;
    margin: 0px 0px;
    padding: 0px 0px;
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: transparent;
    font-family: 'Barlow Condensed Regular', Sans;
    line-height: 1.3;
    color: #FAFAFA;
    text-decoration: none;
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}

html,
body {
    background-color: #191917;
    width: 100%;
    height: 100%;
    font-size: calc(11px + 2vmin);
}

/* ── Layout ── */
.view_main_container {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: inset 0 0 10px;
    background: #191917 url("/assets/bg.jpg") no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

.view_notification_bg {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    background-color: rgba(0, 0, 0, 0.4);
}

.view_notification {
    display: table;
    position: absolute;
    margin: auto auto;
    width: 100%;
    max-width: 600px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 15px;
    cursor: move;
    background-color: rgba(0, 0, 0, 0.9);
}

.view_notification thead {
    background-color: rgba(255, 255, 255, 0.2);
    border-bottom: 1px dashed rgba(225, 225, 225, 0.4);
}

.view_notification tbody {
    border-bottom: 1px dashed rgba(225, 225, 225, 0.4);
}

.view_notification tfoot {
    background-color: rgba(255, 255, 255, 0.2);
}

.view_notification tr td,
.view_notification tr th {
    padding: 15px 10px;
}

.view_notification a {
    text-decoration: underline;
}

.view_notification tfoot a {
    display: block;
    padding: 5px 0px;
    background-color: rgba(40, 167, 69, 0.9);
    cursor: pointer;
    text-decoration: none;
    text-shadow: none;
}

.view_notification tfoot a:hover {
    background-color: rgba(25, 135, 84, 0.9);
}

.view_main {
    width: 100%;
    background-color: rgba(25, 25, 23, 0.8);
}

.view_content {
    padding: 20px 10px;
}

.view_card {
    margin: 0px auto;
    width: 100%;
    max-width: 600px;
}

.view_card table {
    width: 100%;
}

.view_card_header {
    text-align: center;
}

/* ── Page Navigation ── */
.page_navigation {
    margin: 20px 0px 0px 0px;
    border-bottom: 1px dashed rgba(225, 225, 225, 0.4);
    border-top: 1px dashed rgba(225, 225, 225, 0.4);
}

.page_navigation tbody tr:nth-child(1) {
    border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
}

.page_navigation tbody td {
    vertical-align: top;
    width: 25%;
}

.page_navigation tbody td a:hover {
    text-decoration: underline;
    cursor: pointer;
}

.page_navigation tbody td.selected {
    border-left: 2px solid rgba(212, 167, 44, 0.8);
    border-right: 2px solid rgba(212, 167, 44, 0.8);
    background-color: rgba(255, 255, 255, 0.2);
}

/* ── Card Navigation & Search ── */
.card_navigation {
    text-align: center;
    margin-top: 40px;
}

.card_navigation a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px dashed rgba(225, 225, 225, 0.4);
}

.back_link {
    display: block;
    font-family: 'Barlow Condensed Thin';
    font-size: calc(8px + 0.8vmin);
    text-decoration: none;
    margin-bottom: 8px;
}

.back_link .back_arrow {
    color: #D4A72C;
    text-shadow: 0 0 8px rgba(212, 167, 44, 0.3);
}

.back_link .back_label {
    color: rgba(250, 250, 250, 0.5);
}

.back_link:hover .back_label {
    color: #D4A72C;
}

.card_search {
    display: block;
    width: 100%;
    margin-top: 20px;
}

.card_search i {
    display: table;
    margin: auto auto;
    position: absolute;
    top: 0;
    bottom: 0;
    font-size: calc(11px + 1vmin);
}

.card_search i.search {
    left: 2%;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    color: rgba(204, 204, 204, 0.5);
}

.card_search i.cancel {
    display: none;
    cursor: pointer;
    right: 2%;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    color: #6a6f75;
}

.card_search input:not(:placeholder-shown)~i.search,
.card_search input:focus~i.search {
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    color: #6a6f75;
}

.card_search input:not(:placeholder-shown)~i.cancel {
    display: table;
}

.card_search input {
    display: table;
    font-size: calc(11px + 1vmin);
    color: #cccccc;
    width: 86%;
    padding: 5px 7%;
    padding-top: 7px;
    background-color: rgba(68, 68, 68, 0.5);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

.card_search input:focus,
.card_search input:not(:placeholder-shown) {
    background-color: #fcfcfc;
    color: #6a6f75;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

/* ── Card Menu ── */
.card_menu td:not(:first-child) {
    text-align: right;
}

/* ── Content Section ── */
.view_card_body table {
    margin-top: 40px;
}

.view_card_body table td {
    padding: 10px 0px;
}

.view_card table thead {
    border-bottom: 1px dashed rgba(225, 225, 225, 0.4);
}

.view_card table thead th {
    padding-bottom: 10px;
}

.view_card table tbody td {
    padding: 10px 5px;
}

.view_card_body tbody td:first-child {
    padding-right: 10px;
    text-align: left;
}

.view_card_body tbody td:not(:first-child) {
    width: 50px;
    text-align: right;
    padding-left: 10px;
}

/* ── Footer ── */
.view_card_footer table {
    margin-top: 40px;
}

/* ── Offers & Price ── */
.offer {
    font-size: calc(5px + 0.5vmin);
    font-weight: bold;
    color: #FA5858;
}

.pricecut {
    font-weight: normal;
    color: #FAFAFA;
    text-decoration: line-through;
    text-decoration-color: rgba(250, 88, 88, 0.8);
}

/* ── Typography ── */
h1,
.text-h1 {
    font-family: 'Barlow Condensed Medium';
    font-size: calc(40px + 8vmin);
    text-shadow: none;
}

h2,
.text-h2 {
    font-family: 'Barlow Condensed Medium';
    font-size: calc(11px + 3vmin);
    font-weight: normal;
}

h3,
.text-h3 {
    font-family: 'Barlow Condensed Medium';
    font-size: calc(11px + 3vmin);
    font-weight: normal;
}

h4,
.text-h4 {
    font-family: 'Barlow Condensed Regular';
    font-size: calc(11px + 2vmin);
    font-weight: normal;
}

h5,
.text-h5 {
    font-family: 'Barlow Condensed Light';
    font-size: calc(11px + 1vmin);
    font-weight: normal;
}

h6,
.text-h6 {
    font-family: 'Barlow Condensed Thin';
    font-size: calc(8px + 0.8vmin);
    font-weight: normal;
}

/* ── Header Points ── */
.headerPointDiv {
    padding: 0px 0px !important;
    width: 33.3%;
}

.headerPointDiv:nth-child(2) {
    padding: 0px 10px !important;
}

.headerPoint {
    background-color: #D4A72C;
    height: 30px;
    width: 100%;
    line-height: 30px;
    font-family: 'Barlow Condensed Regular';
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 1px rgba(0, 0, 0, 0.6);
}

.headerPointDiv:nth-child(1) .headerPoint:after {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-bottom: 30px solid #D4A72C;
    border-right: 5px solid transparent;
    position: absolute;
    top: 0;
    right: -5px;
}

.headerPointDiv:nth-child(2) .headerPoint:after {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-bottom: 30px solid #D4A72C;
    border-right: 5px solid transparent;
    position: absolute;
    top: 0;
    right: -5px;
}

.headerPointDiv:nth-child(2) .headerPoint:before {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 30px solid #D4A72C;
    border-left: 5px solid transparent;
    position: absolute;
    top: 0;
    left: -5px;
}

.headerPointDiv:nth-child(3) .headerPoint:before {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 30px solid #D4A72C;
    border-left: 5px solid transparent;
    position: absolute;
    top: 0;
    left: -5px;
}

/* ── Status Sign (Neon Open/Closed) ── */
.status_sign {
    display: none;
    --border-color: #3da7f8;
    --animation-time: 1s;
    --box-shadow: inset 0 0 50px var(--border-color), 0 0 10px var(--border-color),
        0 0 20px var(--border-color), 0 0 30px var(--border-color);
    --text-color-closed: #FF3131;
    --text-shadow-closed: 0 0 5px #fff, 0 0 10px #fff, 0 0 5px var(--text-color-closed),
        0 0 10px var(--text-color-closed), 0 0 10px var(--text-color-closed),
        0 0 10px var(--text-color-closed), 0 0 10px var(--text-color-closed),
        0 0 20px var(--text-color-closed), 0 0 30px var(--text-color-closed),
        0 0 40px var(--text-color-closed), 0 0 55px var(--text-color-closed),
        0 0 75px var(--text-color-closed);
    --text-color-opened: #008000;
    --text-shadow-opened: 0 0 5px #fff, 0 0 10px #fff, 0 0 5px var(--text-color-opened),
        0 0 10px var(--text-color-opened), 0 0 10px var(--text-color-opened),
        0 0 10px var(--text-color-opened), 0 0 10px var(--text-color-opened),
        0 0 20px var(--text-color-opened), 0 0 30px var(--text-color-opened),
        0 0 40px var(--text-color-opened), 0 0 55px var(--text-color-opened),
        0 0 75px var(--text-color-opened);
    background-color: transparent;
    border: 3px solid rgba(255, 255, 255, 0.33);
    border-radius: 5px;
    padding: 5px 15px;
    animation: turnOnBorder 0.24s forwards step-end,
        flickerBorder calc(var(--animation-time) * 16) infinite step-end 1s;
}

.status_sign p {
    margin: 0px;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 3px;
}

.status_sign p span {
    display: inline;
}

.status_sign p span:nth-child(1) {
    animation-delay: 0.3s;
}

.status_sign p span:nth-child(2) {
    animation-delay: 0.2s;
}

.status_sign p span:nth-child(3) {
    animation-delay: 0.4s;
}

.status_sign_closed p span {
    opacity: 0.33;
    animation: turnOnClosed forwards step-end;
}

.status_sign_closed p span:nth-child(4) {
    animation: turnOnClosed 0.27s forwards step-end,
        flickerClosed var(--animation-time) infinite step-end 1s;
}

.status_sign_opened p span {
    opacity: 0.33;
    animation: turnOnOpened forwards step-end;
}

.status_sign_opened p span:nth-child(4) {
    animation: turnOnOpened 0.27s forwards step-end,
        flickerOpened var(--animation-time) infinite step-end 1s;
}

@keyframes turnOnBorder {
    100% {
        border: 3px solid #fff;
        box-shadow: var(--box-shadow);
        opacity: 1;
    }
}

@keyframes flickerBorder {
    0% {
        box-shadow: var(--box-shadow);
    }

    99% {
        box-shadow: none;
    }
}

@keyframes turnOnClosed {
    100% {
        text-shadow: var(--text-shadow-closed);
        opacity: 1;
    }
}

@keyframes flickerClosed {
    0% {
        text-shadow: var(--text-shadow-closed);
    }

    99% {
        text-shadow: none;
    }
}

@keyframes turnOnOpened {
    100% {
        text-shadow: var(--text-shadow-opened);
        opacity: 1;
    }
}

@keyframes flickerOpened {
    0% {
        text-shadow: var(--text-shadow-opened);
    }

    99% {
        text-shadow: none;
    }
}

/* ── Pre-Header ── */
.preHeader {
    width: 100%;
    margin-bottom: 15px;
}

.preHeader td {
    padding: 0px 0px !important;
    vertical-align: middle;
}

.preHeader tr:first-child td:first-child {
    text-align: left;
}

.preHeader tr:first-child td:last-child {
    text-align: right;
}

/* ── Header Logos ── */
.headerLogos {
    width: 370px !important;
    margin: 0px auto;
    margin-top: 10px;
}

.headerLogos td {
    padding: 0px 0px !important;
}

.headerLogos td:nth-child(1),
.headerLogos td:nth-child(1) img {
    width: 50px;
}

.headerLogos td:nth-child(2) {
    width: 320px;
    opacity: 0.8;
}

.headerLogos td:nth-child(2) img {
    height: 35px;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
    border: none;
}

.headerLogos td:nth-child(2) img:first-child {
    border-radius: 5px 0px 0px 5px;
}

.headerLogos td:nth-child(2) img:nth-child(5) {
    border-radius: 0px 5px 5px 0px;
}

/* ── Review Widget ── */
.rv_widget {
    text-align: left;
    overflow: hidden;
}

.rv_summary {
    margin-bottom: 6px;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.rv_google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
}

.rv_google:hover {
    opacity: 1;
}

.rv_google svg {
    display: block;
    width: calc(8px + 0.8vmin);
    height: calc(8px + 0.8vmin);
    filter: drop-shadow(0 0 3px rgba(212, 167, 44, 0.2));
}

.rv_stars {
    text-shadow: none;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.rv_star {
    text-shadow: none;
    font-size: calc(8px + 0.8vmin);
    line-height: 1;
}

.rv_full,
.rv_half {
    color: #D4A72C;
}

.rv_empty {
    color: rgba(212, 167, 44, 0.25);
}

.rv_rating {
    font-family: 'Barlow Condensed Medium';
    font-size: calc(10px + 1vmin);
    color: #D4A72C;
    margin-left: 3px;
    text-shadow: 0 0 8px rgba(212, 167, 44, 0.35);
}

.rv_count {
    font-family: 'Barlow Condensed Medium';
    font-size: calc(10px + 1vmin);
    color: rgba(250, 250, 250, 0.45);
    text-shadow: none;
    margin-left: 5px;
    text-decoration: none;
}

a.rv_count:hover {
    color: #D4A72C;
}

.rv_carousel {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 167, 44, 0.18);
    border-radius: 4px;
    padding: 6px 10px;
    margin-top: 6px;
    min-height: calc(38px + 3.5vmin);
}

.rv_slide {
    position: absolute;
    top: 6px;
    left: 10px;
    right: 10px;
    bottom: 6px;
    opacity: 0;
    transition: opacity 0.9s ease-in-out;
    display: flex;
    flex-direction: column;
}

.rv_active {
    opacity: 1;
}

.rv_text {
    font-family: 'Barlow Condensed Light';
    font-style: italic;
    font-size: calc(10px + 0.55vmin);
    text-shadow: none;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rv_author {
    display: block;
    font-size: calc(10px + 0.35vmin);
    text-shadow: none;
    margin: 0;
    margin-top: auto;
    padding: 0;
    line-height: 1.2;
    text-align: right;
}

.rv_astars {
    color: #D4A72C;
    text-shadow: none;
    font-size: calc(8px + 0.35vmin);
}

/* ── Countdown Widget ── */
.cd_widget {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cd_display {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 167, 44, 0.18);
    border-radius: 4px;
    padding: 4px 14px 6px;
    text-align: center;
    box-sizing: border-box;
}

.cd_label {
    text-shadow: none;
    font-size: calc(10px + 0.45vmin);
    margin-bottom: 4px;
}

.cd_nums {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.cd_block {
    text-align: center;
}

.cd_num {
    font-family: 'Barlow Condensed Medium';
    font-size: calc(13px + 1.5vmin);
    color: #D4A72C;
    text-shadow: 0 0 10px rgba(212, 167, 44, 0.45), 0 0 20px rgba(212, 167, 44, 0.15);
    letter-spacing: 1px;
}

.cd_unit {
    display: block;
    font-size: calc(5px + 0.3vmin);
    color: rgba(250, 250, 250, 0.35);
    text-shadow: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cd_sep {
    font-family: 'Barlow Condensed Medium';
    font-size: calc(13px + 1.5vmin);
    color: #D4A72C;
    text-shadow: 0 0 10px rgba(212, 167, 44, 0.45);
    padding: 0 2px;
    margin-bottom: 12px;
}

.cd_hwrap,
.cd_mwrap {
    display: contents;
}

/* ── Row 2 Flex Layout ── */
.ph_row2 {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 6px;
}

.ph_carousel {
    flex: 1;
    min-width: 0;
    display: flex;
}

.ph_carousel .rv_carousel {
    margin-top: 0;
    flex: 1;
    box-sizing: border-box;
}

.ph_countdown {
    flex: none;
    display: flex;
}

/* ── Skip Link (accessibility) ── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: #D4A72C;
    color: #191917;
    padding: 8px 16px;
    z-index: 99999999;
    text-shadow: none;
    font-family: 'Barlow Condensed Medium', sans-serif;
}

.skip-link:focus {
    top: 0;
}

/* ── Breadcrumb (SEO) ── */
.breadcrumb {
    margin: 0;
    padding: 5px 0;
    text-align: left;
}

.breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0;
    margin: 0;
    gap: 0;
}

.breadcrumb li+li::before {
    content: "\203A";
    padding: 0 6px;
    color: rgba(250, 250, 250, 0.3);
    text-shadow: none;
}

.breadcrumb a {
    font-family: 'Barlow Condensed Thin';
    font-size: calc(12px + 0.8vmin);
    color: rgba(250, 250, 250, 0.8);
    text-shadow: none;
    text-decoration: none;
    white-space: nowrap;
}

.breadcrumb a:hover {
    color: #D4A72C;
}

.breadcrumb li:last-child span {
    font-family: 'Barlow Condensed Thin';
    font-size: calc(12px + 0.8vmin);
    color: rgba(250, 250, 250, 1);
    text-shadow: none;
    white-space: nowrap;
    cursor: default;
}

/* ── Screen Reader Only ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .rv_carousel {
        min-height: calc(34px + 3vmin);
    }
}