/* ===== CSS Variables ===== */
:root {
  /* Colors */
  --kc-primary: #663399;
  --kc-primary-light: #663399bf;
  --kc-secondary: #6c5ce7;
  --kc-secondary-alt: #6c5ce76e;
  --kc-accent: #a55eea;
  --kc-text: #2d3748;
  --kc-text-light: #718096;
  --kc-text-on-dark: #fff;
  --kc-border: #e2e8f0;
  --kc-bg: #fff;
  --kc-bg-alt: #f8fafc;
  
  /* Spacing */
  --kc-space: 1em;
  --kc-space-sm: .5em;
  --kc-space-lg: 1.5em;
  
  /* Typography */
  --kc-font-size: 1rem;
  --kc-font-size-sm: 0.875rem;
  --kc-font-size-lg: 1.25rem;
  --kc-line-height: 1.5;
  
  /* Effects */
  --kc-radius: 8px;
  --kc-radius-sm: 4px;
  --kc-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --kc-transition: all 0.3s ease;
  
  /* Responsive typography */
  --responsive-text: clamp(0.8rem, 0.7rem + 0.5vw, 1.1rem);
}

/* ===== Base Styles ===== */
#ketoForm {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  margin: 0 auto;
  padding: var(--kc-space-sm);
  background: var(--kc-bg);
  border-radius: var(--kc-radius);
  box-shadow: var(--kc-shadow);
  width: 600px;
  justify-items: center;
}

/* ===== Form Structure ===== */
.calc-form-wrapper {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--kc-space-sm);
  padding-bottom: var(--kc-space-lg);

  @media (max-width: 1000px) {
    display: flex;
    flex-wrap: wrap;
  }
}

.calc-side-panel {
  font-size: 1.3rem;
  padding: 0 var(--kc-space-lg) 0 0;
  container-type: inline-size;
  min-width: 400px;
  padding-block: var(--kc-space-lg);
  & strong {
    font-weight: 700;
  }

  & p {
    font-size: var(--kc-font-size);
    margin-block-start: 0;
    text-wrap: balance;
  }
  @media (max-width: 1000px) {
    min-width: unset;
    width: 100%;
    padding: var(--kc-space-lg);
    & p {
      font-size: var(--kc-font-size-lg);
    }
  }
}

.form-section {
  margin-bottom: var(--kc-space-lg);
  padding-bottom: var(--kc-space);
  border-bottom: 1px solid var(--kc-border);
  width: 100%;

  &:last-child {
    border-bottom: none;
  }
}

.form-section-title {
  color: var(--kc-text);
  font-size: var(--kc-font-size-lg);
  margin: 0 0 var(--kc-space) 0;
  padding-bottom: var(--kc-space-sm);
  border-bottom: 2px solid var(--kc-border);
  display: flex;
  align-items: center;

  .dashicons {
    margin-right: var(--kc-space-sm);
    color: var(--kc-primary);
  }
}

.form-row {
  display: flex;
  gap: var(--kc-space);
  margin-bottom: var(--kc-space);

  @media (max-width: 480px) {
    flex-direction: column;
  }
}

.form-group {
  width: 100%;
  flex: 1;

  &.activity {
    margin-bottom: var(--kc-space);
  }
}

/* ===== Form Controls ===== */
.form-label {
  display: flex;
  align-items: center;
  margin-bottom: var(--kc-space-sm);
  font-weight: 500;
  color: var(--kc-text);

  .dashicons {
    margin-right: var(--kc-space);
    color: var(--kc-primary);
    font-size: 1.6rem;
  }

  & span {
    margin-left: var(--kc-space-sm);
    color: var(--kc-secondary);
    opacity: 0.7;
  }
}

input[type="number"],
input[type="text"],
select {
  width: 100%;
  padding: var(--kc-space-sm) var(--kc-space);
  border: 1px solid var(--kc-border)!important;  /* Override wordpress/theme styling to avoid conflicting style */
  border-radius: var(--kc-radius-sm);
  font-size: var(--kc-font-size);
  transition: var(--kc-transition);
  background-color: var(--kc-bg-alt)!important; /* Override wordpress/theme styling to avoid conflicting style */
  color: var(--kc-text);
  background: none!important; /* Override wordpress/theme styling to avoid conflicting style */

  &:focus {
    outline: none;
    border-color: var(--kc-primary);
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
  }
}

input#net_carbs {
  width: unset;
}

.input-with-unit {
  position: relative;
  display: flex;
  align-items: center;

  input {
    padding-right: 40px;
  }

  .unit {
    position: absolute;
    right: 15px;
    color: var(--kc-text-light);
    font-size: var(--kc-font-size-sm);
  }
}

.select-wrapper {
  position: relative;

  select {
    appearance: none;
    padding-right: 35px;
  }

  .dashicons {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--kc-text-light);
  }
}

/* ===== Radio Buttons ===== */
.radio-group {
  margin-bottom: var(--kc-space);
}

.radio-options {
  display: flex;
  gap: var(--kc-space);
  margin-top: var(--kc-space-sm);
}

.radio-option {
  display: flex;
  align-items: center;
  padding: var(--kc-space-sm) var(--kc-space);
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius);
  background: var(--kc-bg-alt);
  cursor: pointer;
  transition: var(--kc-transition);
  flex: 1;
  margin: 0;

  &:hover {
    border-color: color-mix(in srgb, var(--kc-border) 70%, black);
  }

  input {
    position: absolute;
    opacity: 0;
  }

  input:checked ~ & {
    background: color-mix(in srgb, var(--kc-primary) 5%, transparent);
    border-color: var(--kc-primary);
  }
}

.radio-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--kc-border);
  border-radius: 50%;
  margin-right: var(--kc-space-sm);
  position: relative;
  transition: var(--kc-transition);

  input:checked ~ & {
    border-color: var(--kc-primary);
    background-color: var(--kc-primary);
  }

  input:checked ~ &::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.radio-label {
  margin-right: var(--kc-space-sm);
  font-weight: 500;
}

.radio-option .dashicons {
  margin-left: auto;
  color: color-mix(in srgb, var(--kc-text-light) 50%, white);

  input:checked ~ & {
    color: var(--kc-primary);
  }
}

/* ===== Button Styles ===== */
.keto-calc-btn {
  width: fit-content;
  height: 3rem;
  justify-self: center;
  padding: var(--kc-space);
  background: linear-gradient(135deg, var(--kc-secondary) 0%, var(--kc-accent) 100%);
  color: var(--kc-text-on-dark);
  border: none;
  border-radius: var(--kc-radius);
  font-size: var(--kc-font-size);
  font-weight: 600;
  cursor: pointer;
  transition: var(--kc-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--kc-space-sm);

  &:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--kc-secondary) 90%, black) 0%, color-mix(in srgb, var(--kc-accent) 90%, black) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.2);
  }

  .dashicons {
    margin-right: var(--kc-space-sm);
    font-size: 1.25rem;
  }
}

/* ===== Results Section ===== */
#ketoResults {
  flex-direction: column;
  transition: opacity var(--kc-transition);

  &:focus {
    outline: none !important;
  }

  p {
    margin-block-end: 0.4em;
  }
}

.main-results {
  padding-block: 3em;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--kc-border);

  @media (max-width: 1000px) {
    flex-direction: column;
  }
}

.results-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--kc-space);

  @media (max-width: 1000px) {
    align-items: center;
    text-align: center;
  }
}

.result-group {
  width: 70%;
  border-radius: var(--kc-radius-sm);
  padding: var(--kc-space-sm) var(--kc-space-lg);
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--kc-shadow);

  p {
    text-wrap: balance;
    line-height: 1;
    margin-block-start: 0;

    i {
      font-size: var(--kc-font-size-sm);
    }
  }

  p.value {
    width: 100%;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: var(--kc-radius-sm);
    background: linear-gradient(135deg, var(--kc-secondary) 0%, var(--kc-accent) 100%);
    color: var(--kc-text-on-dark);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.48);
    letter-spacing: 1px;
    margin-block-start: 0;
    
  }
}

.chart-wrapper {
  min-width: 50%;
  display: flex;
  flex-direction: column;
}

.chart-summary {
  text-align: center;

  span {
    color: var(--kc-accent);
    font-style: italic;
    font-weight: 600;
  }

  p {
    margin-block-start: 0;
    text-wrap: balance;
  }

  @media (max-width: 768px) {
    margin-top: -6em;
  }
}

#chart {
  margin: var(--kc-space-lg) auto;
}

.form-description {
  padding: 0 4px;
  margin-block: 1em;
}

.variations-header {
  padding-inline: 2.5em;

  h3 {
    margin-block-start: 0;
    margin-block-end: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: underline;
    text-underline-offset: 6px;
  }

  p {
    margin-block-start: var(--kc-space-sm);
  }

  @media (max-width: 1000px) {
    margin-top: var(--kc-space);
  }
}

/* ===== Chart Slider Styles ===== */
.chart-slider-wrapper {
  position: relative;
  width: 100%;
  margin: var(--kc-space-lg) 0;
  align-items: center;
  justify-content: flex-start;
  gap: var(--kc-space-lg);
  @media (max-width: 1000px) {
    margin: 0;
  }
}

.chart-slider-container {
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
  }
}

.chart-slider {
  display: flex;
  width: max-content;
  gap: var(--kc-space-lg);
  padding: var(--kc-space-lg);
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: var(--kc-space);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: var(--kc-transition);

  &:hover {
    background: var(--kc-primary);
  }

  &.active {
    background: var(--kc-primary);
    transform: scale(2, 1.5);
    border-radius: 10px;
    filter: drop-shadow(0px 0px 0.75rem rgba(0, 0, 0, 0.6));
  }
}

.deficit-chart-slide,
.surplus-chart-slide {
  height: 100%;
  scroll-snap-align: center;
  width: 50vw;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--kc-secondary-alt) 0%, var(--kc-accent) 100%);
  padding: var(--kc-space);
  border-radius: var(--kc-radius);
  box-shadow: 0px 3px 18px 1px rgba(0, 0, 0, 0.54);
}

.slider-nav {
  position: absolute;
  bottom: -2em;
  margin-inline: 3.5em;
  background: var(--kc-primary);
  width: 3em;
  height: 3em;
  color: white;
  border: none;
  border-radius: 1em;
  padding: 10px 4px;
  cursor: pointer;
  z-index: 9999;
  opacity: .6;
  transition: var(--kc-transition);

  &:hover {
    background: var(--kc-primary-light);
  }

  &.prev {
    left: 10px;
  }

  &.next {
    right: 10px;
  }

  @media (max-width: 768px) {
    display: none;
  }
}

/* ===== ApexCharts Customization ===== */
.apexcharts-svg {
  overflow: visible !important;
}

.apexcharts-pie {
  min-height: 300px;
}

.apexcharts-pie-series {
  transition: scale 0.2s ease;
  transform-origin: bottom right;

  &:hover {
    scale: 1.03;
    cursor: help;
  }

  &:nth-of-type(1) {
    transform-origin: top left;
  }

  &:nth-of-type(3) {
    transform-origin: bottom;
  }
}

.apexcharts-legend-text {
  color: black !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  margin-left: 0.1ch !important;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5) !important;
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 768px) {
  .deficit-chart {
    min-height: 300px;
  }
}

@media (max-width: 1200px) and (min-width: 1000px) {
  .calc-side-panel {
    font-size: var(--responsive-text);
  }
}