/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-child
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/
/* General Layout */
.offerte-tool-container {
    display: flex;
    font-family: Arial, sans-serif;
    padding: 20px;
    margin: 0;
    box-sizing: border-box;
    background-color: #f9f9f9;
    padding-left: 20vw;
}

/* Left Side Navigation */
.offerte-tool-menu {
    width: 15vw;
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 8px;
    margin-right: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 30px;
    left: 30px;
}

.offerte-tool-menu ul {
    list-style-type: none;
    padding: 0;
}

.offerte-tool-menu ul li {
    margin-bottom: 15px;
}

.offerte-tool-menu a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 1.1em;
}

.offerte-tool-menu a:hover {
    color: #007bff;
}

/*--------------------------------------------*/
/*menu behaviour*/
/*--------------------------------------------*/
/*.offerte-tool-content section {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.offerte-tool-content section.active {
  display: block;
  opacity: 1;
}*/
.offerte-tool-content section {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    width: 100%;
    transition: left 0.5s ease;
    opacity: 0;
}

.offerte-tool-content section.active {
    display: block;
    left: 0;
    opacity: 1;
    position: relative;
}

.offerte-tool-menu li a.active {
    font-weight: bold;
    color: #0073aa;
    /* Customize as needed */
}

/*--------------------------------------------*/
/* Volgende Vorige */
/*--------------------------------------------*/
.section-nav-buttons {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.section-nav-buttons.align-right {
    justify-content: flex-end;
}

.section-nav-buttons button {
    padding: 10px 20px;
    background: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.section-nav-buttons button:hover {
    background: #005d8f;
}

/*--------------------------------------------*/
/* Content Section */
.offerte-tool-content {
    width: 75vw;
}

section {
    margin-bottom: 40px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2, h3 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 20px;
}

h4 {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 15px;
}

/* Form Styling */
.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.form-row label , .table-container label {
    min-width: 200px;
    font-weight: bold;
    margin-right: 15px;
    /* white-space: nowrap; */
}

section:is(#voorbereiding,#ontruimen,#voorbereiding-afwatering-systeem) .form-row label:nth-child(1) {
    width: 400px
}

input[type=text],select,label {
    min-width: 200px ;
    box-sizing: border-box ;
}

.bijzondere-benodigdheden-container input[type=text], .bijzondere-benodigdheden-container select {
    width: 180px !important ;
    min-width: 00px ;
}

.bijzondere-benodigdheden-container label {
    min-width: 120px;
    /* width: 0; */
}

label.label_no_min-width {
    min-width: initial !important ;
}

.form-row input[type="text"], .form-row input[type="number"], .form-row select, .form-row textarea , .table-container input[type="text"], .table-container input[type="number"], .table-container select, .table-container textarea {
    width: 100%;
    max-width: 400px;
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-right: 15px;
}

.form-row .div_input , .table-container .div_input {
    /* width: 100%; */
    /* max-width: 400px; */
    padding: 10px;
    font-size: 1em;
    box-sizing: border-box;
    width: fit-content;
    /* background-color: red; */
    /* margin-right: 15px; */
    /*background-color: red;*/
    /* width: fit-content; */
}

.flex_row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.form-row input[type="radio"] , .table-container input[type="radio"] {
    margin-right: 5px;
}

textarea {
    height: 100px;
}

button {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    font-size: 1em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

/* Conditional Inputs */
.conditional {
    display: none;
    margin-top: 10px;
}

.conditional input[type="text"], .conditional select {
    margin-top: 10px;
}

/* Dynamic Output */
.form-row p {
    margin: 10px 0;
    font-size: 1.2em;
    color: #333;
}

/* Radio Buttons */
.form-row input[type="radio"] {
    margin-right: 10px;
}

/* Styling the Dynamic Output for better visibility */
#artnr-leverancier, #verkoopprijs, #gekozen-tegel-naam, #gekozen-tegel-prijs, #fabrikant-info {
    font-weight: bold;
    color: #333;
}

/* Footer/Bottom Section */
footer {
    margin-top: 40px;
    text-align: center;
    color: #777;
}

/* Specific Section Styling */
section#grondwerk h2, section#materiaal-volkeramische-tegels h2, section#overige-bestrating-en-diversen h2 {
    font-size: 1.8em;
    color: #444;
    margin-bottom: 20px;
}

/* Adjust for Input Fields */
input[type="text"], input[type="number"], textarea {
    font-size: 1.1em;
}

input[type="radio"] {
    margin: 0 10px 0 0;
}

label {
    font-size: 1em;
}

select, input[type="text"], input[type="number"], textarea {
    font-size: 1.1em;
}

button {
    margin-top: 20px;
}

/* Section Spacing */
section h3 {
    margin-top: 30px;
}

.form-row {
    margin-bottom: 15px;
}

/* Adjust Radio Button Layout */
.form-row label {
    display: inline-block;
    margin-right: 10px;
    font-weight: normal;
}

.form-row input[type="radio"] {
    margin-left: 10px;
}

/*---------------------- dynamic content ------------------------*/
/* filter */
/*
.filter-columns {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.filter-col {
  flex: 1;
}

.filter-col h4 {
  margin-bottom: 10px;
}

.merk-option, .serie-option, .formaat-option {
  cursor: pointer;
  padding: 5px 10px;
  background: #eee;
  margin-bottom: 5px;
  border-radius: 4px;
}

.merk-option.active, .serie-option.active, .formaat-option.active {
  background: #0073aa;
  color: white;
}

.thumbnail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.tegel-thumb {
  text-align: center;
  cursor: pointer;
}

.tegel-details {
  border-collapse: collapse;
  width: 100%;
  margin-top: 20px;
}

.tegel-details td {
  border: 1px solid #ccc;
  padding: 6px 10px;
}
*/
/* Container and Section */
#materiaal-volkeramische-tegels {
    max-width: 1200px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    padding: 20px;
}

#materiaal-volkeramische-tegels h2 {
    text-align: center;
    margin-bottom: 30px;
}

/* Ruimte Container */
.ruimte-container , .bestrating-container ,.benodigdheden-container {
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 40px;
    background-color: #fafafa;
    border-radius: 6px;
}

/* Flex row and columns */
.flexy-row {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;
}

.flexy-col {
    flex: 1 1 150px;
    min-width: 150px;
    display: flex;
    flex-direction: column;
}

/* Headers in columns */
.flexy-col h3 {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 1.1em;
    color: #333;
}

/* Select inputs */
select {
    padding: 6px 10px;
    font-size: 1em;
    border: 1px solid #bbb;
    border-radius: 4px;
    cursor: pointer;
    background-color: #fff;
    transition: border-color 0.3s ease;
}

select:hover, select:focus {
    border-color: #005fcc;
    outline: none;
}

/* Maatvoering inputs */
.aantal-meters {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aantal-meters input[type="text"] {
    width: 60px;
    padding: 6px 8px;
    font-size: 1em;
    border: 1px solid #bbb;
    border-radius: 4px;
    text-align: center;
}

.ruimte-maatvoering .aantal-meters input {
    min-width: 80px
}

.aantal-meters div {
    font-weight: 700;
    font-size: 1.1em;
}

/* Result m2 */
.result-ruimte-aantalm2 {
    font-weight: 600;
    font-size: 1.2em;
    color: #007a00;
    padding-top: 6px;
    min-height: 28px;
}

/* Keramische Buitentegel radios */
.form-row {
    margin: 20px 0;
    display: flex;
    gap: 30px;
    flex-wrap: nowrap;
    align-items: center;
}

table.table-berekening select {
    margin: 10px 0;
}

.label_group {
    margin: 10px 10px 10px 0;
    display: flex;
    gap: 30px;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap
}

.input_group {
    margin: 10px 0;
    display: flex;
    gap: 0px;
    flex-wrap: nowrap;
    align-items: center;
}

.justify-content-right {
    justify-content: flex-end;
}

.euro:before {
    content: '\20AC';
    margin: 0 5px 0 0;
}

.form-row {
    align-items: stretch;
}

.form-row.project_info {
    align-items: flex-start
}

h3.subtitle {
    font-size: 20px;
}

.table-container table.table-berekening {
    border: 1px solid #ccc;
    padding: 20px;
    /* margin-bottom: 40px; */
    background-color: #fafafa;
    border-radius: 6px;
    min-width: 700px
}

.table-container table.table-cost {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 20px;
    /* margin-bottom: 40px; */
    /* background-color: #fafafa; */
    border-radius: 6px;
    /* min-width: 700px */
}

.color_red {
    color: red;
}

.euro_cost:before {
    content: '\20AC';
    margin: 0 5px 0 0;
}

.flex-bottom {
    justify-content: flex-end;
}

.table-berekening {
    width: 500px
}

.form-row label , .td_label {
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.form-row input[type="radio"] {
    margin-right: 6px;
    cursor: pointer;
}

/* Filter Columns */
.filter-columns {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.filter-col {
    flex: 1 1 150px;
    min-width: 150px;
}

.filter-col h4 {
    margin-bottom: 10px;
    font-size: 1em;
    font-weight: 700;
    color: #222;
    border-bottom: 2px solid #ccc;
    padding-bottom: 4px;
}

/* Filter option blocks */
.merk-option, .serie-option, .formaat-option {
    padding: 8px 10px;
    margin-bottom: 6px;
    background-color: #f0f0f0;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.merk-option:hover, .serie-option:hover, .formaat-option:hover {
    background-color: #d6e4ff;
    color: #0047b3;
}

/* Active states */
.merk-option.active, .serie-option.active, .formaat-option.active {
    background-color: #005fcc;
    color: white;
    font-weight: 700;
    border: 1px solid #004799;
}

/* Thumbnail row */
.thumbnail-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-start;
    min-height: 80px;
    border-top: 1px solid #ddd;
    padding-top: 15px;
}

.thumbnail-row p {
    /* white-space: nowrap */
}

.thumbnail-heading {
    width: 100%;
    margin-bottom: 10px;
    font-weight: 700;
    color: #444;
    font-size: 1.1em;
}

/* Thumbnails */
.thumbnail {
    width: 200px;
    cursor: pointer;
    text-align: center;
    border: 2px solid transparent;
    padding: 6px;
    border-radius: 6px;
    transition: border-color 0.3s ease;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

.thumbnail img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    margin-bottom: 6px;
}

.thumbnail:hover {
    border-color: #005fcc;
}

/* Thumbnail selected */
.thumbnail.selected {
    border-color: #007a00;
    background-color: #e6ffe6;
}

/* Gekozen tegel (selected tegel info) */
.gekozen-tegel {
    margin-top: 15px;
    border-top: 1px solid #ccc;
    padding-top: 12px;
    font-size: 0.9em;
    color: #333;
}

.gekozen-tegel img {
    max-width: 150px;
    display: block;
    margin-bottom: 10px;
    border-radius: 6px;
}

.gekozen-tegel h4 {
    margin: 0 0 6px 0;
    font-weight: 700;
    font-size: 1.1em;
}

.gekozen-tegel p {
    margin: 3px 0;
}

/* Buttons */
#add-ruimte-btn, .ruimte-add-tegel {
    cursor: pointer;
    padding: 10px 16px;
    background-color: #005fcc;
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: 700;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

#add-ruimte-btn:hover, .ruimte-add-tegel:hover {
    background-color: #004799;
}

/* Responsive */
@media (max-width: 768px) {
    .flexy-row {
        flex-direction: column;
    }

    .filter-columns {
        flex-direction: column;
    }

    .filter-col {
        min-width: auto;
    }

    .thumbnail {
        width: 80px;
    }

    .gekozen-tegel img {
        max-width: 100%;
    }
}

/* ---------------------- adjusment --------------------- */
.tegel-filter {
    background-color: #f8f8f6;
    margin: 20px 0;
    padding: 20px ;
    border: 1px solid #dbdbdb;
    border-radius: 5px;
}

.flexy-col.ruimte, .flexy-col.toepassingen {
    max-width: 25% !important
}

.flexy-row.maatvoering {
    width: 50% !important
}

.selected-tegel img {
    max-width: initial !important;
    height: auto !important;
    width: 400px !important;
}

#section-berekening-verwerking-uitvoering table.table-p12 {
    /* background-color: yellow; */
    width: 1000px;
    border-collapse: collapse;
}

#section-berekening-verwerking-uitvoering table.table-p12 > thead> tr> td:nth-child(1) {
    /* background-color: red; */
    min-width: 300px
}

#section-berekening-verwerking-uitvoering table.table-p12 > tbody>tr> td {
    border: 1px solid #c4c4c4;
    padding: 0px 10px;
}

#section-berekening-verwerking-uitvoering table.table-p12 input {
    border: none
}

#section-berekening-verwerking-uitvoering table.table-p12 thead td {
    padding: 10px 10px;
    font-weight: bold;
    background-color: #d1e1ff;
}

#section-berekening-verwerking-uitvoering .form-row input[type="text"] {
    width: 130px !important;
    min-width: auto;
    background-color: #f2f1f1;
    padding: 5px 10px;
    margin: 10px 0
}

.result_table_container {
    margin: 20px;
    /* background-color: red; */
}

.result_table_container div.euro {
    min-width: 130px !important;
    min-width: auto;
    background-color: #f2f1f1;
    padding: 5px 10px;
    font-weight: bold;
    /* margin: 10px 0 */
}

.div_result_calKeramischeBestrating_terrasType , .div_result_calOverigeBestrating_terrasType {
    font-size: 14px;
    font-style: italic;
}

.div_result_calKeramischeBestrating_terrasType:before , .div_result_calOverigeBestrating_terrasType:before {
    content: '(';
}

.div_result_calKeramischeBestrating_terrasType:after , .div_result_calOverigeBestrating_terrasType:after {
    content: ')';
}

.div_flex_unit {
    display: flex;
}

.div_flex_unit span {
    margin: 0 0 0 10px
}

/* ----- saving ----- */
.new_saved_project {
    width: 1200px;
    margin: 0 auto
}

.offerte-chooser {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin: 12px 0 20px;
}

.offerte-chooser__card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 16px;
}

.offerte-chooser__title {
    margin: 0 0 8px;
}

.offerte-chooser__text, .offerte-chooser__hint {
    margin: 8px 0 0;
    color: #555;
}

.offerte-chooser__form {
    display: grid;
    gap: 8px;
    margin-top: 6px;
}

.offerte-chooser__select {
    max-width: 100%;
}

/*saving button*/

  .offerte-actions{
    display:flex; justify-content:space-between; align-items:center;
    gap:12px; padding:12px; border:1px solid #e5e5e5; border-radius:8px; background:#fff; margin:16px 0;
  }
  .offerte-actions__left{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .offerte-actions__right{ color:#444; font-size:13px; }
  .offerte-actions__status{ margin-left:6px; min-width:120px; display:inline-block; }







/*-------------------*/
/* offerte overzicht */
/*-------------------*/

       .table_offerte_html {
            width: 100%;
            border-collapse: collapse; /* Using collapse for simpler border control */
            overflow: hidden; 
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            background-color: white;
            border-radius: 12px;
        }

        /* Cell Styling: Padding and Border (Row and Column Borders) */
        .table_offerte_html th,
        .table_offerte_html td {
            padding: 12px 16px; 
            border-bottom: 1px solid #e5e7eb; /* Horizontal (Row) Border */
            border-right: 1px solid #e5e7eb;  /* Vertical (Column) Border */
            text-align: left;
            vertical-align: top; 
        }

        /* Remove border from the last column of the table (clean right edge) */
        .table_offerte_html th:last-child,
        .table_offerte_html td:last-child {
            border-right: none;
        }

        /* Header Styling */
        .table_offerte_html thead th {
            background-color: #eef2ff; /* Very light blue background for the header */
            color: #1f2937; /* Dark text */
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-bottom: 2px solid #93c5fd; /* Stronger border under the header */
        }

        /* Highlight special rows (subheaders/titles using colspan=7) */
        .table_offerte_html tr:has(> td[colspan='7']) td {
            background-color: #f3f4f6; /* Lighter background for section headers */
            font-weight: 700;
            padding: 10px 16px;
            border-bottom: 1px solid #d1d5db;
        }
        
        /* Ensure the last row has no bottom border */
        .table_offerte_html tr:last-child td {
            border-bottom: none;
        }