/*
 * css/custom/conferma.css
 * Conferma ordine
 */

.gp-order-confirm-page {
    min-height : calc(100vh - 220px);
    padding    : 70px 16px;
    background : #fff;

    display         : flex;
    justify-content : center;
    align-items     : flex-start;
}

.gp-order-confirm-box {
    width      : 100%;
    max-width  : 620px;
    text-align : center;
}

.gp-order-confirm-icon {
    width  : 72px;
    height : 72px;

    margin : 0 auto 22px auto;

    display         : flex;
    align-items     : center;
    justify-content : center;

    border        : 2px solid #5c8f44;
    border-radius : 50%;

    background : #e9f5df;
    color      : #2f6f24;

    font-size   : 42px;
    font-weight : 400;
    line-height : 1;
}

.gp-order-confirm-title {
    margin : 0 0 12px 0;

    color : var(--gp-text-primary);

    font-size   : 28px;
    font-weight : 700;
    line-height : 1.2;
}

.gp-order-confirm-text {
    margin : 0 auto 34px auto;

    max-width : 480px;

    color : var(--gp-text-secondary);

    font-size   : 17px;
    font-weight : 500;
    line-height : 1.45;
}

.gp-order-confirm-info {
    display : grid;
    grid-template-columns : 28px 1fr;
    gap     : 14px;

    max-width : 520px;
    margin    : 0 auto;

    padding : 18px 20px;

    text-align : left;

    border        : 1px solid #2f80ed;
    border-radius : 8px;

    background : #dbeafe;
    color      : #2f65b8;
}

.gp-order-confirm-info-icon {
    font-size   : 22px;
    line-height : 1.2;
}

.gp-order-confirm-info-content h2 {
    margin : 0 0 4px 0;

    font-size   : 16px;
    font-weight : 700;
    line-height : 1.3;
}

.gp-order-confirm-info-content p {
    margin : 0;

    font-size   : 15px;
    font-weight : 600;
    line-height : 1.55;
}

.gp-order-confirm-actions {
    margin-top : 32px;
}

@media (max-width: 576px) {
    .gp-order-confirm-page {
        padding : 48px 16px;
    }

    .gp-order-confirm-title {
        font-size : 24px;
    }

    .gp-order-confirm-text {
        font-size : 15px;
    }

    .gp-order-confirm-info {
        grid-template-columns : 1fr;
        text-align            : center;
    }

    .gp-order-confirm-info-icon {
        margin-bottom : 4px;
    }
}