/* =====================================================================
 * Servatech — servatech-theme.css   (soft & professional palette)
 * =====================================================================
 * Light/airy body + content aesthetic. Softened, complementary palette:
 *
 *   Brand orange (softened)  #e8703a   (was #f15a29 — warmer, less neon)
 *   Orange hover             #cf5d2b
 *   Complementary teal       #2f8f86   (accent that blends with orange)
 *   Ink / headings           #293241   (soft charcoal-slate, NOT near-black)
 *   Cool neutrals            soft greys #e6ebf2 / #f5f7fa on white cards
 *
 * Model: orange = brand/action highlight; teal = secondary/complementary
 * accent; soft cool-greys = structure; ink = headings. Loaded AFTER
 * stylesheet.css + header.css so it also overrides stock OpenCart blue.
 *
 * SCOPE: storefront CONTENT (stock OC3 classes under #content, plus global
 * .btn-primary / .form-control / .panel / .product-thumb). Header + footer
 * chrome keep their own rules (header.css / footer.twig). No markup, data
 * binding, calculation or service logic is changed here.
 * ===================================================================== */

:root {
    --sv-primary:        #e8703a;   /* softened brand orange — actions, links, accents */
    --sv-primary-d:      #cf5d2b;   /* hover  */
    --sv-primary-dd:     #b54e22;   /* active */
    --sv-primary-l:      #f4a06f;   /* light soft orange — subtle fills   */
    --sv-primary-tint:   #fdf2ec;   /* very soft peach — selected/hover bg */
    --sv-primary-tint-bd:#f6d9c9;   /* soft peach border                   */

    --sv-teal:           #2f8f86;   /* complementary teal — secondary/info accent */
    --sv-teal-d:         #24756d;   /* teal hover */
    --sv-teal-tint:      #e7f3f1;   /* soft teal wash */

    --sv-ink:            #293241;   /* headings / strong text (soft charcoal-slate) */
    --sv-text:           #48546a;   /* body text  */
    --sv-muted:          #7c8798;   /* muted text */

    --sv-bg:             #f5f7fa;   /* soft page background */
    --sv-bg-soft:        #fbfcfe;   /* input / inset background */
    --sv-card:           #ffffff;   /* card interior */
    --sv-border:         #e6ebf2;   /* card border (cool grey) */
    --sv-border-soft:    #eef2f7;   /* hairline border */

    --sv-error:          #b91c1c;
    --sv-success:        #2f8f6a;

    --sv-shadow-sm: 0 1px 2px rgba(41, 50, 65, 0.04), 0 1px 3px rgba(41, 50, 65, 0.05);
    --sv-shadow-md: 0 4px 10px -2px rgba(41, 50, 65, 0.06), 0 2px 6px -2px rgba(41, 50, 65, 0.05);
    --sv-shadow-lg: 0 16px 34px -12px rgba(41, 50, 65, 0.12), 0 6px 14px -6px rgba(41, 50, 65, 0.06);

    --sv-radius:    14px;
    --sv-radius-sm: 9px;
}

/* ---------------------------------------------------------------------
   Base — Inter workhorse face, soft page backdrop.
   (footer.twig pins Montserrat on `footer`, so the footer is unaffected.)
   --------------------------------------------------------------------- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Open Sans', sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--sv-bg);
    color: var(--sv-text);
}

/* ---------------------------------------------------------------------
   Content typography — Plus Jakarta Sans display headings in soft ink.
   Scoped to #content so header + footer headings keep their own styling.
   --------------------------------------------------------------------- */
#content h1, #content h2, #content h3,
#content h4, #content h5, #content h6 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    color: var(--sv-ink);
    letter-spacing: -0.015em;
}
#content h1 { font-weight: 800; }
#content h2 { font-weight: 700; }
#content h3, #content h4 { font-weight: 600; }
#content p { color: var(--sv-text); line-height: 1.65; }

/* Content links carry the brand orange. Low specificity (plain `a`) so it
   recolours generic links without out-specifying the component rules below;
   header + footer links keep their own higher-specificity colours. */
a {
    color: var(--sv-primary);
    transition: color 0.15s ease;
}
a:hover,
a:focus {
    color: var(--sv-primary-d);
}

/* ---------------------------------------------------------------------
   Buttons — .btn-primary is the softened orange brand action.
   (overrides the stock OpenCart blue that survives in stylesheet.css)
   --------------------------------------------------------------------- */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
    background: linear-gradient(135deg, var(--sv-primary) 0%, var(--sv-primary-d) 100%);
    border-color: var(--sv-primary-d);
    color: #ffffff;
    font-weight: 600;
    text-shadow: none;
    box-shadow: 0 2px 8px rgba(232, 112, 58, 0.25);
    transition: all 0.2s ease;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background: linear-gradient(135deg, var(--sv-primary-d) 0%, var(--sv-primary-dd) 100%);
    border-color: var(--sv-primary-dd);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(232, 112, 58, 0.34);
    transform: translateY(-1px);
}
#button-cart { font-weight: 600; }

/* Secondary / default buttons: clean neutral card-button, teal on hover
   (the complementary accent shows up here as a subtle cue). */
.btn-default {
    background: #ffffff;
    border: 1px solid var(--sv-border);
    color: var(--sv-ink);
    font-weight: 500;
    transition: all 0.2s ease;
}
.btn-default:hover,
.btn-default:focus {
    background: var(--sv-teal-tint);
    border-color: var(--sv-teal);
    color: var(--sv-teal-d);
}

/* Optional teal action button, if a template opts in with .btn-accent */
.btn-accent {
    background: linear-gradient(135deg, var(--sv-teal) 0%, var(--sv-teal-d) 100%);
    border-color: var(--sv-teal-d);
    color: #ffffff;
    font-weight: 600;
}
.btn-accent:hover, .btn-accent:focus { background: var(--sv-teal-d); color: #ffffff; }

/* ---------------------------------------------------------------------
   Form controls — rounded, soft inset, orange focus ring.
   --------------------------------------------------------------------- */
.form-control {
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
    background: var(--sv-bg-soft);
    color: var(--sv-text);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.form-control:hover { background: #ffffff; }
.form-control:focus {
    border-color: var(--sv-primary);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(232, 112, 58, 0.14);
}
.input-group-addon {
    background: var(--sv-bg);
    border: 1px solid var(--sv-border);
    color: var(--sv-muted);
    border-radius: var(--sv-radius-sm);
}

/* ---------------------------------------------------------------------
   Panels → "card on soft page".
   --------------------------------------------------------------------- */
.panel {
    background: var(--sv-card);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow-sm);
    overflow: hidden;
}
.panel-default > .panel-heading {
    background: var(--sv-bg-soft);
    border-bottom: 1px solid var(--sv-border-soft);
    color: var(--sv-ink);
}
.panel-title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 600;
    color: var(--sv-ink);
}
.panel-body { color: var(--sv-text); }

.well {
    background: var(--sv-card);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow-sm);
}

/* ---------------------------------------------------------------------
   Product cards.
   --------------------------------------------------------------------- */
.product-thumb {
    background: var(--sv-card);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow-sm);
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.product-thumb:hover {
    border-color: var(--sv-primary-tint-bd);
    box-shadow: var(--sv-shadow-lg);
    transform: translateY(-4px);
}
.product-thumb .image { border-bottom: 1px solid var(--sv-border-soft); }
.product-thumb .caption h4 a {
    color: var(--sv-ink);
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 600;
}
.product-thumb .caption h4 a:hover { color: var(--sv-primary); }
.product-thumb .price { color: var(--sv-ink); font-weight: 700; }
.product-thumb .price-new { color: var(--sv-primary); }
.product-thumb .price-tax { color: var(--sv-muted); font-weight: 400; }

/* ---------------------------------------------------------------------
   Breadcrumb — light pill strip.
   --------------------------------------------------------------------- */
.breadcrumb {
    background: var(--sv-card);
    border: 1px solid var(--sv-border-soft);
    border-radius: var(--sv-radius-sm);
    box-shadow: var(--sv-shadow-sm);
    padding: 10px 16px;
}
.breadcrumb > .active { color: var(--sv-muted); }

/* ---------------------------------------------------------------------
   List group, tables, tabs, pagination, alerts.
   Orange = primary/active; teal = informational (complementary).
   --------------------------------------------------------------------- */
.list-group-item { border-color: var(--sv-border-soft); }
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background: var(--sv-primary);
    border-color: var(--sv-primary);
    color: #ffffff;
}
a.list-group-item:hover { background: var(--sv-teal-tint); }

.table > thead > tr > th { color: var(--sv-ink); border-bottom-color: var(--sv-border); }
.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > thead > tr > th { border-color: var(--sv-border-soft); }

.nav-tabs { border-bottom-color: var(--sv-border); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--sv-primary);
    border-color: var(--sv-border) var(--sv-border) transparent;
}
.nav-tabs > li > a:hover { border-color: var(--sv-border-soft); }

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
    background: var(--sv-primary);
    border-color: var(--sv-primary);
}
.pagination > li > a { color: var(--sv-primary); }
.rating .fa-star,
.rating .fa-star-half-o { color: var(--sv-primary); }

/* Informational accents use the complementary teal */
.alert-info {
    background: var(--sv-teal-tint);
    border-color: #bfe0db;
    color: var(--sv-teal-d);
}
.label-info, .badge-info { background: var(--sv-teal); }
.text-info { color: var(--sv-teal) !important; }

/* ---------------------------------------------------------------------
   Optional utility classes — opt-in card wrappers (no template needs them).
   --------------------------------------------------------------------- */
.sv-card {
    background: var(--sv-card);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow-sm);
    padding: 22px;
}
.sv-soft-panel {
    background: linear-gradient(180deg, #ffffff 0%, var(--sv-bg) 100%);
    border: 1px solid var(--sv-border-soft);
    border-radius: 18px;
    box-shadow: var(--sv-shadow-lg);
    padding: 32px;
}