/* =======================================================
   WINDYSHOES - THEME OVERRIDES (PrestaShop)
   Purpose: Apply WindyShoes logo colors + modern UI polish
   How to use:
   1) Put this file AFTER your main theme.css (highest priority)
   2) Recommended filename: /themes/YOUR_THEME/assets/css/custom.css
   3) Clear cache: Advanced Parameters > Performance > Clear cache
   ======================================================= */

/* ---------- Brand tokens (from logo) ---------- */
:root{
  --ws-blue: #1278A4;       /* primary */
  --ws-blue-2: #4DB5DB;     /* accent light */
  --ws-red: #9B1B12;        /* logo red */
  --ws-red-2: #B31F17;      /* hover/strong */
  --ws-ink: #1f2937;        /* text */
  --ws-muted: #6b7280;      /* secondary text */
  --ws-bg: #ffffff;         /* page bg */
  --ws-soft: #f5f7fb;       /* soft section bg */
  --ws-border: #e5e7eb;     /* borders */
  --ws-radius: 14px;
  --ws-radius-sm: 10px;
  --ws-shadow: 0 10px 30px rgba(17, 24, 39, .08);
  --ws-shadow-sm: 0 6px 18px rgba(17, 24, 39, .08);
}

/* ---------- Base ---------- */
html, body{
  background: var(--ws-bg);
  color: var(--ws-ink);
}

a{
  color: var(--ws-blue);
  text-decoration: none;
}
a:hover, a:focus{
  color: var(--ws-blue-2);
  text-decoration: none;
}

/* Optional: keep your breadcrumb hidden */
.breadcrumb{ display:none !important; }

/* ---------- Buttons (Bootstrap/PS) ---------- */
.btn{
  border-radius: var(--ws-radius-sm) !important;
  transition: transform .08s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn:active{ transform: translateY(1px); }

.btn-primary,
.btn-primary:hover{
  color: #fff !important;
  background-color: var(--ws-blue) !important;
  border-color: transparent !important;
}
.btn-primary:hover{
  background-color: #0f6b92 !important;
  box-shadow: var(--ws-shadow-sm);
}

.btn-outline-primary{
  color: var(--ws-blue) !important;
  background: transparent !important;
  border-color: var(--ws-blue) !important;
}
.btn-outline-primary:hover{
  color:#fff !important;
  background: var(--ws-blue) !important;
  border-color: var(--ws-blue) !important;
}

/* Secondary = clean, soft */
.btn-secondary{
  background: var(--ws-soft) !important;
  color: var(--ws-ink) !important;
  border-color: transparent !important;
}
.btn-secondary:hover{
  background: #eef2f7 !important;
  box-shadow: var(--ws-shadow-sm);
}

/* ---------- Forms ---------- */
.form-control, .custom-select, input[type="text"], input[type="email"], input[type="password"], textarea, select{
  border-radius: var(--ws-radius-sm) !important;
  border: 1px solid var(--ws-border) !important;
  box-shadow: none !important;
}
.form-control:focus, .custom-select:focus, input:focus, textarea:focus, select:focus{
  border-color: rgba(18,120,164,.65) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 .2rem rgba(18,120,164,.18) !important;
}

/* ---------- Header search row (you already had this structure) ---------- */
.header-center-row{
  display:flex;
  align-items:center;
  gap:20px;
  width:100%;
}
.header-search-form{ flex:1; }

/* Make search a bit more premium */
.header-search-form input[type="text"],
.header-search-form .search-widget input{
  height: 44px !important;
  border-radius: 999px !important;
  padding-left: 16px !important;
  background: #fff !important;
}

.header-nav.nav-right{
  display:flex;
  align-items:center;
  gap:18px;
  white-space: nowrap;
}
.header-button a{
  display:flex;
  align-items:center;
  gap:6px;
  font-size: 14px;
  color: var(--ws-ink) !important;
}
.header-button a:hover{ color: var(--ws-blue) !important; }
.header-button i{ font-size: 18px; }

/* ---------- Top menu (desktop) ---------- */
.top-menu a, .menu a, #header a{
  transition: color .15s ease, background-color .15s ease;
}

/* ---------- Product cards (category + home sections) ---------- */
.product-miniature, .product-miniature .thumbnail-container{
  border-radius: var(--ws-radius) !important;
  overflow: hidden;
}
.product-miniature{
  background:#fff;
  border:1px solid var(--ws-border);
  box-shadow: none;
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-miniature:hover{
  transform: translateY(-3px);
  box-shadow: var(--ws-shadow);
  border-color: rgba(18,120,164,.30);
}

/* Product image area */
.product-miniature img{
  transition: transform .25s ease;
}
.product-miniature:hover img{
  transform: scale(1.03);
}

/* Price */
.product-price-and-shipping, .product-price{
  color: var(--ws-ink) !important;
}
.product-price-and-shipping .price, .product-price{
  font-weight: 700;
}
.regular-price{
  color: var(--ws-muted) !important;
}

/* ---------- Badges / tags ---------- */
.tag-primary, .product-flags li.product-flag{
  background: var(--ws-red) !important;
  color:#fff !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
}
.product-flags li.product-flag.new{ background: var(--ws-blue) !important; }
.product-flags li.product-flag.on-sale,
.product-flags li.product-flag.discount{
  background: var(--ws-red-2) !important;
}

/* ---------- Pagination ---------- */
.page-item.active .page-link{
  background-color: var(--ws-blue) !important;
  border-color: var(--ws-blue) !important;
}
.page-link{
  color: var(--ws-blue) !important;
}
.page-link:hover{
  color: var(--ws-blue-2) !important;
}

/* ---------- Cart / Checkout accents ---------- */
#blockcart-modal .product-name{ color: var(--ws-blue) !important; }

/* ---------- Quickview / modals ---------- */
.modal-content{
  border-radius: 18px !important;
  border: none !important;
  box-shadow: var(--ws-shadow) !important;
  overflow: hidden;
}
.modal-header{
  border-bottom: 1px solid rgba(229,231,235,.8) !important;
}

/* ---------- Small UI polish ---------- */
.card, .products .product-miniature, .category-top-menu, .block, #left-column .block, #right-column .block{
  border-radius: var(--ws-radius) !important;
}
hr, .separator, .product-description, .product-information{
  border-color: rgba(229,231,235,.9) !important;
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 767px){
  .header-center-row{ gap:12px; }
  .header-search-form input[type="text"],
  .header-search-form .search-widget input{
    height: 42px !important;
  }
  .product-miniature:hover{ transform: none; } /* reduce jump on mobile */
}/* 1) Çerçeve (daire) SABİT */
.banner-item{
  width:130px;            /* çerçeve çapı */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.banner-item{
  /* daire kutu gibi davranması için */
}

.banner-item img{
  width:130px;            /* dış çerçeveye otursun */
  height:130px;
  border-radius:50%;
  background:#fff;
  border:2px solid rgba(18,120,164,.25);
  object-fit:cover;

  /* 2) RESMİ küçült */
  transform: scale(0.78);        /* resim küçülür, çerçeve sabit kalır */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Hover: sadece resim biraz büyüsün, çerçeve aynı */
.banner-item:hover img{
  transform: scale(0.84);
  border-color: var(--ws-blue);
  box-shadow: 0 10px 25px rgba(18,120,164,.25);
}


/* ===============================
   Banner Title – Şık & Minimal
   =============================== */

.banner-title{
  display:inline-block;
  padding:6px 14px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.8px;
  text-transform:uppercase;

  color: var(--ws-blue);
  background: rgba(18,120,164,.08);
  border-radius:999px;

  transition: all .25s ease;
}

/* Hover uyumu */
.banner-item:hover .banner-title{
  color:#fff;
  background: var(--ws-blue);
  box-shadow: 0 6px 16px rgba(18,120,164,.35);
}

/* =========================================
   FORCE REMOVE OLD THEME COLORS
   (#4d191f , #7d5f65)
   ========================================= */

/* Link & text hover */
a:hover,
a:focus,
a:active{
  color: var(--ws-blue) !important;
}

/* Banner / menu / category hover */
.banner-item:hover,
.banner-item:hover *,
.top-menu a:hover,
.menu a:hover{
 
}

/* Button hover & active */
.btn:hover,
.btn:focus,
.btn:active{
  background-color: var(--ws-blue) !important;
  border-color: var(--ws-blue) !important;
  color:#fff !important;
}

/* Product card hover */
.product-miniature:hover,
.product-miniature:hover *{
  border-color: rgba(18,120,164,.35) !important;
}

/* HARD OVERRIDE – eski tema renklerini tamamen ez */
*[style*="#4d191f"],
*[style*="#7d5f65"]{
  color: var(--ws-blue) !important;
  background-color: transparent !important;
}

/* Bazı temalarda hover renk class ile gelir */
[class*="hover"]:hover,
[class*="active"]:hover{
  color: var(--ws-blue) !important;
}