/*
Theme Name: Trampakoulos Child
Theme URI: https://trampakoulos.com
Description: Custom child theme για το Τραμπάκουλος Ηλεκτρικά eshop
Author: Trampakoulos
Template: storefront
Version: 1.0.0
Text Domain: trampakoulos
*/

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700;900&family=Nunito:wght@400;500;600;700&display=swap');

:root {
  --blue-dark: #0D2B6B;
  --blue-mid: #1A4FA8;
  --blue-light: #4A90D9;
  --sky: #C8E6F5;
  --sky-soft: #EAF4FC;
  --yellow: #F5C518;
  --yellow-soft: #FFF3C4;
  --white: #FFFFFF;
  --text-dark: #0D2B6B;
  --text-body: #1A3A5C;
  --gray: #F4F8FF;
  --border: #D0E4F5;
  --green: #27500A;
  --green-bg: #EAF3DE;
}

/* === GLOBAL === */
body {
  font-family: 'Nunito', sans-serif !important;
  color: var(--text-body) !important;
  background: var(--white) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Exo 2', sans-serif !important;
  color: var(--text-dark) !important;
}

a { color: var(--blue-mid) !important; }
a:hover { color: var(--blue-dark) !important; }

/* === TOP BAR === */
.site-header {
  background: var(--blue-mid) !important;
  border-bottom: none !important;
}

.site-header .col-full {
  background: var(--blue-mid) !important;
}

/* === LOGO === */
.site-title a {
  color: var(--white) !important;
  font-family: 'Exo 2', sans-serif !important;
  font-weight: 900 !important;
  font-size: 22px !important;
}

.site-description {
  color: #9DC4E8 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* === NAVIGATION === */
.main-navigation {
  background: var(--blue-dark) !important;
}

.main-navigation ul li a {
  color: #9DC4E8 !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  border-bottom: 3px solid transparent !important;
  transition: all 0.2s !important;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
  color: var(--yellow) !important;
  border-bottom-color: var(--yellow) !important;
  background: transparent !important;
}

.main-navigation ul li ul {
  background: var(--blue-dark) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

/* === SEARCH === */
.site-search .widget_product_search input {
  border: 2px solid var(--yellow) !important;
  border-radius: 7px 0 0 7px !important;
  padding: 8px 14px !important;
  font-family: 'Nunito', sans-serif !important;
}

.site-search .widget_product_search button {
  background: var(--yellow) !important;
  border: none !important;
  border-radius: 0 7px 7px 0 !important;
  color: var(--blue-dark) !important;
}

/* === BUTTONS === */
.button, button, input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--blue-mid) !important;
  color: var(--white) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: none !important;
  padding: 10px 20px !important;
  transition: background 0.2s !important;
}

.button:hover, button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--blue-dark) !important;
  color: var(--white) !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
  background: var(--yellow) !important;
  color: var(--blue-dark) !important;
  font-weight: 800 !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: #d4a800 !important;
  color: var(--blue-dark) !important;
}

/* === HERO / BANNER === */
.storefront-hero,
.storefront-hero .storefront-hero-text {
  background: linear-gradient(135deg, #0D2B6B 0%, #1A4FA8 60%, #2B6CB0 100%) !important;
}

.storefront-hero h1, .storefront-hero p {
  color: var(--white) !important;
}

/* === PRODUCT CARDS === */
.woocommerce ul.products li.product {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: all 0.2s !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--blue-light) !important;
  box-shadow: 0 4px 16px rgba(26,79,168,0.12) !important;
  transform: translateY(-2px) !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Exo 2', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  padding: 8px 12px 0 !important;
}

.woocommerce ul.products li.product .price {
  font-family: 'Exo 2', sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: var(--blue-dark) !important;
  padding: 4px 12px !important;
}

.woocommerce ul.products li.product .price del {
  color: #AAB8C8 !important;
  font-size: 13px !important;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none !important;
}

.woocommerce ul.products li.product a.button {
  margin: 8px 12px 12px !important;
  width: calc(100% - 24px) !important;
  text-align: center !important;
  display: block !important;
}

/* === SALE BADGE === */
.woocommerce span.onsale {
  background: var(--yellow) !important;
  color: var(--blue-dark) !important;
  font-family: 'Exo 2', sans-serif !important;
  font-weight: 800 !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.4 !important;
}

/* === PRODUCT PAGE === */
.woocommerce div.product .product_title {
  font-family: 'Exo 2', sans-serif !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  color: var(--text-dark) !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: 'Exo 2', sans-serif !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  color: var(--blue-dark) !important;
}

/* === CART === */
.woocommerce-cart .cart_totals {
  background: var(--gray) !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  padding: 20px !important;
}

.woocommerce-cart .cart_totals h2 {
  font-family: 'Exo 2', sans-serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

/* === CHECKOUT === */
.woocommerce-checkout #payment {
  background: var(--gray) !important;
  border-radius: 10px !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  padding: 9px 12px !important;
  font-family: 'Nunito', sans-serif !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--blue-mid) !important;
  outline: none !important;
}

.woocommerce-checkout #order_review {
  background: var(--gray) !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  padding: 20px !important;
}

/* === PROMO BAR === */
.storefront-handheld-footer-bar {
  background: var(--blue-dark) !important;
}

.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li > button {
  color: var(--white) !important;
}

/* === FOOTER === */
.site-footer {
  background: var(--blue-dark) !important;
  color: #7AA3C8 !important;
}

.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6 {
  color: var(--yellow) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.site-footer a {
  color: #7AA3C8 !important;
  font-size: 12px !important;
  line-height: 2 !important;
}

.site-footer a:hover {
  color: var(--white) !important;
}

.site-info {
  background: #081C47 !important;
  color: #4A6E90 !important;
  font-size: 11px !important;
  text-align: center !important;
}

/* === CATEGORIES === */
.product-category a {
  background: var(--white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
  transition: all 0.2s !important;
}

.product-category a:hover {
  border-color: var(--blue-mid) !important;
  background: var(--sky-soft) !important;
}

.product-category h2 {
  font-family: 'Nunito', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
}

/* === WIDGETS === */
.widget-area .widget {
  background: var(--gray) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}

.widget-area .widget-title {
  font-family: 'Exo 2', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--text-dark) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 2px solid var(--border) !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
}

/* === NOTICES === */
.woocommerce-message,
.woocommerce-info {
  background: var(--sky-soft) !important;
  border-top-color: var(--blue-mid) !important;
  color: var(--text-dark) !important;
}

.woocommerce-error {
  border-top-color: #E24B4A !important;
}

/* === BREADCRUMBS === */
.woocommerce .woocommerce-breadcrumb {
  background: var(--sky-soft) !important;
  padding: 10px 24px !important;
  font-size: 12px !important;
  color: #5A7A99 !important;
  margin-bottom: 0 !important;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--blue-mid) !important;
  font-weight: 600 !important;
}

/* === RATINGS === */
.star-rating span::before,
.woocommerce .star-rating span::before {
  color: var(--yellow) !important;
}

/* === TABS === */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--blue-mid) !important;
  border-bottom: 3px solid var(--blue-mid) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  color: #7A9BB5 !important;
}