/* ================================================================
   ieServices Design System — Full Theme Modernization
   Source of truth: /static/styleguide_ieservices.html v1.1
   Updated: 2026-04-10

   This file modernizes the 2015 Bretheon theme to the 2026
   ieServices design system. Loaded last via header.php <link>
   to override all dynamic PHP stylesheets.
   ================================================================ */


/* ================================================================
   0. DESIGN TOKENS
   ================================================================ */
:root {
  --primary:         #3FA8D2;
  --primary-dark:    #1B87B1;
  --primary-light:   #53a3e0;
  --primary-deep:    #326e9b;
  --primary-deeper:  #09526f;
  --primary-navy:    #213442;
  --primary-gradient: linear-gradient(135deg, #326e9b 0%, #53a3e0 50%, #73a7cf 100%);
  --primary-alpha-08: rgba(63,168,210,0.08);
  --primary-alpha-10: rgba(63,168,210,0.10);
  --primary-alpha-20: rgba(63,168,210,0.20);
  --accent-1: #2a2f35;
  --accent-2: #3e444b;
  --accent-3: #326e9b;
  --accent-4: #53a3e0;
  --accent-5: #73a7cf;
  --gradient-brand:   linear-gradient(135deg, #2a2f35 0%, #326e9b 40%, #53a3e0 70%, #73a7cf 100%);
  --gradient-brand-h: linear-gradient(to right, #2a2f35 0%, #326e9b 40%, #53a3e0 70%, #73a7cf 100%);
  --gradient-cta:     linear-gradient(135deg, #326e9b 0%, #3FA8D2 100%);
  --gradient-hero:    linear-gradient(135deg, #2a2f35 0%, #326e9b 60%, #53a3e0 100%);
  --brand-yellow: #F5C518;
  --brand-yellow-dark: #E8A800;
  --active:      #629ac2;
  --active-menu: #3C95B8;
  --success: #10b981;
  --danger:  #ef4444;
  --warning: #f59e0b;
  --info:    #3b82f6;
  --bg:           #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-widget:    #fcfcfc;
  --bg-accordion: #fbfbfb;
  --card:         #ffffff;
  --border:       #ebebeb;
  --border-light: #f1f5f9;
  --border-input: #d8d8d8;
  --text:           #313131;
  --text-secondary: #676f76;
  --text-muted:     #A3A3A3;
  --text-dark-blue: #005274;
  --text-menu:      #213442;
  --radius-sm:   4px;
  --radius:      6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.05);
  --shadow:       0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:    0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl:    0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
  --shadow-inset: inset 2px 2px 4px 1px rgba(0,0,0,0.10);
  --shadow-wrap:  0px 0px 3px rgba(0,0,0,0.1);
  --transition:      200ms ease;
  --transition-fast: 150ms ease;
  --transition-slow: 800ms ease;
  --z-dropdown:  1000;
  --z-modal:     1050;
  --z-tooltip:   1060;
  --grid-max:    960px;
  --wrapper-max: 1000px;
  --font:       'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-serif: Cambria, Georgia, 'Times New Roman', serif;
  --font-mono:  'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}


/* ================================================================
   1. GLOBAL RESET & BASE — the 2026 foundation
   ================================================================ */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--text-secondary) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ================================================================
   2. TYPOGRAPHY — modern scale, breathing room
   Scoped to #Content / #Footer to avoid breaking header logo h1
   ================================================================ */

/* Headings inside content and footer — NOT #Header h1 (logo) */
#Content h1, #Content h1 a,
#Footer h1, #Footer h1 a,
#Subheader h1 {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size: 2rem !important;
  line-height: 1.2 !important;
  color: var(--text) !important;
}

#Content h2, #Content h2 a,
#Footer h2, #Footer h2 a {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size: 1.55rem !important;
  line-height: 1.2 !important;
  color: var(--text) !important;
}

#Content h3, #Content h3 a,
.get_in_touch h3,
#Footer h3, #Footer h3 a {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  line-height: 1.2 !important;
  color: var(--text) !important;
}

#Content h4, #Content h4 a,
#Footer h4, #Footer h4 a {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  line-height: 1.2 !important;
  color: var(--text) !important;
}

#Content h5, #Content h5 a,
#Footer h5, #Footer h5 a {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  line-height: 1.3 !important;
  color: var(--primary-deeper) !important;
}

#Content h6, #Content h6 a,
#Footer h6, #Footer h6 a {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  line-height: 1.3 !important;
  color: var(--accent-2) !important;
}

p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 1.2em;
}

b, strong { font-weight: 600; color: var(--text); }
small { font-size: 0.85em; color: var(--text-muted); }

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-secondary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--primary-deep);
}

hr {
  border: none !important;
  height: 1px !important;
  background: var(--border) !important;
  margin: 2em 0 !important;
}

blockquote div.text {
  background: var(--bg-secondary) !important;
  border-radius: var(--radius) !important;
  border-left: 4px solid var(--primary) !important;
  text-shadow: none !important;
}

/* Keep 70px left padding to clear the quote icon background image */
blockquote div.text p {
  font-family: var(--font-serif) !important;
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
  color: var(--text-dark-blue) !important;
  padding: 20px 24px 20px 70px !important;
}

blockquote p.author {
  font-size: 0.9rem !important;
  color: var(--text-muted) !important;
  padding-left: 70px !important;
}

blockquote p.author span {
  color: var(--text-dark-blue) !important;
  font-weight: 600 !important;
}


/* ================================================================
   3. LINKS — clean, modern
   ================================================================ */

/* Links — scoped, don't break Socialico icons or header nav */
#Content a, #Content a:visited,
#Footer a, #Footer a:visited,
#Subheader a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

#Content a:hover,
#Footer a:hover,
#Subheader a:hover {
  color: var(--primary-dark);
  text-decoration: none;
}

/* Underline links in content paragraphs for clarity */
#Content .the_content p a,
#Content .the_content li a,
.card-body a {
  text-decoration: underline;
  text-decoration-color: rgba(63,168,210,0.3);
  text-underline-offset: 2px;
}
#Content .the_content p a:hover,
#Content .the_content li a:hover {
  text-decoration-color: var(--primary);
}


/* ================================================================
   4. WRAPPER & LAYOUT — keep existing widths, modernize surfaces
   ================================================================ */

#Wrapper {
  background: var(--card);
  box-shadow: var(--shadow);
}

/* Full-width layout keeps its 100% width */
.layout-full-width #Wrapper {
  box-shadow: none;
}

/* Boxed layout refinement */
.layout-boxed #Wrapper {
  box-shadow: var(--shadow-lg);
}

#Content {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}


/* ================================================================
   5. HEADER — modernize colors & spacing, preserve layout structure
   ================================================================ */

#Header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

/* Logo — keep absolute position, just refine */
#Header #logo img {
  transition: opacity var(--transition);
}

#Header #logo:hover {
  text-decoration: none;
  opacity: 0.85;
}

/* Keep h1 in header invisible (it wraps the logo) */
#Header h1 {
  line-height: 0 !important;
  font-size: 0 !important;
}

/* Menu items — prevent hover shift with always-on transparent border */
#Header #menu > ul > li > a {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  color: var(--text-menu) !important;
  border: 1px solid transparent !important;
  padding: 6px 9px !important;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

#Header #menu > ul > li.submenu > a {
  padding-right: 24px !important;
}

#Header #menu > ul > li > a span {
  color: var(--text-muted) !important;
}

/* Menu hover — border appears, no size change since border was always there */
#Header #menu > ul > li > a:hover,
#Header #menu > ul > li.hover > a {
  border-color: var(--border) !important;
  padding: 6px 9px !important;
  background: var(--bg-secondary);
}

#Header #menu > ul > li > a:hover span,
#Header #menu > ul > li.hover > a span {
  color: var(--primary-deeper) !important;
}

/* Menu active state */
#Header #menu > ul > li.current-menu-item > a,
#Header #menu > ul > li.current_page_item > a,
#Header #menu > ul > li.current-menu-ancestor > a {
  color: var(--primary) !important;
}

#Header #menu > ul > li.current-menu-item > a span,
#Header #menu > ul > li.current_page_item > a span {
  color: var(--primary) !important;
}

/* Submenu parent hover — same treatment, no shift */
#Header #menu > ul > li.submenu > a:hover,
#Header #menu > ul > li.submenu.hover > a {
  color: var(--primary) !important;
  background: var(--bg-secondary) !important;
  border-color: var(--border) !important;
  padding: 6px 24px 6px 9px !important;
}

#Header #menu > ul > li ul {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 4px !important;
}

#Header #menu > ul > li ul li a {
  color: var(--text-secondary) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
  border-bottom: 1px solid var(--border-light) !important;
  border-style: solid !important;
  transition: all var(--transition-fast);
}

#Header #menu > ul > li > ul > li.last-item > a,
#Header #menu > ul > li > ul > li > ul > li.last-item > a {
  border-bottom: none !important;
}

#Header #menu > ul > li ul li a:hover,
#Header #menu > ul > li ul li.hover > a {
  background: var(--bg-secondary) !important;
  color: var(--primary) !important;
}

/* Header addons — keep position, modernize colors */
#Header .addons p.phone {
  font-family: var(--font) !important;
  color: var(--accent-5) !important;
}

#Header .addons p.phone span {
  color: var(--primary-deep) !important;
}

#Header .addons p.phone i,
#Header .addons p.mail i {
  color: var(--accent-2) !important;
}

#Header .addons p.mail a {
  color: var(--primary) !important;
}

/* Social icons — keep existing Socialico color, just refine transition */
.social li a {
  transition: opacity var(--transition-fast) !important;
}

.social li a:hover {
  opacity: 1 !important;
}


/* ================================================================
   6. SUBHEADER — modern page title
   ================================================================ */

#Subheader {
  background-color: var(--accent-1) !important;
  border-color: #66A6D8 !important;
  border-bottom-width: 3px !important;
}

#Subheader .sixteen {
  margin-bottom: 10px !important;
}

#Subheader h1 {
  color: #fff !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
}

/* Breadcrumbs — modern, clean, well-spaced */
#Subheader ul.breadcrumbs {
  font-size: 13px !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 0 !important;
}

#Subheader ul.breadcrumbs li {
  display: inline-flex !important;
  align-items: center !important;
  padding-right: 0 !important;
  color: rgba(255,255,255,0.45) !important;
  font-family: var(--font) !important;
  font-weight: 400;
  line-height: 1.4;
}

/* Hide the "You are here:" label — it's redundant, the breadcrumb pattern is universally understood */
#Subheader ul.breadcrumbs li:first-child {
  display: none !important;
}

/* Links */
#Subheader ul.breadcrumbs li a {
  color: rgba(255,255,255,0.65) !important;
  text-decoration: none !important;
  transition: color var(--transition-fast);
  padding: 2px 0;
}

#Subheader ul.breadcrumbs li a:hover {
  color: #fff !important;
  text-decoration: none !important;
}

/* Separator icon — the angle-right between items */
#Subheader ul.breadcrumbs li span {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  color: rgba(255,255,255,0.25) !important;
  font-size: 10px !important;
}

/* Last breadcrumb item (current page) — no link, subtle */
#Subheader ul.breadcrumbs li:last-child {
  color: rgba(255,255,255,0.4) !important;
  font-weight: 400;
}

#Subheader ul.breadcrumbs li:last-child a {
  color: rgba(255,255,255,0.4) !important;
  pointer-events: none;
  cursor: default;
}


/* ================================================================
   7. CONTENT & SIDEBAR — breathing room
   ================================================================ */

.widget-area {
  background: var(--bg-widget) !important;
}

/* Widget titles */
.widget-area h3,
.widget-area h4 {
  font-size: 0.9rem !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary);
  margin-bottom: 16px !important;
}

/* Widget menu */
.widget ul.menu {
  background: var(--card) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius) !important;
  overflow: hidden;
}

.widget ul.menu li a {
  color: var(--text-secondary) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--border-light) !important;
  transition: all var(--transition-fast) !important;
}

.widget ul.menu li:last-child a {
  border-bottom: none !important;
}

.widget ul.menu li a i {
  color: var(--text-muted) !important;
}

.widget ul.menu li.current_page_item a,
.widget ul.menu li a:hover {
  color: #fff !important;
  background: var(--primary) !important;
}

.widget ul.menu li.current_page_item a i,
.widget ul.menu li a:hover i {
  color: rgba(255,255,255,0.7) !important;
}


/* ================================================================
   8. BUTTONS — flat, modern, no gradients for 2026
   ================================================================ */

/* Base button refinements — keep theme gradients, add modern touches */
a.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  font-family: var(--font) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition-fast);
  cursor: pointer;
}

a:hover.button,
button:hover,
input[type="submit"]:hover {
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* CTA buttons on dark surfaces — outline style */
.call_to_action a.button {
  border-color: rgba(255,255,255,0.35) !important;
  color: #fff !important;
}

.call_to_action a:hover.button {
  border-color: rgba(255,255,255,0.6) !important;
  background: rgba(255,255,255,0.08) !important;
}

.article_box a.button,
.recent_works .header a.button {
  border-color: rgba(255,255,255,0.3) !important;
  color: #fff !important;
}

.article_box a:hover.button {
  border-color: rgba(255,255,255,0.5) !important;
}


/* ================================================================
   9. FORMS — modern, clean inputs
   ================================================================ */

/* Forms — modernize appearance, keep layout dimensions */
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  font-family: var(--font) !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  background: #F9F9F9 !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-inset) !important;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

#Content input[type="text"],
#Content input[type="password"],
#Content input[type="email"],
#Content textarea,
#Content select {
  font-size: 14px !important;
  padding: 9px 12px !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-inset), 0 0 0 3px var(--primary-alpha-10) !important;
}

label, legend {
  font-family: var(--font) !important;
  font-weight: 600;
  color: var(--text) !important;
}


/* ================================================================
   10. TABS — modern card-style
   ================================================================ */

.accordion, .faq, .ui-tabs {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
}

/* Tab nav */
.ui-tabs .ui-tabs-nav {
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg-secondary) !important;
  padding: 0 !important;
}

.ui-tabs .ui-tabs-nav li {
  border: none !important;
  margin: 0 !important;
}

.ui-tabs .ui-tabs-nav li a {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  padding: 14px 20px !important;
  text-shadow: none !important;
  background: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-top: none !important;
  transition: all var(--transition-fast);
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.ui-tabs .ui-tabs-nav li.ui-state-active a {
  color: var(--primary) !important;
  background: var(--card) !important;
  border-bottom-color: var(--primary) !important;
  border-top: none !important;
}

.ui-tabs .ui-tabs-panel {
  padding: 24px !important;
  background: var(--card) !important;
  border: none !important;
}

/* Accordion */
.accordion .question h5,
.faq .question h5 {
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  padding: 16px 20px 16px 20px !important;
  margin: 0 !important;
  background: none !important;
  text-shadow: none !important;
  border-color: var(--border) !important;
  transition: background var(--transition-fast);
}

.accordion .question h5:hover,
.faq .question h5:hover {
  background: var(--bg-secondary) !important;
}

.accordion .active h5,
.faq .active h5 {
  color: var(--primary) !important;
  background: var(--card) !important;
}

.accordion .answer,
.faq .answer {
  padding: 0 20px 20px !important;
  background: var(--card) !important;
  font-size: 14px;
  line-height: 1.65;
}

.accordion .question h5 span.icon,
.faq .question h5 span.icon {
  left: auto !important;
  right: 16px;
}


/* ================================================================
   11. CALL TO ACTION — modern
   ================================================================ */

.call_to_action {
  background: var(--primary-deep) !important;
  border-radius: var(--radius-sm) !important;
}

.call_to_action h4 {
  font-family: var(--font) !important;
  color: #fff !important;
}

.call_to_action h4 span {
  color: #B7E8FF !important;
}


/* ================================================================
   12. BLOG / POSTS — modern cards
   ================================================================ */

.post {
  margin-bottom: 32px !important;
  padding-bottom: 32px !important;
  border-bottom: 1px solid var(--border);
  overflow: visible !important;
}

.post:last-child {
  border-bottom: none;
}

.post .image {
  border-radius: var(--radius) !important;
  overflow: hidden;
}

.post .date {
  background: var(--primary) !important;
  border-radius: var(--radius-sm) !important;
  color: #fff !important;
  text-align: center;
  padding: 8px !important;
}

.post .desc {
  padding-top: 20px !important;
}

.post .desc h2 a {
  color: var(--text) !important;
  font-size: 1.3rem !important;
}

.post .desc h2 a:hover {
  color: var(--primary) !important;
}

.post .meta,
.post .desc .r_meta {
  color: var(--text-muted) !important;
  font-size: 13px !important;
}

.post .desc .meta .comments,
.post .desc .meta .comments a {
  background: var(--primary-alpha-10) !important;
  color: var(--primary-deep) !important;
  border-radius: var(--radius-full) !important;
  padding: 2px 8px;
  font-size: 12px;
}

/* Comment section */
#comments .commentlist > li {
  padding: 20px 0 !important;
}

#comments .commentlist > li .photo {
  border-radius: 50% !important;
  overflow: hidden;
}

#comments .commentlist > li .reply a.comment-reply-link {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  text-shadow: none !important;
  box-shadow: none !important;
  padding: 6px 12px !important;
  transition: all var(--transition-fast);
}

#comments .commentlist > li .reply a:hover.comment-reply-link {
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Tags */
.post .desc p.tags a,
.widget_mfn_tag_cloud a {
  color: var(--text-secondary) !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-full) !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  text-shadow: none !important;
  transition: all var(--transition-fast);
}

.post .desc p.tags a:hover,
.widget_mfn_tag_cloud a:hover {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  background: var(--primary-alpha-08) !important;
}


/* ================================================================
   13. PORTFOLIO — modern grid
   ================================================================ */

.portfolio_item {
  border-radius: var(--radius) !important;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.portfolio_item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.portfolio_item .photo {
  border: none !important;
  padding: 0 !important;
}

.portfolio_item h6 {
  color: var(--text) !important;
  font-size: 14px !important;
  text-shadow: none !important;
  margin-top: 10px;
}

.Projects_header .categories li a {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font) !important;
  border-radius: var(--radius-full) !important;
  padding: 6px 16px !important;
  font-size: 13px !important;
  text-shadow: none !important;
  transition: all var(--transition-fast);
}

.Projects_header .categories li.current-cat a,
.Projects_header .categories li a:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}


/* ================================================================
   14. OFFER / SERVICES — clean
   ================================================================ */

.offer h3 {
  color: var(--primary) !important;
  font-family: var(--font) !important;
}

.offer h2 {
  color: var(--text) !important;
}

.offer .box {
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
  transition: box-shadow var(--transition);
}

.offer .box:hover {
  box-shadow: var(--shadow-md);
}

.offer .box h5 a {
  color: var(--text) !important;
  font-family: var(--font) !important;
}


/* ================================================================
   15. ARTICLE BOXES — dark cards
   ================================================================ */

.article_box {
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
}

/* Dark background cards — ALL text must be white */
#Content .article_box .desc h6,
#Content .article_box .desc h6 b,
.article_box .desc h6 {
  color: rgba(255,255,255,0.7) !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.06em;
  font-family: var(--font) !important;
}

#Content .article_box .desc h3,
#Content .article_box .desc h3 b,
.article_box .desc h3 {
  color: #fff !important;
  font-family: var(--font) !important;
  font-size: 1.1rem !important;
}

#Content .article_box .desc a.button,
.article_box .desc a.button {
  color: #fff !important;
}

#Content .article_box .desc a.button span,
.article_box .desc a.button span {
  color: rgba(255,255,255,0.6) !important;
}

/* Also cover .recent_works with same pattern */
#Content .recent_works .header h3,
.recent_works .header h3 {
  color: #fff !important;
}

/* Any mfn-color-* background gets white text */
#Content [class*="mfn-color-"] h1,
#Content [class*="mfn-color-"] h2,
#Content [class*="mfn-color-"] h3,
#Content [class*="mfn-color-"] h4,
#Content [class*="mfn-color-"] h5,
#Content [class*="mfn-color-"] h6,
#Content [class*="mfn-color-"] h1 b,
#Content [class*="mfn-color-"] h2 b,
#Content [class*="mfn-color-"] h3 b,
#Content [class*="mfn-color-"] h4 b,
#Content [class*="mfn-color-"] h5 b,
#Content [class*="mfn-color-"] h6 b,
#Content [class*="mfn-color-"] p,
#Content [class*="mfn-color-"] a {
  color: #fff !important;
}

#Content [class*="mfn-color-"] h6 {
  color: rgba(255,255,255,0.7) !important;
}


/* ================================================================
   16. PRICING TABLE — modern
   ================================================================ */

.pricing-box {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.pricing-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.pricing-box .plan-header h3 {
  background: none !important;
}


/* ================================================================
   17. TEAM — modern cards
   ================================================================ */

.team .photo {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}

.team h4 {
  margin-top: 12px !important;
}

.team p {
  color: var(--text-secondary) !important;
}

.team .links a {
  border-radius: var(--radius-sm) !important;
}


/* ================================================================
   18. ALERTS — modern system (replaces old .alert_*)
   ================================================================ */

.alert_info, .alert_success, .alert_warning, .alert_error {
  border-radius: var(--radius) !important;
  padding: 14px 18px 14px 18px !important;
  border-left: 4px solid !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  background-repeat: no-repeat !important;
  background-position: 16px center !important;
}

.alert_info    { background-color: #eff6ff !important; border-color: var(--info) !important; color: #1e40af !important; }
.alert_success { background-color: #ecfdf5 !important; border-color: var(--success) !important; color: #065f46 !important; }
.alert_warning { background-color: #fffbeb !important; border-color: var(--warning) !important; color: #92400e !important; }
.alert_error   { background-color: #fef2f2 !important; border-color: var(--danger) !important; color: #991b1b !important; }


/* ================================================================
   19. TABLES — clean, professional
   ================================================================ */

table {
  border-collapse: collapse !important;
  width: 100% !important;
}

table thead th {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary) !important;
  background: var(--bg-secondary) !important;
  padding: 12px 16px !important;
  text-align: left !important;
  border-bottom: 2px solid var(--border) !important;
}

table tbody td {
  font-family: var(--font) !important;
  font-size: 14px !important;
  color: var(--text-secondary) !important;
  padding: 12px 16px !important;
  border-top: 1px solid var(--border-light) !important;
}

table tbody tr:hover {
  background: var(--bg-secondary);
}


/* ================================================================
   20. PAGINATION — modern pills
   ================================================================ */

.pager {
  border: none !important;
  padding: 20px 0 !important;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.pager a {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 12px !important;
  color: var(--text-secondary) !important;
  background: var(--card) !important;
  transition: all var(--transition-fast);
  width: auto !important;
  height: auto !important;
  line-height: 1.4 !important;
}

.pager a.active,
.pager a:hover.page {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}


/* ================================================================
   21. SLIDER — modern text
   ================================================================ */

#mfn-offer-slider ul.slider-wrapper > li .slide-desc h2 {
  color: #fff !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
}

#mfn-offer-slider ul.slider-wrapper > li .slide-desc p {
  color: rgba(255,255,255,0.8) !important;
  font-family: var(--font) !important;
  font-size: 15px !important;
}


/* ================================================================
   22. FOOTER — modernize
   ================================================================ */

#Footer {
  font-family: var(--font) !important;
}

/* Copyright area */
#Footer .copyrights {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 24px 0 !important;
}

#Footer .copyrights strong {
  color: var(--text);
}

#Footer .copyrights a {
  color: var(--primary) !important;
}

#Footer .copyrights a:hover {
  color: var(--primary-dark) !important;
}

/* Back to top */
#Footer a#back_to_top {
  color: var(--text-muted) !important;
  transition: color var(--transition-fast);
}

#Footer a:hover#back_to_top {
  color: var(--primary) !important;
}


/* ================================================================
   23. 404 ERROR — modern
   ================================================================ */

#Error_404 .error h2 {
  font-family: var(--font) !important;
  color: var(--text-muted) !important;
  font-size: 5rem !important;
  font-weight: 700 !important;
}

#Error_404 .error h4 {
  font-family: var(--font) !important;
  color: var(--text) !important;
  font-size: 1.3rem !important;
}

#Error_404 .error .check {
  color: var(--text-secondary);
  font-size: 15px !important;
}


/* ================================================================
   24. GLOBAL BORDERS — consistent modern borders
   ================================================================ */

.Recent_comments li, .Latest_posts li,
.get_in_touch li.label,
.pricing-box .plan-inside ul li,
.ui-widget-header,
.gallery .gallery-item .gallery-icon,
.post .footer,
#comments .commentlist > li,
#comments .commentlist li .comment-body,
.Twitter ul li,
.single-portfolio .sp-inside .sp-inside-right,
.widget_links ul li a,
.widget_meta ul li a,
.single-post .tag-cat {
  border-color: var(--border) !important;
}


/* ================================================================
   25. TRANSITIONS — everything feels alive
   ================================================================ */

a.button, input[type="submit"], .widget ul.menu li a,
.Projects_header .categories li a, .pager a,
#Header #menu > ul > li > a, .portfolio_item,
.pricing-box, .offer .box, .team .photo {
  transition: all var(--transition-fast) !important;
}


/* ================================================================
   26. ACCESSIBILITY
   ================================================================ */

a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px;
}

.skip-to-content {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  padding: 8px 16px; background: var(--primary); color: #fff;
  font-family: var(--font); font-weight: 600;
}
.skip-to-content:focus { left: 0; }


/* ================================================================
   27. PRINT
   ================================================================ */

@media print {
  body { font-family: var(--font); color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  #Header, #Footer, .social, .pager, #Footer a#back_to_top { display: none; }
  #Wrapper { box-shadow: none; max-width: 100%; }
}


/* ================================================================
   28. RESPONSIVE — mobile-first refinements
   ================================================================ */

@media (max-width: 959px) {
  #Header #logo {
    padding: 16px 12px !important;
  }

  #Header #logo img {
    max-height: 36px;
  }

  #Subheader_overlay {
    padding: 32px 24px 24px !important;
  }

  #Subheader h1 {
    font-size: 1.4rem !important;
  }

  .call_to_action .inside {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .call_to_action a.button {
    position: relative !important;
    right: auto !important;
    top: auto !important;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 14px !important;
  }

  h1, h1 a { font-size: 1.6rem !important; }
  h2, h2 a { font-size: 1.3rem !important; }

  #Content {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .call_to_action h4 {
    font-size: 1rem !important;
  }
}


/* ================================================================
   29. REUSABLE UTILITY COMPONENTS (from styleguide)
   Available for use in page content via WordPress editor.
   ================================================================ */

/* -- Badges -- */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 0.7rem; font-weight: 600; font-family: var(--font); border-radius: var(--radius-full); line-height: 1.4; }
.badge-primary   { background: var(--primary-alpha-10); color: var(--primary-deep); }
.badge-success   { background: #d1fae5; color: #065f46; }
.badge-warning   { background: #fef3c7; color: #92400e; }
.badge-danger    { background: #fee2e2; color: #991b1b; }

/* -- Cards -- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-header { padding: 16px 20px; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; }
.card-header-title { font-weight: 600; font-size: 0.95rem; color: var(--text); }
.card-body { padding: 20px; }
.card-footer { padding: 14px 20px; border-top: 1px solid var(--border-light); background: var(--bg-secondary); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* -- Progress -- */
.progress { height: 8px; background: var(--bg-secondary); border-radius: var(--radius-full); overflow: hidden; }
.progress-bar { height: 100%; border-radius: var(--radius-full); transition: width 0.4s ease; }
.progress-bar-primary { background: var(--primary-gradient); }
.progress-bar-success { background: var(--success); }

/* -- Spinner -- */
.spinner { display: inline-block; width: 24px; height: 24px; border: 2.5px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: ies-spin 0.6s linear infinite; }
@keyframes ies-spin { to { transform: rotate(360deg); } }

/* -- Tooltip -- */
.tooltip-wrap { position: relative; display: inline-block; }
.tooltip-wrap .tooltip-text { visibility: hidden; opacity: 0; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--accent-1); color: #f1f5f9; padding: 6px 10px; border-radius: var(--radius-sm); font-size: 0.73rem; white-space: nowrap; z-index: 1060; transition: opacity 150ms; pointer-events: none; }
.tooltip-wrap .tooltip-text::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--accent-1); }
.tooltip-wrap:hover .tooltip-text { visibility: visible; opacity: 1; }


/* ================================================================
   30. PLUGIN OVERRIDES — Normalize all third-party plugin UI
   to match the ieServices design system
   ================================================================ */

/* --- WPML Language Selector — complete redesign --- */
#lang_sel,
#lang_sel_list {
  font-family: var(--font) !important;
  height: auto !important;
}

#lang_sel li {
  width: auto !important;
}

#lang_sel ul ul {
  width: auto !important;
  min-width: 140px;
}

#lang_sel a,
#lang_sel a:visited,
#lang_sel_list a,
#lang_sel_list a:visited {
  font-family: var(--font) !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 12px !important;
  line-height: 1.4 !important;
  transition: all var(--transition-fast) !important;
  width: auto !important;
}

#lang_sel a:hover,
#lang_sel ul ul a:hover,
#lang_sel :hover > a,
#lang_sel ul ul :hover > a,
#lang_sel_list a:hover {
  background: var(--bg-secondary) !important;
  color: var(--primary) !important;
  border-color: var(--border) !important;
}

#lang_sel a.lang_sel_sel {
  background: var(--card) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" fill="none"><path d="M1 1l4 4 4-4" stroke="%23676f76" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') right 10px center no-repeat !important;
  padding-right: 28px !important;
}

#lang_sel a.lang_sel_sel:hover {
  color: var(--primary) !important;
  background-color: var(--bg-secondary) !important;
}

#lang_sel ul ul {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-lg) !important;
  top: calc(100% + 2px) !important;
  overflow: hidden;
  height: auto !important;
}

#lang_sel ul ul a,
#lang_sel ul ul a:visited {
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--border-light) !important;
  padding: 8px 12px !important;
}

#lang_sel ul ul li:last-child a {
  border-bottom: none !important;
}

/* Override WPML table hack */
#lang_sel table {
  position: relative !important;
}

/* Flag images */
#lang_sel img.iclflag,
#lang_sel_list img.iclflag,
.menu-item-language img.iclflag {
  width: 18px !important;
  height: 12px !important;
  border-radius: 2px !important;
  vertical-align: middle !important;
  position: relative !important;
  top: -1px !important;
  margin-right: 6px !important;
}

/* WPML footer selector */
#lang_sel_footer {
  font-family: var(--font) !important;
  font-size: 13px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--card) !important;
  padding: 8px 12px !important;
}

#lang_sel_footer ul li a,
#lang_sel_footer ul li a:visited {
  font-family: var(--font) !important;
  color: var(--text-secondary) !important;
  padding: 4px 8px !important;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

#lang_sel_footer ul li a:hover {
  background: var(--bg-secondary) !important;
  color: var(--primary) !important;
}

/* WPML list-style selector */
#lang_sel_list a,
#lang_sel_list a:visited,
#lang_sel_list.lang_sel_list_vertical a,
#lang_sel_list.lang_sel_list_vertical a:visited {
  font-family: var(--font) !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 12px !important;
  line-height: 1.4 !important;
}

/* WPML in-menu language items */
.menu-item-language {
  font-family: var(--font) !important;
}

.menu-item-language a {
  font-size: 13px !important;
}

.menu-item-language img.iclflag {
  height: 12px !important;
  width: 18px !important;
  margin-right: 4px;
  border-radius: 2px;
  vertical-align: middle;
}

/* --- WPML CMS Navigation plugin --- */
.cms-navigation,
.cms-navigation a {
  font-family: var(--font) !important;
}

/* --- Contact Form 7 --- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  font-family: var(--font) !important;
  font-size: 14px !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-sm) !important;
  padding: 9px 12px !important;
  background: #F9F9F9 !important;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-alpha-10) !important;
}

.wpcf7 input[type="submit"] {
  font-family: var(--font) !important;
  background: var(--primary) !important;
  color: #fff !important;
  border: 1px solid var(--primary) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.wpcf7 input[type="submit"]:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

.wpcf7-not-valid-tip {
  font-family: var(--font) !important;
  font-size: 13px !important;
  color: var(--danger) !important;
}

.wpcf7-response-output {
  font-family: var(--font) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
}

/* --- CAPTCHA plugin --- */
.cptch_block {
  font-family: var(--font) !important;
}

.cptch_block input[type="text"] {
  font-family: var(--font) !important;
  border-radius: var(--radius-sm) !important;
}

/* --- Sociable sharing plugin --- */
.sociable {
  font-family: var(--font) !important;
}

/* --- ShapePress DSGVO / Cookie notice --- */
.sp-dsgvo-notice,
#cookie-notice {
  font-family: var(--font) !important;
  font-size: 14px !important;
}

.sp-dsgvo-notice a {
  color: var(--primary) !important;
}

/* --- Revolution Slider captions — use our font --- */
.tp-caption {
  font-family: var(--font) !important;
}

/* --- FancyBox overlay --- */
#fancybox-outer {
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}


/* ================================================================
   31. CONTENT SPACING — inner-padding, paragraphs, hr
   ================================================================ */

/* The theme's inner-padding class */
.inner-padding {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Horizontal rules — clean line, not a 10px background image */
hr {
  border: none !important;
  height: 1px !important;
  background: var(--border) !important;
  margin: 1.5em 0 !important;
}

/* Get in touch widget */
.get_in_touch {
  font-family: var(--font) !important;
}

.get_in_touch h3 {
  font-family: var(--font) !important;
  color: var(--text) !important;
}

.get_in_touch li.label {
  color: var(--text-muted) !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.get_in_touch .phone p {
  color: var(--text-dark-blue) !important;
  font-family: var(--font) !important;
}

.get_in_touch .address p {
  font-family: var(--font) !important;
  color: var(--text) !important;
}

.get_in_touch .mail a {
  color: var(--primary) !important;
}

.get_in_touch i {
  color: var(--primary) !important;
}

/* Google Maps container */
#Content [id^="google-map-area"] {
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
  border: 1px solid var(--border);
}


/* ================================================================
   32. GLOBAL FONT NORMALIZATION — catch everything the theme
   and plugins render in Verdana/Arial/Patua One/system fonts
   ================================================================ */

#Wrapper,
#Content,
#Content p,
#Content li,
#Content td,
#Content th,
#Content span,
#Content div,
.container,
.inner-padding,
.column,
.get_in_touch,
.pricing-box,
.team,
.offer,
.Recent_comments,
.Latest_posts,
.Twitter,
.post .desc,
.pager,
#comments,
.copyrights {
  font-family: var(--font) !important;
}


/* ================================================================
   33. WOOCOMMERCE — full design system normalization
   ================================================================ */

.woocommerce,
.woocommerce p,
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce h4, .woocommerce h5, .woocommerce h6,
.woocommerce span, .woocommerce div, .woocommerce a,
.woocommerce input, .woocommerce label,
.woocommerce td, .woocommerce th {
  font-family: var(--font) !important;
}

/* Buttons — match site button styling */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
  background: var(--primary) !important;
  color: #fff !important;
  border: 1px solid var(--primary) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 20px !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: all var(--transition-fast);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  color: #fff !important;
}

/* Alt buttons (Add to cart, etc.) */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt {
  background: var(--primary-deep) !important;
  border-color: var(--primary-deep) !important;
  color: #fff !important;
}

.woocommerce a.button.alt:hover,
.woocommerce-page a.button.alt:hover {
  background: var(--primary-deeper) !important;
  border-color: var(--primary-deeper) !important;
}

/* Sale badge — modern pill instead of teal circle */
.woocommerce span.onsale,
.woocommerce-page span.onsale {
  background: var(--brand-yellow) !important;
  color: var(--accent-1) !important;
  border-radius: var(--radius-full) !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4 !important;
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Product prices — brand color, clean */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce-page ul.products li.product .price {
  color: var(--primary-deep) !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
  color: var(--text-muted) !important;
  opacity: 0.7;
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
  color: var(--primary) !important;
  text-decoration: none;
  font-weight: 700;
}

/* Product titles */
.woocommerce ul.products li.product h3,
.woocommerce-page ul.products li.product h3,
.woocommerce div.product .product_title {
  font-family: var(--font) !important;
  color: var(--text) !important;
  font-weight: 700 !important;
}

.woocommerce div.product .product_title {
  font-size: 1.8rem !important;
  line-height: 1.2 !important;
}

/* Product list grid */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  text-align: center;
  margin-bottom: 32px !important;
}

.woocommerce ul.products li.product a img {
  border-radius: var(--radius) !important;
  transition: transform var(--transition);
}

.woocommerce ul.products li.product:hover a img {
  transform: translateY(-2px);
}

/* Quantity input — modern */
.woocommerce .quantity .qty,
.woocommerce-page .quantity .qty {
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 10px !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  background: #F9F9F9 !important;
  box-shadow: var(--shadow-inset) !important;
}

.woocommerce .quantity input.plus,
.woocommerce .quantity input.minus,
.woocommerce-page .quantity input.plus,
.woocommerce-page .quantity input.minus {
  background: var(--bg-secondary) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  text-shadow: none !important;
}

/* Cart totals & forms */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
}

.woocommerce table.shop_table th {
  background: var(--bg-secondary) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.woocommerce table.shop_table td {
  border-color: var(--border-light) !important;
  font-family: var(--font) !important;
}

/* Reviews / star rating */
.woocommerce .star-rating span,
.woocommerce p.stars a {
  color: var(--brand-yellow) !important;
}

/* Tabs (woocommerce-tabs) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--border) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  margin: 0 4px -1px 0 !important;
  box-shadow: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font) !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-shadow: none !important;
  padding: 10px 16px !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--card) !important;
  border-bottom-color: var(--card) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--primary) !important;
}

/* Messages / notices */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-error,
.woocommerce-page .woocommerce-info {
  border-radius: var(--radius) !important;
  padding: 14px 18px !important;
  border-left: 4px solid !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.woocommerce .woocommerce-message {
  background: #ecfdf5 !important;
  border-color: var(--success) !important;
  color: #065f46 !important;
}

.woocommerce .woocommerce-info {
  background: #eff6ff !important;
  border-color: var(--info) !important;
  color: #1e40af !important;
}

.woocommerce .woocommerce-error {
  background: #fef2f2 !important;
  border-color: var(--danger) !important;
  color: #991b1b !important;
}


/* ================================================================
   34. FANCYBOX LIGHTBOX — modern overlay
   ================================================================ */

#fancybox-wrap {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}

#fancybox-outer {
  background: var(--card) !important;
  border-radius: var(--radius-lg);
}

#fancybox-overlay {
  background: rgba(15,23,42,0.65) !important;
}

.fancybox-title-inside,
.fancybox-title-outside,
.fancybox-title-over,
.fancybox-title-float-main {
  font-family: var(--font) !important;
  font-size: 13px !important;
}

.fancybox-title-inside {
  background: var(--card) !important;
  color: var(--text) !important;
}

.fancybox-title-outside {
  color: rgba(255,255,255,0.85) !important;
}

.fancybox-title-over {
  background: rgba(0,0,0,0.6) !important;
  color: #fff !important;
  padding: 8px 12px !important;
  border-radius: var(--radius-sm);
}

#fancybox-error {
  font-family: var(--font) !important;
  color: var(--danger) !important;
}


/* ================================================================
   35. REVOLUTION SLIDER — modern button + caption styles
   ================================================================ */

.tp-caption,
.caption {
  font-family: var(--font) !important;
}

.tp-caption.small_light,
.tp-caption.medium_light,
.tp-caption.large_light {
  color: #ffffff !important;
  font-family: var(--font) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
  font-weight: 700;
}

.tp-caption.small_dark,
.tp-caption.medium_dark,
.tp-caption.large_dark {
  color: var(--text) !important;
  font-family: var(--font) !important;
  text-shadow: none !important;
  font-weight: 700;
}

/* Slider buttons — flatten the colored shadows */
.tp-button {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  text-shadow: none !important;
  padding: 10px 20px !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: all var(--transition-fast);
}

.tp-button.green   { background: var(--success) !important; box-shadow: none !important; }
.tp-button.blue    { background: var(--primary) !important; box-shadow: none !important; }
.tp-button.red     { background: var(--danger) !important; box-shadow: none !important; }
.tp-button.orange  { background: var(--warning) !important; box-shadow: none !important; }
.tp-button.grey,
.tp-button.darkgrey { background: var(--accent-1) !important; box-shadow: none !important; }
.tp-button.lightgrey { background: var(--text-secondary) !important; box-shadow: none !important; }

.tp-button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Bullets — modern dots */
.tp-bullets.simplebullets.navbar {
  border: none !important;
  background: rgba(0,0,0,0.4) !important;
  border-radius: var(--radius-full) !important;
  height: auto !important;
  padding: 6px 10px !important;
}

.tp-bullets.simplebullets .bullet {
  background: rgba(255,255,255,0.4) !important;
  border-radius: 50% !important;
  transition: background var(--transition-fast);
}

.tp-bullets.simplebullets .bullet.selected,
.tp-bullets.simplebullets .bullet:hover {
  background: #fff !important;
}


/* ================================================================
   36. PORTFOLIO PAGES — Projects header & grid
   ================================================================ */

.Projects_header {
  margin-bottom: 32px;
}

.Projects_header .categories ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.Projects_header .categories li {
  margin: 0 !important;
  padding: 0 !important;
}

.Projects_header .categories li.label {
  margin-right: 12px !important;
}

.Projects_header .categories li.label h6 {
  margin: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px !important;
  color: var(--text-muted) !important;
}

.da-thumbs,
.Projects_inside_wrapper {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.Projects_inside {
  margin-top: 8px;
}


/* ================================================================
   37. SITEMAP / ARCHIVES — modern lists
   ================================================================ */

ul.list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
}

ul.list li {
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--border-light);
  font-family: var(--font) !important;
  font-size: 14px;
  background: none !important;
}

ul.list li:last-child {
  border-bottom: none;
}

ul.list li a {
  color: var(--text-secondary) !important;
  transition: color var(--transition-fast);
}

ul.list li a:hover {
  color: var(--primary) !important;
}

ul.list ul {
  margin: 8px 0 0 16px !important;
  list-style: none;
}

ul.list ul li {
  border-bottom: none;
  padding: 4px 0 !important;
}


/* ================================================================
   38. SUBPAGE & CONTAINER REFINEMENTS
   ================================================================ */

#Content.subpage {
  padding-top: 32px !important;
  padding-bottom: 48px !important;
}

#Content.subpage h2 {
  margin-top: 8px;
}

#Content .the_content_wrapper {
  font-family: var(--font);
}


/* ================================================================
   39. JCAROUSEL & RESPONSIVESLIDES
   ================================================================ */

.jcarousel-skin-tango .jcarousel-item-placeholder {
  background: var(--bg-secondary) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius);
}

.rslides {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.rslides img {
  border-radius: var(--radius-lg);
}


/* ================================================================
   40. FOOTER LOGO IMAGE
   ================================================================ */

#Footer .copyrights img {
  max-height: 40px;
  width: auto;
  margin-bottom: 12px;
  display: block;
}


/* ================================================================
   41. SEARCH FORM
   ================================================================ */

#searchform {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

#searchform input.field {
  flex: 1;
  font-family: var(--font) !important;
  font-size: 14px !important;
  padding: 9px 12px !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-sm) !important;
  background: #F9F9F9 !important;
  box-shadow: var(--shadow-inset) !important;
  margin-bottom: 0 !important;
}

#searchform input.submit,
#searchform input#searchsubmit {
  font-family: var(--font) !important;
  background: var(--primary) !important;
  color: #fff !important;
  border: 1px solid var(--primary) !important;
  border-radius: var(--radius-sm) !important;
  padding: 9px 18px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: 0 !important;
}

#searchform input.submit:hover,
#searchform input#searchsubmit:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}


/* ================================================================
   42. COMMENTS — modern, breathable
   ================================================================ */

#comments-title {
  font-family: var(--font) !important;
  font-size: 1.3rem !important;
  color: var(--text) !important;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

#comments .commentlist > li {
  list-style: none;
  margin-bottom: 24px !important;
}

#comments .commentlist > li .photo,
#comments .commentlist > li img.avatar {
  border-radius: 50% !important;
  border: 2px solid var(--border) !important;
}

#comments .commentlist .comment-author {
  font-family: var(--font) !important;
  color: var(--text) !important;
  font-weight: 600;
}

#comments .commentlist .comment-meta {
  font-family: var(--font) !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

#respond {
  margin-top: 32px;
}

#respond h3 {
  font-family: var(--font) !important;
  font-size: 1.2rem !important;
  color: var(--text) !important;
  margin-bottom: 16px;
}

#respond input[type="text"],
#respond input[type="email"],
#respond textarea {
  width: 100% !important;
  max-width: 500px !important;
}

#respond input[type="submit"] {
  background: var(--primary) !important;
  color: #fff !important;
  border: 1px solid var(--primary) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 24px !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
}

#respond input[type="submit"]:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}


/* ================================================================
   43. SHARE BUTTONS (ShareThis on single posts)
   ================================================================ */

.share {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}


/* ================================================================
   44. SINGLE PORTFOLIO PAGE
   ================================================================ */

.single-portfolio .photo {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  border: none !important;
}

.single-portfolio .desc h4 {
  font-family: var(--font) !important;
  font-size: 0.9rem !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted) !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.single-portfolio .sp-inside dl {
  font-family: var(--font);
}

.single-portfolio .sp-inside dt {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted) !important;
  margin-top: 12px;
  font-weight: 600;
}

.single-portfolio .sp-inside dd {
  font-size: 14px !important;
  color: var(--text) !important;
  margin-bottom: 8px;
  font-family: var(--font);
}

.single-portfolio .sp-inside dd i {
  color: var(--primary) !important;
  margin-right: 6px;
}

.single-portfolio .sp-inside-right {
  border-color: var(--border) !important;
}

.single-portfolio footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}