/**
 * Mageplaza Free Gifts Modal Custom Override
 * Theme: Commercers/Underberg (Magento 2.4.x Luma-based)
 * Purpose: Fix grid layout, alignment, responsiveness & sync styling with Return Process Module.
 * File: app/design/frontend/Commercers/Underberg/web/css/mpfreegifts-modal-override.css
 */

/* ==========================================================================
   1. GLOBAL MODAL WRAPPER & INNER STRUCTURE
   ========================================================================== */

#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show {
    z-index: 10002 !important;
    opacity: 1;
    transition:
        transform 0.3s ease-in-out,
        opacity 0.3s ease-in-out;
}

/* Main outer wrapper: Brown wooden border & large corner radius styling */
#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    > .modal-inner-wrap {
    display: flex;
    flex-direction: column;
    background: #fef2d5 !important;
    border: 10px solid #9b2227 !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    position: relative;
    top: 0 !important;
    height: 100% !important;
    /* Must be visible to allow the absolute-positioned close button to overflow correctly */
    overflow: visible !important;
}

/* Inner scrollable content container */
#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .modal-content {
    flex: 1 1 auto;
    background: #fef2d5 !important;
    /* Serves as the bounding mask to keep grid items clipped properly within the inner wooden frame */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    /* Matching inner corner radius (50px outer - 10px border thickness = 40px) */
    border-radius: 0 0 40px 40px !important;
}

/* ==========================================================================
   2. HEADER & CUSTOM ACTION CLOSE (RETURN PROCESS STYLE)
   ========================================================================== */

#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .modal-header {
    padding: 35px 40px 20px 40px;
    position: relative;
    background: transparent !important; /* Transparent background to maintain visible wooden corners */
    overflow: visible !important; /* Prevents the close button from being cut off */
}

#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .modal-header
    .modal-title {
    color: #333;
    font-size: 22px;
    text-transform: uppercase;
}

/* Repositions the close button to perfectly intersect with the top-right brown border corner */
#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .action-close {
    position: absolute;
    top: -25px !important;
    right: -25px !important;
    padding: 0;
    background: transparent;
    z-index: 99999 !important; /* Highest layer to prevent overlap issues */
}

#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .action-close:before {
    color: #ffffff !important;
    background-color: #003440 !important;
    padding: 10px;
    border-radius: 50% !important; /* Circular badge design */
    font-size: 20px;
    line-height: 20px;
    font-weight: 900;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); /* Soft drop shadow for elevation */
}

/* Counter box for remaining available free gifts */
#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-item-left {
    position: static;
    background: transparent;
    padding: 0 0 15px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    font-weight: bold;
    font-size: 16px;
    color: #333;
    text-align: left;
}

/* ==========================================================================
   3. MODERN FLEXBOX/GRID CORE LAYOUT
   ========================================================================== */

/* Enforces a responsive CSS Grid system on the direct product container (.gift-row) */
#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-rule-grid
    .row-mp.gift-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Disables original legacy floats and block-level widths inherited from Mageplaza structures */
#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-rule-grid
    .gift-container,
#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-rule-grid
    [class*="col-"] {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
}

/* ==========================================================================
   4. PRODUCT CARD CONTAINER (.GIFT-ITEM)
   ========================================================================== */

#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-rule-grid
    .gift-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100%;
    background: #003440 !important;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-rule-grid
    .gift-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-rule-grid
    .gift-item
    * {
    max-width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   5. PRODUCT DETAILED COMPONENTS (IMAGE, NAME, PRICE)
   ========================================================================== */

#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-gift-image-container {
    width: 100%;
    text-align: center;
    margin-bottom: 12px;
}

#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-gift-image {
    max-width: 150px !important;
    width: 100% !important;
    height: 150px !important;
    object-fit: contain !important;
    margin: 0 auto;
}

#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-gift-name {
    font-size: 16px;
    font-weight: 700;
    color: #fef2d5;
    height: auto !important;
    margin: 0 0 8px 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-gift-price {
    margin: 0 0 15px 0;
}

#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-gift-original-price {
    font-size: 13px;
    color: #888;
    text-decoration: line-through;
    margin-right: 6px;
}

#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-gift-final-price {
    font-size: 16px;
    color: #e02b27;
    font-weight: bold;
}

/* ==========================================================================
   6. INNER QUANTITY INLINE CONTROLS & GRID ACTION BUTTONS
   ========================================================================== */

#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-gift-qty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    height: auto;
    color: #fef2d5;
}

#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-gift-input-qty {
    width: 50px !important;
    text-align: center;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-gift-action
    button,
#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-action-remove {
    width: 100% !important;
    min-height: 44px;
    padding: 10px 15px;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-gift-action
    button {
    background-color: #ec6907;
    color: #fef2d5;
    border: 1px solid #fef2d5;
}

#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-gift-action
    button:hover {
    background-color: #ec6907;
    color: #fef2d5;
    border: 1px solid #fef2d5;
    opacity: 1 !important;
}

#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-action-remove {
    background-color: #ff5501 !important;
    border-color: #ff5501 !important;
    color: #ffffff !important;
}

#html-body
    > div.modals-wrapper
    > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
    .mpfreegifts-action-remove:hover {
    background-color: #e64d00 !important;
    border-color: #e64d00 !important;
}

/* ==========================================================================
   7. RESPONSIVE DESIGN & RESPONSIVE GRID COLUMNS
   ========================================================================== */

/* Mobile devices: ≤ 480px */
@media only screen and (max-width: 480px) {
    #html-body
        > div.modals-wrapper
        > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
        > .modal-inner-wrap {
        width: 100% !important;
    }
    #html-body
        > div.modals-wrapper
        > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
        .mpfreegifts-rule-grid
        .row-mp.gift-row {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* Large mobile devices: 481px - 639px */
@media only screen and (min-width: 481px) and (max-width: 639px) {
    #html-body
        > div.modals-wrapper
        > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
        > .modal-inner-wrap {
        width: 95% !important;
    }
    #html-body
        > div.modals-wrapper
        > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
        .mpfreegifts-rule-grid
        .row-mp.gift-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* Tablets: 640px - 1023px */
@media only screen and (min-width: 640px) and (max-width: 1023px) {
    #html-body
        > div.modals-wrapper
        > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
        > .modal-inner-wrap {
        width: 80% !important;
        max-width: 700px !important;
    }
    #html-body
        > div.modals-wrapper
        > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
        .mpfreegifts-rule-grid
        .row-mp.gift-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Laptops / Small desktops: 1024px - 1439px */
@media only screen and (min-width: 1024px) and (max-width: 1439px) {
    #html-body
        > div.modals-wrapper
        > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
        > .modal-inner-wrap {
        width: 65% !important;
        max-width: 900px !important;
    }
    #html-body
        > div.modals-wrapper
        > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
        .mpfreegifts-rule-grid
        .row-mp.gift-row {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Large wide desktop viewports: ≥ 1440px */
@media only screen and (min-width: 1440px) {
    #html-body
        > div.modals-wrapper
        > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
        > .modal-inner-wrap {
        width: 65% !important;
        max-width: 1100px !important;
    }
    #html-body
        > div.modals-wrapper
        > aside.modal-popup.mpfreegifts_modal.modal-slide._inner-scroll._show
        .mpfreegifts-rule-grid
        .row-mp.gift-row {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ==========================================================================
   8. PRODUCT CONFIGURABLE OPTION MODAL (ATTRIBUTES & QUANTITY SELECTION)
   ========================================================================== */

/* Outer structure wrapper for the localized options modal */
.mpfreegifts-option-modal {
    padding: 10px 15px !important;
    text-align: center;
}

/* Labels for both attribute selection (e.g. Size) and quantity inputs */
.mpfreegifts-option-form .fieldset .field > .label,
.mpfreegifts-option-form .mpfreegifts-gift-qty .label {
    display: block !important;
    font-size: 15px;
    color: #fef2d5;
    text-transform: uppercase;
    margin-bottom: 8px !important;
    text-align: center !important;
    font-weight: bold;
}

/* Unified style layout for standard attribute select dropdown boxes */
.mpfreegifts-option-form .super-attribute-select {
    width: 100% !important;
    max-width: 250px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    display: inline-block;
    text-align-last: center; /* Centers the visible text within the select options element */
}

/* Realigns block quantity container structures vertically */
.mpfreegifts-option-form .mpfreegifts-gift-qty {
    display: flex;
    flex-direction: column; /* Places "Qty:" label directly on top of the input fields */
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    gap: 0;
}

.mpfreegifts-option-form .mpfreegifts-gift-input-qty {
    width: 60px !important;
    height: 40px;
    text-align: center;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
}

/* Validation error block messaging spacing adjustments */
.mpfreegifts-option-form .mp-validation-message-box {
    margin-top: 5px;
}

.mpfreegifts-option-form .mp-mage-error {
    color: #e02b27;
    font-size: 12px;
}

/* Center-aligned footer container for submission fields */
.mpfreegifts-option-form-footer {
    margin-top: 25px;
    text-align: center;
    width: 100%;
}

/* Styled confirmation button for adding the configured free item */
.mpfreegifts-option-form-footer button.action.primary {
    width: 100% !important;
    max-width: 250px; /* Aligns visually with the size configuration width limits */
    min-height: 44px;
    padding: 10px 20px;
    font-size: 15px;
    text-transform: uppercase;
    background-color: #ec6907 !important;
    color: #fef2d5 !important;
    border: 1px solid #fef2d5 !important;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 103, 71, 0.2);
}

.mpfreegifts-option-form-footer button.action.primary:hover {
    background-color: #ec6907 !important;
    color: #fef2d5 !important;
    border: 1px solid #fef2d5 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 103, 0.15);
}