/*
 * Marsbgame / oCheckout — delivery methods grid v1.0.0
 * Desktop/laptop: 3 columns
 * Tablet:         2 columns
 * Phone:          1 column
 *
 * Scoped to the oCheckout shipping section only. It does not change payment
 * methods or other checkout cards. Extra rules keep FivePost/CDEK pickup-point
 * UI and oCheckout route/PVZ maps comfortable inside the narrower cards.
 */

/* ---------- delivery grid ---------- */
.ocheckout-page #ock-section-shipping #ock-shipping-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row dense;
    align-items: stretch;
    gap: 12px;
}

/* Every quote is a real tile. This deliberately wins over skin-specific
   oCheckout layouts (including skin 3's two-column variant). */
.ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-method {
    width: 100%;
    min-width: 0;
    min-height: 126px;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 8px 10px;
    padding: 14px 15px;
    border-radius: 14px;
}

.ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-method .ock-method-radio {
    margin-top: 1px;
}

.ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-method .ock-method-body {
    flex: 1 1 0;
    min-width: 0;
}

.ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-method .ock-method-title,
.ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-method .ock-method-sub {
    overflow-wrap: anywhere;
}

/* Price gets its own line. On a three-column card this reads much more cleanly
   than squeezing a long carrier title and the price into the same narrow row. */
.ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-method > .ock-method-price {
    flex: 0 0 100%;
    width: 100%;
    margin: 2px 0 0;
    padding-left: 30px;
    text-align: left;
}

/* External PVZ controls (CDEK and other pickup modules) use the full card width. */
.ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-method > .ock-pvzx {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 4px;
    padding-left: 30px;
}

/* CDEK Official: selected PVZ + button should not be squeezed by a narrow tile. */
.ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-method.mbg-cdek-ocheckout-method > .ock-pvzx {
    padding-left: 30px;
}

/* FivePost injects its own block after the quote has rendered. In a 3-column
   tile a vertical block is more readable than address + button side by side. */
.ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-method.fivepost-ocheckout-card .ock-method-body {
    min-width: 0;
}

.ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-method.fivepost-ocheckout-card .fivepost-pickup-inline {
    flex: 0 0 100%;
    width: 100%;
    margin: 4px 0 0;
    padding: 10px 0 0 30px;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
}

.ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-method.fivepost-ocheckout-card .fivepost-pickup-button {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
}

/* oCheckout may temporarily move its route/PVZ map directly inside the methods
   list, immediately after the selected card. Make the map span the whole grid. */
.ocheckout-page #ock-section-shipping #ock-shipping-methods > #ock-pvz-wrap,
.ocheckout-page #ock-section-shipping #ock-shipping-methods > #ock-route-wrap {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

/* If oCheckout's optional folded shipping group is enabled, keep the group
   full-width and tile its expanded contents as well. JS can still hide the list
   with inline display:none; when opened, this grid rule takes over. */
.ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-ship-group {
    grid-column: 1 / -1;
    min-width: 0;
}

.ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-ship-group .ock-ship-group-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-ship-group .ock-method {
    min-width: 0;
    height: 100%;
}

/* ---------- tablet ---------- */
@media (max-width: 991px) {
    .ocheckout-page #ock-section-shipping #ock-shipping-methods,
    .ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-ship-group .ock-ship-group-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- phone ---------- */
@media (max-width: 639px) {
    .ocheckout-page #ock-section-shipping #ock-shipping-methods,
    .ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-ship-group .ock-ship-group-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-method {
        min-height: 0;
        padding: 13px 14px;
    }

    .ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-method > .ock-method-price,
    .ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-method > .ock-pvzx,
    .ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-method.mbg-cdek-ocheckout-method > .ock-pvzx,
    .ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-method.fivepost-ocheckout-card .fivepost-pickup-inline {
        padding-left: 0;
    }

    .ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-method .ock-pvzx-btn,
    .ocheckout-page #ock-section-shipping #ock-shipping-methods > .ock-method.fivepost-ocheckout-card .fivepost-pickup-button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}