/**
 * @package Hyva_MagedelightProductPrintPersonalization for Magento 2
 * @author MageDelight Team
 * @copyright Copyright (c) MageDelight (https://www.magedelight.com) owned by Krish TechnoLabs. All Rights reserved.
 */

/**
 * Engraving preview modal — supplemental CSS for Hyva theme.
 *
 * The modal overlay/box/header use Tailwind utility classes set directly in
 * engraving-preview.js.  This file supplies the remaining rules that can't be
 * expressed as plain Tailwind utilities: the scrollable inner area, the
 * two-column has-details grid, and the details/table styling.
 *
 * Selectors are scoped to .sales-guest-view / .account.sales-order-view so
 * they carry the same specificity (0,2,0) as any compiled Luma LESS rules that
 * may also be present, and load after them — ensuring the scroll fix wins.
 */

/* Lock body scroll while modal is open */
body.md-engraving-modal-open {
    overflow: hidden;
}

/* ── Inner area: scrollable flex child ─────────────────────────────────────── */
.sales-guest-view .md-engraving-modal-inner,
.account.sales-order-view .md-engraving-modal-inner {
    flex: 1 1 auto;   /* fill remaining height after the fixed header */
    overflow-y: auto;
    min-height: 0;    /* required: flex children don't shrink below content size by default */
    padding: 14px;
    text-align: center;
    box-sizing: border-box;
}

/* Two-column layout when personalization details accompany the image */
.sales-guest-view .md-engraving-modal-inner.has-details,
.account.sales-order-view .md-engraving-modal-inner.has-details {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
    gap: 16px;
    align-items: start;
}

/* ── Details panel ─────────────────────────────────────────────────────────── */
.sales-guest-view .md-engraving-modal-details,
.account.sales-order-view .md-engraving-modal-details {
    text-align: left;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px 12px;
    max-height: 68vh;
    overflow-y: auto;
    box-sizing: border-box;
}

/* ── Details table ─────────────────────────────────────────────────────────── */
.md-personalization-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e2e8f0;
    font-size: 0.875rem;
}

.md-personalization-row {
    border-bottom: 1px solid #e2e8f0;
}

.md-personalization-label {
    font-weight: 600;
    background: #f1f5f9;
    padding: 8px 10px;
    border-right: 1px solid #e2e8f0;
    width: 35%;
    vertical-align: top;
}

.md-personalization-value {
    padding: 8px 10px;
    word-break: break-word;
    vertical-align: top;
}

/* ── Mobile: collapse to single column ─────────────────────────────────────── */
@media (max-width: 768px) {
    .sales-guest-view .md-engraving-modal-inner.has-details,
    .account.sales-order-view .md-engraving-modal-inner.has-details {
        grid-template-columns: 1fr;
    }
}