/* Fonts */
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/asap-v30-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/asap-v30-latin_latin-ext-700.woff2') format('woff2');
}
/* Variables */
:root {
  /* General */
  --border-radius: 8px;
  --gutter-x: 0.5rem;
  --gutter-y: 1rem;
  --link-text-color: #222;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --whitespace-color: #fff;
  --site-background-color: #f9fafc;
  --sidebar-width: 300px;
  /* Important Notice */
  --important-notice-background-color: #222;
  --important-notice-text-color: #fff;
  --header-background-color: transparent;
  --header-text-color: var(--default-text-color);
  /* Cookie Notice */
  --cookie-notice-background-color: rgba(45, 45, 56, 0.75);
  --cookie-notice-text-color: #fff;
  /* Navigation */

  --navigation-background-color: #f2fafff5;
  --navigation-background-color-hover: rgba(0, 0, 0, 0.05);
  --navigation-background-color-active: rgba(0, 0, 0, 0.15);
  --navigation-text-color: #222;
  --navigation-text-color-hover: var(--navigation-text-color);
  --navigation-text-color-active: var(--navigation-text-color);
  /* Navigation */
  --offcanvas-background-color: var(--navigation-background-color);
  --offcanvas-text-color: var(--navigation-text-color);
  /* Defaults */
  --default-background-color: #edeff3;
  --default-border-color: #efeff9;
  --default-line-height: 1.3333;
  --default-text-font: 'Asap', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --default-text-color: #222;
  --default-text-size: 15px;
  /* Buttons */
  --default-button-background-color: #0284c7;
  --default-button-background-color-hover: #0074ad;
  --default-button-background-color-active: #0074ad;
  --default-button-border-color: rgba(0, 0, 0, 0.075);
  --default-button-text-color: #fff;
  --primary-button-background-color: #2e9cd4;
  --primary-button-background-color-hover: #ddd;
  --primary-button-background-color-active: #bdbdbd;
  --primary-button-border-color: rgba(0, 0, 0, 0.075);
  --primary-button-text-color: #fff;
  --success-button-background-color: #98cc34;
  --success-button-background-color-hover: #9dcf3e;
  --success-button-background-color-active: #89b82e;
  --success-button-border-color: rgba(0, 0, 0, 0.075);
  --success-button-text-color: #fff;
  --warning-button-background-color: #f0ad4e;
  --warning-button-background-color-hover: #f2b866;
  --warning-button-background-color-active: #f1b25a;
  --warning-button-border-color: rgba(0, 0, 0, 0.1);
  --warning-button-text-color: #aa0000;
  --danger-button-background-color: #d9534f;
  --danger-button-background-color-hover: #de6764;
  --danger-button-background-color-active: #db5d59;
  --danger-button-border-color: rgba(0, 0, 0, 0.1);
  --danger-button-text-color: #fff;
  /* Notices */
  --default-notice-background-color: #e6e8ed;
  --default-notice-text-color: #000;
  --default-notice-border-color: #e6e8ed;
  --primary-notice-background-color: #3ba5c6;
  --primary-notice-text-color: #fff;
  --primary-notice-border-color: #3ba5c6;
  --success-notice-background-color: #98cc34;
  --success-notice-text-color: #fff;
  --success-notice-border-color: #98cc34;
  --warning-notice-background-color: #ffcc66;
  --warning-notice-text-color: #aa0000;
  --warning-notice-border-color: #ffcc66;
  --danger-notice-background-color: #d9534f;
  --danger-notice-text-color: #fff;
  --danger-notice-border-color: #d9534f;
  /* Breadcrumbs */
  --breadcrumbs-background-color: #e8f1fdeb;
  --breadcrumbs-text-color: #555;
  --breadcrumbs-border-color: transparent;
  /* Cards */
  --card-background-color: #fff;
  --card-text-color: var(--default-text-color);
  --card-border-color: var(--default-border-color);
  --card-header-background-color: transparent;
  --card-header-text-color: var(--card-text-color);
  --card-body-background-color: transparent;
  --card-footer-background-color: #fbfbfd;
  /* Input */
  --input-background-color: #FFFFFF;
  --input-padding-x: 1.5em;
  --input-padding-y: 0.5em;
  --input-text-color: #000;
  --input-border-radius: 1em;
  /* Pills */
  --pills-background-color: transparent;
  --pills-background-color-active: #dde5ff73;
  --pills-background-color-hover: #f1f3f7;
  --pills-text-color: var(--default-text-color);
  --pills-text-color-active: #222;
  /* Tabs */
  --tabs-pane-background-color: #eff2f5;
  --tabs-pane-border-color: var(--tabs-pane-background-color);
  --tabs-background-color: #e8e8eb;
  --tabs-background-color-active: #fff;
  --tabs-text-color: #333;
  --tabs-text-color-active: var(--tabs-text-color);
  --tabs-border-color: var(--tabs-background-color);
  --tabs-border-color-active: var(--tabs-background-color-active);
  --tabs-content-background-color: #fff;
  /* Dropdowns */
  --dropdown-menu-background-color: #fff;
  --dropdown-menu-item-background-color: var(--dropdown-menu-background-color);
  --dropdown-menu-item-text-color: var(--default-text-color);
  /* Tables */
  --table-striped-row-background-odd: #f5f6f9;
  --table-striped-row-background-even: #fff;
  --table-row-hover-background: #ececec;
  /* Pagination */
  --pagination-background-color: var(--default-background-color);
  --pagination-background-color-active: #d7dae3;
  --pagination-background-color-hover: #e7e8ed;
  --pagination-text-color: var(--default-text-color);
  --pagination-text-color-active: var(--default-text-color);
  --pagination-text-color-hover: var(--default-text-color);
  --pagination-border-color: var(--default-border-color);
  /* Footer */
  --footer-background-color: #ededf1;
  --footer-title-color: #FFFFFF;
  --footer-text-color: var(--default-text-color);
  /* Copyright */
  --copyright-background-color: #e2e2e7;
  --copyright-text-color: var(--default-text-color);
}
@media (min-width: 768px) {
  :root {
    --gutter-x: 1rem;
    --gutter-y: 1rem;
  }
}
@media (min-width: 992px) {
  :root {
    --gutter-x: 1.5rem;
    --gutter-y: 1.5rem;
  }
}
@media (min-width: 1200px) {
  :root {
    --gutter-x: 2rem;
    --gutter-y: 2rem;
  }
}



/* NUEVO LOOK TEST */
:root {
    --primary-gray: #f4f4f5; /* Zinc-100 style */
    --border-radius: 12px;
    --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Give cards and boxes that Tailwind 'rounded-xl' look */
.card, .box, #box-logotype, .input-group {
    border-radius: var(--border-radius) !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: var(--card-shadow);
    background-color: #ffffff;
}





/* Cleaner Typography */
body {
    font-family: 'Inter', -apple-system, sans-serif !important;
    color: #374151;
   /* background-color: var(--primary-gray) !important;*/
background: linear-gradient(135deg, #f0f9ff 0%, #e0e7ff 100%) !important;
min-height: 100vh;
}

.card {
background: rgba(255, 255, 255, 0.45) !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 10px 40px -10px rgba(100, 116, 139, 0.15) !important;
}

/* caja de categorias */
#box-categories {
    background: #ffffff00 !important;
    border: none !important;
    box-shadow: none !important;
}

#box-categories > .card-header > .card-title {
text-align:center;
}

#box-category-tree {
padding:1em;
}

#box-manufacturer-links {
padding:1em;
margin-bottom:1em;
background: rgba(255, 255, 255, 0.45) !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 10px 40px -10px rgba(100, 116, 139, 0.15) !important;
}

#box-category-tree {
padding:1em;
margin-bottom:1em;
background: rgba(255, 255, 255, 0.45) !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 10px 40px -10px rgba(100, 116, 139, 0.15) !important;
}

.navbar-header form[name="search_form"] .input-group {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(203, 213, 225, 0.6) !important;
    transition: all 0.3s ease !important;

    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(203, 213, 225, 0.6) !important;
    box-shadow: 0 10px 40px -10px rgba(100, 116, 139, 0.15) !important;
}

#footer {
    background-color: #1e293b !important;
color: #9ca3af  !important;
}

#copyright {
    background-color: #1e293b !important;
color: #9ca3af  !important;
}

/* carusel */
 /* Custom button styling for aesthetic appeal */
        .cta-button {
            transition: all 0.2s ease-in-out;
            background-image: linear-gradient(135deg, #0d5394ff 0%, #056196ff 100%);
color:#fff !important;
        }
        .cta-button:hover {
            box-shadow: 0 8px 20px rgba(5, 56, 150, 0.4);
            transform: translateY(-2px);
        }
        .category-card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            border-color: #0d5394ff;
        }

        /* Responsive image aspect ratio for hero cards */
        .product-image {
            aspect-ratio: 1/1; /* Square aspect ratio */
        }

        /* Style for mock brand logos (grayscale for professional look) */
        .brand-logo {
            filter: grayscale(100%);
            opacity: 0.6;
            transition: all 0.3s ease-in-out;
        }
        .brand-logo:hover {
            filter: grayscale(0%);
            opacity: 1;
        }

        .portada-uno{
            background: linear-gradient(to bottom right, #f8fdff, #a8aff4);
        }
        .portada-dos .cta-button{
           background-image: linear-gradient(135deg, #062249 0%, #085736 100%) !important;
           color: #fff !important;
        }
        .portada-dos h1 {
           color: #fff !important;
        }
        .portada-dos .borroso {
           text-shadow: 1px 3px 19px #000000;
        }
        .portada-tres{
            background: linear-gradient(to bottom right, #b4ffe8ff, #7efaa9ff);
        }

        .caja-recarga{
            background-image: linear-gradient(to bottom, #fcfcff, #dde9ff);
        }




#box-regional-settings {
background:rgb(255 255 255 / 95%) !important;
}

.featherlight-content.featherlight-seamless > #box-product > .card
Specificity: (1,3,0)
 {
    background: #fffffff0 !important;
}

/* LOGIN */
.featherlight-content #box-login {
    background: rgb(255 255 255 / 95%) !important;
}

.dropdown .dropdown-menu {
    background-color: #f5faff; !important;
}


/* Checkout cambios */
#box-checkout-payment {
    margin: 0;
    margin-bottom: var(--gutter-y);
    border-radius: var(--border-radius);
    color: var(--card-text-color);
    padding:1rem;
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 10px 40px -10px rgba(100, 116, 139, 0.15) !important;
}


#box-checkout-shipping .option.active, #box-checkout-payment .option.active {
  background: #f0f7ff !important;
  border: 2px solid #0093ff;
  transform: scale(1.01);
  color: #0255c0;
  font-weight: 500;
}

#box-checkout-shipping .option, #box-checkout-payment .option {
margin-bottom: 0.8em;
color: #494949;
  box-shadow: none;
}

div.featherlight-content #box-product > .card {
    background-color: #ffffffe8 !important;
}

#box-checkout-payment label.option {
border-radius:var(--input-border-radius) !important;
}

#box-checkout-payment .thumbnail {
    display: flex;
    align-items: center;
}

/* checkout shipping */
#box-checkout-shipping {
    margin: 0;
    margin-bottom: var(--gutter-y);
    border-radius: var(--border-radius);
    color: var(--card-text-color);
    padding:1rem;
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 10px 40px -10px rgba(100, 116, 139, 0.15) !important;
}

#box-checkout-shipping label.option {
    border-radius:var(--input-border-radius) !important;
}

/* pago ach */
.pago-ach {
    padding: 0 0.5rem;
    color: var(--default-text-color);
}
.pago-ach label{
font-size: small;
}

/* ACH modulo de pago */
#estilo-checkbox input[type="checkbox"]:checked {
background:rgb(37 99 235 / var(--tw-bg-opacity, 1));
background-image:none !important;
}