body,
#main-content {
    background-image: url(/images/7goldcasino/texture.webp);
}

#chat-enable, .we-are-here {
    display: none !important;
}

.promo-lobby-card .button {
    line-height: 1.5rem;
}

/* Gold gradient CTA (design ref): promo-card + header Sign up only, not every
   .btn-primary on the site (deposit/modal/tournament buttons keep the flat
   yellow). --primary-button-border is set at :root, so var() fallback never
   kicks in for it - it has to be overridden explicitly, and a flat color
   there can't give the "light breaking across it" glossy look the design
   wants anyway. Two background layers (bootstrap's border-radius still
   applies, unlike border-image) do that: an inner gold fill clipped to the
   padding-box, and an outer light/dark/light gold sweep clipped to the
   border-box showing through as the ring. */
.promo-lobby-card .button .signup-button,
.main-nav-container .signup-button {
    border: var(--button-border-width) solid transparent;
    background-image:
        linear-gradient(to bottom, var(--button-bg-hover), var(--button-bg-hover-to)),
        linear-gradient(135deg, #f5dfa0 0%, #c08f51 30%, #6b4a1f 55%, #c08f51 75%, #f5dfa0 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    color: #000;
    /* .btn-primary's hover state is a black :before overlay fading to opacity
       1 (--primary-button-bg-hover, black at :root) - against our locked-black
       text that reads as invisible text on a black button. Scoped override to
       a subtly darker shade of the same gold instead of black - text stays
       legible and it still reads as "the same button, just pressed". */
    --primary-button-bg-hover: #a67a45;
    --primary-button-bg-hover-to: #7a5b33;
}

.promo-lobby-card .button .signup-button:hover,
.main-nav-container .signup-button:hover {
    color: #fff;
}

.signup-button.btn.btn-primary:hover > svg {
  color: white;
}

.promo-lobby-card .image {
    /*rtl:ignore*/
    right:0;
}

/* Promotions page: the deposit bonus banners are 2:1, dark on the left with the
   subject on the right. The template's 35% image column crops them from the
   left, i.e. down to the dark part (the fourth deposit card showed plain
   black). Show the whole banner at card height, pinned right, and fade its left
   edge into the card. Only from the side-by-side layout up (@lg = 32rem); below
   that the image is stacked above the text and already shown in full. */
@container promo-card (min-width: 32rem) {
    .promo-page-card--wide {
        overflow: hidden;
    }

    .promo-page-card--wide > .promo-page-card-image {
        width: auto;
        max-width: none;
        object-position: right center;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 30%);
        mask-image: linear-gradient(to right, transparent, #000 30%);
    }
}

/* Stacked layout (card narrower than @lg): the banner spans the card instead of
   sitting in a left-aligned box, and the 200px-wide text block
   (.text-gameCardDescription above) is centred like the buttons under it. */
@container promo-card (max-width: 31.99rem) {
    .promo-page-card--wide > .promo-page-card-image {
        width: 100%;
        object-fit: cover;
        object-position: right center;
    }

    .promo-page-card .text-gameCardDescription {
        margin-left: auto;
        margin-right: auto;
    }
}

@font-face {
    font-family: "Segoe UI";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/7goldcasino/segoe-ui-regular.ttf") format("truetype");
}
@font-face {
    /* No true medium (500) weight in the classic Segoe UI family - the bold
       face covers the 500-700 range so a font-weight: 500 request also
       resolves to it instead of silently falling back to regular. */
    font-family: "Segoe UI";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("/fonts/7goldcasino/segoe-ui-bold.ttf") format("truetype");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/7goldcasino/segoe-ui-italic.ttf") format("truetype");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/7goldcasino/segoe-ui-bold-italic.ttf") format("truetype");
}

.text-gameCardDescription {
    color: white;
    font-weight: 400;
    width: 200px;
}

/* .promo-card-title (not .text-gameCardDescription, which is a shared Tailwind
   color utility reused on tournament cards, the signup modal and the support
   page - styling it directly leaked Segoe UI onto all of those). */
.promo-lobby-card .promo-card-title {
    font-family: "Segoe UI", sans-serif;
    font-weight: 500;
}

.promo-lobby-card .promo-card-title-amount {
    font-weight: 400;
}

.text-gameCardDescription * {
    margin:0!important;
}

.swiper-container#big-wins-swiper .mainCard {
    flex-direction: row;
}
.mainCard {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mainCard .gameCell {
    display: flex;
    justify-content: center;
    padding:5px 5px 0 5px;
}

.mainCard .text-gameCardProvider {
    text-align: center;
}

.mainCard.swiper-slide {
    display:flex;
}

.mainCard .card-info-holder {
    margin-top: -7px;
}

.swiper-container:not(#deposit-swiper):not(#providers-swiper) .swiper-slide:not(.promo-lobby-card) {
    width: 210px !important;
    max-width: 210px;
    flex: 0 0;
    min-width: 210px;
}

.swiper-wrapper .mainCard,
.gameCell .background-container img,
.gameCell .background-container,
.mainCard {
    aspect-ratio: unset;
    margin: 0;
}

/* Centered titles need `safe center` rather than text-align: a centered line
   that outgrows its box overflows on BOTH sides, so the start of the name would
   be cut off with nothing to show for it. `safe` falls back to start alignment
   exactly for those, which is also what the shared fade-out and the hover
   marquee assume - short names stay centered. */
.mainCard .text-gameCardTitle {
    display: flex;
    justify-content: safe center;
}

.mainCard img {
    width: 100%;
    max-width: 250px;
    object-fit: contain;
}

.btn.glow:hover {
    box-shadow: none!important;
}

@media (max-width: 640px) {
    .swiper-container:not(#deposit-swiper) .swiper-slide:not(.promo-lobby-card) {
        min-width: 170px;
    }
}

/* Portrait phones: let the device width size the cards so exactly two whole
   ones fit. The fixed 210px above is a desktop measure - on every phone from
   360px up it left a third card sliced in half at the edge. Only the game
   category lists ([id$="-games-swiper"]) are re-sized; big wins and the promo
   lobby keep their own widths. The :not(#...) pair is not a filter here, it is
   what lifts this over the id-weighted rule above that it has to beat. */
@media (max-width: 640px) and (orientation: portrait) {
    .swiper-container[id$="-games-swiper"]:not(#deposit-swiper):not(#providers-swiper) .swiper-slide:not(.promo-lobby-card) {
        /* the rule above sets `flex: 0 0`, i.e. flex-basis 0 - a bare width
           would collapse the slides to nothing in the flex wrapper. */
        flex: 0 0 50% !important;
        width: 50% !important;
        min-width: 0 !important;
        max-width: none;
    }
}

#tournament-info-modal h1, h2, .bg-modalTournamentHeaderBg {
    color: black;
}

.view-all-number {
    color: var(--button-color);
}

.btn:disabled, .btn-dark {
    border-color: #474747;
}

.btn-dark {
    background-color: var(--button-bg);
}

.modal-main .modal-content {
    background: linear-gradient(to bottom, var(--button-bg), #000);
}

#navbar-lang-toggle svg {
    transition: color .3s cubic-bezier(.4, 0, .2, 1);
}

/* Side menu language dropdown list: match #navbar-lang-menu's background
   (bg-formInputBg) instead of the default select-box gradient. */
.dropdown-items {
    background: linear-gradient(to bottom, var(--button-bg), #000);
}

#login-form input {
    background-color: var(--button-bg);
}

.border-gray-800 {
  --tw-border-opacity: 1;
  border-color: rgb(55, 46, 31);
}

button.btn.btn-dark > svg {
    color: var(--support-icon);
}

button#navbar-lang-toggle > svg {
    color: var(--button-color);
}

/* Deposit/Withdraw modal tab underline was hardcoded Tailwind blue-500. */
#deposit_modal .border-blue-500,
#deposit_modal .hover\:border-blue-500:hover {
    border-color: var(--button-color);
}

#deposit_modal .hover\:text-blue-500:hover {
    color: var(--button-color);
}

/* Deposit amount input focus state + card-precheck label were hardcoded Tailwind gray-800/gray-700 (blue-tinted). */
#deposit_modal .focus-within\:bg-gray-800:focus-within {
    background-color: #372c1f;
}

.border-gray-500 {
  border-color: rgb(80, 73, 70);
}

.border-gray-600 {
  border-color: rgb(99, 85, 75);
}

.bg-gray-600 {
  background-color: rgb(99, 85, 75);
}

#deposit_modal .text-gray-700 {
    color: var(--sidebar-icon-hover);
}