/**
 * Mobile "CHOOSE OPTION" bar + floating Add to Cart / Get a Quote panel for
 * product pages, matching the Figma reference. See js/choose-option.js.
 *
 * The Add to Cart form is always rendered inside a ".add__cart" wrapper div
 * (set as the "commerce_add_to_cart" field's wrapper class in the
 * "Product Details Page Image" view - block_2 for standard direct sale
 * products, block_11/others for custom/tumbler products), so ".add__cart"
 * is the one reliable hook to target regardless of product/add-to-cart
 * type. ".custom-add-cart-section" is kept as a fallback for any layout
 * that still wraps the form with that legacy class directly.
 *
 * js/choose-option.js splits the section into two pieces:
 * - .choose-option-bar: Case Quantity (+/- stepper) and the CHOOSE OPTION
 *   button, always visible, pinned to the bottom of the screen.
 * - .choose-option-panel-content: everything else (attributes, price, Add
 *   to Cart, Get a Quote), hidden until the panel is opened, then floats
 *   directly above the bar (the bar/panel share one fixed-position
 *   container anchored to the bottom, so the panel naturally pushes the
 *   box upward instead of needing pixel-offset math).
 */
.choose-option-trigger-wrapper,
.choose-option-bar {
  display: none;
}

@media screen and (max-width: 991px) {
  .add__cart.choose-option-panel,
  .custom-add-cart-section.choose-option-panel {
    display: block !important;
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    z-index: 999;
    padding: 0;
  }

  /* Bottom bar: always visible, Case Quantity + CHOOSE OPTION button. */
  .choose-option-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
    padding: 12px 16px;
  }

  .choose-option-qty-wrapper .form-item,
  .choose-option-qty-wrapper .js-form-item {
    margin: 0;
  }

  .choose-option-qty-wrapper label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
  }

  .choose-option-qty-stepper {
    display: flex;
    align-items: stretch;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    width: fit-content;
  }

  .choose-option-qty-stepper input[type="number"] {
    width: 44px !important;
    border: none !important;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
  }

  .choose-option-qty-stepper input[type="number"]::-webkit-outer-spin-button,
  .choose-option-qty-stepper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .choose-option-qty-decrease,
  .choose-option-qty-increase {
    width: 34px;
    border: none;
    background: #f5f5f5;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }

  /* Floating panel: hidden until active, then appears above the bar. */
  .choose-option-panel-content {
    display: none;
    max-height: 70vh;
    overflow-y: auto;
    padding: 15px 21px;
    background: #fff;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.18);
  }

  .choose-option-panel.choose-option-active .choose-option-panel-content {
    display: block;
    animation: choose-option-slide-up 0.3s ease;
  }

  @keyframes choose-option-slide-up {
    from {
      transform: translateY(16px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .choose-option-trigger-wrapper {
    display: block;
    flex: 1 1 auto;
  }

  .choose-option-btn {
    display: block;
    width: 100%;
    background: #f38c0d !important;
    color: #fff !important;
    border: 1px solid #f38c0d !important;
    border-radius: 4px !important;
    padding: 14px 10px !important;
    margin: 0 !important;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
  }

  .choose-option-panel.choose-option-active .choose-option-btn {
    background: #fff !important;
    color: #f38c0d !important;
  }
}

@media (max-width: 767px) {
  .choose-option-qty-wrapper {
    display: flex;
  }

  .choose-option-qty-wrapper label {
    width: 65px;
    text-align: left;
  }

  .choose-option-qty-stepper {
    width: 90px;
  }
}