/* =========================================================================
   Design refresh layer — loaded AFTER style.css.
   Additive overrides only. Remove the <link> in index_tpl.php to revert.
   ========================================================================= */

:root {
    --brand-primary       : #00abed;
    --brand-primary-hover : #0091c9;
    --brand-primary-soft  : rgba(0, 171, 237, 0.10);
    --brand-accent        : #ee2d7a;
    --brand-warm          : #fdefe1;

    --text-primary   : #1a1f2e;
    --text-secondary : #525866;
    --text-muted     : #8a93a3;

    --surface    : #ffffff;
    --background : #f6f8fb;
    --border     : #e6e8ec;

    --radius-xs : 4px;
    --radius-sm : 6px;
    --radius-md : 10px;
    --radius-lg : 14px;
    --radius-xl : 20px;

    --shadow-xs : 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-sm : 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md : 0 4px 10px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
    --shadow-lg : 0 14px 28px -6px rgba(16, 24, 40, 0.10), 0 6px 10px -4px rgba(16, 24, 40, 0.04);

    --ease-smooth : cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast    : 150ms;
    --dur-base    : 220ms;
}

/* -------------------------------------------------------------------------
   Typography — subtle polish, better rendering
   ------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust : 100%;
}

body {
    background              : var(--background);
    color                   : var(--text-primary);
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
    text-rendering          : optimizeLegibility;
    letter-spacing          : -0.005em;
}

h1, h2, h3, h4, h5, h6 {
    color          : var(--text-primary);
    letter-spacing : -0.02em;
    font-weight    : 600;
}

p {
    line-height : 1.6;
}

::selection {
    background : var(--brand-primary);
    color      : #ffffff;
}

/* -------------------------------------------------------------------------
   Scrollbar — smoother, wider, more modern
   ------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width  : 10px;
    height : 10px;
}

::-webkit-scrollbar-track {
    background       : transparent;
    -webkit-box-shadow : none;
    box-shadow         : none;
}

::-webkit-scrollbar-thumb {
    background-color : rgba(0, 171, 237, 0.45);
    border-radius    : 10px;
    border           : 2px solid var(--background);
    transition       : background-color var(--dur-base) var(--ease-smooth);
}

::-webkit-scrollbar-thumb:hover {
    background-color : var(--brand-primary);
}

/* -------------------------------------------------------------------------
   Links — smoother state transitions
   ------------------------------------------------------------------------- */
a {
    transition : color var(--dur-fast) var(--ease-smooth),
                 opacity var(--dur-fast) var(--ease-smooth);
}

/* -------------------------------------------------------------------------
   Focus states — accessible & on-brand
   ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline        : 2px solid var(--brand-primary);
    outline-offset : 2px;
    border-radius  : var(--radius-xs);
}

/* Keep mouse users unbothered */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline : none;
}

/* -------------------------------------------------------------------------
   Form inputs — softer borders, branded focus
   ------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea,
select {
    transition : border-color var(--dur-base) var(--ease-smooth),
                 box-shadow   var(--dur-base) var(--ease-smooth),
                 background   var(--dur-base) var(--ease-smooth);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover {
    border-color : #cfd4db;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color : var(--brand-primary);
    box-shadow   : 0 0 0 3px var(--brand-primary-soft);
    outline      : none;
}

/* -------------------------------------------------------------------------
   Buttons — smoother interaction, softer radius
   ------------------------------------------------------------------------- */
button,
.btn,
input[type="button"],
input[type="submit"] {
    transition : background-color var(--dur-base) var(--ease-smooth),
                 color            var(--dur-base) var(--ease-smooth),
                 border-color     var(--dur-base) var(--ease-smooth),
                 box-shadow       var(--dur-base) var(--ease-smooth),
                 transform        var(--dur-fast) var(--ease-smooth);
}

button:not(:disabled):active,
.btn:not(:disabled):active,
input[type="button"]:not(:disabled):active,
input[type="submit"]:not(:disabled):active {
    transform : translateY(1px);
}

/* Soften radius on the product-detail "buttons" row */
.product_buttons button,
.product_paramth button {
    border-radius : var(--radius-sm);
}

.product_buttons button:hover {
    background : var(--text-primary);
}

/* Filter buttons — modern pill feel */
.filter_button {
    border-radius : var(--radius-md);
}

/* -------------------------------------------------------------------------
   Product cards — softer hover lift
   ------------------------------------------------------------------------- */
.product_item_hover,
.propose_slider_item,
.products_gellery_inside .product_item {
    transition : transform   var(--dur-base) var(--ease-smooth),
                 box-shadow  var(--dur-base) var(--ease-smooth),
                 border-color var(--dur-base) var(--ease-smooth);
    border-radius : var(--radius-md);
}

.product_item_hover:hover,
.propose_slider_item:hover,
.products_gellery_inside .product_item:hover {
    transform  : translateY(-2px);
    box-shadow : var(--shadow-md);
}

.propose_slider_item img,
.product_item_hover img {
    transition : transform var(--dur-base) var(--ease-smooth);
}

.propose_slider_item:hover img,
.product_item_hover:hover img {
    transform : scale(1.02);
}

/* -------------------------------------------------------------------------
   Price emphasis
   ------------------------------------------------------------------------- */
.slider_item_discount {
    font-weight : 600;
}

.slider_item_price_old {
    color : var(--text-muted);
}

.slider_item_price_old:before {
    background-color : var(--text-muted);
}

/* -------------------------------------------------------------------------
   Header top strip — a touch more breathing room
   ------------------------------------------------------------------------- */
.header_top {
    padding : 6px 0;
}

.header_top a {
    transition : color var(--dur-fast) var(--ease-smooth);
}

/* -------------------------------------------------------------------------
   Scroll-to-top — modern soft shadow
   ------------------------------------------------------------------------- */
#scroll_up {
    background    : var(--brand-primary);
    box-shadow    : var(--shadow-lg);
    border-radius : 50%;
    transition    : background-color var(--dur-base) var(--ease-smooth),
                    transform       var(--dur-base) var(--ease-smooth),
                    box-shadow      var(--dur-base) var(--ease-smooth);
}

#scroll_up:hover {
    background : var(--brand-primary-hover);
    transform  : translateY(-2px);
}

/* -------------------------------------------------------------------------
   Breadcrumbs — quieter, more refined
   ------------------------------------------------------------------------- */
.breadcrumb,
.breadcrumbs {
    font-size : 13px;
    color     : var(--text-muted);
}

.breadcrumb a,
.breadcrumbs a {
    color : var(--text-secondary);
}

.breadcrumb a:hover,
.breadcrumbs a:hover {
    color : var(--brand-primary);
}

/* -------------------------------------------------------------------------
   Images — avoid jagged edges on resize
   ------------------------------------------------------------------------- */
img {
    image-rendering : -webkit-optimize-contrast;
}

/* -------------------------------------------------------------------------
   Modal / popup polish — softer corners & shadow when present
   ------------------------------------------------------------------------- */
.modal-content {
    border        : none;
    border-radius : var(--radius-lg);
    box-shadow    : var(--shadow-lg);
}

/* -------------------------------------------------------------------------
   Table zebra — slightly cooler
   ------------------------------------------------------------------------- */
.table_list_of_compares_bottom:nth-child(odd) {
    background : #eef9fe;
}

/* -------------------------------------------------------------------------
   Reduced-motion users — honor system preference
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration   : 0.001ms !important;
        animation-iteration-count : 1 !important;
        transition-duration  : 0.001ms !important;
        scroll-behavior      : auto !important;
    }
}