/*
Theme Name: Twenty Twenty-Four
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.0
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* Target the entire pagination container */
.woocommerce-pagination .page-numbers {
    display: flex; /* Align numbers horizontally */
    justify-content: center; /* Center the pagination */
    gap: 10px; /* Space between numbers */
    padding: 0;
    margin: 20px 0;
}

/* Style all page number links and the current page */
.woocommerce-pagination .page-numbers li .page-numbers {
    display: inline-block;
    width: 40px; /* Fixed width for consistency */
    height: 40px; /* Fixed height */
    line-height: 40px; /* Vertically center the text */
    text-align: center;
    background-color: #f5f5f5; /* Light gray background */
    color: #333; /* Text color */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Font size */
    transition: all 0.3s ease; /* Smooth hover effect */
}

/* Style the current page */
.woocommerce-pagination .page-numbers li .current {
    background-color: #0073aa; /* Blue background for current page */
    color: #fff; /* White text */
    font-weight: bold;
}

/* Hover effect for clickable page numbers */
.woocommerce-pagination .page-numbers li a.page-numbers:hover {
    background-color: #ddd; /* Light gray on hover */
    color: #000; /* Darker text on hover */
}

/* Optional: Style the Previous/Next arrows */
.woocommerce-pagination .page-numbers li .next,
.woocommerce-pagination .page-numbers li .prev {
    background-color: #0073aa; /* Blue background */
    color: #fff; /* White text */
}

.woocommerce-pagination .page-numbers li .next:hover,
.woocommerce-pagination .page-numbers li .prev:hover {
    background-color: #005177; /* Darker blue on hover */
}


/* best deal
 * 
/* ICEPHONE - Best deal blok op variable productpagina */

/* Best deal block */
.icephone-best-deal-box{
  margin: 14px 0 18px;
}

/* Best deal - button */
.single-product form.variations_form .icephone-best-deal-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 52px !important;

  background: #75bde9 !important;
  border: 2px solid #75bde9 !important;
  color: #232323 !important;

  font-weight: 800 !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;

  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: none !important;

  transition: filter .15s ease, transform .05s ease !important;
}

.single-product form.variations_form .icephone-best-deal-btn:hover{
  filter: brightness(1.08) !important;
}

.single-product form.variations_form .icephone-best-deal-btn:active{
  transform: translateY(1px) !important;
}

/* Notice */
.single-product form.variations_form .icephone-best-deal-note{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #fff;
  background: rgba(117, 189, 233, 0.18);
  border: 1px solid rgba(117, 189, 233, 0.45);
}
.single-product form.variations_form .icephone-best-deal-note[hidden]{ display:none !important; }

/* Icephone Mini Cart Cross-Sells                                         */

.wp-block-woocommerce-mini-cart-contents .icephone-xs {
    padding: 20px 16px 8px !important;
    margin-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: transparent !important;
}

.wp-block-woocommerce-mini-cart-contents .icephone-xs__heading {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 14px !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
}

.wp-block-woocommerce-mini-cart-contents .icephone-xs__cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* ---- Kaart (is nu een <button>, hele kaart klikbaar) ---- */

.wp-block-woocommerce-mini-cart-contents .icephone-xs__card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    background: #2d2d2d !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
    text-align: left !important;
    cursor: pointer !important;
    color: inherit !important;
    font: inherit !important;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    min-height: auto !important;
}

.wp-block-woocommerce-mini-cart-contents .icephone-xs__card:hover:not(:disabled) {
    border-color: rgba(46, 162, 204, 0.5) !important;
    background: #333 !important;
}

.wp-block-woocommerce-mini-cart-contents .icephone-xs__card:active:not(:disabled) {
    transform: scale(0.99) !important;
}

.wp-block-woocommerce-mini-cart-contents .icephone-xs__card:disabled {
    opacity: 0.6 !important;
    cursor: default !important;
}

/* Loading & success states op de kaart */
.wp-block-woocommerce-mini-cart-contents .icephone-xs__card--loading {
    pointer-events: none !important;
    opacity: 0.7 !important;
}

/* Success — kaart wordt donkerblauwe tint */
.wp-block-woocommerce-mini-cart-contents .icephone-xs__card--success {
    background: #1a5f78 !important;
    border-color: #2ea2cc !important;
    pointer-events: none !important;
}

/* Plus-icoon blijft blauw maar iets donkerder zodat het nog onderscheidbaar is */
.wp-block-woocommerce-mini-cart-contents .icephone-xs__card--success .icephone-xs__add {
    background: #0d4a5f !important;
    color: #fff !important;
    transform: none !important;
}

/* ---- Image ---- */

.wp-block-woocommerce-mini-cart-contents .icephone-xs__card-img {
    display: block !important;
    flex-shrink: 0 !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #fff !important;
}

.wp-block-woocommerce-mini-cart-contents .icephone-xs__card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* ---- Info (naam + prijs) ---- */

.wp-block-woocommerce-mini-cart-contents .icephone-xs__card-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.wp-block-woocommerce-mini-cart-contents .icephone-xs__card-name {
    display: -webkit-box !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #fff !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.wp-block-woocommerce-mini-cart-contents .icephone-xs__card-price {
    display: block !important;
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.wp-block-woocommerce-mini-cart-contents .icephone-xs__card-price ins {
    text-decoration: none !important;
    font-weight: 600 !important;
    color: #fff !important;
}

.wp-block-woocommerce-mini-cart-contents .icephone-xs__card-price del {
    opacity: 0.5 !important;
    margin-right: 4px !important;
}

/* ---- "+" icoon (decoratief, niet klikbaar apart) ---- */

.wp-block-woocommerce-mini-cart-contents .icephone-xs__add {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #2ea2cc !important;
    color: #000 !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Bij hover op de kaart, animeer het + icoon mee */
.wp-block-woocommerce-mini-cart-contents .icephone-xs__card:hover:not(:disabled) .icephone-xs__add {
    background: #268fb4 !important;
    transform: scale(1.05) !important;
}

.wp-block-woocommerce-mini-cart-contents .icephone-xs__add svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
}

/* ---- Skeleton loader ---- */

.wp-block-woocommerce-mini-cart-contents .icephone-xs__skeleton-box,
.wp-block-woocommerce-mini-cart-contents .icephone-xs__skeleton-line,
.wp-block-woocommerce-mini-cart-contents .icephone-xs__skeleton-btn {
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 75%) !important;
    background-size: 200% 100% !important;
    animation: icephone-xs-shimmer 1.4s ease-in-out infinite !important;
    border-radius: 4px !important;
}

.wp-block-woocommerce-mini-cart-contents .icephone-xs__skeleton-box {
    width: 56px !important;
    height: 56px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
}

.wp-block-woocommerce-mini-cart-contents .icephone-xs__skeleton-line {
    height: 12px !important;
    margin-bottom: 6px !important;
    width: 80% !important;
}

.wp-block-woocommerce-mini-cart-contents .icephone-xs__skeleton-line--short {
    width: 40% !important;
    margin-bottom: 0 !important;
}

.wp-block-woocommerce-mini-cart-contents .icephone-xs__skeleton-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

@keyframes icephone-xs-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.wp-block-woocommerce-mini-cart-contents .icephone-xs,
.wp-block-woocommerce-mini-cart-contents .icephone-xs__card {
    overflow: hidden !important;
}
.wp-block-woocommerce-mini-cart-contents .wp-block-woocommerce-mini-cart-items-block {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* En ook op het parent filled content block */
.wp-block-woocommerce-mini-cart-contents .wp-block-woocommerce-filled-mini-cart-contents-block {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Updating state: oude cards dimmen, kleine loader naast de titel */
.wp-block-woocommerce-mini-cart-contents .icephone-xs__heading {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.wp-block-woocommerce-mini-cart-contents .icephone-xs__loader {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    border-top-color: #2ea2cc !important;
    border-radius: 50% !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

.wp-block-woocommerce-mini-cart-contents .icephone-xs--updating .icephone-xs__loader {
    opacity: 1 !important;
    animation: icephone-xs-spin 0.7s linear infinite !important;
}

.wp-block-woocommerce-mini-cart-contents .icephone-xs--updating .icephone-xs__cards {
    opacity: 0.5 !important;
    transition: opacity 0.2s ease !important;
    pointer-events: none !important;
}

@keyframes icephone-xs-spin {
    to { transform: rotate(360deg); }
}