/* Custom theme enhancements */

a:focus {
outline: 0 !important;
}

custom buttons
button {
border-radius: 9999px !important;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.6;
  padding-left: 1.5625rem;
  padding-right: 1.5625rem;
}

.custom-button, .custom-input, .woocommerce-Button, .wp-element-button {
border-radius: 9999px !important;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.6;
  padding-left: 1.5625rem;
  padding-right: 1.5625rem;
}

@media (max-width: 768px) { /* Adjust screen size if needed */
    .hide-on-mobile {
        display: none !important;
    }
}

/* PFS Form */

/* Remove border around form fields */
#pet-food-form fieldset {
    border: none; /* Remove the border around each form */
}

/* Form legend and label nowrap */
#pet-food-form fieldset legend {
	font-weight: bold; /* Make the legend text bold */
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflow */
    display: inline-block; /* Ensure inline layout */
}

#pet-food-form fieldset label {
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflow */
    display: inline-block; /* Ensure inline layout */
}

/* ============================= */
/* 🌟 SLIDER TRACK (BAR) 🌟 */
/* ============================= */

#protein-slider .noUi-target,
#fat-slider .noUi-target,
#fiber-slider .noUi-target,
#ash-slider .noUi-target,
#sodium-slider .noUi-target {
    background: #e0e0e0;
    height: 2px !important;
    border-radius: 5px;
    position: relative;
}

#protein-slider .noUi-connect,
#fat-slider .noUi-connect,
#fiber-slider .noUi-connect,
#ash-slider .noUi-connect,
#sodium-slider .noUi-connect {
    background: #333333;
    height: 2px !important;
}

/* ============================= */
/* 🎯 SLIDER HANDLES (DRAGGERS) 🎯 */
/* ============================= */

#protein-slider .noUi-handle,
#fat-slider .noUi-handle,
#fiber-slider .noUi-handle,
#ash-slider .noUi-handle,
#sodium-slider .noUi-handle {
    border-radius: 50%;
    border: 2px solid #ccc;
    background-color: #fcfcfc;
    width: 20px;
    height: 20px;
    top: -10px !important;
    transition: background-color 0.3s, transform 0.1s ease-in-out;
}

#protein-slider .noUi-handle:hover,
#fat-slider .noUi-handle:hover,
#fiber-slider .noUi-handle:hover,
#ash-slider .noUi-handle:hover,
#sodium-slider .noUi-handle:hover {
    background-color: #e5e5e5;
}

/* Remove pseudo-elements */
#protein-slider .noUi-handle:before,
#protein-slider .noUi-handle:after,
#fat-slider .noUi-handle:before,
#fat-slider .noUi-handle:after,
#fiber-slider .noUi-handle:before,
#fiber-slider .noUi-handle:after,
#ash-slider .noUi-handle:before,
#ash-slider .noUi-handle:after,
#sodium-slider .noUi-handle:before,
#sodium-slider .noUi-handle:after {
    display: none;
}

/* ============================= */
/* 🎭 TOOLTIP STYLING (VALUES) 🎭 */
/* ============================= */

#protein-slider .noUi-tooltip,
#fat-slider .noUi-tooltip,
#fiber-slider .noUi-tooltip,
#ash-slider .noUi-tooltip,
#sodium-slider .noUi-tooltip {
    background: transparent;
    font-size: 12px;
    color: #333;
    border: 0 !important;
}

/* ============================= */
/* 🏗 SLIDER CONTAINER STYLING 🏗 */
/* ============================= */

.range-slider {
    margin-top: 40px;
}

/* Adjust positioning for all sliders */
#protein-slider,
#fat-slider,
#fiber-slider,
#ash-slider,
#sodium-slider {
    height: 0px !important;
}

/* PFS RESULTS */
#results-table {
    width: 100%;
    border-collapse: collapse;
    display: grid; /* Use CSS Grid for layout */
    grid-template-columns: 1fr auto auto auto auto auto auto auto; /* First column flexible, others fixed */
    overflow-wrap: break-word; /* Break long words to fit in the cell */
    font-family: 'Fira Code', 'Courier New', monospace; /* Apply the monospace font */
    font-size: 0.8em; /* Adjust the font size as needed */
}

#results-table thead,
#results-table tbody {
    display: contents; /* Allows grid items to behave like regular table cells */
}

#results-table tr {
    display: contents; /* Use contents for grid layout */
}

#results-table th,
#results-table td {
    border-bottom: 1px solid #ddd;
    padding: 8px;
    overflow: hidden; /* Hide overflow content */
    text-overflow: ellipsis; /* Add ellipsis for overflow text */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    position: relative; /* Enable absolute positioning of pseudo-elements */
    font-family: inherit; /* Inherit the font from the table */
}

#results-table th {
    cursor: pointer;
    padding-right: 23px; /* Add padding for sorting indicator */
    text-align: left; /* Align header text */
}

/* Make the first column take up the remaining space and allow wrapping */
#results-table th:first-child,
#results-table td:first-child {
    white-space: normal; /* Allow wrapping for the first column */
    overflow-wrap: anywhere; /* Allow breaking long words anywhere */
}

/* Prevent wrapping for other columns */
#results-table th:not(:first-child),
#results-table td:not(:first-child) {
    white-space: nowrap; /* Prevent text from wrapping */
}

/* Add sorting markers for ascending and descending order */
#results-table th.sort-asc::after,
#results-table th.sort-desc::after {
    content: ""; /* Empty content by default */
    position: absolute;
    right: 5px; /* Position marker inside the header */
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em; /* Adjust size as needed */
}

#results-table th.sort-asc::after {
    content: "▲"; /* Ascending marker */
}

#results-table th.sort-desc::after {
    content: "▼"; /* Descending marker */
}

/* Right-align for numeric data and center-align for Bloomscore */
#results-table th:nth-child(2),
#results-table th:nth-child(3),
#results-table th:nth-child(4),
#results-table th:nth-child(5),
#results-table td:nth-child(2),
#results-table td:nth-child(3),
#results-table td:nth-child(4),
#results-table td:nth-child(5) {
	text-align: right;
}

#results-table th:nth-child(3) {
padding-left: 3em;
}

#results-table th:nth-child(6),
#results-table td:nth-child(6) {
    text-align: center;
}

/* Set light gray background for even rows */
#results-table tr:nth-child(even) {
    background-color: #d5d5d5 !important; /* Light gray background with !important */
}

/* Responsive styles for mobile view */
@media (max-width: 768px) {
    #results-table {
        width: 100%;
        display: block; /* Use block display for responsive design */
    }

    #results-table thead {
        display: none; /* Hide the table header for small screens */
    }

    #results-table tr {
        display: block; /* Make each row a block */
        margin-bottom: 15px; /* Add spacing between rows */
        border: 0;
        border-top: 1px solid #ddd;
    }

    #results-table td {
        display: flex; /* Use flexbox for alignment */
        justify-content: space-between; /* Space out label and value */
        padding: 8px 10px; /* Add consistent padding */
        text-align: left; /* Align text to the left by default */
        position: relative;
    }

    /* Specific styling for Name column to wrap and have padding */
    #results-table td[data-label="Name"] {
        white-space: normal; /* Allow wrapping for the Name column */
        word-break: break-word; /* Break long words */
        padding-right: 15px; /* Ensure right padding */
        width: 100%;
    }

    /* Right-align numeric data in mobile view */
    #results-table td[data-label="Protein"],
    #results-table td[data-label="Fat"],
    #results-table td[data-label="Fiber"],
    #results-table td[data-label="kCal/kg"] {
        justify-content: flex-end; /* Align numbers to the right */
        text-align: right; /* Ensure text alignment is correct */
    }

    /* Center-align Bloomscore */
    #results-table td[data-label="Bloomscore"] {
        justify-content: center; /* Center-align Bloomscore */
        text-align: center; /* Ensure text alignment is correct */
    }

    #results-table td::before {
        content: attr(data-label); /* Dynamically set the content from data-label attribute */
        font-weight: bold;
        margin-right: 10px; /* Add space between label and value */
        white-space: nowrap;
    }

    #results-table td:last-child {
        border-bottom: none; /* Remove bottom border from the last row */
    }
}

/* BLOOMDEX */
.bloomdex-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Distributes columns evenly */
}

.bloomdex-column {
    width: 50%; /* Two columns taking up equal space */
    padding-right: 3.3%; /* Only right padding for spacing */
    box-sizing: border-box; /* Ensures padding doesn’t expand the width */
}

/* Remove padding on the last column in each row */
.bloomdex-column:nth-child(2n) {
    padding-right: 0;
}

.bloomdex-letter {
    margin: 50px 0 15px 0;
    font-size: 24px;
    font-weight: bold;
}

.bloomdex-item {
    margin-bottom: 15px;
}

.bloomdex-item a {
    text-decoration: none !important;
}

.bloomdex-item a:hover {
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
}

.alphabet-nav {
    text-align: center;
    margin-bottom: 20px;
}

.alphabet-nav a {
    margin: 0 10px;
    font-size: 18px;
    text-decoration: none;
}

.alphabet-nav a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px !important;    
}

/* ACCESS CONTROL */
.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.premium-message {
    display: block;
}

/* QUIZ */
#quiz p, #quiz label {font-size: 1rem;}

#quiz .question:nth-child(even) {
    background-color: #f6f6f6; /* Light gray for even questions */
}

#quiz .question:nth-child(odd) {
    background-color: #ffffff; /* White for odd questions */
}

#quiz .question {
    padding: 10px; /* Add spacing for readability */
    border-radius: 5px; /* Slight rounding for a cleaner look */
    margin-bottom: 20px; /* Add spacing between questions */
}

#result p {font-size: 1rem;}

#quizChart {margin-top: 40px;}


/* NUTRIENT CALCULATOR */
.nutrient-calculator .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 768px) {
  .nutrient-calculator .wp-block-columns {
    gap: 8px;
  }
}

.nutrient-calculator input[type="number"] {
  max-width: 5em;
  font-size: 14px;
  padding: 4px 6px;
  box-sizing: border-box;
}

/* Set font size for all content inside the calculator */
.nutrient-calculator .wp-block-column,
.nutrient-calculator .wp-block-column p,
.nutrient-calculator .wp-block-column input,
.nutrient-calculator .wp-block-column div {
  font-size: 0.9rem;
  font-family: inherit;
}

/* Adjust inputs specifically */
.nutrient-calculator input[type="number"] {
  width: 5em;
  padding: 4px;
  font-size: 0.9rem;
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Remove up/down arrows in inputs */
.nutrient-calculator input[type="number"]::-webkit-outer-spin-button,
.nutrient-calculator input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Center results and make them consistent */
.nutrient-calculator .result-a p,
.nutrient-calculator .result-b p {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  font-family: inherit;
}