/**
 * Gift Card Selection Card Component Styles
 *
 * Architecture: CSS @layer components with TAC convention.
 *
 * @package Raindrop
 */

@layer components {
  :root {
    --theme-gc-card-blue:      oklch(53.2% 0.145 235.4); /* #0376a8 */
    --theme-gc-card-btn:       oklch(64.5% 0.165 230.0); /* #159fda */
    --theme-gc-card-navy:      oklch(32.0% 0.080 255.0); /* #173d68 */
    --theme-gc-card-dark:      oklch(18.5% 0.015 255.0); /* #111821 */
    --theme-gc-card-bg:        oklch(100% 0 0);          /* #ffffff */
    --theme-gc-card-radius:    32px;
  }

  pint-gift-card-card {
    display: block;
    width: 100%;
    max-width: 840px;
    margin-inline: auto;
    background: var(--theme-gc-card-bg);
    border-radius: var(--theme-gc-card-radius);
    box-shadow: 0 10px 30px rgba(0, 62, 107, 0.08);
    overflow: hidden;
    box-sizing: border-box;
  }

  pint-gift-card-card .gc-card-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1.25rem, 3vw, 2rem) !important;
    gap: clamp(1.5rem, 3vw, 2.5rem) !important;
    box-sizing: border-box !important;
    min-height: 363px !important;
  }

  /* -------------------------------------------------------------
     1. Content & Form Controls
     ------------------------------------------------------------- */
  pint-gift-card-card .gc-card-content {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }

  pint-gift-card-card .gc-card-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  pint-gift-card-card .gc-card-title {
    font-family: 'HouseSlant Regular', 'House Slant', sans-serif !important;
    font-size: 48px !important;
    line-height: 43px !important;
    color: #0376a8 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  pint-gift-card-card .gc-card-subtitle {
    color: #111821 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 22px !important; /* 137.5% */
    margin: 0 !important;
    padding: 0 !important;
    max-width: 466px !important;
  }

  pint-gift-card-card .gc-card-form-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-block-start: 32px !important;
    margin-block-end: 0 !important;
    width: 100% !important;
  }

  pint-gift-card-card .gc-card-fieldset {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  pint-gift-card-card .gc-card-radios {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  pint-gift-card-card .gc-card-radio-label {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    user-select: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  pint-gift-card-card .gc-card-radio-input {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    pointer-events: none !important;
  }

  pint-gift-card-card .gc-card-radio-custom {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    border: 1.5px solid #159fda !important;
    background-color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  }

  pint-gift-card-card .gc-card-radio-input:checked + .gc-card-radio-custom::after {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: #159fda !important;
  }

  pint-gift-card-card .gc-card-radio-input:focus-visible + .gc-card-radio-custom {
    outline: 2px solid #0376a8 !important;
    outline-offset: 2px !important;
  }

  pint-gift-card-card .gc-card-radio-text {
    font-family: 'Poppins SemiBold', 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    color: #111821 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* -------------------------------------------------------------
     2. Custom Amount Input Row
     ------------------------------------------------------------- */
  pint-gift-card-card .gc-card-custom-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    animation: gcCardFadeIn 0.2s ease-out;
  }

  pint-gift-card-card .gc-card-custom-row[hidden] {
    display: none !important;
  }

  pint-gift-card-card .gc-card-custom-label {
    color: #111821 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 22px !important; /* 137.5% */
    margin: 0 !important;
    padding: 0 !important;
  }

  pint-gift-card-card .gc-card-custom-input-wrap {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #173d68 !important;
    border-radius: 22px !important;
    padding: 8px 17px !important;
    width: 150px !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  }

  pint-gift-card-card .gc-card-custom-input-wrap:focus-within {
    border-color: #159fda !important;
    box-shadow: 0 0 0 3px rgba(21, 159, 218, 0.2) !important;
  }

  pint-gift-card-card .gc-card-custom-prefix {
    color: #111821 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 22px !important; /* 137.5% */
    margin-inline-end: 2px !important;
    padding: 0 !important;
  }

  pint-gift-card-card .gc-card-custom-input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    width: 100% !important;
    color: #111821 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 22px !important; /* 137.5% */
    padding: 0 !important;
    margin: 0 !important;
    -moz-appearance: textfield !important;
  }

  pint-gift-card-card .gc-card-custom-input::-webkit-outer-spin-button,
  pint-gift-card-card .gc-card-custom-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }

  /* -------------------------------------------------------------
     3. Purchase Action Button
     ------------------------------------------------------------- */
  pint-gift-card-card .gc-card-action {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-block-start: 32px !important;
    margin-block-end: 0 !important;
  }

  pint-gift-card-card .gc-card-btn-purchase {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #159fda !important;
    color: #ffffff !important;
    font-family: 'Poppins SemiBold', 'Poppins', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 29px !important;
    letter-spacing: 0.72px !important;
    text-transform: uppercase !important;
    padding: 12px 30px 11px 30px !important;
    border-radius: 25px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: -3px 6px 9px rgba(0, 0, 0, 0.2) !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  pint-gift-card-card .gc-card-btn-purchase:hover {
    background-color: #0fa2e3 !important;
    transform: translateY(-2px) !important;
    box-shadow: -3px 8px 14px rgba(0, 0, 0, 0.25) !important;
  }

  pint-gift-card-card .gc-card-btn-purchase:active {
    transform: translateY(0) !important;
    box-shadow: -3px 4px 6px rgba(0, 0, 0, 0.2) !important;
  }

  pint-gift-card-card .gc-card-btn-purchase:focus-visible {
    outline: 2px solid var(--theme-gc-card-blue, #0376a8) !important;
    outline-offset: 3px !important;
  }

  /* -------------------------------------------------------------
     4. Mascot Image
     ------------------------------------------------------------- */
  pint-gift-card-card .gc-card-media {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: 300px !important;
    flex-shrink: 0 !important;
    align-self: flex-end !important;
  }

  pint-gift-card-card .gc-card-image-wrap {
    width: 100%;
    aspect-ratio: 750 / 586;
    display: flex;
    align-items: flex-end;
  }

  pint-gift-card-card .gc-card-mascot-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    pointer-events: none;
  }

  /* -------------------------------------------------------------
     5. Mobile Responsive (Mascot Above Form on Mobile)
     ------------------------------------------------------------- */
  @media (max-width: 768px) {
    pint-gift-card-card .gc-card-container {
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 1.5rem 1.25rem;
      gap: 1.25rem;
    }

    /* On mobile, the soapy image should be above the form, not below it */
    pint-gift-card-card .gc-card-media {
      order: -1;
      width: 100%;
      max-width: 230px;
      margin-block-end: 0.5rem;
    }

    pint-gift-card-card .gc-card-content {
      align-items: center;
      width: 100%;
      gap: 1.25rem;
    }

    pint-gift-card-card .gc-card-header {
      align-items: center;
    }

    pint-gift-card-card .gc-card-radios {
      justify-content: center;
    }

    pint-gift-card-card .gc-card-custom-row {
      justify-content: center;
    }

    pint-gift-card-card .gc-card-action {
      width: 100% !important;
      justify-content: center !important;
    }

    pint-gift-card-card .gc-card-btn-purchase {
      width: 100% !important;
      max-width: 320px !important;
      padding: 12px 24px 11px 24px !important;
    }
  }

  @keyframes gcCardFadeIn {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}