/* GO SUB */
#MainContent {

    #gosub-account-root {
        background: rgb(var(--theme-shadow));
        padding-block: var(--gutter2);
        max-width: inherit;
        margin-block-start: 1em;
        @media screen and (max-width: 1024px) {
            padding-inline: var(--gutter);
        }
        .gosub-list {
            line-height: var(--lh150);
            max-width: 70em;
            margin-inline: auto;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            .gosub-title {
                font-family: var(--font-serif-jp);
                -webkit-text-stroke: var(--serif-fatten) currentColor;
                paint-order: stroke fill;
                font-size: 2.5rem;
                border: none;
                display: none;
            }
            .gosub-container{
                padding: 1rem;

                overflow: visible;
                margin-block-end: 0;

                background: #ffffff;
                box-shadow: 0 0 .5em rgba(var(--theme-typo),.1);
                border: none;
                .gosub-product-container {

                    border: none;
                    align-items: flex-start;
                    justify-content: flex-start;
                    > .gosub-product-list {
                        width: 100%;
                        max-width: inherit;
                        display: grid;
                        grid-template-columns: 1fr;
                        gap: 1em;

                        .gosub-product-info {
                            padding: 0;
                            .gosub-box-icon-wrapper,
                            .gosub-product-icon-wrapper {
                                width: auto;
                                height: auto;
                                aspect-ratio: 1;
                                flex: 1;

                            }
                            .gosub-product-icon-wrapper{
                                max-width: 6em;
                                img {
                                    width: 100%;
                                    height: 100%;
                                    max-height: inherit;
                                    object-fit: cover;
                                }
                            }
                            > div {
                                &:has(.gosub-product-title) {
                                    flex: 3;
                                }
                            }
                        }
                    }
                }
            }
        }
        .gosub-filter {
            background: rgb(var(--theme-brand));
            border: none;
            padding: 1rem;
            border-radius: var(--common-radius);
            margin-block-end: 0;
            button {
                color: rgb(var(--theme-body));
                transition: all .2s ease-in-out;
                font-size: 1em;
                box-shadow: 0 0 0 1px currentColor inset;
                padding: .5em 1em;
                line-height: var(--lh100);
                border-radius: .25em;
                &[class*="disable"]{

                }
                &[class*="contracts"]{
                    border: none!important;
                    background: #fff;
                    color: rgb(var(--theme-brand));
                    box-shadow: 0 0 .5em rgba(var(--theme-typo),.1);
                }
            }
        }

    }
    /* シンプル */
    .gosub-account-style-legacy{
        .gosub-contract-top,
        .gosub-contract-bottom-info,
        .gosub-no-contracts{
            background: #fff;
            margin-inline: 0;
            margin-block-start: 1em;
            border: none;
            border-radius: calc(var(--common-radius) + var(--gutter) * .5);
            padding: var(--gutter);
            box-shadow: 0 0 .5em rgba(var(--color-foreground),.2);
            &.isActive{
                margin-block-start: var(--gutter);
            }
        }
        .go-sub-status-badge-cancelled ,
        .go-sub-status-badge-paused,
        .go-sub-status-badge-expired,
        .go-sub-status-badge-failed,
        .go-sub-status-badge-active,
        .go-sub-status-badge-paused{
            padding: 1em 1em 0!important;
            background: none!important;
        }
        .gosub-error-restart-button {
            width: 100%;
        }
        .gosub-list .gosub-container .gosub-product-info img {
            border-radius: 0;
            width: 100%;
            height: 100%;
            max-width: inherit;
            max-height: inherit;
            min-width: inherit;
            min-height: inherit;
        }
        .gosub-billing-cycle-show-less,
        .gosub-billing-details,
        .gosub-contract-top-next-date,
        .gosub-contract-top-start-date,
        .gosub-billing-cycle-show-more,
        .gosub-note-section,
        .gosub-order-history-section,
        .gosub-delivery-address,
        .gosub-delivery-section,
        .gosub-payment-section,
        .gosub-cancel-date-section,
        .gosub-billing-cycle-description,
        .gosub-cycle-text,
        .gosub-next-date-description,
        .gosub-next-billing-text{
            align-items: flex-start;
        }
        .gosub-contract-top-info{
            border-radius: var(--common-radius);
            padding: var(--gutter);
            box-shadow: 0 0 .5em rgba(var(--color-foreground),.2);
            @media screen and (max-width: 1024px) {
                margin-block-start: var(--gutter);
            }
        }
    }
    /* モダン */
    .gosub-account-style-ver2,
    .gosub-account-style-ver2-minimal,
    .gosub-account-style-ver3{
        border-radius: 0;
        .gosub-product-container,
        .gosub-contract-section{

            box-shadow: 0 0 .5em rgba(var(--color-foreground),.2);
            border: none;
            border-radius: var(--common-radius);
        }

        .gosub-contract-top{
            gap: 1em;
        }
        .gosub-contract-top-info{
            display: grid;
            grid-template-columns: 1fr;
            gap: 1em;
        }
        .go-sub-status-badge{
            padding-inline: 0!important;
            background: none!important;
            color: rgb(var(--theme-brand));
        }
        .gosub-contract-section {
            margin: 0;
        }
        .gosub-add-product-button-container{
            margin-block-start: 1em;
            flex-direction: row;
            .gosub-update-button{
              max-width: inherit;
                width: auto;
                min-width: 5em;
            }
        }
        .gosub-product-wrapper{
            border: none;
        }
        .gosub-contract-bottom-info{
            &.isActive{
                margin-block-start: 1em;
            }
            .gosub-contract-bottom-info-upper-section {
                gap: 1em;
            }
            .gosub-order-history-section,
            .gosub-button-section,
            .gosub-show-more-button{
                margin-block-start: 1em;
            }
        }
        .gosub-billing-cycle-show-less,
        .gosub-billing-details,
        .gosub-contract-top-next-date,
        .gosub-contract-top-start-date,
        .gosub-billing-cycle-show-more,
        .gosub-note-section,
        .gosub-order-history-section,
        .gosub-delivery-address,
        .gosub-delivery-section,
        .gosub-payment-section,
        .gosub-cancel-date-section,
        .gosub-billing-cycle-description,
        .gosub-cycle-text,
        .gosub-next-date-description,
        .gosub-next-billing-text{
            align-items: flex-start;
        }
        .gosub-next-billing-text{
            .gosub-next-billing-right{
                color: rgb(var(--theme-accent));
            }
        }
    }

    /* 2026.08.12 */
    .gosub-delivery-address-button,
    .gosub-delivery-date-button,
    .gosub-payment-button,
    .gosub-cancellation,
    .gosub-pause,
    .gosub-reactive,
    .gosub-skip,
    .gosub-add-discount-button,
    .gosub-buy-now-button,
    .gosub-change-cycle-button,
    .gosub-update-button{
        height: auto;
        padding: .75rem;
        border-radius: var(--button-radius);
    }

}

#GosubAccountModalContainer {

    /* iOS Safari は OS 標準の見た目のままの select に上下 padding を効かせない＝入力欄と高さが揃わない。
       さらに文字色と地色を明示しないと、iOS が system の青文字＋グレー地で描いてテキスト欄と揃わない */
    select {
        appearance: none;
        -webkit-appearance: none;
        color: rgb(var(--theme-typo));
        -webkit-text-fill-color: rgb(var(--theme-typo));
        background-color: #fff;
        background-image: var(--caret-icon);
        background-repeat: no-repeat;
        background-position: right 1em center;
        background-size: .8em;
    }

    form {
        input:is([type='checkbox'],[type='radio']) {
            width: var(--check-size);
            margin-right: var(--check-gap);
            padding: 0;
            border: var(--check-edge) solid var(--check-edge-color);
            border-radius: 50%;
            &:checked {
                border-color: rgb(var(--theme-brand));
            }
        }
        input:is([type='text'],[type='tel']),
        select {
            /* 色を書かないと currentColor＝文字色の濃さで枠が出て、他より太く見える */
            border: 1px solid rgba(var(--color-foreground), 0.5);
            padding: 1em;
            border-radius: var(--select-radius);
        }
        select {
            padding-inline-end: 3em;
        }
        [data-address]{
            .gosub-address-label{
                font-size: .8em;
            }
        }

    }
    .gosub-select-input {
        font-size: 16px;
        padding: .5em 1em;
        padding-inline-end: 3em;
        option {
            font-size: 16px;
        }
    }
    .gosub-update-button{
        height: auto;
        padding: .75rem;
        border-radius: var(--button-radius);
    }
    .gosub__product-quantity{
        background: #fff;
        box-shadow: 0 0 .5em rgba(var(--theme-typo),.2);
        margin-block-start: .5em;
    }
    .gosub-product-line-item {
        gap: 1rem;
        flex-direction: row;
        height: inherit;
        position: relative;

        --card-pad: .5em;
        padding: var(--card-pad);
        border: 1px solid transparent;
        border-radius: calc(var(--common-radius) + var(--card-pad));
        transition: background-color var(--duration-short) ease, border-color var(--duration-short) ease;

        &:not(:has(.gosub-product-variant-container + .gosub-product-variant-container)) {
            .modal-radio::before {
                content: '';
                position: absolute;
                inset: 0;
                cursor: pointer;
            }
            .modal-radio:disabled::before {
                display: none;
            }
        }
        &:has(.modal-radio:enabled):hover {
            background-color: rgba(var(--theme-brand), .04);
        }
        &:has(.modal-radio:checked) {
            border-color: rgb(var(--theme-brand));
            background-color: rgba(var(--theme-brand), .08);
        }
        &:has(.modal-radio:disabled) {
            opacity: .4;
        }
        .gosub-product-image-wrapper{
            flex: 1;
            width: auto;
            .gosub-product-image{

                border-radius: var(--common-radius) !important;
                &.gosub-image-border{
                    border: none!important;
                }
            }
        }
        .gosub-product-details-container{
            flex: 3;
            width: auto;
            .gosub-product-title{
                line-height: var(--lh125);
            }
            .gosub-product-variant-list{
                .gosub-product-variant-container{
                    overflow: hidden;

                }

            }
        }
        .gosub__product-quantity{
            flex: 2;
        }
    }
    .modal-label {
        align-items: center;
        margin-bottom: 0;
        padding: 0;
        border: none;
        .modal-radio-text {
            display: none;
        }
        .gosub-product-change-price-container{
            font-size: 1rem;
            line-height: var(--lh150);
            s{
                display: none;
            }
        }
    }
    .gosub-search-container{
        gap: 0;
        max-width: inherit;
        #gosub-search-input{
            padding: 1em;
        }
    }
    .gosub-modal-title{
        & + div{
            dl{
                display: none;
            }
        }
    }
    .gosub-actions-container{
        & + div:has([name^='payment-method']){
            margin-block-start: 1.5em;
            > div{
                font-weight: var(--bold);
                -webkit-text-stroke: var(--sans-fatten) currentColor;
                paint-order: stroke fill;
                margin-block-end: .5em;
            }
        }
    }
    .gosub-form-container{
        & > .gosub-change-quantity-message{
            display: none;
        }
        .gosub-product-line-item-container{
            margin-block-end: 0;
            gap: 1em;
            grid-template-columns: 1fr;
        }
        .gosub-change-quantity-container{
            margin-block-end: 1em;
            .gosub__product-quantity{
                gap: 0;
            }
            input:is([type='quantity']){
                width: auto;
            }
        }
        .modal-body{
            display: grid;
            grid-template-columns: 1fr;
            gap: 1em;
        }
    }
    .gosub-update-button,
    .gosub-action-button-primary{
        max-width: inherit;
    }
    ._-rhRq {
        padding: 1.5em;
        &:not(:has([data-line-count])):not(:has(#otherInput)){
            min-width: inherit;
            max-width: 24em;
        }
    }

    /* このストアは数量変更に対応しない方針。「商品を変更する」の数量増減は押しても効かないので出さない
       （アプリの「数量変更」設定は契約カード側の導線しか制御しないため、ここはCSSで隠すしかない） */
    .change-product-modal .gosub__product-quantity {
        display: none;
    }

    .add-product-modal .modal-label,
    .change-product-modal .modal-label,
    .add-add-on-modal .modal-label,
    .change-add-on-modal .modal-label,
    .change-box-modal .modal-label,
    .add-box-modal .modal-label {

        &:hover,
        &:has(.modal-radio:checked) {
            background-color: transparent;
        }
    }
}

.gosubNav {
    > div {
        max-width: 70em;
        margin-inline: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 1em;
        > p {
            margin: 0;
            .button{
                font-size: .8em;
                --btn-edge: rgb(var(--theme-brand));
                color: rgb(var(--theme-brand));
                &:hover{
                    background: rgb(var(--theme-brand));
                    color: rgb(var(--theme-body));
                }
            }
        }
    }

    a.button {
        flex-direction: row-reverse;
        &::after {
            transform: scaleX(-1);
        }
    }
    @media screen and (max-width: 1024px) {
        padding-inline: var(--gutter);
        > div {
            justify-content: flex-start;
        }
    }
}
.gosubNav[data-position="top"] {

    margin-block-start: 1em;
    padding-block-start: var(--gutter2);
}
.gosubNav[data-position="bottom"] {
    padding-block-end: var(--gutter2);
}

#MainContent:has(> .gosubNav[data-position="top"]) #gosub-account-root {
    margin-block-start: 0;
}

#MainContent:has(> .gosubNav[data-position="bottom"]) #gosub-account-root {
    padding-block-end: 1em;
}

#MainContent:has(#gosub-account-root) > .gosubNav {
    background: rgb(var(--theme-shadow));
}

.subCycleTrigger {

    margin-inline-end: auto;
    a {
        --dash-width: 1.5rem;
        --list-gap: 1rem;
        display: inline-flex;
        align-items: center;
        color: rgb(var(--theme-brand));
        text-decoration: none;
        transition: color .2s ease-in-out;
        &::before {
            content: '';
            display: inline-block;
            height: 1px;
            width: var(--dash-width);
            background: currentColor;
            margin-inline-end: var(--list-gap);
        }
        &:hover,
        &:focus {
            color: rgb(var(--theme-accent));
        }
    }
}