/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

html {
  --mm-color-border: #4a5568;
  --mm-color-background: #ffffff;
  --mm-color-foreground: #2d3748;
  --mm-color-accent: #0073aa;
  --mm-color-primary: #005177;
  --mm-color-primary-dark: #1D5E8C;
}

/* Form Fields Row */
.hkts-mm-field-row {
  display: grid;
  grid-template-columns: 1fr;
  /* margin-bottom: 20px; */
  gap: 12px;
  margin-bottom: 24px;
  &.hkts-mm-field-full {
    grid-template-columns: 1fr;
  }
  > .hkts-mm-form-group  {
    margin-bottom: 0;
  }
  > .hkts-mm-form-group.show  {
    margin-bottom: 20px;
  }
  > .hkts-mm-form-group.show:last-child {
    margin-bottom: 20px;
  }
  @media (min-width: 48rem) {
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
  }
}
.hkts-mm-field-row-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 20px;
  @media (min-width: 48rem) {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* Form Groups */
.hkts-mm-form-group {
  margin-bottom: 24px;
  position: relative;

  label,
  legend,
  span {
    /* display: block; */
    margin-block-end: 0.5em;
    font-weight: 400;
    color: var(--mm-color-primary-dark);
    font-size: 1rem;
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
    padding:0px;
  }
  span {
    margin-block-end: 0em;
  }

  &:focus-within label,
  &:focus-within legend {
    color: var(--mm-color-accent);
  }
  .required {
    color: #e53e3e;
  }

  input:where([type="text"], [type="email"], [type="password"], [type="tel"], [type="number"]),
  select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #D9D9D9;
    border-radius: 12px;
    box-sizing: border-box;
    font-size: 1rem;
    font-family: inherit;
    background-color: #ffffff;
    color: #2d3748;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    &:focus-visible {
      outline: none;
      border-color: var(--mm-color-accent);
    }
    &:not(:focus):user-invalid {
      border-color: #e53e3e;
      ~ .select2 .select2-selection {
        border-color: #e53e3e;
      }
    }
    @media (min-width: 48rem) {
      padding: 16px 20px;
    }
  }
  select:focus {
    --tw-ring-color: var(--mm-color-accent);
    outline: none;
    border-color: var(--mm-color-accent);
  }
  .select2 {
    display: block;
    .select2-selection  {
      padding: 14px 16px;
      height: auto;
      border: 1px solid #D9D9D9;
      border-radius: 12px;
      box-sizing: border-box;
      font-size: 1rem;
      font-family: inherit;
      background-color: #ffffff;
      
      transition: all 0.3s ease;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    }
    .select2-selection__rendered {
      color: #2d3748;
    }
    .select2-selection__arrow {
      height: auto;
      top: 50%;
    }
    .select2-selection__choice {
      background: #eee;
      border: 0px;
    }
    .select2-selection__choice__remove {
      border-right: none;
    }
  }

  /* Checkbox Group */
  &:has(input[type="checkbox"]) {
    /* margin-bottom: calc(var(--spacing) * 8); */
    label {
      display: flex;
      align-items: center;
      margin: 0;
      font-weight: 500;
      cursor: pointer;
      padding: 8px 12px;
      border-radius: 8px;
      transition: all 0.2s ease;
      padding:0px;
      &:hover {
        background-color: #edf2f7;
        color: #2d3748;
      }
    }
  }
  input[type="checkbox"] {
    --tw-ring-color: var(--mm-color-accent);
    margin-inline-end: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 4.5);
    height: calc(var(--spacing) * 4.5);
    accent-color: var(--mm-color-accent);
    color: var(--mm-color-accent);
    border-radius: 4px;
    border-color: #D9D9D9;
    
    &:user-invalid {
      border-color: #e53e3e;
    }
  }
  /** Radio Group **/
  &:has(input[type="radio"]) {
    label {
      display: flex;
      align-items: center;
      font-weight: 500;
      color: var(--mm-color-foreground);
      background-color: var(--mm-color-background);
      cursor: pointer;
      padding: 0px;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      transition: all 0.3s ease;
      margin-bottom: 0;
      &:hover {
        border-color: var(--mm-color-accent);
        background-color: #f7fafc;
      }
      &:has(input:checked) {
        color: var(--mm-color-primary);
      }
    }
  }
  input[type="radio"] {
    --tw-ring-color: var(--mm-color-accent);
    margin-right: 12px;
    accent-color: var(--mm-color-accent);
    color: var(--mm-color-accent);
    opacity: 0;
    position: absolute; /* or relative, depending on layout */
    width: 1px; /* Small width to not interfere with layout */
    height: 1px; /* Small height */
    overflow: hidden; /* Hide any potential visual overflow */
    clip: rect(0, 0, 0, 0); /* Clip to hide any content */
  }


  .radio-options,
  .checkbox-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .radio-options {
    display: flex;
    flex-direction: row;
    gap: 8px;
    > div {
      flex-basis: 50%;
      width: 100%;
    }
    label {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      flex-basis: 50%;
      width: 100%;
      border: none;
      padding: 0;
      height: 106px;
      span {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #888888;
        font-style: italic;
        font-size: 26px;
        font-weight: 100;
        border: 1px solid #d9d9d9;
        border-radius: 8px;
        width: 100%;
        line-height: 1.3;
      }
      input:checked + span, input:focus + span {
        color: #2D7FBA;
        font-weight: 500;
        border-color: #2D7FBA;
        font-style: normal;
      }
      ~ p {
        margin-top: 8px;
        color: #000;
        font-size:16px;
        font-weight: 300;
      }
    }
  }

  /* Conditional Fields */
  &.conditional-field {
    display: none;
  }

  &.conditional-field.show {
    display: block;
  }
}

/** Buttons **/
.hkts-mm-button {
  background: #2D7FBA;
  color: white;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 400;
  font-family: inherit;
  transition: all 0.3s ease;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  @media (min-width: 48rem) {
    padding: 16px 32px;
  }

  &:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }
  &:active {
    scale: 0.98;
  }

  /* Secondary Button */
  &.hkts-mm-button-secondary {
    background: linear-gradient(135deg, #718096 0%, #4a5568 100%);
    box-shadow: 0 8px 16px rgba(113, 128, 150, 0.3);
  }
  &.hkts-mm-button-secondary:hover {
    box-shadow: 0 12px 24px rgba(113, 128, 150, 0.4);
  }
  &.hkts-mm-payment-button, &.hkts-mm-renewal-button {
    background: #FFFFFF;
    color: #2D7FBA;
    padding: 7px 24px;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    width: auto;
    box-shadow: 0 4px 6px -1px #0000001a;
    width: fit-content;
  }

  /** Loading State **/
  .button-text {
    display: inline;
  }
  &.loading .button-text {
    display: none;
  }
  .button-loading {
    display: none;
  }
  &.loading .button-loading {
    display: inline;
  }
}

/* AJAX Feedback */
.hkts-mm-ajax-feedback {
  margin-block-end: 1rem;
  font-size: 0.875rem;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 500;
  display: none;
  color: var(--mm-color-foreground);
  background-color: var(--mm-color-background);
  border-color: var(--mm-color-border);
  border-width: 1px;
  border-style: solid;

  &.success {
    display: block;
    --mm-color-foreground: #22543d;
    --mm-color-background: #f0fff4;
    --mm-color-border: #9ae6b4;
  }
  &.loading {
    display: block;
    --mm-color-foreground: #2c5282;
    --mm-color-background: #ebf8ff;
    --mm-color-border: #90cdf4;
  }
  &.error {
    display: block;
    --mm-color-foreground: #742a2a;
    --mm-color-background: #fed7d7;
    --mm-color-border: #feb2b2;
  }
  &.error.password {
    display: block;
    --mm-color-foreground: #742a2a;
    --mm-color-background: #fed7d7;
    --mm-color-border: #feb2b2;
    ul {
      list-style: disc;
      padding-left: 20px;
    }
  }
}

/* Sections */
.hkts-mm-section {
  background-color: var(--color-primary-100, white);
  border-radius: 12px;
  /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.06); */
  padding: 40px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  scroll-margin-block-start: var(--header-space);
}

.hkts-mm-section-title {
  position: relative;
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--mm-color-foreground);
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e2e8f0;
  &::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #0073aa 0%, #005177 100%);
  }

  @media (min-width: 48rem) {
    font-size: 1.875rem;
  }
}

.hkts-mm-payment-notice p {
  font-size: 16px;
  font-weight: 400;
  color: #742a2a;
  background-color: #ffffff;
  border-color: #e2e8f0;
  border-width: 1px;
  border-style: solid;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 24px;
}