/**
 * Calculator Layout V2 - Grid-based Modern Design
 * G.E.O. + SEO optimized, responsive, mobile-first
 *
 * Breakpoints:
 * - Desktop: >1190px (3 columns)
 * - Tablet: 800px-1189px (2 columns)
 * - Mobile: <800px (1 column, original behavior)
 */

/* ============================================
   WOOCOMMERCE RATING PIILOTUS
   ============================================ */

/* Piilota product rating jos se on summary-luokan sisällä */
.summary .woocommerce-product-rating {
  display: none !important;
}

/* ============================================
   OVERRIDE THEME CONTAINER WIDTH
   ============================================ */

/* Laajenna container ja content-wrapper tuotesivuilla (VAIN content-alueen containerit, ei headeria!) */
.single-product .site-content,
.single-product .site-content .container,
.single-product .content-wrapper,
.single-product .content-area,
.product .site-content,
.product .site-content .container,
.product .content-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Desktop: vielä leveämpi */
@media only screen and (min-width: 1190px) {
  .single-product .site-content,
  .single-product .site-content .container,
  .product .site-content,
  .product .site-content .container {
    max-width: 1600px !important;
    margin: 0 auto;
  }
}

/* Tablet */
@media only screen and (min-width: 800px) and (max-width: 1189px) {
  .single-product .site-content,
  .single-product .site-content .container,
  .product .site-content,
  .product .site-content .container {
    max-width: 100% !important;
    padding: 0 15px !important;
  }
}

/* ============================================
   WOOCOMMERCE PRODUCT LAYOUT OVERRIDE
   Yksinkertainen: Kaikki float: none, width: 100%
   ============================================ */

@media only screen and (min-width: 800px) {

  /* Product container: 2-kolumninen grid (sekä body.single-product että div.single-product) */
  body.single-product div.product,
  div.single-product {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
  }

  /* Summary: display contents avaa lapset gridiin */
  body.single-product .summary,
  div.single-product .summary {
    display: contents !important;
  }

  /* Summary:n lapset vasemmalle */
  body.single-product .summary > *:not(form.cart),
  div.single-product .summary > *:not(form.cart) {
    grid-column: 1 / 2 !important;
  }

  /* Images oikealle, samalle riville */
  body.single-product .images,
  div.single-product .images {
    grid-column: 2 / 3 !important;
    grid-row: 1 / span 10 !important;
    float: none !important;
    margin: 0 !important;
  }

  /* Form.cart täysleveäksi omalle riville */
  body.single-product form.cart,
  div.single-product form.cart {
    grid-column: 1 / -1 !important;
    float: none !important;
    width: 100% !important;
    margin: 30px 0 !important;
  }

  /* Tabs täysleveäksi */
  body.single-product .woocommerce-tabs,
  body.single-product .wpc-product-form,
  div.single-product .woocommerce-tabs,
  div.single-product .wpc-product-form {
    grid-column: 1 / -1 !important;
    float: none !important;
    width: 100% !important;
    margin: 0 0 30px 0 !important;
  }

  /* Piilota arvioiden lukumäärä */
  body.single-product .woocommerce-product-rating .woocommerce-review-link,
  div.single-product .woocommerce-product-rating .woocommerce-review-link {
    display: none !important;
  }

  /* Images container täyttää gridin */
  body.single-product .images,
  div.single-product .images {
    width: 100% !important;
  }

  /* KORJAUS: Pakota gallery näkyväksi (FlexSlider transition fix) */
  body.single-product .woocommerce-product-gallery,
  div.single-product .woocommerce-product-gallery {
    opacity: 1 !important;
  }

  /* Wrapper saa olla 100% leveä */
  body.single-product .images .woocommerce-product-gallery__wrapper,
  div.single-product .images .woocommerce-product-gallery__wrapper {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
  }

  /* Gallery image elementit vierekkäin vaakasuunnassa (FlexSlider tarvitsee tämän!) */
  body.single-product .images .woocommerce-product-gallery__image,
  div.single-product .images .woocommerce-product-gallery__image {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  body.single-product .images .woocommerce-product-gallery__wrapper img,
  div.single-product .images .woocommerce-product-gallery__wrapper img {
    width: 100% !important;
    max-height: 40vh !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Thumbnails - käytetään WooCommercen native layoutia, vain tyylit */
  body.single-product .images .flex-control-thumbs,
  div.single-product .images .flex-control-thumbs {
    margin-top: 10px !important;
    padding: 0 !important;
  }

  body.single-product .images .flex-control-thumbs li,
  div.single-product .images .flex-control-thumbs li {
    list-style: none !important;
    max-width: 80px !important; /* Rajoita thumbnailin leveyttä */
    max-height: 80px !important; /* Rajoita thumbnailin korkeutta */
  }

  body.single-product .images .flex-control-thumbs li img,
  div.single-product .images .flex-control-thumbs li img {
    border-radius: 4px !important;
    border: 2px solid transparent !important;
    transition: border-color 0.2s ease !important;
    max-width: 80px !important; /* Rajoita kuvan kokoa */
    max-height: 80px !important;
    object-fit: cover !important;
  }

  /* Aktiivinen thumbnail */
  body.single-product .images .flex-control-thumbs li.flex-active-slide img,
  div.single-product .images .flex-control-thumbs li.flex-active-slide img {
    border-color: var(--primary-green, #66BB6A) !important;
  }

  /* Hover-efekti */
  body.single-product .images .flex-control-thumbs li:hover img,
  div.single-product .images .flex-control-thumbs li:hover img {
    border-color: #999 !important;
    cursor: pointer !important;
  }
}

/* Ostoskorinappula keskelle ja min-width 50% */
body.single-product .single_add_to_cart_button,
div.single-product .single_add_to_cart_button {
  display: block;
  margin-left: auto;
  margin-right: auto;
  min-width: 50%;
  text-align: center;
}

/* Vinkit-osio: Korostettu, juuri ennen ostoskorinappulaa */
.calc-tips-section {
  background: linear-gradient(135deg, #fff9e6, #fffbf0);
  border-left: 4px solid #ffa500;
  padding: 25px 30px;
  margin: 30px 0;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(255, 165, 0, 0.15);
}

.calc-tips-section hr {
  border: none;
  border-top: 2px solid #ffd580;
  margin: 20px 0;
}

.calc-tips-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.calc-tips-section li {
  padding: 15px 0;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.calc-tips-section li strong {
  color: #ff8800;
  font-weight: 700;
}

/* Mobilessa säilytetään normaali pino-layout */
@media only screen and (max-width: 799px) {
  body.single-product .images,
  body.single-product .summary {
    float: none !important;
    width: 100% !important;
  }
}

/* ============================================
   Canvas positioning hoidetaan grid-layoutilla
   Ei tarvita vanhoja override-sääntöjä
   ============================================ */

/* ============================================
   MAIN GRID CONTAINER
   ============================================ */

.calculator-grid-wrapper {
  max-width: 100%;
  padding: 0;
  margin: 20px 0;
}

/* Desktop: 2 kolumnia (Vasen input-kentät | Oikea canvas) */
@media only screen and (min-width: 1190px) {
  .calculator-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "left center";
    gap: 30px;
    align-items: start;
    padding: 0 20px;
    overflow: visible; /* Sticky position tarvitsee tämän */
  }

  .calc-column-left {
    grid-area: left;
  }

  #canvas {
    grid-area: center;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 100px;
    align-self: flex-start; /* Grid sticky compatibility */
    z-index: 5;
  }

  /* Isommilla näytöillä thumbnailsien max-korkeus */
  body.single-product .images .flex-control-thumbs,
  div.single-product .images .flex-control-thumbs {
    max-height: 150px !important;
  }

  /* OUTPUT täysleveänä sivun lopussa */
  .calc-output-fullwidth {
    width: 100%;
    background: white;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    margin-top: 30px;
  }
}

/* Tablet: 2 kolumnia (Vasen input | Oikea canvas) */
@media only screen and (min-width: 800px) and (max-width: 1189px) {
  .calculator-grid-container {
    display: grid;
    grid-template-columns: 45% 55%;
    grid-template-areas:
      "left center";
    gap: 25px;
    padding: 0 15px;
    overflow: visible;
  }

  .calc-column-left {
    grid-area: left;
  }

  #canvas {
    grid-area: center;
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    align-self: flex-start;
    z-index: 5;
  }

  /* OUTPUT täysleveänä sivun lopussa */
  .calc-output-fullwidth {
    width: 100%;
    background: white;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    margin-top: 25px;
  }
}

/* Mobile: 1 kolumni (pitkä pötkö) */
@media only screen and (max-width: 799px) {
  .calculator-grid-container {
    display: block; /* Ei gridia, lineaarinen */
    padding: 0 10px;
  }

  .calc-column-left,
  #canvas {
    width: 100%;
    margin-bottom: 20px;
  }

  /* OUTPUT täysleveänä sivun lopussa */
  .calc-output-fullwidth {
    width: 100%;
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin-top: 20px;
  }

  /* Canvas fixed vanha tapa mobilessa */
  #canvas {
    /* Alkuperäinen fixed positioning säilyy */
  }
}

/* ============================================
   COLUMN STYLING
   ============================================ */

/* Vasen kolumni: Input-kentät */
.calc-column-left {
  background: white;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease;
}

.calc-column-left:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* Canvas: Mittakuva + hinta */
#canvas {
  background: white;
  padding: 5px;
  border-radius: 12px;
  border: 2px solid var(--primary-green, #66BB6A);
  box-shadow: 0 4px 16px rgba(102, 187, 106, 0.2);
  width: 100%;
  overflow: visible; /* Tarvitaan että sticky toimii */
}

#imgcanvas {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  padding: 10px;
}

#imgcanvas img {
  max-width: 100%;
  max-height: 800px;
  height: auto;
  width: auto;
  display: block;
  object-fit: contain;
}

/* OUTPUT yhteenveto: Täysleveänä sivun lopussa */
.calc-output-fullwidth {
  background: white;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.calc-output-fullwidth h4 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #1c1c1c;
  font-size: 20px;
}

/* calc-bottom-section poistettu, vinkit siirretty calc-tips-section:ksi */

/* ============================================
   TABLE STYLING (Input-kentät)
   ============================================ */

.calc-column-left table,
.calc-output-fullwidth table {
  width: 100%;
  border-collapse: collapse;
}

.calc-column-left table tr,
.calc-output-fullwidth table tr {
  border-bottom: 1px solid #f1f1f1;
}

.calc-column-left table tr:last-child,
.calc-output-fullwidth table tr:last-child {
  border-bottom: none;
}

.calc-column-left table td,
.calc-output-fullwidth table td {
  padding: 12px 8px;
  vertical-align: middle;
}

.calc-column-left table td:first-child {
  font-weight: 600;
  color: #1c1c1c;
  width: 40%;
}

/* Input fields */
.calc-column-left input[type="text"],
.calc-column-left input[type="number"],
.calc-column-left select {
  width: 100%;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 15px;
  transition: border-color 0.3s;
}

.calc-column-left input:focus,
.calc-column-left select:focus {
  border-color: var(--primary-green, #66BB6A);
  outline: none;
  box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.1);
}

/* ============================================
   HR LINES (jako-viivat)
   ============================================ */

.calc-column-left hr,
.calc-column-right hr {
  border: none;
  border-top: 2px solid #e0e0e0;
  margin: 20px 0;
}

/* ============================================
   RESPONSIVE TWEAKS
   ============================================ */

/* Tablet-specific */
@media only screen and (min-width: 800px) and (max-width: 1189px) {
  .calc-column-left,
  .calc-column-right {
    padding: 20px;
  }

  #imgcanvas {
    min-height: 350px;
  }
}

/* Mobile-specific */
@media only screen and (max-width: 799px) {
  .calc-column-left,
  .calc-column-right {
    padding: 15px;
    border-radius: 8px;
    overflow: hidden; /* Estää sisällön menemisen pyöristettyjen kulmien yli */
  }

  #imgcanvas {
    min-height: 250px;
  }

  .calc-column-left table td {
    display: block;
    width: 100%;
    padding: 8px 0;
    border-radius: 0 !important; /* Poista mahdolliset perityt border-radiukset */
  }

  .calc-column-left table td:first-child {
    font-weight: 700;
    padding-bottom: 10px; /* Enemmän tilaa label ja input väliin */
    text-align: center; /* Keskitä label-teksti */
    width: 100%; /* Varmista täysi leveys */
  }

  /* Toinen td (input/select kenttä) tarvitsee myös tilaa */
  .calc-column-left table td:nth-child(2) {
    padding-top: 5px;
  }

  /* Poista input-kenttien border-radius mobilessa jos ne aiheuttavat ongelmia */
  .calc-column-left input[type="text"],
  .calc-column-left input[type="number"],
  .calc-column-left select {
    border-radius: 4px; /* Pienempi border-radius mobilessa */
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  #canvas {
    position: static;
    page-break-inside: avoid;
  }

  .calculator-grid-container {
    display: block;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus states for keyboard navigation */
.calc-column-left a:focus,
.calc-column-left button:focus,
.calc-column-left input:focus,
.calc-column-left select:focus {
  outline: 2px solid var(--primary-green, #66BB6A);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .calc-column-left,
  #canvas,
  .calc-output-fullwidth,
  .calc-tips-section {
    border: 2px solid black;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }

  #canvas {
    position: static;
  }
}