/*
 * Ben Rental production — mobile refinement for the native Full Insurance selector.
 * It changes only presentation of the existing Bootstrap Toggle checkbox.
 */
@supports selector(tr:has(input.toggle-extra)) {
  /* Applies to normal responsive mobile and to Chrome Android Desktop site mode on phone hardware. */
  @media (max-width: 680px), (max-device-width: 680px) {
    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      width: 100% !important;
    }

    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) > td {
      display: block !important;
      box-sizing: border-box !important;
      width: 100% !important;
      min-width: 0 !important;
    }

    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) > td.d-lg-table-cell { display: none !important; }

    /* Chrome Android Desktop site mode uses a wide CSS viewport, but retains the phone device width. */
    @media (min-width: 681px) and (max-device-width: 680px) {
      .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) {
        width: calc(100vw - 136px) !important;
      }
    }

    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) > td:nth-child(3),
    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) > td:nth-child(4) {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      min-height: 58px !important;
      padding: 14px 12px !important;
    }

    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) > td:nth-child(3) .d-lg-none,
    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) > td:nth-child(4) .d-lg-none { display: inline !important; }

    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) > td:nth-child(3) .float-right,
    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) > td:nth-child(4) .float-right { float: none !important; }

    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) > td:first-child {
      color: #243746 !important;
      text-shadow: none !important;
      font-size: 13px !important;
      font-weight: 600 !important;
      line-height: 1.4 !important;
    }

    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) .extra-name {
      display: block !important;
      color: #243746 !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) .extra-selection {
      padding: 14px 12px 12px !important;
      text-align: left !important;
    }

    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) .extra-selection::before {
      display: block !important;
      box-sizing: border-box;
      max-width: none !important;
      min-height: 0;
      margin: 0 0 10px !important;
      padding: 10px 12px !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      line-height: 1.35 !important;
    }

    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) .toggle.btn {
      display: block !important;
      width: 100% !important;
      min-width: 0 !important;
      min-height: 48px !important;
      border: 0 !important;
      border-radius: 5px !important;
      box-shadow: 0 2px 5px rgba(128, 0, 0, .16) !important;
      overflow: hidden !important;
    }

    /* A single full-width action is clearer than the desktop sliding handle at 390px. */
    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) .toggle.btn .toggle-group,
    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) .toggle.btn.off .toggle-group {
      left: 0 !important;
      width: 100% !important;
      transition: none !important;
    }

    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) .toggle.btn .toggle-handle { display: none !important; }

    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) .toggle.btn .toggle-on,
    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) .toggle.btn .toggle-off {
      left: 0 !important;
      right: 0 !important;
      align-items: center !important;
      justify-content: center !important;
      min-height: 48px !important;
      padding: 12px 16px !important;
      font-size: 0 !important;
      letter-spacing: 0 !important;
      text-align: center !important;
    }

    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) .toggle.btn.off .toggle-on { display: none !important; }
    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) .toggle.btn.off .toggle-off { display: flex !important; }
    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) .toggle.btn:not(.off) .toggle-off { display: none !important; }
    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) .toggle.btn:not(.off) .toggle-on { display: flex !important; }

    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) .toggle.btn .toggle-on::after,
    .car-rental-options #form1 table.extras tr.extra-details:has(input.toggle-extra) .toggle.btn .toggle-off::after {
      font-size: 16px !important;
      font-weight: 700 !important;
      line-height: 24px !important;
    }
  }
}