/*
 * Paddock Registration — Layout Vertical & Whitespace
 * Override layout untuk halaman paddock (single-column, full-width form)
 */

body.paddock-page {
    padding: 0;
    align-items: unset;
    background: #fffdf7;
    color: var(--color-text-main);
    font-family: var(--font-sans);
}

/* Shell: max-width konsisten dengan halaman lain */
.paddock-shell {
    position: relative;
    z-index: 10;
    width: min(850px, 100%);
    padding: 0 0 32px;
}

.paddock-form {
    width: 100%;
}

.paddock-form-grid {
    grid-template-columns: 1fr;
}

/* Data Pemesan fields — tidak diubah tampilannya */
.paddock-form-fields {
    margin: 0;
}

.paddock-form .form-row {
    margin: 0;
}

/* Upload section paddock */
.paddock-upload-section {
    margin-top: 20px;
}

/* Visually hidden file input */
.paddock-page .visually-hidden-file {
    position: absolute;
    width: 1px;
    min-height: 0;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Step: tidak ada card bawaan, background transparan */
.paddock-step {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Jarak antar step — lebih lega */
.paddock-step + .paddock-step {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #e4dbea;
}

/* Section title di step */
.paddock-step .form-section-title {
    margin: 0 0 24px;
    font-size: 1.05rem;
    line-height: 1.4;
    letter-spacing: 0.06em;
}

/* Inner margins untuk konten dalam step */
.paddock-step > .paddock-muted,
.paddock-step > .paddock-map-and-slots,
.paddock-step > .paddock-price-summary,
.paddock-step > .paddock-summary-inline,
.paddock-step > .paddock-selected-slot-chips,
.paddock-step > .paddock-payment-layout,
.paddock-step > .paddock-submit,
.paddock-step > .paddock-field-error {
    margin-inline: 32px;
}

.paddock-step > .paddock-submit {
    width: calc(100% - 64px);
    margin-top: 28px;
}

/* Submit button margin */
.paddock-submit {
    margin-top: 28px;
}

/* Map panel: selalu block (vertikal) */
.paddock-map-and-slots {
    display: block;
}

.paddock-map-panel,
.paddock-payment-summary {
    position: static;
}

.paddock-map-panel {
    margin: 0 0 20px;
}

/* Panel denah — label */
.paddock-map-panel h3 {
    margin: 0 0 10px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--paddock-purple, #3f3091);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* Payment layout: single column */
.paddock-payment-layout {
    grid-template-columns: 1fr;
    gap: 20px;
}

.paddock-payment-summary {
    margin-top: 20px;
}

/* Price summary spacing */
.paddock-price-summary {
    margin-top: 32px;
}

/* Whitespace section Pembayaran */
.paddock-payment-layout > div {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Category sections container */
.paddock-selection-panel > .paddock-legend,
.paddock-selection-panel > .paddock-category-lock-message {
    margin-bottom: 14px;
}

/* Category sections — spasi antar card */
.paddock-category-section {
    margin-top: 16px;
}

.paddock-category-section:first-of-type {
    margin-top: 0;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 700px) {
    body.paddock-page {
        padding: 0;
    }

    .paddock-shell {
        width: min(100%, 850px);
    }

    .paddock-step > .paddock-muted,
    .paddock-step > .paddock-map-and-slots,
    .paddock-step > .paddock-price-summary,
    .paddock-step > .paddock-summary-inline,
    .paddock-step > .paddock-selected-slot-chips,
    .paddock-step > .paddock-payment-layout,
    .paddock-step > .paddock-submit,
    .paddock-step > .paddock-field-error {
        margin-inline: 16px;
    }

    .paddock-step > .paddock-submit {
        width: calc(100% - 32px);
    }

    .paddock-step + .paddock-step {
        margin-top: 28px;
        padding-top: 28px;
    }

    .paddock-price-summary {
        margin-top: 24px;
    }
}