/* Gas simultaneous-application section styles for the relight apply page.
   Extracted from resources/views/home/relight/b/apply.blade.php. */

/* The gas detail section directly follows a .c_list2, which applies a large section gap
   (.c_list2 + * { margin-top: 70px }). Shrink it so the gas opening-date row sits closer to
   the "Looopガス" block. More specific than .c_list2 + * (no !important) so jQuery show/hide still animates. */
.js-gas-option-section .js-gas-detail-section {
    margin-top: 20px;
}

/* When 「わかる」 is selected, drop the 30px bottom padding of the supply-point row so the revealed
   number input sits right below the わかる/わからない radios. Scoped with :has() to the selected state
   so the default 「わからない」 keeps its normal gap to the next row. */
.js-gas-known-item:has(#gas_known_yes:checked) {
    padding-bottom: 0;
}

/* Tablet (769–1199px): .u_tb becomes width:100% (sp_tab mixin), but the relationship dropdown
   (.u_select) stays 375px (sp mixin only). Match the three gas text inputs to the dropdown width
   so they line up on tablet. (SP and PC already match.) */
@media screen and (min-width: 769px) and (max-width: 1199px) {
    #gas_feed_point_number,
    #gas_trading_name,
    #gas_trading_tel {
        width: 375px;
        max-width: 100%;
    }
}

/* Mobile (≤768px): the two選択式 gas rows — ガス供給地点特定番号 (わからない/わかる) and
   ガス開栓立ち会い者 (本人/本人以外) — stack like ガス開栓日・希望時間帯: the label (with its 必須 badge)
   sits on its own line, and the radio options drop to the next line below it. This is the default
   .c_list2 behaviour below 1200px, so we only need to keep the label text on a single line. */
@media screen and (max-width: 768px) {
    .js-gas-known-item > .c_list2__label,
    .c_list2__item:has(.js-gas-trading-toggle) > .c_list2__label {
        white-space: nowrap;
    }
}