/* -------------------------------
   ROOT COLORS / TOKENS
--------------------------------- */
:root{
  --bg:#F9F6FE;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#475569;
  --btn-text:#F9F6FE;

  --blue:#0082F9;
  --green:#40B104;
  --game-green:#97e226;
  --teal:#d3c41b;
  --yellow:#F6A903;
  --orange:#FB6400;
  --purple:#7C26E3;
  --pink:#ff5acd;
  --electric-blue:#0082F9;
  --whatsapp:#25D366;

  --radius:22px;

  --shadow-sm:0 6px 0 rgba(0,0,0,.15), 0 14px 30px rgba(0,0,0,.25);
  --shadow-md:0 20px 50px rgba(15,23,42,.10);
  --shadow-lg:0 26px 80px rgba(15,23,42,.12);

  --ease:0.15s ease;
}

/* Also used as explicit colors in the snippet (non-var) */
:root{
  --slate-500:#64748b;
  --slate-700:#334155;
  --slate-300:#cbd5e1;
  --slate-400:#94a3b8;
  --slate-600:#475569;
  --slate-100:#f1f5f9;
  --slate-50:#f9fafb;
  --sky-700:#005DB5;
  --green-shadow:#2E7E03;
  --orange-shadow:#C44E00;
  --purple-shadow:#4f109c;
  --whatsapp-shadow:#14943F;
  --bundle-yellow-shadow:#c88900;
  --reveal-shadow:#7fb828;
}

:root {
    --compkit-scrollbar-track: rgba(232, 232, 232, 0.9)!important;
    --compkit-scrollbar-thumb: rgba(148,163,184,.6)!important;
    --compkit-scrollbar-thumb-hover: rgba(226,232,240,.85)!important;
}

/* CF7 submit button — use multiple selectors + !important in case theme overrides */
.wpcf7 form input[type="submit"],
.wpcf7 form .wpcf7-submit,
.wpcf7-submit {
  background-color: var(--compkit-primary-green) !important;
  color: var(--compkit-dark) !important;
  border: none !important;
  border-radius: var(--compkit-border-radius) !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: opacity .2s ease-in-out !important;
}
.wpcf7 form input[type="submit"]:hover,
.wpcf7 form .wpcf7-submit:hover,
.wpcf7-submit:hover {
  opacity: .9 !important;
}

/* File input spacing */
.wpcf7 form input[type="file"] {
  margin-top: 0.5rem !important;
}
.woocommerce-MyAccount-navigation a i {
    font-size: 16px!important;
    vertical-align: middle;
}
/* Remove any default icons added by WooCommerce or theme */
.woocommerce-MyAccount-navigation-link a::before {
    display: none !important;
}

/* Optional: Hide existing <i> tags not added by you */
.woocommerce-MyAccount-navigation-link a i:not([class*="fa-"]) {
    display: none !important;
}


#spend_limit_amount {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box; /* ensures any padding/border stays inside the 100% width */
}
    #top-bar {
        padding: 86px 0 0 0!important;
    }
body.page-id-1284 article.single-page-article.clr {
  background-color: #fff8f8 !important;
  padding: 10px !important;
  border-radius: 18px !important;
}
@media (max-width: 480px) {
    #top-bar {
        padding: 86px 0 0 0!important;
    }
    
}
.quick-add-buttons {
    width: 100%;
    margin: 5px 0 5px 0;
}



/* Hover / focus / active states */
.sign_up_btn a:hover,
.sign_up_btn a:focus {
  background-color: var(--compkit-bright-green);
  transform: scale(1.08);
  outline: none;
}
.sign_up_btn a:active {
  transform: scale(0.95);
}
.separate-layout.content-full-width .content-area {
    margin: 0!important;
    padding: 0!important;
}
#tab-description h2 {
    font-family: 'var(--compkit-font-family)', sans-serif!important;
    line-height: 1.2!important;
    font-weight: 600!important;
    font-size: 2em!important;
}
p {
    font-family: 'Nunito', sans-serif!important;
    text-transform: none;
    font-size: 1.2em;
    font-weight: lighter;
}
.compkit-column-info-wrapper {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    text-align: center;
    font-size: 0.9em;
}

.compkit-column-info-block {
    flex: 1;
}

.compkit-column-info-icon {
    font-size: 1.2em;
    margin-bottom: 4px;
}

.compkit-column-info-label {
    font-weight: bold;
}

.compkit-column-info-value {
    margin-top: 2px;
}

.single #tab-lottery_history {
    display: none!important;
}
.woocommerce-error {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--compkit-warning-bg);
  color: var(--compkit-primary-green) !important;
  padding: 12px 20px;
  border-radius: 10px;
  box-shadow: 0 8px 20px var(--compkit-box-shadow-light-30);
  font-weight: 600 !important;
  gap: 8px;
  min-height: 40px;
  text-align: center !important;
  font-family: var(--compkit-font-family), sans-serif;
  margin-bottom: 60px !important;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(100%);
  animation: slideUpFade 0.5s ease forwards;
  list-style: none;
}

.woocommerce-error li {
  list-style: none;
}

.woocommerce-error .wc-backward {
  color: var(--compkit-primary-green) !important;
  text-decoration: underline;
  font-weight: 600;
}

.woocommerce-checkout table.shop_table thead th, .woocommerce #order_review table.shop_table tfoot th {
  background-color: var(--compkit-dark)!important;
  color: var(--compkit-light-text)!important;
}
.woocommerce-checkout #payment ul.payment_methods li, form, input, .woocommerce-checkout .form-row.place-order, .woocommerce-checkout #payment, .select2-selection--single {
  background-color: var(--compkit-dark)!important;
  color: var(--compkit-light-text)!important;
}
.woocommerce .woocommerce-checkout h3#order_review_heading, .woocommerce .woocommerce-checkout #customer_details h3 {
  border-color: var(--compkit-primary-green)!important;
}
.lt-my-ticket-scope .lt-my-ticket-image {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    max-width: 250px;
}

.lt-my-ticket-scope .lt-my-ticket-image img {
    width: 100%;
    border-radius: 18px;
    display: block;
}

.lt-my-ticket-scope .lt-iw-ticket--compact {
    font-size: 12px !important;
    margin: 8px;
    float: left;
    box-sizing: border-box;
    line-height: 1.2;
    transform: scale(0.9);
}

.lt-my-ticket-scope .lt-iw-ticket--compact .lt-iw-ticket-status {
    font-size: 11px !important;
    margin: 0 10px 0 10px;
    text-align: center;
}
.lt-my-ticket-scope .price, .lt-iw-ticket--compact .lt-iw-ticket-number {
    font-weight: 800;
    font-size: 1.4em!important;
}

.how-to-play-icon {
    color: var(--compkit-primary-green)!important;
}
.single-countdown {
    margin-top: 50px;
}
.owp-grid-wrap {
    padding-top: 10px;
}
.current-shop-items-dropdown {
    border-color: var(--compkit-primary-green)!important;
}
a {
    color: var(--compkit-primary-green)!important;
}
a:hover {
    color: var(--compkit-bright-green)!important;
}
.button {
    background-color: var(--compkit-primary-green)!important;
}
.button a:hover,  {
    background-color: var(--compkit-bright-green)!important;
}
h2.iw-title, .compkit-home-title-highlighted {
    color: var(--compkit-primary-green)!important;
}
.compkit-home-title {
    color: var(--compkit-light-text)!important;
}
.home-section-var {
    background: var(--compkit-dark)!important;
}
.wcmenucart-details.count:before {
    border-color: var(--purple)!important;
}
.owp-floating-bar button.button {
    background-color: var(--compkit-primary-green)!important;
}
#site-header, #top-bar-wrap {
    border-color: var(--compkit-dark-alternative)!important;
}
#site-header, #top-bar-wrap, #top-bar, #main, #footer-bottom, .owp-floating-bar {
    background: var(--compkit-dark)!important;
}
form.cart {
    border-color: var(--compkit-dark-gray)!important;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--compkit-light-text)!important;
}
.entry .custom-content-item {
    border-radius: 18px;
    display: none;
    }
header.woocommerce-products-header {
text-align: center;
}
@media screen and (max-width: 782px) {
    html #wpadminbar {
        height: 46px;
        min-width: 240px;
        display: none;
    }
}
.woocommerce-order-overview {
    background-color: var(--compkit-dark-gray)!important;
    border-radius: 18px 18px 0 0;
    color: var(--compkit-light-text);
}
input[type="checkbox"] {
    border: 1px solid var(--compkit-primary-green)!important;
}
input[type=checkbox]:checked:before, .checkout .amount {
    color: var(--compkit-primary-green)!important;
}
.woocommerce #order_review table.shop_table {
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: 18px;
  overflow: hidden;
  background-color: var(--compkit-dark); /* or whatever you want */
}

.woocommerce #order_review table.shop_table tbody td {
    background-color: var(--compkit-dark)!important;
}

.button {
    color: var(--compkit-dark)!important;
    font-weight: 600!important;
    font-family: var(--compkit-font-family), sans-serif !important;
    text-transform: uppercase!important;
    border-radius: 18px!important;
}
.owp-grid img {
    border-radius: 18px;
}
.owp-grid.thumbnail {
    border: 0!important;
}
.wc-forward {
    color: var(--compkit-dark);
}
.oceanwp-cart-sidebar {
    background-color: var(--compkit-dark)!important;
    border-radius: 18px;
}
p.woocommerce-mini-cart__total {
    background-color: var(--compkit-dark-gray)!important;
    color: var(--compkit-light-text);
    border: 0!important;
    border-radius: 18px;
}
.current-shop-items-dropdown {
margin-top: -20px;
border-radius: 18px;
}
.current-shop-items-inner {
    background-color: var(--compkit-dark-gray)!important;
    color: var(--compkit-light-text);
    border: 0!important;
    border-radius: 18px;
}
#reviews {
    display: none;
}
.home .product-inner {
    background: var(--compkit-dark);
    border-color: var(--compkit-dark)!important;
    border-radius: 18px;
}

.hamburger {
    display: none!important;
}
.lt-iw-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .lt-iw-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Header */
.lt-iw-header {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.lt-iw-title {
  flex-grow: 1;
  text-align: center;
  padding-right: 100px;
}

/* Ticket Count Badge */
.lt-iw-ticket-count {
  position: absolute;
  top: -20px;
  right: -35px;
  background: linear-gradient(135deg, var(--compkit-primary-green) 0%, var(--compkit-bright-green) 100%);
  color: var(--compkit-dark-alternative) !important;
  padding: 3px 10px;
  border-radius: 16px;
  font-size: 0.8em;
  font-weight: bold;
  border: 2px solid var(--compkit-dark-alternative);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.2) inset;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}
.lt-iw-ticket-count:after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 18px;
  pointer-events: none;
}
.ticket-number {
  font-size: 1.2em;
  line-height: 1;
}
.ticket-label {
  font-size: 0.7em;
  letter-spacing: 1px;
}



/* Notch patches */
.lt-iw-ticket .notch-patch-left,
.lt-iw-ticket .notch-patch-right {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 20px;
  background: var(--compkit-dark-gray);
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  border-radius: 50%;
}

.lt-iw-ticket .notch-patch-left { left: 0; }
.lt-iw-ticket .notch-patch-right { right: 0; }

/* Circular notches */
.lt-iw-ticket .notch-left,
.lt-iw-ticket .notch-right {
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--compkit-dark-gray);
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  border: 2px dashed var(--compkit-primary-green);
}

.lt-iw-ticket .notch-left {
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
  border-left: none;
}

.lt-iw-ticket .notch-right {
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  border-right: none;
}





.kl-tab-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.kl-tab-container .kl-tab {
  padding: 10px 24px;
  border: 2px solid var(--compkit-primary-green);
  background: var(--compkit-dark-gray);
  color: var(--compkit-light-text);
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: bold;
  font-family: var(--compkit-font-family), sans-serif ;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.kl-tab-container .kl-tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
  transform: skewX(-20deg);
  z-index: 2;
  pointer-events: none;
  animation: buttonShine 2s infinite;
}



.kl-tab-container .kl-tab:hover,
.kl-tab-container .kl-tab.active {
  background: linear-gradient(135deg, var(--compkit-primary-green), var(--compkit-bright-green));
  color: var(--compkit-dark);
  box-shadow: 0 4px 12px var(--compkit-box-shadow-light-30);
}




.content-area {
    border-radius: 18px;
    background: var(--compkit-dark-gray)!important;
    margin: 5px!important;
}
.archive span.price {
    background-color: var(--compkit-primary-green);
    display: block; /* Make inline element block-level */
    width: 100%;
}
.archive span.price small {
    color: var(--compkit-dark) !important;
    font-family: var(--compkit-font-family), sans-serif ;
}

.oew-product-share {
    margin: 0;
    padding: 0;
    display: none!important;
}
.woocommerce ul.order_details,
.woocommerce ul.order_details li {
	margin: 0!important;
	padding: 0!important;
    border: 0!important;
}

.woocommerce table.shop_table {
        border: 0!important;
}
.woocommerce .shop_table.order_details tfoot th {
        background: var(--compkit-dark-gray)!important;
}
.woocommerce-order-overview {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  font-family: var(--compkit-font-family), sans-serif ;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.4em;
}

.woocommerce-order-overview li {
  margin: 0;
  font-size: 1rem;
  color: var(--compkit-light-text);
	padding: 0;
}

.woocommerce-order-overview strong {
  display: inline-block;
  font-weight: 700;
  color: var(--compkit-primary-green);
	padding: 0;
}

h2.woocommerce-order-details__title, .woocommerce-thankyou-order-received, th.woocommerce-table__product-name, .woocommerce-order-overview__email,
.woocommerce-order-overview__date,
.woocommerce-order-overview__total {
	display: none;
}

.woocommerce-checkout
.woocommerce-notices-wrapper {
	padding-top: 60px;
}
.woocommerce-checkout
.wrong-answer {
	display: none;
}
.entry p.lottery-starts,
.entry p.lottery-end {
	display: none;
}

.search-field {
	border-radius: 15px;
}
/* Base icon replacement */
.icon-user:before,
.icon-game-controller:before,
.icon-trophy:before,
.icon-question:before,
.icon-social-youtube:before,
.icon-screen-smartphone:before {
    content: "" !important;
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-top: 5px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Individual icon images */
/* Set the font-family to IcoMoon for custom icons */

/* User Icon */
.icon-user:before {
    content: "\e904" !important; /* Unicode for icon-user */
    font-family: 'icomoon' !important; /* Use the IcoMoon font */
    font-size: 2.9em;
    color: var(----compkit-dark);
}

/* Game Controller Icon */
.icon-game-controller:before {
    content: "\e900" !important; /* Unicode for icon-game-controller */
    font-family: 'icomoon' !important; /* Use the IcoMoon font */
    font-size: 2.1em;
    color: var(----compkit-dark);
}

/* Trophy Icon */
.icon-trophy:before {
    content: "\e906" !important; /* Unicode for icon-trophy */
    font-family: 'icomoon' !important; /* Use the IcoMoon font */
    font-size: 2.1em;
    color: var(----compkit-dark);
}

/* Social YouTube Icon */
.icon-social-youtube:before {
    content: "\e903" !important; /* Unicode for icon-social-youtube */
    font-family: 'icomoon' !important; /* Use the IcoMoon font */
    font-size: 2.9em;
    color: var(----compkit-dark);
}

/* Smartphone Icon */
.icon-screen-smartphone:before {
    content: "\e905" !important; /* Unicode for icon-screen-smartphone */
    font-family: 'icomoon' !important; /* Use the IcoMoon font */
    font-size: 2.4em;
    color: var(----compkit-dark);
}

/* Question Icon */
.icon-question:before {
    content: "\e902" !important; /* Unicode for icon-question */
    font-family: 'icomoon' !important; /* Use the IcoMoon font */
    font-size: 2.9em;
    color: var(----compkit-dark);
}


/* Make icon bigger when it's on the current page */
.current-menu-item i:before {
    width: 60px !important;
    height: 60px !important;
}


.woocommerce ul.products ul {
  margin: 0 20px 0 10px;
}

li.image-wrap
.woocommerce-Price-amount {
	color: var(--compkit-dark-gray)!important;
	font-weight: 900;
    font-family: var(--compkit-font-family), sans-serif ;
    letter-spacing: 1px;
}
li.image-wrap span.per-ticket-icon {
   width: 65px;
   height: 85px ;
}

.claim_btn {
    background-color: var(--compkit-primary-green); /* Lucky Trucker Green */
    color: #FFF; /* Gold text */
    font-size: 16px;
    font-weight: bold;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.claim_btn:hover {
    background-color: #388E3C; /* Darker green for hover */
    transform: translateY(-2px);
}

.claim_btn:active {
    background-color: #2C6F2F; /* Even darker green on click */
    transform: translateY(2px);
}

.claim_btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.6); /* Gold outline for focus */
}

.woocommerce-form-coupon-toggle {
	padding-top:40px;
}
.trustpilot-gallery-singleproduct-container {
	position: relative;
  width: 100%;
  margin-bottom: 0;
    background: var(--compkit-dark-gray);
    padding: 4px;
    border-radius: 18px;
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Align items vertically */
    justify-content: center; /* Center the contents vertically */
    align-items: center; /* Center the contents horizontally */
    margin-bottom: 20px; /* Ensure space below the image */
    z-index: 10; /* Makes sure it's on top of other content */
    text-align: center; /* Center the text */
}

.review-content {
	width: 60%;
}
.alertable-overlay {
	display: none!important;
}
form.alertable {
	display: none!important;
}
.elementor-shortcode .products .entry h3 {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-decoration: none;
    color: var(--compkit-dark-gray);
}
.lottery-question {
	   display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-decoration: none;
    color: var(--compkit-dark-gray);
}
.elementor-shortcode .products .lottery-pn-answers {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: block;
  flex-wrap: wrap;
	width: 95%!important;
}
.woocommerce-shop
.lottery-pn-answers {
  margin-left: 15px!important;
}
.lottery-pn-answers {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: block;
  flex-wrap: wrap;
	width: 90%!important;
}
.elementor-shortcode .products .lottery-pn-answers li {
  padding: 10px 15px;
  margin: 5px;
  overflow: hidden;
  background-color: #f0f0f0;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-sizing: border-box; /* Ensures padding is accounted for in the element's size */
}


.lottery-pn-answers li {
  padding: 10px 15px;
  margin: 5px;
  background-color: #f0f0f0;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.lottery-pn-answers li.selected {
  background-color: var(--compkit-primary-green)!important;
  color: white;
}

.lottery-pn-answers li.false {
  background-color: #ff4d4d;
  color: white;
}

.lottery-pn-answers li:hover {
  background-color:var(--compkit-dark);
}

.brtpmj_business_ratings {
	justify-content: center;
	color: var(--compkit-dark-gray);
}
.brtpmj_businessheader {
	display: none!important;
}
.brtpmj_all_reviews {
	display: none;
}
footer {
    padding-bottom: 80px; /* Match the height of your #fixed-bottom-menu */
}

.rating-trustpilot-fb {
    position: absolute;
    display: block;
    top: 10px;
    right: 20%;
    transform: translateX(-50%);
}
.rating-trustpilot-fb img, .rating-trustpilot-fb-topbar img {
    width: 150px;
}
/* On mobile smaller font */
@media (max-width: 600px) {
  #lscreen {
    display: none;
  }
  .quick-add-label {
    display: none;
  }
}


/* ======================================================
   FIXED BOTTOM GAME BAR — SINGLE ROW
====================================================== */

#fixed-bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(233, 233, 233, 0.75);
}

/* Menu container */
#menu-game-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 6px 6px;
    gap: 2px;
}

/* All menu items */
#menu-game-menu > li {
    flex: 1;
    text-align: center;
}

/* Hide text labels under icons */
#menu-game-menu .menu-text {
    display: none !important;
}

/* Links */
#menu-game-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
}

/* Icons */
#menu-game-menu .menu-icon i {
    font-size: 18px;
    line-height: 1;
}

/* ======================================================
   GAME COLOURS
====================================================== */

.icon-screen-smartphone { color: var(--blue); }        /* football */
.icon-social-youtube   { color: var(--purple); }      /* slots */
.icon-user             { color: var(--blue); }        /* spin */
.icon-question         { color: var(--orange); }      /* scratch */
.icon-trophy           { color: var(--game-green); }  /* instant */

/* ======================================================
   BUY NOW — INLINE BUTTON (DESKTOP)
====================================================== */

#menu-game-menu .sign_up_btn {
    flex: 1.2;
}

#menu-game-menu .sign_up_btn a {
    background: var(--green);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 10px;
    border-radius: 12px;
    box-shadow:
        0 0 0 2px #fff,
        0 6px 0 #2E7E03,
        0 10px 20px rgba(64,177,4,.35);
    white-space: nowrap;
}


/* ======================================================
   NO MOTION, NO JANK
====================================================== */

#menu-game-menu a:hover {
    transform: none;
}

/* ======================================================
   SAFE AREA (iOS)
====================================================== */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    #fixed-bottom-menu {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

.menu-icon {
    color: var(--compkit-dark);
}
.free-entry-pop {
	background: var(--compkit-dark-gray)!important;
	border-radius: 12px!important;
    text-transform: uppercase!important;
    width: 100%!important;
    color: var(--compkit-light-text)!important;
    font-weight: bold;
    font-family: var(--compkit-font-family), sans-serif ;
}
.postcard {
    padding: 20px;
    border: 3px solid var(--compkit-primary-green);
    border-radius: 15px;
    background: var(--compkit-dark-gray);
    max-width: 500px;
    margin: 20px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
}

.postcard-stamp {
    font-size: 30px;
    position: absolute;
    top: 10px;
    right: 10px;
    transform: rotate(-15deg);
    border: 2px dashed var(--compkit-primary-green);
    padding: 10px;
    border-radius: 50%;
    background: #0a000;
    color: var(--compkit-primary-green);
}

.postcard-title {
    color: var(--compkit-primary-green);
    text-align: center;
    margin-top: 0;
    font-size: 24px;
    font-family: 'Rubik';
	text-transform: uppercase;
}

.postcard-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--compkit-light-text)!important;
}

.postcard-subtitle {
    font-size: 16px;
    color: var(--compkit-primary-green);
    margin-bottom: 10px;
    margin-top: 20px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--compkit-primary-green);
    display: inline-block;
}

.postcard-address {
    font-size: 14px;
    color: var(--compkit-dark-alternative);
    font-style: normal;
    background-color: ghostwhite;
    padding: 10px;
    border-radius: 18px;
    border-left: 4px solid var(--compkit-primary-green);
    margin: 10px 0;
    font-family: 'Courier New', monospace;
    position: relative;
}
.paoc-popup-con-bg, .paoc-popup-inr-wrap { 
 border-radius: var(--compkit-border-radius);
 background: var(--compkit-dark);
}
.postcard-dummy-info {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
    font-style: italic;
}

.wcl-progress-meter::after {
  content: attr(data-left);
  display: inline-block;
  white-space: nowrap;
  font-size: 16px;
  margin-bottom: 4px;
}

@media (max-width: 480px) {
  .wcl-progress-meter::after {
    font-size: 12px;
  }
}

.postcard-list {
    font-size: 14px;
    color: var(--compkit-light-text);
    padding-left: 20px;
    list-style: disc;
}

.postcard ul {
    margin-top: 10px;
    padding-left: 20px;
}

.postcard li {
    margin-bottom: 5px;
}

.paoc-credit-wrp {
	display: none!important;
}
.wpforms-container.inline-form .wpforms-field {
    display: inline-block;
    margin: 0 10px 0 0; /* Adjust spacing between elements */
    vertical-align: middle;
}

.wpforms-container.inline-form .wpforms-field input {
    width: auto; /* Adjust input width as needed */
}

.wpforms-container.inline-form .wpforms-submit {
    display: inline-block;
    margin: 0;
}

.wpforms-container.inline-form {
    text-align: center; /* Center align form, optional */
}

.company-details-list {
	list-style: none;
}
.bubble
span.ticket-prize  {
	display: block;
	font-size: 20px;
}
.bubble.highlighted {
    color: var(--compkit-dark-gray);
    font-size: 15px; /* Double the original size */
    line-height: 1; /* Adjust line-height to keep elements aligned */
    transform: scale(2); /* Alternatively, use scale to enlarge without affecting layout directly */
	background-color: rgba(76, 175, 80, 0.5); /* Lucky Trucker Green with transparency */
}

/* Ensure grid layout applies */
.prize-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Flexible columns */
    gap: 20px; /* Space between grid items */
    padding: 20px;
    margin: 0 auto;
}

.prize-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
	text-align: center;
text-transform: uppercase;
	font-weight: bold;
    border: 1px solid var(--compkit-primary-green);
    border-radius: 12px;
    background-color: var(--compkit-primary-green);
    color: var(--compkit-dark-gray);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
}

.prize-item:hover {
    background-color: black;
    cursor: pointer;
}

.prize-item .icon {
    font-size: 48px;
}

.prize-item .description {
    font-size: 16px;
    color: var(--compkit-dark-gray);
    margin-top: 10px;
}

.prize-item .prize-amount {
    font-size: 24px;
    font-weight: bold;
    color: var(--compkit-primary-green);
    margin-top: 5px;
}

@media (max-width: 768px) {
    .prize-card {
        grid-template-columns: repeat(2, 1fr); /* Two columns on smaller screens */
    }
}

@media (min-width: 769px) {
    .prize-card {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Adapts to available space */
    }
}

.woocommerce-checkout form{
	padding: 15px 5px 5px 10px;
    border-radius: 18px;
}
.outofstock-badge {
	display: none;
}
.woocommerce-order {
	padding: 10px;
}
h4.woocommerce-products-header__title.page-title.mytickets.active {
    background: var(--compkit-dark-gray)!important;
}
/* Container td cell p: use flex to wrap tickets */
.my-tickets-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* or center */
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
}

/* Wrap content inside the ticket */
.unique-ticket-label-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Each ticket wrapper: unique-ticket-label */
.unique-ticket-label {
  display: flex!important;
  flex-direction: column;    /* stack number and prize vertically */
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: var(--compkit-dark);
  color: var(--compkit-primary-green);
  font-family: var(--compkit-font-family), sans-serif ;
  font-weight: bold;
  font-size: 0.8em;
  flex: 1 1 80px;   /* Allows growth/shrinkage, with a base width */
  min-width: 60px;  /* Optional: smallest allowed width */
  max-width: 120px; /* Optional: largest allowed width */
  height: 40px;             /* taller for prize below */
  border: 2px solid var(--compkit-primary-green);
  border-radius: 8px;
  box-shadow: 0 0 8px var(--compkit-box-shadow-light-50), inset 0 0 6px var(--compkit-box-shadow-light-30);
  position: relative;
  box-sizing: border-box;
  margin-right: 10px;       /* space between tickets */
  vertical-align: top;
}

/* Mark winning tickets with green background and black text */
.unique-ticket-label.unique-ticket-won {
  background-color: var(--compkit-primary-green);
  color: var(--compkit-dark);
  border: 2px dashed var(--compkit-dark);
  width: 100%;
  display: block;
}

/* Ticket number styling */
.unique-ticket-number {
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1;
  top: 5px;
  position: relative;
}

/* Prize below number */
.unique-ticket-prize {
  margin-top: 4px;
  font-size: 0.85em;
  color: var(--compkit-dark); /* prize color */
}

/* Optional: ticket stub circle on right */
.unique-ticket-label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: var(--compkit-dark-gray);
  border-radius: 50%;
  border-left: 2px solid var(--compkit-primary-green);
  z-index: 2;
}

/* Optional: subtle shine animation */
/* Shine now inside the inner container */
.unique-ticket-label-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08), transparent);
  animation: ticket-shine 2.5s infinite;
  pointer-events: none;
}



.competition-ended {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--compkit-primary-green);
    color: #fff;
    padding: 15px 20px;
    border-radius: 12px;
    margin: 10px 0;
    font-family: var(--compkit-font-family), sans-serif ;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 18px;
	width: 100%
}

.competition-ended-text {
    display: block;
    margin: auto;
    line-height: 1.2;
    text-align: center;
}
.competition-ended-view::before {
    content: '\1F441'; /* Unicode for an eye icon */
    margin-right: 8px; /* Adjust spacing between the icon and text */
    font-size: 25px; /* Adjust the size of the icon */
    vertical-align: middle; /* Align with the text */
}

.competition-ended-message {
    font-size: 24px; /* Adjust the font size for "Tickets" */
    font-weight: bold;
	overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-decoration: none;
}

.competition-ended-view {
    font-size: 20px; /* Adjust the font size for "Sold Out" */
    font-weight: bold;
}
.competition-ended-live-links img{
    width: 100px!important;
}
.sold-out {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; /* Centers content horizontally */
    background-color: var(--compkit-primary-green);
    color: #fff;
    padding: 15px 20px;
    border-radius: 12px;
    margin: 10px 0;
    font-family: var(--compkit-font-family), sans-serif ;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 18px;
    width: 100%;
    text-align: center; /* Ensures text inside spans is centered */
}

.sold-out-text {
    display: block;
    margin: auto;
    line-height: 1.2;
    text-align: center; /* Ensures text alignment */
}

.sold-out-tickets {
    font-size: 24px; /* Adjust the font size for "Tickets" */
    font-weight: bold;
}

.sold-out-soldout {
    font-size: 20px; /* Adjust the font size for "Sold Out" */
    font-weight: bold;
}

/* Adjust the icon placement */
.sold-out::before {
    content: "";
    display: block;
    position: relative; /* Changed to avoid absolute positioning */
    margin-right: 15px; /* Adds spacing between the icon and text */
    width: 60px;
    height: 60px;
    background-image: url('https://luckytrucker.uk/wp-content/uploads/2024/07/tickets-add-white.webp');
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0; /* Ensures the icon doesn't shrink */
}



.lottery-info-columns.next-live-draw {
	color: var(--compkit-primary-green)!important;
}
.elementor-icon-box-description a {
	color: var(--compkit-primary-green);
}
.elementor-icon-box-description a:hover{
	color: var(--compkit-bright-green);
}
.luckytrucker-top-3 {
	text-align: center;
}
.luckytrucker-top-3 p{
	background: var(--compkit-primary-green);
	border-radius: 12px;
	border: 3px solid var(--compkit-dark-gray);
	font-weight: bold;
	color: var(--compkit-dark-gray);
	font-size: 1.2em;
}
.latest-instant-winners ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.latest-instant-winners ul li {
    width: 100%; /* Set width to 25% for 4 columns */
    box-sizing: border-box; /* Ensure padding/margin doesn't affect width */
    padding: 10px; /* Optional padding inside each list item */
    margin: 0; /* Remove any default margin */
}

/* Clearfix to clear the floats */
.latest-instant-winners ul::after {
    content: "";
    display: block;
    clear: both;
}

/* Media query for smaller devices (tablets) */
@media (max-width: 768px) {
    .latest-instant-winners ul li {
        width: 100%; /* 2 columns for tablets */
    }
}

/* Further tweak for very small devices (phones) */
@media (max-width: 480px) {
    .latest-instant-winners ul li {
        width: 100%; /* Full width for mobile */
			
    }
	.owp-floating-bar {
    background-color: var(--compkit-primary-green);
    height: 180px!important;
		border-radius: 15px 15px 0 0;
}
	.owp-floating-bar 
	.price {
		bottom: 0!important;
		margin-bottom: 50px;
	}
	.woocommerce-shop
.lottery-pn-answers {
  margin-left: 5px!important;
}

}


/* Ensure the title and table stack vertically */
.latest-instant-winners h1, 
.latest-instant-winners h2, 
.latest-instant-winners h3, 
.latest-instant-winners h4,
.latest-instant-winners h5,
.latest-instant-winners h6 {
    display: block; /* Ensure the title is block level */
    margin-bottom: 15px; /* Space between title and table */
}

/* Table setup - make sure it takes full width and no overflow */
.latest-instant-winners table {
    width: 100%; /* Make the table take up the full width */
    table-layout: fixed; /* Fix table layout to prevent overflowing */
    border-collapse: collapse;
    background-color: var(--compkit-dark-gray); /* Table background color */
    margin-top: 20px; /* Space between title and table */
    clear: both; /* Ensure table clears any previous floated content */
    overflow-x: auto; /* Prevent horizontal overflow */
	border-radius: 10px;
}

/* Table header styling */
.latest-instant-winners th {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 2px solid var(--compkit-primary-green); /* Header border color */
    background-color: var(--compkit-primary-green); /* Header background color */
    color: white; /* Header text color */
    font-weight: bold;
}

/* Table cell styling */
.latest-instant-winners td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solidvar(--compkit-dark); /* Light border for table cells */
    color: var(--compkit-dark-gray); /* Table text color */
}

/* Button styling for expand button (if applicable) */
.latest-instant-winners .expand-btn {
    text-align: center;
    cursor: pointer;
    font-size: 18px;
    color: var(--compkit-primary-green); /* Expand button color */
    padding: 10px;
    margin-top: 10px;
    display: inline-block;
}

/* Ensure no overflow on the page */
body {
    overflow-x: hidden; /* Hide horizontal scroll */
}

/* Fix for clearing any floated elements */
.latest-instant-winners {
    clear: both; /* Clear floats to ensure elements stack properly */
    margin-bottom: 40px; /* Add space below the table */
}

.lottery-info-columns 
.next-live-draw {
	display: none;
}
.view-competition-button {
	width: 100%;
	border-radius: 10px;
	font-weight: bold;
    color: var(--compkit-dark);
	font-size: 1.2em;
    display: none;
}


.balance-column {
    text-align: center;
    width: 48%;
    background-color: var(--compkit-dark-gray);
    color: #fff;
    padding: 15px;
    border-radius: 8px;
    margin: 10px;
}

.balance-column h3 {
    margin: 0;
    font-size: 18px;
}

.balance-column p {
    margin: 10px 0 0;
    font-size: 24px;
    color: var(--compkit-primary-green);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	.product-summary {
		text-align: center;
	}
    .rating-trustpilot-fb {
    display: none;
}
}


.repeat-order-button {
    position: fixed;
    bottom: 100px;
    left: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--compkit-dark);
    color: var(--compkit-primary-green) !important;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 8px 20px var(--compkit-box-shadow-light-30);
    font-weight: 600;
    font-family: var(--compkit-font-family), sans-serif;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    overflow: hidden;
    opacity: 0;
    transform: translateY(100%);
    animation: slideUpFade 0.5s ease forwards;
}

body .theme-button,
body input[type="submit"],
body button[type="submit"],
body button,
body .button,
body div.wpforms-container-full .wpforms-form input[type="submit"],
body div.wpforms-container-full .wpforms-form button[type="submit"],
body div.wpforms-container-full .wpforms-form .wpforms-page-button {
    border: none; /* Remove border */
    outline: none; /* Remove outline if needed */
}

body.woocommerce-account.woocommerce-comp-tickets .woocommerce-MyAccount-navigation {
    display: none !important;
}

/* Base styles for the WooCommerce orders table */
.woocommerce-account .woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-account .woocommerce-orders-table th, 
.woocommerce-account .woocommerce-orders-table td {
    padding: 5px; /* Reduce padding */
    text-align: left;
    font-size: 14px; /* Smaller font size */
}

/* Make table cells stack vertically on mobile */
.woocommerce-account .woocommerce-orders-table td {
    display: block; /* Stack items in a column */
    width: 100%; /* Full width for each cell */
}
    .woocommerce-account .woocommerce-orders-table thead {
        display: none; /* Hide the table header on mobile */
    }
/* Responsive Styles */
@media (max-width: 600px) {


    .woocommerce-account .woocommerce-orders-table {
        display: flex;
        flex-direction: column; /* Stack rows vertically */
    }
.woocommerce-MyAccount-tabs .oceanwp-user-profile {
    display: table;
    table-layout: auto;
    width: fit-content; /* or set a max-width or specific width */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}

    .woocommerce-account .woocommerce-orders-table tr {
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, var(--compkit-dark) 0%, var(--compkit-dark-gray) 100%);
    border-radius: 18px;
    margin-bottom: 15px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 1px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
.single-product .top-bar-centered {
    padding: 5px 5px 0 5px!important;
}
.kl-single-price-tag p{
    margin: 0!important;
}
  .woocommerce-account .woocommerce-orders-table tr:hover {
    transform: scale(1.02);
    box-shadow: 0 0 14px var(--compkit-box-shadow-light-50), inset 0 0 8px var(--compkit-box-shadow-light-30);
  }
}

    .woocommerce-account .woocommerce-orders-table td, .woocommerce-account .woocommerce-orders-table td a {
    width: auto;
    /* margin-bottom: 5px; */
    text-align: center;
    text-transform: uppercase!important;
    font-family: var(--compkit-font-family), sans-serif ;
    letter-spacing: 1px;
    color: var(--compkit-light-text)!important;
    font-weight: 600;
    font-size: 1.2em;
}

    .woocommerce-account .woocommerce-orders-table img {
    width: 100% !important;
    height: auto;
    border-radius: 18px;
}

    .woocommerce-account .woocommerce-orders-table p {
        margin: 0; /* Remove default margin for paragraphs */
    }
}


#tab-lottery_instant_winners h2{
	display: none;
}
.single-product table {
    width: 100%;
    border-collapse: collapse;
}

.single-product th, 
.single-product td {
    padding: 5px; /* Reduce padding */
    text-align: left;
    font-size: 14px; /* Smaller font size */
}

@media (max-width: 600px) {
    .single-product .woocommerce-Tabs-panel th {
        font-size: 1.1rem !important; /* Adjust font size */
    }

    .single-product th, 
    .single-product td {
        display: inline-block; /* Keep headers and cells inline */
        width: 32%; /* Adjust width for better fit */
    }

    .single-product tbody tr {
        display: flex; /* Use flexbox for rows */
    }

    .single-product th {
        flex-basis: 32%; /* Same width as the td */
        font-weight: bold; /* Keep header bold */
        font-size: 14px; /* Match font size */
    }

    .single-product td {
        flex-basis: 32%; /* Same width as the th */
    }
}

.scratch-reveal .instant-winn {
	display: none; /* Hide by default */
}

.fa-wallet:before {
	font-size: 2em;	
}
.oceanwp-mobile-menu-icon a {
	line-height: 70px!important;
}





.woocommerce .product-meta {
    display: flex;
    gap: 10px;
    font-size: 0.9em;
    margin-top: 4px;
    color: #555;
}

.woocommerce .product-meta span {
    display: inline-block;
}




/* Adjust the padding and alignment for the product name column */
.woocommerce-order-details .woocommerce-table {
  width: 100%;
  table-layout: fixed;
}

.woocommerce-order-details .woocommerce-table td {
  box-sizing: border-box;
  padding: 10px;
  word-wrap: break-word;
  white-space: normal;
}

.woocommerce-order-details .woocommerce-table td.product-name {
  width: 75%;
  text-align: left;
}

.no-game-comp {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Allows items to wrap onto the next line */
    gap: 10px; /* Adds space between items */
    width: 100%;
}

.no-game-comp .wc-item-meta-label {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('https://luckytrucker.uk/wp-content/uploads/2024/10/main-ticket-background.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-family: var(--compkit-font-family), sans-serif ;
    font-weight: bold;
    color: var(--compkit-primary-green);
	font-size: .8em;
  width: 60px;
  height: 40px;
    padding: 0px 5px 0px 0px; /* Add padding */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    box-sizing: border-box; /* Ensure padding is included in the width calculation */
}
.my-ticket-numbers {
    background-image: url('https://luckytrucker.uk/wp-content/uploads/2024/10/main-ticket-background.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-family: var(--compkit-font-family), sans-serif ;
    font-weight: bold;
    color: var(--compkit-primary-green);
    display: inline-block; /* Treat each number as a block */
    width: 60px; /* Adjusted width for better spacing */
    height: 40px; /* Set a fixed height for consistency */
    padding: 10px 15px 0px 0px; /* Add padding for better spacing */
    margin: 2px; /* Space between numbers */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-align: center; /* Center text within the span */
    border-radius: 4px; /* Optional: rounded corners */
    font-size: 12px; /* Adjust font size for better visibility */
    line-height: 1.5; /* Adjust line height for spacing */
}



.over {
    white-space: normal; /* Allows text to break onto the next line */
    word-wrap: break-word; /* Break long words if necessary */
    overflow-wrap: break-word; /* Ensures consistent word breaking across browsers */
    text-align: center; /* Optional: centers the text */
    font-size: 1rem; /* Adjust font size if necessary */
    padding: 10px; /* Optional: add padding for better spacing */
}


/* Show specific categories */
.wc-item-meta.scratch-reveal-game {
    display: none !important; /* This will show scratch-reveal items */
}

/* Add an additional class to allow for flexibility */
.show-scratch-reveal {
    display: block !important; /* A class to manage visibility */
}


.woocommerce-product-gallery__trigger {
	display: none!important;
}
	/* General tab styling */
.woocommerce-tabs .wc-tabs li a {
    font-family: var(--compkit-font-family), sans-serif ;
    font-weight: bold;
    text-align: center;
    color: var(--compkit-dark-gray); /* Ghost white text */
    background-color: var(--compkit-dark-gray); /* Dark background for inactive tabs */
    padding: 15px 20px;
    border-radius: 15px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;/* Add ghost white border around tabs */
}

/* Active tab styling */
.woocommerce-tabs .wc-tabs li.active a {
    background-color: var(--compkit-dark-gray); /* Green for the active tab */
    color: var(--compkit-primary-green)!important; /* Keep text ghost white */
    border-color: var(--compkit-primary-green)!important; /* Match the border to the active tab color */
    border-radius: 15px;
}

/* Tab hover effect */
.woocommerce-tabs .wc-tabs li a:hover {
    background-color: var(--compkit-dark-gray); /* Green for the active tab */
    color: var(--compkit-primary-green); /* Keep text ghost white */
    border-color: var(--compkit-primary-green); /* Match the border to the active tab color */
    border-radius: 15px;
    transition: background-color 0.3s ease;
}
/* Import FontAwesome for icons */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

/* General table styling */
.woocommerce-Tabs-panel table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 15px;
    overflow: hidden;
    margin: 20px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: none; /* Remove green border */
}

/* Header styling */
.woocommerce-Tabs-panel thead {
    background-color: var(--compkit-primary-green); /* Dark color for the header */
    color: var(--compkit-dark-gray); /* Text color */
}

.woocommerce-Tabs-panel th {
    padding: 12px;
    text-align: center; /* Center align text */
    font-size: 1.1em;
    font-family: var(--compkit-font-family), sans-serif ; /* Apply Rubik font */
    font-weight: 700; /* Bold font weight */
    border-bottom: 2px solid var(--compkit-primary-green); /* Fun border color for the header */
    position: relative; /* Position relative for icons */
}

/* Correct icons for headings */
.woocommerce-Tabs-panel th:nth-of-type(1)::before {
    content: '\f145'; /* FontAwesome ticket icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900; /* Bold icon */
    margin-right: 8px;
}

.woocommerce-Tabs-panel th:nth-of-type(2)::before {
    content: '\f06b'; /* FontAwesome prize icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900; /* Bold icon */
    margin-right: 8px;
}

.woocommerce-Tabs-panel th:nth-of-type(3)::before {
    content: '\f091'; /* FontAwesome winner icon (or choose another icon) */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900; /* Bold icon */
    margin-right: 8px;
}

/* Body styling */
.woocommerce-Tabs-panel tbody {
    background-color: var(--compkit-dark-gray); /* Background color for the body */
}

.woocommerce-Tabs-panel td {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid var(--compkit-primary-green); /* Fun border color for the rows */
    font-size: 1em;
}

/* Alternating row colors */
.woocommerce-Tabs-panel tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Light gray for alternate rows */
}

/* Highlighting on hover */
.woocommerce-Tabs-panel tbody tr:hover {
    background-color: #e0f9e5; /* Light green for hover effect */
}

/* Border-radius for the last row */
.woocommerce-Tabs-panel tbody tr:last-child td {
    border-bottom: none; /* Remove bottom border */
}

.woocommerce-Tabs-panel tbody tr:last-child {
    border-radius: 0 0 15px 15px; /* Rounded corners for the last row */
}
/* Hide the last .oew-product-share element within .entry-summary */
.entry-content .oew-product-share:last-of-type {
    display: none !important;
}

/* Base styles for social share list */
.oew-product-share ul.ocean-social-share {
    display: flex; /* Enable flexbox */
    flex-direction: row; /* Arrange items in a row */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    margin: 0;
    padding: 0;
    list-style: none;
}

.oew-product-share ul.ocean-social-share li {
    display: flex; /* Ensure list items align horizontally */
    margin: 0 10px; /* Space between icons, adjust as needed */
    height: 20px !important; /* Ensure the height is respected */
    width: 20px !important; /* Ensure the width is respected */
}

.oew-product-share ul.ocean-social-share li a {
    display: flex; /* Ensure icons align horizontally within the list item */
    width: 100%; /* Make sure the anchor fills the list item */
    height: 100%; /* Make sure the anchor fills the list item */
    align-items: center; /* Center icon vertically */
    justify-content: center; /* Center icon horizontally */
}

/* Mobile-specific styles */
@media only screen and (max-width: 767px) {
    .oew-product-share ul.ocean-social-share {
        justify-content: center; /* Center items horizontally on mobile */
    }

    .oew-product-share ul.ocean-social-share li {
        margin: 0 10px; /* Adjust spacing for mobile, if needed */
    }

    .oew-product-share ul.ocean-social-share li a {
        display: flex; /* Ensure icons display inline on mobile */
        align-items: center; /* Center icon vertically */
        justify-content: center; /* Center icon horizontally */
    }
}



.oew-product-share .product-share-title {
    margin-bottom: 5px; /* Adjust as needed */
}

.max-pariticipants {
	display: none
}
.lottery-winners {
	display: none
}
/* Remove default list styling */
ul.ocean-social-share {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

/* Align list items horizontally */
ul.ocean-social-share li {
    display: inline-block; /* Display list items inline */
}

/* Hide the text */
ul.ocean-social-share li .product-share-text {
    display: none; /* Hide text labels */
}

/* Style anchor elements within list items */
ul.ocean-social-share li a {
    display: flex; /* Flexbox for alignment */
    align-items: center; /* Center content vertically */
    text-decoration: none; /* Remove underline */
    color: inherit; /* Use inherited color */
}

/* Style icons */
ul.ocean-social-share li .ops-icon-wrap {
    /* Optional: Adjust size or spacing of icons if needed */
}
.product-share-text {
	display: none!important;
}



/* Adjust the cell to ensure spacing is correct */
.product-quantity {
  text-align: center; /* Center align text and elements within the cell */
}

/* Override only the color on page 9 */
.page-id-9 tfoot .woocommerce-Price-amount {
  color: var(--compkit-dark-alternative) !important; /* Set the text color to black */
  font-size: inherit !important; /* Revert to the default font size */
}

/* Override only the color on page 8 */
.page-id-8 .entry .woocommerce-Price-amount {
  color: var(--compkit-dark-alternative) !important; /* Set the text color to black */
  font-size: inherit !important; /* Revert to the default font size (inheriting from parent elements) */
}
.entry .acfw-accordion-content .woocommerce-Price-amount {
    color: var(--compkit-primary-green) !important;
}
.page-id-9 .woocommerce-checkout-review-order-table .woocommerce-Price-amount {
  color: inherit!important; /* Set the text color to black */
}
.woocommerce ul.products li.product .woo-entry-inner li.image-wrap {
	margin-bottom: 0;
}
.woo-entry-image-main {
	border-radius: 18px;
}
.woocommerce-shop
.woo-entry-image-main {
	border-radius: 0 0 18px 18px;
}
.lottery-end-date {
	background: var(--compkit-primary-green);
	border-radius: 10px;
	padding: 5px 0 5px 0;
	color: var(--compkit-dark-gray)!important;
	font-weight: bold;
	text-align: center;
    width: 100%;
    font-family: var(--compkit-font-family), sans-serif ;
    font-weight: bold;
    text-transform: uppercase;
}
li.category {
	display: none!important;
}
/* Ensure header remains fixed on smaller screens */
    #site-header {
        position: fixed !important;
			height: 90px;
        z-index: 1000;
        top: 0;
        width: 100%;
			padding: 5px
    }
	#site-logo-inner { 
	height: 50px!important;
	}

.entry-summary .wc-forward {
	display: none!important;
}
.elementor-shortcode .products .entry .wc-forward {
	display: none!important;
}

.quantity-controls {
  border-radius: 10px 10px 0px 0px!important;
}





/* Slider styling */
.slider {
  width: 100%; /* Full width of the parent container */
  margin-top: 10px; /* Add spacing between slider and controls */
  order: 1; /* Keep the slider below the controls */
	border-radius: 15px;
}

/* 1) Remove browser default styling */
.slider {
  -webkit-appearance: none!important;
     -moz-appearance: none!important;
          appearance: none!important;
}

/* 3) Style the thumb – use !important to override inline/JS if needed */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none!important;   /* necessary for WebKit */
          appearance: none!important;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--compkit-dark);
  border: 3px solid var(--compkit-primary-green);
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 50px;
  height: 50px;
  background: var(--compkit-dark);
  border: 3px solid var(--compkit-primary-green);
  border-radius: 50%;
  cursor: pointer;
}
.slider::-ms-thumb {
  width: 50px;
  height: 50px;
  background: var(--compkit-dark);
  border: 3px solid var(--compkit-primary-green);
  border-radius: 50%;
  cursor: pointer;
}

/* Shine effect renamed */
.slider::-webkit-slider-thumb::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-20deg);
    animation: notices-shine 2.5s infinite;
    pointer-events: none;
}




.woocommerce ul.products li.product .button.added {
	display: block!important;
}
.lottery-max-ticket-txt {
    display: block;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--compkit-dark-gray); /* Text color */
    background-color: var(--compkit-primary-green); /* Dark background */
    border-left: 4px solid var(--compkit-primary-green); /* Accent color on the left */
    padding: 10px 15px;
    border-radius: 5px; /* Rounded corners */
    margin: 10px 0; /* Space around the message */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    word-wrap: break-word;
    white-space: normal;
    text-align: center; /* Center-align the text */
}



/* Adjust the cart form and quantity to be full width and properly spaced */
.elementor-shortcode .products .entry .product-inner .cart {
    display: flex;
    flex-direction: column; /* Stack elements in the form vertically */
    width: 100%; /* Take up full width of the container */
    margin-top: 15px; /* Add some space above the form */
}

.elementor-shortcode .products .entry .product-inner .cart .quantity {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px; /* Add space below the quantity controls */
}

.elementor-shortcode .products .entry .product-inner .cart .single_add_to_cart_button {
    width: 100%; /* Make the button take up full width */
    text-align: center; /* Center text inside the button */
}

.entry .atct-price .woocommerce-Price-amount  {
	color: var(--compkit-dark)!important;
    font-size: 2em; /* Sets the font size */
}




.woocommerce-product-gallery__image {
	border-radius: 15px;
}

.product_list_widget .woocommerce-Price-amount:not(.per-ticket-icon .woocommerce-Price-amount) {
		display: none;
	}
.entry .add-to-cart-button {
    border: 0 !important;
    margin: 5px;
    display: flex;
    align-items: flex-end; /* Aligns text to the bottom */
    justify-content: center; /* Center-aligns text horizontally */
    background: url('https://luckytrucker.uk/wp-content/uploads/2024/07/tickets-add.webp') no-repeat center center;
    background-size: contain; /* Adjusts the image to fit within the button */
    width: 120px; /* Increase button width */
    height: 120px; /* Increase button height */
    padding: 0; /* Remove padding to prevent text movement */
    margin-left: 5px;
    background-color: transparent !important; /* Transparent background */
    color: var(--compkit-dark-alternative) !important; /* Default text color */
    text-decoration: none;
    font-family: var(--compkit-font-family), sans-serif ; /* Ensure Rubik font is applied */
    font-weight: bold; /* Bold text */
    font-size: 1.6rem; /* Increase font size */
    line-height: 1.6; /* Adjust line height for better vertical alignment */
    text-align: center; /* Center-align text horizontally */
    white-space: nowrap; /* Prevent text from breaking into multiple lines */
    transition: background-image 0.3s, background-color 0.3s, color 0.3s; /* Smooth transitions */
}

.entry
.wc_lotery_countdown-amount {
	font-size: 26px!important;
}

.entry-content .wc_lotery_countdown-amount {
	font-size: 26px!important;
}
.lottery-info-columns {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-family: var(--compkit-font-family), sans-serif ;
    font-weight: bold;
    text-transform: uppercase;
}
.entry-summary .add-to-cart-button {
    border: 0 !important;
    margin: 5px;
    display: flex;
    align-items: flex-end; /* Aligns text to the bottom */
    justify-content: center; /* Center-aligns text horizontally */
    background: url('https://luckytrucker.uk/wp-content/uploads/2024/07/tickets-add.webp') no-repeat center center;
    background-size: contain; /* Adjusts the image to fit within the button */
    width: 120px; /* Increase button width */
    height: 120px; /* Increase button height */
    padding: 0; /* Remove padding to prevent text movement */
    margin-left: 5px;
    background-color: transparent !important; /* Transparent background */
    color: var(--compkit-dark-alternative) !important; /* Default text color */
    text-decoration: none;
    font-family: var(--compkit-font-family), sans-serif ; /* Ensure Rubik font is applied */
    font-weight: bold; /* Bold text */
    font-size: 1.6rem; /* Increase font size */
    line-height: 1.6; /* Adjust line height for better vertical alignment */
    text-align: center; /* Center-align text horizontally */
    transition: background-image 0.3s, background-color 0.3s, color 0.3s; /* Smooth transitions */
}


                                  * 
/* Optional: Add media queries for responsiveness if needed */
@media (max-width: 600px) {
	/* Hide the price outside the per-ticket-icon */

	.entry-summary {
		text-align: center;
	}
    .entry-summary .add-to-cart-button {
        width: 100px; /* Adjust button width for smaller screens */
        height: 50px; /* Adjust button height for smaller screens */    text-indent: 10px; /* Move text 5px to the right */
        font-size: 1.4rem; /* Adjust font size for smaller screens */
    }
.owp-floating-bar {
  position: fixed; /* Keep it fixed on screen */
  top: 60px!important; 
  width: 100%;
  background-color: #2c2c2c;
  z-index: 9999; 
  overflow: visible; /* Allow content to overflow if needed */
}

.owp-floating-bar .right {
  position: relative; /* Ensures the right container is positioned relatively */
	width: 80%;
}
.owp-floating-bar .product_price {
  position: absolute;
	top: 50px!important;
  left: 160px; /* Adjust for horizontal positioning */
  transform: translateY(-10px) scale(0.8); /* Use translateY to move the element up and maintain the scale */
  font-size: 0.8rem;
  z-index: 10000; /* Ensure visibility over the floating bar */
	}
.owp-floating-bar
	.price {
	background: transparent!important;
	color: #fff!important;
}
	.per-ticket-icon {
		color: #fff!important;
	}
}
.owp-floating-bar
.woocommerce-Price-amount bdi{
  color: #fff !important;
}
.lottery-info-columns div {
    flex: 1;
    text-align: center;
    padding: 10px;
}



#site-header {
			padding-left: 30px;
			padding-right: 30px;
}/* Ensure the wallet balance is visible and styled */
/* Style for the title */
.store-credit-title {
    display: none;*/
}

/* Ensure the wallet balance link is styled */

/* Icon styling */
.wallet-balance .fas {
    font-size: 18px; /* Adjust icon size if needed */
    color: var(--compkit-icons-header); /* Make the icon white */
    margin-right: 2px; /* Reduce space between icon and text */
}

.balance-amount {
    display: flex;             /* Use flexbox to align items */
    align-items: center;      /* Center align items vertically */
}

.mycred-my-balance-wrapper {
    margin-left: 4px;        /* Add space between the symbol and the amount */
}

/* Optional: Adjust the font size or styling if needed */
.balance-amount {
    font-size: 16px;         /* Adjust font size as needed */
}

/* Ensure the wallet balance is visible on mobile */
@media (max-width: 768px) {
.product_list_widget .woocommerce-Price-amount:not(.per-ticket-icon .woocommerce-Price-amount) {
		display: none;
	}
    .wallet-balance {
        font-size: 12px; /* Adjust font size for mobile */
        top: 0; /* Adjust position for smaller screens */
			left: 60%;
padding: 15px 0 0 0;
			background: transparent;
    }

    .wallet-balance .fas {
        font-size: 16px; /* Adjust icon size for mobile */
    }

    .store-credit-title {
        font-size: 8px; /* Adjust title font size for mobile */
			color: #fff;
    }
}

.owp-floating-bar
.per-ticket-icon {
	position: fixed; /* Position relative to the closest ancestor with position */
    right: 35px;
	 bottom: -15px;
		height: 60px;
	width:  45px;
}

#badge-ribbon {
    display: flex;                /* Use Flexbox for centering */
    justify-content: center;      /* Center horizontally */
    align-items: center;          /* Center vertically (if needed) */
    margin: 0 auto;               /* Ensure the container itself is centered */
    width: 100%;                  /* Full width of the parent */
}

#badge-ribbon iframe {
    width: 100%;                  /* Ensure iframe takes full width of its container */
    max-width: 380px;             /* Optional: Restrict the maximum width of the iframe */
    height: 61px;                 /* Set the height of the iframe */
    border: none;                 /* Remove default border */
}

.woocommerce-checkout #place_order {
	border-radius: 5px;
display: block!important;
}
#billing_state_field  {
	display: none;
}
#billing_company_field  {
	display: none;
}
.woocommerce-additional-fields {
	display: none;
}

.added-text {
	font-size: 8px!important;
}
.fa-ticket {
    display: inline-block !important; /* Ensure it displays correctly */
    width: 40px !important; /* Set the width of the icon */
    height: 40px !important; /* Set the height of the icon */
    color: transparent !important; /* Hide the original icon */
}
.fa-ticket::before {
    font-family: 'icomoon' !important;
    content: '\e900' !important; /* Replace with your custom icon */
    font-size: 40px !important; /* Icon size */
    color: var(--compkit-icons-header); /* Use current text color */
}

.faq-list {
            list-style-type: none;
            padding: 0;
        }
        .faq-item {
            margin-bottom: 1em;
        }
        .faq-question {
            cursor: pointer;
            font-weight: bold;
            color: var(--compkit-light-text);
            position: relative;
            padding-left: 1.5em;
        }
        .faq-question::before {
            content: "▼";
            position: absolute;
            left: 0;
            font-size: 1.2em;
            color: var(--compkit-primary-green);
            transition: transform 0.3s ease;
        }
        .faq-question.open::before {
            content: "▲";
        }
        .faq-answer {
            display: none;
            margin-top: 0.5em;
            color: var(--compkit-primary-green);
        }
#mobile-dropdown {
	margin-top: 0!important;
}
.quick-join {
	background: var(--compkit-primary-green);
	width: 100%;
}
.nsl-container {
    clear: none;
	text-align: center;
}
h6.quick-join-title {
	padding-left: 40px;
	margin-bottom: 5px;
	color: var(--compkit-dark-gray);
}
#mobile-dropdown {
max-height: 500px;
	background: linear-gradient(to bottom, var(--compkit-primary-green) 5%, white 1%);
}
.widget_shopping_cart_content .buttons .button:first-child {
    display: none;
}
.widget_shopping_cart_content .buttons .button {
	width: 100%;
	border-radius: 5px;
}
.widget_shopping_cart ul.cart_list li .owp-grid-wrap .owp-grid.thumbnail img {
    position: relative;
    top: 0;
	padding-left: 5px;
    width: auto;
    height: auto;
}
.archive
.content-area {
	padding: 0px!important;
    background: var(--compkit-dark-gray)!important;
}
.single
.content-area {
	padding: 10px!important;
    background: var(--compkit-dark-gray)!important;
}
.single
.entry.has-media {
    border: none!important;
	padding: none!important;
}
/* Define the wobble keyframes */
@keyframes wobble {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(2deg);
    }
    30% {
        transform: rotate(-5deg);
    }
    45% {
        transform: rotate(5deg);
    }
    60% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(2deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Apply the wobble animation */
.wcmenucart-details {
  background: linear-gradient(135deg, var(--compkit-primary-green), var(--compkit-bright-green)) !important;
  color: var(--compkit-dark)!important;
  font-weight: bold;
  font-family: var(--compkit-font-family), sans-serif ;
  padding: 8px 14px;
  border-radius: 12px;
  animation: wobble 5s ease-in-out infinite;
  animation-delay: 0s;
  box-shadow: 0 4px 12px var(--compkit-box-shadow-light-30) 0.3;
}

.count:before {
  content: '';
  position: absolute;
  top: 50%;
  left: -10px;
  margin-top: 5px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid var(--compkit-bright-green); /* Match the green theme */
}


/* Hide the default hamburger icon */
.hamburger-inner {
    display: none;
}

/* Add the FontAwesome icon to the hamburger container */
.hamburger-box::before {
    content: '\f007'; /* Unicode for the user icon in FontAwesome (example) */
    font-family: 'Font Awesome 5 Free'; /* Ensure FontAwesome is loaded */
    font-weight: 900; /* Adjust based on FontAwesome version */
    font-size: 24px; /* Adjust size as needed */
    color: #fff; /* Set icon color */
	position: relative;
    right: 10px;
}


.custom-quantity-buttons .add-to-cart-button:hover {
    background-image: url('https://luckytrucker.uk/wp-content/uploads/2024/07/tickets-add-white.webp') !important;
    background-color: #FF2400 !important; /* Red background on hover */
    color: #fff !important; /* White text on hover */
}

h6.qbtitle {
    font-weight: 600;
    margin: 0!important;
    color: var(--compkit-dark-gray);
    line-height: 1.4;
}/* Quick View Always Visible */
.owp-quick-view {
	display: none;
}
.entry
.title {
	padding-left: 10px!important;
	padding-right: 10px!important;
}
.btn-wrap {
	padding-bottom: 5px!important;
}
.entry
.ticket-info {
	display: none!important;
}

.entry
.countdown {
width: 100%!important;
	padding-left: 5px;
	padding-right: 5px;
}
.entry
.custom-quantity-buttons {
	width: 90%!important;
	padding-bottom: 5px;
}
.lottery-time {
  max-height: 100px; /* Set a max-height to control height */
}
.ticket-info
.lottery-days {
	display: none!important;
}
.owp-qv-content-wrap {
  position: relative; /* Use fixed to stay in the viewport and overlay content */
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  max-width: 100%;
  z-index: 9999; /* Ensure this value is high enough */
  top: 20%; /* Center vertically */
}

.owp-quick-view {
  position: static;
  width: auto;
  padding: 0;
  text-align: left;
  background-color: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: bolder;
  text-transform: none;
  letter-spacing: normal;
  opacity: 1;
  visibility: visible;
  z-index: auto;
}
.woo-entry-inner.clr .title h2 {
    line-height: 1.5em; /* Set your desired line height */
    min-height: 3em;    /* Ensure the minimum height is twice the line height */
  }


/* Remove default padding/margin from list and adjust spacing */
.entry.has-media .woo-entry-inner {
    list-style: none;
    padding: 0;
    margin: 0;
}

.entry.has-media .woo-entry-inner li {
    margin: 0; /* Remove margin between list items */
    padding: 0; /* Remove padding for a tighter layout */
}

/* Remove margin below title */
.entry.has-media .title h2 {
    margin: 5px 0; /* Reduce margin above and below title */
}

/* Reduce space around and within the image */
.entry.has-media .woo-entry-image {
    margin-bottom: 5px; /* Reduce space below the image container */
}

.entry.has-media .woo-entry-image img {
    width: 100%!important;
    height: auto;
    border-radius: 12px;
    display: flex; /* Remove any space below the image */
}
.lty-lottery-status-loop {
  display: none;
}
/* Style for button */
.entry.has-media .btn-wrap a {
    font-size: 12px; /* Reduce font size for button */
    padding: 5px 10px; /* Adjust padding for button */
}
.woocommerce-shop 
.lottery-time.countdown {
	margin-bottom: 0;
	border-radius: 12px 12px 0 0;
}
.woocommerce-shop 
.lottery-end-date {
	width: 100%;
	margin: 0;
}
.lottery-bage {
display: none;
}
.payment-methods {
            display: flex;
            gap: 10px; /* Adjust the gap as needed */
            justify-content: center;
            align-items: center;
        }
        .payment-methods img {
            width: 50px; /* Adjust width as needed */
            height: auto;
        }
#footer-widgets .elementor-widget-container {
	text-align: center;
}
.custom-quantity-buttons {
    width: 90%; /* Or a specific width if necessary */
    margin: auto; /* Center horizontally */
    display: flex; /* Use flexbox for centering its children */
    justify-content: center; /* Center child elements horizontally within this container */
    align-items: center; /* Optional: Center child elements vertically if needed */
    padding-bottom: 5px; /* Existing padding */
    text-align: center; /* Center text inside the buttons */
}

#tab-lottery_history h2 {
	display: none;
}
.owp-floating-bar button.button {
    background-color: #ff2400;
    border: 1px solid var(--compkit-dark-gray);
    border-radius: 10px;
    padding: 10px 20px;
    color: #fff; /* Text color */
    font-size: 16px; /* Adjust font size as needed */
    cursor: pointer; /* Ensure the cursor changes on hover */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}
.owp-floating-bar .product_price {
  display: inline-block;
	position: relative;
	top: 20px;
}
.owp-floating-bar button.button:hover {
    background-color: #d40000; /* Darker shade on hover */
}
.woocommerce ul.products li.product .woo-entry-inner li {
    margin-bottom:0;
    line-height: 1;
    color: #000;
}
#tab-title-reviews {
	display: none;
}

.woocommerce, ul.products, li.product, li.title a {
    color: var(--compkit-light-text)!important;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 1px;
}
.entry
.product-price {
	display: none;
}

.related, .entry.has-media, .woo-entry-image img {
    border-radius: 0 0 18px 18px;
}
/* Main container for the countdown timer */
.lottery-time {
    background: linear-gradient(to bottom right,var(--compkit-bright-green), var(--compkit-primary-green)); /* Dark black gradient */
    padding: 8px;
    border-radius: 6px;
    text-align: center;
    font-family: var(--compkit-font-family), sans-serif ;
    font-weight: 800;
    color: var(--compkit-dark-gray);
    display: inline-block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    width: 100%; /* Set a fixed width to prevent resizing */
}
/* Text for the "Time left" label */
.lottery-time.countdown {
    font-size: 0.9em;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Countdown container */
.lottery-time-countdown {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* Individual countdown section styling */
.wc_lotery_countdown-section {
    margin: auto;
    background-color: var(--compkit-dark-gray); /* Ghost white background behind the numbers */
    border-radius: 4px;
    padding: 4px;
    width: 40px; /* Fixed width for each section */
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 5px; /* Spacing between sections */
}
/* Styling for countdown amounts */
.wc_lotery_countdown-amount {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--compkit-light-text); /* Text color for countdown numbers */
}

/* Styling for countdown periods */
.wc_lotery_countdown-period {
    font-size: 0.8em;
    text-transform: uppercase;
    color: var(--compkit-light-text); /* Text color for countdown periods */
}

/* Ensures no text overflow */
.wc_lotery_countdown-row {
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
}

/* Animation for the countdown sections */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}


.livesearch {
	display: none;
}
.elementor-element-waknl7r
ul.products li.product li.title a {
  color: var(--compkit-dark-alternative)!important;
}
.elementor-element-waknl7r 
ul.products li.product li.title a:hover      {
  color: var(--compkit-primary-green)!important;
}
ul.footer-payment-icons {
    list-style: none;
    display: inline-flex;
}
ul.footer-payment-icons li i {
    font-size: 30px;
    padding: 0 2px;
    color: white;
}
.rotate {
  animation: rotation 2s infinite linear;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.livesearch {
	padding-bottom: 10px;
}

.floating_add_to_cart_button {
	border-radius: 5px!important;
}
.blog-entry.post .thumbnail img {
  border-radius: 15px;
}
.blog-entry.grid-entry .blog-entry-inner {
  padding: 0 1.25rem 1.25rem;
  border: 1px solid #e9e9e9;
	background: #e9e9e9;
	border-radius: 15px;
}

/* === Reset all WPForms text/email inputs & textarea === */
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form textarea {
  all: unset !important;              /* remove every inherited/plugin rule */
  display: block !important;          /* restore basic layout */
  box-sizing: border-box !important;  /* sane box model */

  /* Your flat white background & green border */
  background: #fff !important;
  border: 2px solid var(--compkit-primary-green) !important;
  border-radius: 0.25rem !important;

  /* Text & spacing */
  color: var(--compkit-dark) !important;
  padding: 0.75em 1em !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;

  /* Full‐width */
  width: 100% !important;
  max-width: 100% !important;

  /* Smooth transition for focus */
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* === Placeholder color === */
.wpforms-form input::placeholder,
.wpforms-form textarea::placeholder {
  color: #aaa !important;
  opacity: 1 !important;
}

/* === Focus state === */
.wpforms-form input[type="text"]:focus,
.wpforms-form input[type="email"]:focus,
.wpforms-form textarea:focus {
  outline: none !important;
  border-color: var(--compkit-bright-green) !important;
  box-shadow: 0 0 10px var(--compkit-box-shadow-light-30) !important;
}
/* ================================
   Conversion Form (Page-Specific)
   ================================ */
.page-id-3363 .conversion-form {
  background-color: var(--compkit-dark-alternative);
  border-radius: var(--compkit-border-radius);
  box-shadow: 0 4px 12px var(--compkit-box-shadow-light-30);
  padding: 2rem;
  margin: 2rem auto;
  text-align: center;
}

.page-id-3363 .conversion-form h3 {
  margin-bottom: 0.5rem;
  color: var(--compkit-bright-green);
  font-size: 1.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--compkit-primary-green);
  display: inline-block;
  padding-bottom: 0.25rem;
}

.page-id-3363 .conversion-form p.rate {
  color: var(--compkit-light-text);
  font-size: 1rem;
  margin: 0.5rem 0 1.5rem;
}

.page-id-3363 .conversion-form .lt-convert-points p {
  margin: 0 0 1.5rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--compkit-slider-title);
}

.page-id-3363 .conversion-form form {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--compkit-border-radius);
  padding: 10px;
  gap: 1.25rem;
}
/* remove native arrows */
.page-id-3363 input[type=number]::-webkit-inner-spin-button,
.page-id-3363 input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* WebKit custom arrows via SVG mask */
.page-id-3363 input[type=number] {
  position: relative;
  padding-right: 2.5em; /* make room for our fake arrows */
}

/* Up arrow */
.page-id-3363 input[type=number]::-webkit-inner-spin-button {
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-color: var(--compkit-dark);
  mask: url("data:image/svg+xml;utf8,<svg fill='%2300c853' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M0 6l4-4 4 4z'/></svg>") center/contain no-repeat;
  position: absolute;
  right: 0.5em;
  top: 0.5em;
}

/* Down arrow */
.page-id-3363 input[type=number]::-webkit-outer-spin-button {
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-color: var(--compkit-dark);
  mask: url("data:image/svg+xml;utf8,<svg fill='%2300c853' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M0 2l4 4 4-4z'/></svg>") center/contain no-repeat;
  position: absolute;
  right: 0.5em;
  bottom: 0.5em;
}

/* Firefox: hide native, no arrows */
.page-id-3363 input[type=number] {
  -moz-appearance: textfield;
}

.page-id-3363 .conversion-form label {
  color: var(--compkit-yellow);
  font-size: 1rem;
  font-weight: 400;
}

.page-id-3363 .conversion-form input[type="number"] {
  width: 100%;
  max-width: 180px;
  padding: 0.75rem;
  border: 2px solid var(--compkit-secondary-green);
  border-radius: var(--compkit-border-radius);
  background-color: var(--compkit-dark-gray);
  color: var(--compkit-light-text);
  font-family: var(--compkit-font-family);
  font-size: 1.25rem;
  text-align: center;
  box-shadow: inset 0 2px 6px var(--compkit-box-shadow-light-30);
  transition: border-color 0.2s ease;
}

.page-id-3363 .conversion-form input[type="number"]:focus {
  outline: none;
  border-color: var(--compkit-bright-green);
  box-shadow: 0 0 8px var(--compkit-instant-glow);
}

.page-id-3363 .conversion-form button {
  width: 100%;
  max-width: 220px;
  background: linear-gradient(
    135deg,
    var(--compkit-green-gradient-start),
    var(--compkit-green-gradient-end)
  );
  color: var(--compkit-dark);
  border: none;
  padding: 0.8rem;
  border-radius: var(--compkit-border-radius);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: var(--compkit-button-shadow);
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}

.page-id-3363 .conversion-form button:hover {
  box-shadow: var(--compkit-button-shadow-hover);
  transform: translateY(-2px);
}

.page-id-3363 .conversion-form button:focus {
  outline: none;
  box-shadow: var(--compkit-button-shadow-focus);
}

/* Responsive */
@media (max-width: 480px) {
  .page-id-3363 .conversion-form {
    padding: 1.5rem;
    margin: 1rem;
  }
  .page-id-3363 .conversion-form h3 {
    font-size: 1.5rem;
  }
  .page-id-3363 .conversion-form input[type="number"] {
    font-size: 1.1rem;
    max-width: 160px;
  }
}



/* 1. Base button styles */
/* === Base state for every .compkit-submit button === */
button.wpforms-submit.compkit-submit,
button.wpforms-submit.compkit-submit::before,
button.wpforms-submit.compkit-submit::after {
  all: unset !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  cursor: pointer !important;

  background: var(--compkit-primary-green) !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border: none !important;
  border-radius: 12px !important;
  width: 100%!important;

  color: var(--compkit-dark) !important;
  padding: 0.75em 1.5em !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  text-align: center !important;

  transition: background 0.2s ease !important;
}

/* === Super-specific Hover & Focus for every .compkit-submit button === */
html body .wpforms-form button.wpforms-submit.compkit-submit:hover,
html body .wpforms-form button.wpforms-submit.compkit-submit:focus,
html body .wpforms-form button.wpforms-submit.compkit-submit:hover::before,
html body .wpforms-form button.wpforms-submit.compkit-submit:focus::before,
html body .wpforms-form button.wpforms-submit.compkit-submit:hover::after,
html body .wpforms-form button.wpforms-submit.compkit-submit:focus::after {
  background: var(--compkit-bright-green) !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border: none !important;
  color: var(--compkit-dark) !important;
  outline: none !important;
}


.wpforms-submit-container {
	padding-top: 5px!important;
}
/* Hero Title */
.elementor-element.hero-title .elementor-widget-container { display: inline-block; }

/* Footer Callout */
.store-callout .icon-box-icon, .store-callout .icon-box-heading { display: table-cell; vertical-align: middle; }
.store-callout .icon-box-icon { height: 1em; width: 1em; line-height: 1em; }
.store-callout .icon-box-icon i { color: #5b4f4f; font-size: 34px; margin-right: 15px; }
.store-callout .icon-box-heading { font-size: 15px; font-weight: 400; margin: 0; color: var(--compkit-dark-gray); letter-spacing: 1px; text-transform: capitalize; }



.elementor-shortcode {
    padding: 10px;
}

.home .elementor-shortcode .products {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    margin-right: 5px;
}

/* Small Screen Mobile Styles */
@media (max-width: 450px) {
    .elementor-shortcode .products .entry,
    .elementor-shortcode .products .custom-content-item {
        flex: 0 0 90%;
        margin-right: 10px;
    }
		.entry .custom-content-item {
		width: 300px;
    margin: 5px;
	  height: 700px;
	}
	.woocommerce-shop
	.lottery-time.countdown {
		font-size: 8px;
	}
		.woocommerce-shop
	  .lottery-time-countdown span{
		font-size: 12px!important;
	}

	.woocommerce-shop
	.add-to-cart-button {
		font-size: 10px!important;
	}
	.woocommerce-shop
	.lottery-days {
		display: inline-block!important;
	}
}
/* Tablet Styles */
@media (min-width: 451px) and (max-width: 768px) {
/* Tablet Styles */
@media (min-width: 451px) and (max-width: 768px) {
	.scratch-reveal {
	padding-top: 25px;
}
	.ticket-numbers-grid {
		padding-top: 30px!important;
	}
		.owp-floating-bar .product_price {
  position: absolute;
	top: 55px;!important;
  left: 70%!important; /* Adjust for horizontal positioning */
  transform: translateY(-10px) scale(1); /* Use translateY to move the element up and maintain the scale */
  z-index: 10000; /* Ensure visibility over the floating bar */
	}
	    .wallet-balance {
        font-size: 12px; /* Adjust font size for mobile */
        top: 0; /* Adjust position for smaller screens */
			left: 65%;
        padding: 20px 0px 0px 25px; /* Adjust padding for smaller screens */
			background: transparent;
    }
	.mobile-menu {
		padding-right: 5px;
	}
	.owp-floating-bar {
  position: fixed; /* Keep it fixed on screen */
  top: 0; 
  width: 100%;
  background-color: #2c2c2c;
  z-index: 9999; 
  overflow: visible; /* Allow content to overflow if needed */
}

.owp-floating-bar .right {
  position: relative; /* Ensures the right container is positioned relatively */
	width: 80%;
}

.owp-floating-bar
	.price {
	background: transparent!important;
	color: #fff!important
}
	.per-ticket-icon {
		color: #fff!important;
	}
}
.owp-floating-bar
.woocommerce-Price-amount bdi{
  color: #fff !important;
}
    .elementor-shortcode .products .entry,
    .elementor-shortcode .products .custom-content-item {
        flex: 0 0 40%;
        margin-right: 10px;
    }
	.entry .custom-content-item {
		width: 300px;
    margin-top: 5px;
	  height: 700px;
	}
}

/* Desktop Styles */
@media (min-width: 769px) {
	.wallet-balance {
    position: block;
		right: 200px;
}

#content {
    padding-top: 50px;
}
.product-info {
    font-size: 2em;
}
		.scratch-reveal {
	padding-top: 25px;
}
	.ticket-numbers-grid {
		padding-top: 30px!important;
	}
	.woocommerce-order {
	width: 80%;
	margin: auto;
		background: var(--compkit-dark-gray);
}
	.page-id-3908
	.elementor-shortcode .products .entry,
	.elementor-shortcode .products .custom-content-item {
		flex: 0 0 95%;
	}
	
	
    .elementor-shortcode .products .entry,
    .elementor-shortcode .products .custom-content-item {
        flex: 0 0 30%;
        margin-right: 10px;
    }
.entry .custom-content-item {
		width: 300px!important;
    margin-top: 5px;
	  height: 700px;
    z-index: 1; /* Ensure the gradient overlay is below the content */
	}
}

.custom-content-item > * {
    position: relative;
    z-index: 2; /* Ensure the content is above the gradient overlay */
}

/* Hint at horizontal scrolling by showing part of the next product */


/* Increase the visible part of the next product on hover */
.elementor-shortcode .products .entry:hover::after {
    width: 20px;
}

/* Ensure product title (anchor tag) breaks into multiple lines */
.elementor-shortcode .products .entry h2 a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-decoration: none;
    color: var(--compkit-dark-gray);
}

/* Base button styling */
.custom-content-item .view-all-button {
  position: relative;
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--compkit-primary-green);
  background-color: var(--compkit-dark-gray);
  border: 2px solid var(--compkit-primary-green);
  border-radius: 8px;
  padding: 12px 28px;
  font-family: var(--compkit-font-family), sans-serif ;
  box-shadow: 0 0 8px var(--compkit-box-shadow-light-50);
  transition: all 0.3s ease;
  overflow: hidden; /* ✅ Contains the shine */
  z-index: 1;
}

/* Shine effect */
.custom-content-item .view-all-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: shineEffect 2.5s infinite;
  z-index: 0; /* ✅ Keep behind text */
  pointer-events: none;
}



	.wp-block-woocommerce-product-categories {
		display: none;
	}
	.widget-title {
		text-align: left;
	}
	.site-footer {
		text-align: center;
	}
.woocommerce ul.products {
  margin: 5px;
}
	
    .store-callout .icon-box-icon { display: none; }
    .store-callout .icon-box-heading { display: block; text-align: center; }

.football-reorder-link span, .football-reorder-link .fa-shopping-cart{ 
    color: #fff!important;
}

/* Footer Borders */
#footer-widgets .contact-info-widget i, #footer-widgets .oceanwp-recent-posts li, #footer-widgets .social-widget li a,
#footer-widgets .woocommerce ul.product_list_widget li { border-color: rgba(255, 255, 255, 0.2); }


/* Footer Products */
#footer-widgets .price del, #footer-widgets del .amount { color:var(--compkit-dark); }

/* Footer Tags */
#footer-widgets .tagcloud a { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.1); }

#footer-widgets .tagcloud a:hover { background-color: rgba(255, 255, 255, 0.2); color: #fff; border-color: rgba(255, 255, 255, 0.2); }
#footer-widgets {
	background: var(--compkit-dark-gray)!important;
}
.bubble-pop-thankyou-container-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}

.bubble-pop-thankyou-container img {
    width: 50%;
    max-width: 350px;
    height: auto;
    border-radius: 18px;
    flex-shrink: 0;
}


.fb-post-button{
    background-color: #1877f2; /* Facebook blue */
    color: white;
    border: none;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.fb-post-button button:hover {
    background-color: #165cdb; /* Slightly darker on hover */
}

.fb-post-button button:disabled {
    background-color: #cbd6e2; /* Disabled grayish */
    cursor: not-allowed;
}
.kl-atw-button {
    padding: 14px 24px;
      background: linear-gradient(
    135deg,
    var(--compkit-green-gradient-start),
    var(--compkit-green-gradient-end)
  );
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 17px;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    cursor: pointer;
    box-shadow: 0 0 10px var(--compkit-box-shadow-light-30), inset 0 0 0 rgba(255,255,255,0);
    transition: all 0.25s ease-in-out;
    position: relative;
    text-transform: uppercase;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.kl-atw-button::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.2), transparent 70%);
    transform: rotate(25deg);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.kl-atw-button:hover {
      background: linear-gradient(
    135deg,
    var(--compkit-green-gradient-start),
    var(--compkit-green-gradient-end)
  );
    box-shadow: 0 0 10px var(--compkit-box-shadow-light-30), inset 0 0 0 rgba(255,255,255,0);
    transform: translateY(-2px);
}

.kl-atw-button:hover::before {
    opacity: 1;
    animation: pulse-light 1s ease-out forwards;
}

.kl-atw-button:active {
    transform: scale(0.98);
    box-shadow: 0 2px 10px rgba(0, 194, 168, 0.3);
}

@keyframes pulse-light {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}
.woocommerce-notices-wrapper {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 9999;
    max-width: 320px;
    pointer-events: auto;
}
.compkit-noui-slider {
    margin: 0 auto;
    max-width: 300px;
}

.noUi-tooltip {
    font-size: 13px;
    font-weight: bold;
    background-color: var(--compkit-dark);
    color: var(--compkit-primary-green);
    border-radius: 6px;
    padding: 4px 8px;
    font-family: var(--compkit-font-family), sans-serif;
}

.compkit-rounded-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--compkit-primary-green);
    color: var(--compkit-icons-set1);
    padding: 10px;
    border: 2px solid var(--compkit-dark-alternative);
    border-radius: 50%;
    box-shadow: 0 4px 12px var(--compkit-box-shadow-light-30);
    font-weight: 600;
    font-family: var(--compkit-font-family), sans-serif;
    font-size: 13px;
    width: 36px;
    height: 36px;
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.compkit-rounded-button:hover {
    transform: scale(1.05);
}

.compkit-rounded-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: skewX(-20deg);
    animation: notices-shine 2.5s infinite;
    pointer-events: none;
}

.woocommerce-message {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--compkit-dark);
    color: var(--compkit-primary-green) !important;
    padding: 12px 20px;
    border-radius: 10px;
    box-shadow: 0 8px 20px var(--compkit-box-shadow-light-30);
    font-weight: 600 !important;
    gap: 8px;
    min-height: 40px;
    text-align: center !important;
    font-family: var(--compkit-font-family), sans-serif ;
    margin-bottom: 60px !important;
    position: relative;
    overflow: hidden;

    /* Animation */
    opacity: 0;
    transform: translateY(100%);
    animation: slideUpFade 0.5s ease forwards;
}

/* Shine effect renamed */
.woocommerce-message::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-20deg);
    animation: notices-shine 2.5s infinite;
    pointer-events: none;
}

/* Slide up + fade */
@keyframes slideUpFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




/* Icon styling if you have one */
.woocommerce-message svg,
.woocommerce-message .icon {
    width: 20px;
    height: 20px;
    fill: #fff;
    flex-shrink: 0;
}

/* Keyframes for fadeIn */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ======================================================
   PRICE + TITLE WRAPPER
====================================================== */

.kl-price-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin-bottom: 10px;
}

/* ======================================================
   TITLE (PROMINENT)
====================================================== */

.kl-single-title,
h2.product_title {
    flex: 1;
    text-align: right;
    font-family: var(--compkit-font-family), sans-serif;
    font-size: 1.35rem;
    line-height: 1.05;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 !important;
    padding: 0 !important;
}

/* ======================================================
   TICKET PRICE (COMPACT, BLUE)
====================================================== */

.kl-single-price-tag {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;

    min-width: 118px;
    padding: 10px 16px 10px 14px;

    font-family: var(--compkit-font-family), sans-serif;
    text-align: left;

    background: linear-gradient(
        135deg,
        var(--electric-blue),
        var(--blue)
    );

    border-radius: 12px;
    color: var(--btn-text);

    /* HARD STYLE ONLY */
    box-shadow: none;
    border: 2px dashed var(--sky-700);
}

/* ======================================================
   PERFORATION CUTS
====================================================== */

.kl-single-price-tag::before,
.kl-single-price-tag::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    background: var(--bg);
    border-radius: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.kl-single-price-tag::before {
    left: -7px;
    border-right: 2px solid var(--sky-700);
}

.kl-single-price-tag::after {
    right: -7px;
    border-left: 2px solid var(--sky-700);
}

/* ======================================================
   PRICE TEXT
====================================================== */

.kl-single-price-tag,
.kl-single-price-tag .amount {
    font-weight: 900;
    color: var(--btn-text) !important;
}

.kl-single-price-tag .price {
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: .02em;
    margin: 0;
}

.kl-single-price-tag .woocommerce-Price-currencySymbol {
    font-size: .95rem;
    vertical-align: super;
    margin-right: 2px;
    opacity: .9;
}

/* ======================================================
   SUBTEXT
====================================================== */

.kl-single-price-tag small {
    margin-top: 2px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
}

/* ======================================================
   HARD STOP ALL FX
====================================================== */

.kl-single-price-tag,
.kl-single-price-tag * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
}
/* ======================================================
   MULTI-COLOUR TICKET ROTATION
====================================================== */

/* 1️⃣ ELECTRIC BLUE */
.products > li.entry:nth-child(4n + 1) .kl-single-price-tag {
    background: linear-gradient(135deg, var(--electric-blue), var(--blue));
    border-color: var(--sky-700);
}

/* 2️⃣ PURPLE */
.products > li.entry:nth-child(4n + 2) .kl-single-price-tag {
    background: linear-gradient(135deg, var(--purple), #9b5cf6);
    border-color: var(--purple-shadow);
}

/* 3️⃣ ORANGE */
.products > li.entry:nth-child(4n + 3) .kl-single-price-tag {
    background: linear-gradient(135deg, var(--orange), var(--yellow));
    border-color: var(--orange-shadow);
}

/* 4️⃣ GAME GREEN */
.products > li.entry:nth-child(4n + 4) .kl-single-price-tag {
    background: linear-gradient(135deg, var(--game-green), var(--green));
    border-color: var(--green-shadow);
}
/* ======================================================
   PROGRESS BAR BASE
====================================================== */

.lty-progress-bar {
    position: relative;
    width: 100%;
    height: 25px;
    background: var(--slate-100);
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--slate-300);
}

/* ======================================================
   WIDTH HOLDER (DO NOT ANIMATE)
====================================================== */

.lty-progress-bar > span {
    display: block;
    height: 100%;
}

/* ======================================================
   ACTUAL FILL (THIS IS WHAT MOVES)
====================================================== */

.lty-progress-fill {
    height: 100%;
    width: 100%;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--electric-blue),
        var(--blue),
        var(--purple)
    );

    animation: fillReveal 0.8s ease-out forwards;
    position: relative;
    overflow: hidden;
}

/* ======================================================
   SHEEN
====================================================== */

.lty-progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 35%,
        rgba(255,255,255,.35) 50%,
        transparent 65%
    );
    animation: sheen 2.5s linear infinite;
}

/* ======================================================
   SOLD OUT STATE (AUTO)
====================================================== */

.lty-progress-bar > span[style*="width:100%"] .lty-progress-fill {
    background: linear-gradient(
        90deg,
        var(--orange),
        var(--bundle-yellow-shadow)
    );
}

.lty-progress-bar > span[style*="width:100%"] .lty-progress-fill::after {
    animation: none;
}

/* ======================================================
   TEXT
====================================================== */

.lty-progress-count {
    display: flex;
    justify-content: space-between;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: var(--slate-600);
}

.lty-progress-bar-notice {
    font-weight: 800;
    color: var(--ink);
}

.lty-progress-remaining-count {
    margin-top: 6px;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--slate-600);
}

/* ======================================================
   ANIMATIONS
====================================================== */


/* ======================================================
   HARD STOP THEME BULLSHIT
====================================================== */

.lty-lottery-progress-bar *,
.lty-lottery-progress-bar *::before,
.lty-lottery-progress-bar *::after {
    transition: none !important;
}
/* ======================================================
   PROGRESS BAR TEXT SCALE UP
====================================================== */

.lty-progress-count {
    font-size: .85rem;          /* was .7rem */
    letter-spacing: .1em;
}

.lty-progress-bar-notice {
    font-size: .9rem;
    font-weight: 900;
}

.lty-progress-bar-start,
.lty-progress-bar-end {
    font-size: .8rem;
    font-weight: 800;
}

.lty-progress-remaining-count {
    font-size: .75rem;          /* was .65rem */
    letter-spacing: .12em;
}



/* =========================================================
   EXTRACTED ONLY: :root COLORS/TOKENS + ALL BUTTON STYLES
   From your provided stylesheet snippet
   ========================================================= */


/* -------------------------------
   BUTTONS (ALL)
--------------------------------- */

/* Base pill button */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 24px;
  border-radius:999px;
  font-weight:900;
  text-decoration:none!important;
  color:var(--btn-text)!important;
  background:var(--green);
  box-shadow:0 10px 0 #2E7E03,0 18px 40px rgba(64,177,4,.45);
  transition:transform var(--ease), box-shadow var(--ease);
  border:none;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 0 #2E7E03,0 24px 55px rgba(64,177,4,.55);
}
.btn:active{
  transform:translateY(2px);
  box-shadow:0 6px 0 #2E7E03,0 10px 25px rgba(64,177,4,.45);
}

/* Copy button */
.dda-copy{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:999px;
  font-size:1.2rem;
  font-weight:1000;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--blue);
  color:#fff;
  border:none;
  box-shadow:
    0 6px 0 #005DB5,
    0 12px 26px rgba(0,130,249,.35);
  cursor:pointer;
  transition:transform var(--ease), box-shadow var(--ease);
}
.dda-copy:hover{
  transform:translateY(-1px);
  box-shadow:
    0 8px 0 #005DB5,
    0 18px 36px rgba(0,130,249,.45);
}
.dda-copy:active{
  transform:translateY(1px);
  box-shadow:
    0 4px 0 #005DB5,
    0 8px 18px rgba(0,130,249,.35);
}

/* Download button (asset link) */
.dda-order__asset-link a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border-radius:999px;
  font-weight:1000;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff !important;
  background:var(--green);
  box-shadow:
    0 10px 0 #2E7E03,
    0 18px 40px rgba(64,177,4,.45);
  text-decoration:none !important;
  transition:transform var(--ease), box-shadow var(--ease);
}
.dda-order__asset-link a:hover{
  transform:translateY(-2px);
}
.dda-order__asset-link a:active{
  transform:translateY(2px);
}

/* Menu button (big pill) */
.menu-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:60px;
  margin-top:10px;
  border-radius:999px;
  font-family:"Rubik", sans-serif;
  font-weight:800;
  text-decoration:none !important;
  color:#fff !important;
  background:var(--green);
  box-shadow:0 10px 0 #2E7E03, 0 18px 40px rgba(64,177,4,.45);
  transition:transform var(--ease), box-shadow var(--ease), background .25s ease;
  border:none;
  position:relative;
  text-transform:uppercase;
}
.menu-btn::before{
  content:"\f005";
  font-family:"Font Awesome 6 Free";
  font-weight:700;
  margin-left:12px;
  font-size:16px;
}
.menu-btn,
.menu-btn a,
.menu-btn:visited,
.menu-btn:hover{
  color:#fff !important;
  font-size:1.1em!important;
}
.menu-btn:hover{
  background:#FB6400;
  box-shadow:0 10px 0 #C44E00, 0 18px 40px rgba(251,100,0,.45);
  transform:translateY(-2px);
}
.menu-btn:active{
  transform:translateY(1px);
}

/* Menu button variant: docs */
.menu-btn.docs{
  background:var(--blue);
  box-shadow:0 10px 0 #005DB5,0 18px 40px rgba(0,130,249,.45);
}
.menu-btn.docs:hover{
  background:#0b73db;
  box-shadow:0 10px 0 #004a91,0 18px 40px rgba(11,115,219,.45);
}
.menu-btn.docs::before{
  content:"\f02d";
}

/* Woo loop add-to-cart button inside li.btn-wrap */
li.btn-wrap a.button.add_to_cart_button.ajax_add_to_cart{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 24px!important;
  margin:25px 0 50px 0;
  border-radius:12px;
  font-weight:900!important;
  text-decoration:none!important;
  line-height:1!important;
  color:#fff!important;
  background:var(--purple)!important;
  box-shadow:0 10px 0 #4f109c,0 18px 40px rgba(124,38,227,.45);
  transition:transform .15s ease, box-shadow .15s ease, background .25s ease;
  border:none!important;
  text-transform:uppercase;
  letter-spacing:.3px;
}
li.btn-wrap a.button.add_to_cart_button.ajax_add_to_cart:hover{
  background:#8f3bf0!important;
  box-shadow:0 10px 0 #3e0d7d,0 18px 40px rgba(124,38,227,.55);
  transform:translateY(-2px);
}
li.btn-wrap a.button.add_to_cart_button.ajax_add_to_cart:active{
  transform:translateY(2px);
  box-shadow:0 6px 0 #4f109c,0 10px 25px rgba(124,38,227,.45);
}

/* Woo checkout button */
a.button.wc-forward.checkout{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 24px!important;
  border-radius:12px;
  font-weight:900!important;
  text-decoration:none!important;
  line-height:1!important;
  color:#fff!important;
  background:var(--green)!important;
  box-shadow:0 10px 0 #2E7E03,0 18px 40px rgba(64,177,4,.45);
  transition:transform .15s ease, box-shadow .15s ease, background .25s ease;
  border:none!important;
  text-transform:uppercase;
  letter-spacing:.3px;
}
a.button.wc-forward.checkout:hover{
  background:#59d90a!important;
  box-shadow:0 10px 0 #2E7E03,0 18px 40px rgba(89,217,10,.45);
  transform:translateY(-2px);
}
a.button.wc-forward.checkout:active{
  transform:translateY(2px);
  box-shadow:0 6px 0 #2E7E03,0 10px 25px rgba(64,177,4,.45);
}

/* Woo "continue shopping" / forward button */
a.button.wc-forward{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 24px!important;
  border-radius:12px;
  font-weight:900!important;
  text-decoration:none!important;
  line-height:1!important;
  color:#fff!important;
  background:var(--blue)!important;
  box-shadow:0 10px 0 #005DB5,0 18px 40px rgba(0,130,249,.45);
  transition:transform .15s ease, box-shadow .15s ease, background .25s ease;
  border:none!important;
  text-transform:uppercase;
  letter-spacing:.3px;
}
a.button.wc-forward:hover{
  background:#0b73db!important;
  box-shadow:0 10px 0 #004a91,0 18px 40px rgba(11,115,219,.45);
  transform:translateY(-2px);
}
a.button.wc-forward:active{
  transform:translateY(2px);
  box-shadow:0 6px 0 #005DB5,0 10px 25px rgba(0,130,249,.45);
}

/* Product page CTA buttons */
.cta-button,
.floating_add_to_cart_button,
.single_add_to_cart_button,
.woocommerce ul.products li.product .button,
#place_order{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 24px;
  border-radius:12px;
  font-weight:900!important;
  text-decoration:none !important;
  color:#fff !important;
  background:var(--green)!important;
  box-shadow:0 10px 0 #2E7E03,0 18px 40px rgba(64,177,4,.45);
  transition:transform .15s ease, box-shadow .15s ease, background .25s ease;
  border:none!important;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.cta-button:hover{
  background:#FB6400;
  box-shadow:0 10px 0 #C44E00,0 18px 40px rgba(251,100,0,.45);
  transform:translateY(-2px);
}
.cta-button:active{
  transform:translateY(2px);
  box-shadow:0 6px 0 #2E7E03,0 10px 25px rgba(64,177,4,.45);
}
.cta-button::before{
  content:"\f005";
  font-family:"Font Awesome 6 Free";
  font-weight:700;
  font-size:14px;
}

/* Contact CTA buttons */
.cta-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 24px;
  border-radius:999px;
  font-weight:900;
  text-decoration:none !important;
  color:#fff !important;
  text-transform:uppercase;
  letter-spacing:.3px;
  font-family:"Rubik", sans-serif;
  box-shadow:0 10px 0 rgba(0,0,0,.22),0 18px 40px rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .15s ease, background .25s ease;
}
.cta-btn.email{
  background:#0082F9;
  box-shadow:0 10px 0 #005DB5,0 18px 40px rgba(0,130,249,.45);
  height:40px;
}
.cta-btn.email:hover{ background:#0072db; }

.cta-btn.whatsapp{
  background:#25D366;
  box-shadow:0 10px 0 #14943F,0 18px 40px rgba(37,211,102,.45);
  height:40px;
}
.cta-btn.whatsapp:hover{ background:#1fc45c; }

.cta-btn:hover{ transform:translateY(-2px); }
.cta-btn:active{ transform:translateY(1px); }

/* Buy buttons (mode-specific variants) */
.buy-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 26px;
  border-radius:999px;
  font-weight:900;
  text-decoration:none !important;
  text-transform:uppercase;
  letter-spacing:.3px;
  color:#fff !important;
  margin-top:16px;
  box-shadow:0 10px 0 rgba(0,0,0,.18),0 18px 40px rgba(0,0,0,.22);
  transition:transform .15s ease, box-shadow .15s ease, background .25s ease;
}
.buy-btn:hover{ transform:translateY(-2px); }
.buy-btn:active{ transform:translateY(1px); }

/* Scratch = Orange */
.buy-btn.scratch{
  background:var(--orange);
  box-shadow:0 10px 0 #C44E00,0 18px 40px rgba(251,100,0,.45);
}
.buy-btn.scratch:hover{ background:#ff7925; }

/* Spin = Blue */
.buy-btn.spin{
  background:var(--blue);
  box-shadow:0 10px 0 #005DB5,0 18px 40px rgba(0,130,249,.45);
}
.buy-btn.spin:hover{ background:#0b73db; }

/* Slots = Purple */
.buy-btn.slots{
  background:var(--purple);
  box-shadow:0 10px 0 #4f109c,0 18px 40px rgba(124,38,227,.45);
}
.buy-btn.slots:hover{ background:#8f3bf0; }

/* Bundle button = Yellow */
.buy-btn.bundle-btn{
  background:var(--yellow);
  box-shadow:0 10px 0 #c88900,0 18px 40px rgba(246,169,3,.45);
}
.buy-btn.bundle-btn:hover{ background:#ffbf2f; }

/* Instant Reveal = Game Green */
.buy-btn.reveal{
  background:var(--game-green);
  box-shadow:0 10px 0 #7fb828,0 18px 40px rgba(177,244,62,.45);
}
.buy-btn.reveal:hover{ background:#c9ff4f; }

/* Quantity plus/minus buttons (interactive controls, included) */
.single-product .quantity .plus,
.single-product .quantity .minus{
  width:42px;
  height:42px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#fff;
  color:#0f172a;
  font-weight:1000;
  font-size:1.1rem;
  box-shadow:0 4px 10px rgba(15,23,42,.12);
  cursor:pointer;
  user-select:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.single-product .quantity .plus:hover,
.single-product .quantity .minus:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(15,23,42,.18);
}
.single-product .quantity .plus:active,
.single-product .quantity .minus:active{
  transform:translateY(1px);
  box-shadow:0 2px 6px rgba(15,23,42,.12);
}

.candidate-qty {
    display: none;
}
/* Quantity wrapper */
.quantity{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Hide screen reader label visually but keep it accessible */
.quantity .screen-reader-text{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Quantity input */
.quantity input.qty{
  width:64px;
  height:42px;
  text-align:center;
  font-size:1rem;
  font-weight:600;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  color:#0f172a!important;
  box-shadow:inset 0 2px 4px rgba(15,23,42,.06);
}

/* Remove default number input arrows */
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.quantity input.qty{
  -moz-appearance:textfield;
}

/* Plus and minus buttons */
.quantity .plus,
.quantity .minus{
  width:42px;
  height:42px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#fff;
  color:#0f172a;
  font-weight:1000;
  font-size:1.1rem;
  box-shadow:0 4px 10px rgba(15,23,42,.12);
  cursor:pointer;
  user-select:none;
  transition:transform .12s ease, box-shadow .12s ease;
}

/* Hover state */
.quantity .plus:hover,
.quantity .minus:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(15,23,42,.18);
}

/* Active state */
.quantity .plus:active,
.quantity .minus:active{
  transform:translateY(1px);
  box-shadow:0 2px 6px rgba(15,23,42,.12);
}

/* Optional disabled state */
.quantity .plus.disabled,
.quantity .minus.disabled{
  opacity:.4;
  cursor:not-allowed;
  pointer-events:none;
}

/* =========================================
   SCROLLBARS – COMPKIT STYLE
   ========================================= */

/* -------------------------
   WooCommerce inside Elementor
   Horizontal emphasis, subtle, branded
-------------------------- */

.elementor-shortcode .woocommerce::-webkit-scrollbar {
  height: 8px;
}

.elementor-shortcode .woocommerce::-webkit-scrollbar-track {
  background: transparent;
}

.elementor-shortcode .woocommerce::-webkit-scrollbar-thumb {
  background-color: var(--green);
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}

.elementor-shortcode .woocommerce::-webkit-scrollbar-thumb:hover {
  background-color: #59d90a; /* brighter green hover, matches buttons */
}


/* ======================================================
   GLOBAL SCROLLBAR STYLING (FORCED)
====================================================== */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--compkit-scrollbar-thumb) var(--compkit-scrollbar-track);
}

/* WebKit (Chrome, Edge, Safari) */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: var(--compkit-scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--compkit-scrollbar-thumb);
    border-radius: 10px;
    border: 2px solid var(--compkit-scrollbar-track);
}

/* Hover state */
*::-webkit-scrollbar-thumb:hover {
    background-color: var(--compkit-scrollbar-thumb-hover);
}
/* =========================================
THANK YOU CTA
=========================================*/

.compkit-thankyou-cta{
  margin-top:48px;
  padding:28px 24px 32px;
  text-align:center;

  background:var(--card);
  border-radius:calc(var(--radius) + 6px);

  box-shadow:var(--shadow-lg);
}

.compkit-thankyou-cta .cta-text{
  margin:0 0 18px;
  font-size:2.05rem;
  color:var(--ink);
}

.compkit-thankyou-cta .cta-text strong{
  display:block;
  margin-top:6px;
  font-weight:900;
  color:var(--purple);
  letter-spacing:.04em;
}

/* =========================================
CTA BUTTON (SCRATCHCARD ORANGE)
=========================================*/

.compkit-buy-plugin-btn{
  display:inline-block;

  background:var(--orange);
  color:#fff;

  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;

  padding:16px 34px;
  border-radius:12px;

  box-shadow:
    0 10px 0 var(--orange-shadow),
    0 18px 40px rgba(251,100,0,.45);

  text-decoration:none !important;
}

.compkit-buy-plugin-btn:hover{
  background:var(--orange);
}