/* =========================================================
   Kyläseuran verkkokauppa – Novator Tweaker CSS
   Siivottu ja korjattu versio
   ========================================================= */

/* ----------------
   MUUTTUJAT
   ---------------- */
:root{
  --mk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mk-heading-font: Georgia, "Times New Roman", serif;
  --bs-font-sans-serif: var(--mk-font);

  --rahula-yellow:#F2CF1D;
  --rahula-yellow-600:#C9A90F;
  --rahula-blue:#1995D4;
  --rahula-blue-700:#0F6FA2;
  --rahula-green:#2FA34A;
  --rahula-green-700:#237D39;

  --mk-ink:#111;
  --mk-muted:#666;
  --mk-border:#e6e2d8;
  --mk-card-bg:#fffdf9;

  --mk-accent: var(--rahula-green);
  --mk-accent-2: var(--rahula-blue);
}

/* ------------------------------
   TYPOGRAFIA
   ------------------------------ */
html, body, button, input, select, textarea{
  font-family: var(--mk-font) !important;
}

h1, h2, h3, h4, h5, h6,
.page-title, .product-title{
  font-family: var(--mk-heading-font) !important;
  font-weight: 600;
  letter-spacing: -.02em;
}

.navbar .nav-link,
.navbar-nav .nav-link,
.mega-sf-menu > li > a,
.menu > li > a,
.sf-menu > li > a{
  font-family: var(--mk-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0;
}

.dropdown-menu .dropdown-item{
  font-family: var(--mk-font) !important;
  font-weight: 600 !important;
}

svg, svg *{
  font-family: inherit !important;
  font-style: normal;
}

/* ------------------------------
   YLEISET TYYLIT / TEEMA
   ------------------------------ */
body{
  background-color: var(--mk-card-bg);
  color: var(--mk-ink);
}

a{
  color: var(--rahula-blue);
}
a:hover{
  color: var(--rahula-blue-700);
  text-decoration: underline;
}

.top-bar{
  background: var(--mk-card-bg);
  z-index: 1023;
  margin-bottom: -20px;
  margin-top: -10px;
  position: relative;
}

.top-bar .image-link{
  width: 40px;
  height: 40px;
  background: var(--rahula-blue) !important;
  color: #fff !important;
}

.theme-change{
  display: none !important;
}

.card{
  --bs-card-bg: var(--mk-card-bg);
  border-color: var(--mk-border) !important;
  position: relative;
}

.card::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--rahula-yellow);
  opacity: .9;
  border-radius: 3px 0 0 3px;
}

.footer{
  background: var(--rahula-green) !important;
  padding: 12px 0 !important;
  color: #fff !important;
}
.footer a{
  color: #EAF6FF !important;
}

.go-top{
  position: fixed;
  bottom: 26px;
  right: 27px;
  z-index: 1030;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 -1px 0 2px #ffffff, 0 2px 7px 1px rgba(0,0,0,.26);
}

/* ------------------------------
   NAVIGAATIO / VALIKOT
   ------------------------------ */
.dropdown-menu, .menu, .submenu{
  background-color: #f0fbf4 !important;
  color: #1a1a1a !important;
  border-color: #d8eadf !important;
}

.dropdown-menu a, .menu a{
  color: #1a1a1a !important;
}

.navbar a:hover,
.menu a:hover,
.dropdown-menu a:hover,
.navbar .active > a,
.menu .active > a{
  background-color: var(--rahula-green) !important;
  color: #fff !important;
}

.navbar-nav{
  letter-spacing: .5px !important;
  --bs-nav-link-hover-color:#fff;
}

.navbar{
  --bs-navbar-active-color: var(--rahula-blue);
}

.mega-sf-menu > li.nav-item > a.active:after{
  background: var(--rahula-blue);
}

.navbar-nav > .active > a,
.navbar-nav > li.active > a,
.navbar .active > a{
  background-color: var(--rahula-green) !important;
  color:#fff !important;
}

/* ------------------------------
   NAPIT / PILLS / PAGINOINTI
   ------------------------------ */
.btn.disabled, .btn:disabled, fieldset:disabled .btn{
  background-color:#f5e7c4;
  color:#a1874a;
}

.btn-primary{
  --bs-btn-bg: var(--rahula-blue);
  --bs-btn-border-color: var(--rahula-blue);
  --bs-btn-hover-bg: var(--rahula-blue-700);
  --bs-btn-hover-border-color: var(--rahula-blue-700);
  --bs-btn-active-bg: var(--rahula-blue-700);
  --bs-btn-active-border-color: var(--rahula-blue-700);
  --bs-btn-disabled-bg: #9ecfe9;
  --bs-btn-disabled-border-color: #9ecfe9;
  color:#fff;
}

.btn-warning,
.badge.bg-warning,
.alert-warning{
  background-color: var(--rahula-green) !important;
  border-color: var(--rahula-green-700) !important;
  color:#fff !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link{
  color:#fff;
  background-color: var(--rahula-blue);
}

.active > .page-link,
.page-link.active{
  color:#fff;
  background-color: var(--rahula-blue);
  border-color: var(--rahula-blue-700);
}

.text-primary{
  --bs-text-opacity:1;
  color: var(--rahula-blue) !important;
}

h4 .heading-title:after,
.h4.heading-title:after{
  background: var(--rahula-green) !important;
}

.bg-body-alt{
  background:#f3ffe9 !important;
}
.bg-light-primary{
  background:#f0f9ff !important;
  color:#000 !important;
}
.bg-primary{
  --bs-bg-opacity:1;
  background-color: var(--rahula-blue) !important;
}
.bg-success{
  --bs-bg-opacity:1;
  background-color: var(--rahula-green) !important;
}

.cta::before{
  content: none !important;
  background: transparent !important;
  display: none !important;
}

/* ------------------------------
   TUOTEKORTIT / PIENET UTILIT
   ------------------------------ */
.product-card .bottom-bar{
  width:100%;
  padding:8px 6px;
  background:#1e283287;
  opacity:0;
}

.product_cell_grid .product-card h6{
  min-height:40px;
}

.fw-semibold{
  font-weight:600 !important;
  font-size:20px;
}

/* ------------------------------
   IKONIT
   ------------------------------ */
.bi,
[class^="bi-"],
[class*=" bi-"]{
  font-style: normal !important;
}

.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before,
.bi::after,
[class^="bi-"]::after,
[class*=" bi-"]::after{
  font-style: normal !important;
  font-weight: 400 !important;
  speak: never;
}

[class^="icon-"], [class*=" icon-"],
[class^="nvicon-"], [class*=" nvicon-"],
[class^="mdi-"], [class*=" mdi-"],
[class^="ion-"], [class*=" ion-"],
[class^="ti-"],  [class*=" ti-"]{
  font-style: normal !important;
}

/* =========================================================
   FORM FIX – vakaa ja siisti
   ========================================================= */

/* Bootstrap-välistys takaisin järkeväksi */
.my-4{
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* Input-groupit: ei keskitetä väärin */
.input-group{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > textarea.form-control{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.input-group > .input-group-text,
.input-group > .btn{
  flex: 0 0 auto !important;
}

/* Yleiset kentät */
.form-control,
.form-select{
  min-height: calc(1.5em + 0.75rem + 2px) !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  border-radius: 0.375rem !important;
}

.form-control:focus,
.form-select:focus{
  border-color: var(--rahula-blue) !important;
  box-shadow: 0 0 0 .2rem rgba(25,149,212,.15) !important;
}

.form-select{
  color:#0a3b66 !important;
  background-color:#f7fbff !important;
  border-color:#dbeaf3 !important;
}

/* textarea yleisesti */
textarea.form-control{
  min-height: 90px !important;
  height: auto !important;
  resize: vertical;
}

/* Tuoteoption tekstialue kompaktiksi */
.prod-option.textarea textarea.form-control{
  min-height: 50px !important;
  height: 50px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  resize: vertical;
}

/* Required-tähti takaisin oikean kokoiseksi ja laatikko näkyviin */
.input-group .input-group-text.text-danger{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  padding: 0.375rem 0.65rem !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #dc3545 !important;
  background: #f8f9fa !important;
  border: 1px solid #ced4da !important;
  border-left: 0 !important;
  box-shadow: none !important;
}

/* Jos tähti on jossain ilman input-group-tekstiboksia */
.mk-required-star{
  display:inline-block !important;
  font-size:1.1rem !important;
  font-weight:700 !important;
  line-height:1 !important;
  color:#dc3545 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin-left:6px !important;
  vertical-align:baseline !important;
}

.mk-has-star{
  display:inline-flex !important;
  align-items:baseline !important;
  gap:.35rem !important;
  white-space:normal !important;
}

/* Isot lg-inputit jätetään maltillisiksi */
.form-control-lg{
  min-height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 0.85rem;
  font-size: 1rem !important;
  border-radius: 0.5rem;
}

.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn{
  padding: 0.5rem 0.85rem;
  font-size: 1rem !important;
}

/* Radio ja checkbox yhtenäiseen lookkiin */
.prod-option.radio .input-group,
.prod-option.checkboxgroup .input-group{
  align-items: stretch !important;
}

.prod-option.radio .input-group-text,
.prod-option.checkboxgroup .input-group-text{
  height: auto !important;
  min-height: 0 !important;
  padding: 0.5rem 0.75rem !important;
  background: transparent !important;
  border: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.prod-option.radio .form-check-inline,
.prod-option.checkboxgroup .form-check-inline{
  margin: 0 !important;
  min-height: 0 !important;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 6px 10px;
  background: #fff;
}

.prod-option.radio .form-check-input,
.prod-option.checkboxgroup .form-check-input{
  margin-top: 0 !important;
  transform: scale(0.95);
}

.prod-option.radio .form-check-label,
.prod-option.checkboxgroup .form-check-label{
  font-size: 14px;
  line-height: 1.25;
}

.prod-option.checkboxgroup .m-2{
  margin: 0 !important;
}

.prod-option.radio .m-0{
  margin: 0 !important;
}

.prod-option.checkboxgroup .d-flex.flex-wrap{
  gap: 8px;
}

/* Checkbox/radio valinta teeman väreillä */
.form-check-input:checked{
  background-color: var(--rahula-green) !important;
  border-color: var(--rahula-green-700) !important;
}

/* Virhepalaute */
.invalid-feedback{
  display:none;
  color:#dc3545;
  margin-top:.25rem;
  font-size:.875rem;
}

/* Checkout / offcanvas napit ja tekstit tasaisiksi */
.btn,
.input-group-text{
  line-height: 1.5 !important;
}

.fs-4{
  font-size: calc(1rem + .3vw) !important;
}

/* Required-tähti: isompi kaikissa */
.input-group .input-group-text.text-danger,
.input-group .input-group-text .text-danger{
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* Required-boksi takaisin radio/checkbox-optioneissa */
.prod-option.radio .input-group > .input-group-text.text-danger,
.prod-option.checkboxgroup .input-group > .input-group-text.text-danger{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  padding: 0.375rem 0.65rem !important;
  color: #dc3545 !important;
  background: #f8f9fa !important;
  border: 1px solid #ced4da !important;
  border-left: 0 !important;
  border-radius: 0 0.375rem 0.375rem 0 !important;
}

/* Myös niihin joissa tähti on spanin sisällä */
.input-group > .input-group-text.rounded-end{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
}

/* Älä riko required-boksia radio/checkbox-yleissäännöllä */
.prod-option.radio .input-group > .input-group-text:not(.text-danger),
.prod-option.checkboxgroup .input-group > .input-group-text:not(.text-danger){
  background: transparent !important;
  border: 0 !important;
}

/* Tekstinsyöttökentät hieman isommiksi */
.prod-option input.form-control[type="text"],
.prod-option input.form-control[type="email"],
.prod-option input.form-control[type="tel"],
.prod-option input.form-control[type="number"] {
  min-height: 46px !important;
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
}

/* Tuoteoption dropdown leveäksi ja normaalin korkuiseksi */
.prod-option.selectbox,
.prod-option.selectbox .input-group,
.prod-option.selectbox .form-select,
.prod-option.selectbox select.form-control.form-select {
  width: 100% !important;
}

.prod-option.selectbox .form-select,
.prod-option.selectbox select.form-control.form-select {
  min-height: 46px !important;
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
  padding-right: 2.4rem !important;
}

/* Varmista että select-laatikko saa venyä rivin leveyteen */
.form-group .prod-option.selectbox {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Selkeä yhteinen ulkoasu */
body {
  background: #fffef9 !important;
  color: #173326 !important;
  line-height: 1.65;
}

.top-bar {
  margin: 0 !important;
  border-bottom: 1px solid #dbe4dc;
}

.header-bottom-section,
.nav-wrapper {
  background: rgba(255, 254, 249, .98) !important;
}

.card,
.product-card,
.product-list .list-group-item {
  border-color: #dbe4dc !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(22, 61, 39, .07);
}

.btn {
  border-radius: 999px !important;
  font-weight: 700;
}

.btn-primary,
.btn-success {
  background: #087b42 !important;
  border-color: #087b42 !important;
}

.btn-primary:hover,
.btn-success:hover {
  background: #075230 !important;
  border-color: #075230 !important;
}

/* Valinnoista muodostuvalla vuokratuotteella 0,00 € ei ole oikea lähtöhinta. */
#product_price_num[value="0"] ~ .price {
  display: none !important;
}

.product-price:has(#product_price_num[value="0"]) {
  margin-bottom: 0 !important;
}

.rahula-featured,
.rahula-featured * {
  font-family: var(--mk-font) !important;
}

footer.footer {
  padding: 0 !important;
  background: #092e1e !important;
  color: rgba(255, 255, 255, .8) !important;
}

footer.footer .footer-bottom {
  background: transparent !important;
}

.shop-footer {
  padding-top: 52px;
  padding-bottom: 22px;
}

.shop-footer-grid {
  display: grid;
  grid-template-columns: 1.3fr .8fr .8fr 1fr;
  gap: 42px;
}

.shop-footer h2 {
  margin: 0 0 13px;
  color: #fff !important;
  font-family: var(--mk-font) !important;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.shop-footer p {
  margin: 0 0 12px;
  max-width: 34rem;
}

.shop-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-footer li + li {
  margin-top: 8px;
}

.shop-footer a {
  color: #fff !important;
  text-decoration-color: rgba(255, 255, 255, .35);
  text-underline-offset: 3px;
}

.shop-footer a:hover {
  color: #ffe427 !important;
}

.shop-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 42px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .78rem;
}

@media (max-width: 900px) {
  .shop-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .shop-footer { padding-top: 38px; }
  .shop-footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .shop-footer-bottom { flex-direction: column; gap: 5px; }
}