/**************************************************************************
MTH Pumps Review Form
Version 1.0
Author: OpenAI + MTH Pumps
**************************************************************************/

/**************************************************************************
01. Global Layout
**************************************************************************/

.review-container{

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

}

/**************************************************************************
02. Review Cards
**************************************************************************/

.review-card{

    background:#ffffff;

    border:1px solid #dcdcdc;

    border-radius:10px;

    padding:30px;

    margin:35px 0;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

.review-card-header{

    margin-bottom:25px;

    padding-bottom:15px;

    border-bottom:2px solid #cc0000;

}

.review-card-header h2{

    margin:0;

    color:#222;

    font-size:28px;

    font-weight:700;

}

.review-card-body{

    display:block;

}

/**************************************************************************
03. Section Intro
**************************************************************************/

.section-intro{

    margin-top:8px;

    color:#666;

    font-size:15px;

    line-height:1.6;

}

/**************************************************************************
04. Form Rows
**************************************************************************/

.form-row{

    margin-bottom:36px;

}

.form-row:last-child{

    margin-bottom:0;

}

.form-row > label{

    display:block;

    margin-bottom:10px;

    font-size:16px;

    font-weight:600;

    color:#333;

}

/**************************************************************************
05. Small Text
**************************************************************************/

small{

    display:block;

    margin-top:6px;

    color:#777;

    font-size:.9rem;

}

/**************************************************************************
06. Modern Form Controls
**************************************************************************/

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="number"],
.form-row select,
.form-row textarea{

    width:100%;

    box-sizing:border-box;

    padding:12px 14px;

    font-size:16px;

    color:#333;

    background:#fff;

    border:1px solid #cfcfcf;

    border-radius:8px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}

.form-row textarea{

    min-height:120px;

    resize:vertical;

}

.form-row input[type="text"]:focus,
.form-row input[type="email"]:focus,
.form-row input[type="tel"]:focus,
.form-row input[type="number"]:focus,
.form-row select:focus,
.form-row textarea:focus{

    outline:none;

    border-color:#b30000;

    box-shadow:0 0 0 3px rgba(179,0,0,.12);

}

/**************************************************************************
07. Selection Cards
**************************************************************************/

.review-radio-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:14px;

    margin-top:10px;

}

.review-radio-grid input[type="radio"]{

    display:none;

}

.review-radio-grid label{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    min-height:56px;

    padding:14px 16px;

    border:2px solid #d8d8d8;

    border-radius:8px;

    background:#ffffff;

    color:#333;

    font-weight:500;

    cursor:pointer;

    transition:
        background-color .20s ease,
        border-color .20s ease,
        color .20s ease;

}

.review-radio-grid label:hover{

    border-color:#b30000;

    background:#fff7f7;

}

.review-radio-grid label.selected{

    background:#b30000;

    border-color:#b30000;

    color:#ffffff;

}

/**************************************************************************
08. Other Option
**************************************************************************/

.other-option{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

}

.other-option input[type="text"]{

    display:none;

    flex:1;

    min-width:180px;

    margin:0;

}

.other-option.selected input[type="text"]{

    display:block;

}

/**************************************************************************
09. Checkbox
**************************************************************************/

.checkbox-row{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:10px;

}

.checkbox-row input[type="checkbox"]{

    width:18px;

    height:18px;

    margin:0;

    flex:0 0 18px;

    accent-color:#b30000;

}

.checkbox-row label{

    display:block;

    margin:0;

    font-weight:500;

    line-height:1.5;

    cursor:pointer;

}

.checkbox-row input[type="checkbox"]{

    width:18px;

    height:18px;

    margin:0;

    flex-shrink:0;

    accent-color:#b30000;

}

.checkbox-row label{

    margin:0;

    font-weight:500;

    cursor:pointer;

}

/**************************************************************************
10. Star Ratings
**************************************************************************/

.star-rating{

    display:inline-flex;

    flex-direction:row-reverse;

    justify-content:flex-end;

    gap:6px;

    padding:6px 10px;

    border-radius:8px;

    transition:background-color .20s ease;

}

.star-rating:hover{

    background:#fffdf5;

}

.star-rating input[type="radio"]{

    display:none;

}

.star-rating label{

    display:flex;

    align-items:center;

    justify-content:center;

    width:32px;

    height:32px;

    margin:0;

    cursor:pointer;

    font-family:FontAwesome;

    font-size:28px;

    color:#d2d2d2;

    transition:color .18s ease;

}

.star-rating label::before{

    content:"\f005";

}

.star-rating label:hover,
.star-rating label:hover ~ label{

    color:#d8a300;

}

.star-rating input[type="radio"]:checked ~ label{

    color:#d8a300;

}

.star-rating:focus-within{

    background:#fff8e8;

    outline:2px solid rgba(179,0,0,.20);

    outline-offset:2px;

}

/**************************************************************************
11. Rating Captions
**************************************************************************/

.rating-caption{

    display:flex;

    justify-content:space-between;

    width:190px;

    margin-top:8px;

    color:#777;

    font-size:13px;

}

/**************************************************************************
12. Rating Rows
**************************************************************************/

.review-rating-row{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:8px;

}

/**************************************************************************
13. Rating Table
**************************************************************************/

.ratings-table{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.rating-item{

    display:grid;

    grid-template-columns:280px auto;

    align-items:center;

    gap:25px;

    padding:18px 0;

    border-bottom:1px solid #ececec;

}

.rating-item:last-child{

    border-bottom:none;

}

.rating-item label{

    margin:0;

    font-weight:500;

    color:#333;

}

/**************************************************************************
14. Net Promoter Score
**************************************************************************/

.nps-grid{

    display:grid;

    grid-template-columns:repeat(11,1fr);

    gap:8px;

    margin-top:12px;

}

.nps-grid input[type="radio"]{

    display:none;

}

.nps-grid label{

    display:flex;

    justify-content:center;

    align-items:center;

    height:48px;

    border:2px solid #d6d6d6;

    border-radius:8px;

    background:#ffffff;

    color:#333;

    font-weight:600;

    cursor:pointer;

    transition:
        background-color .20s ease,
        border-color .20s ease,
        color .20s ease;

}

.nps-grid label:hover{

    background:#fff7f7;

    border-color:#b30000;

}

.nps-grid label.selected{

    background:#b30000;

    border-color:#b30000;

    color:#ffffff;

}

.nps-caption{

    grid-column:1 / -1;

    width:100%;

    margin-top:10px;

}

.nps-labels{

    display:flex;

    justify-content:space-between;

    width:100%;

    font-size:14px;

    font-weight:600;

    color:#666;

}

.nps-labels span:first-child{

    text-align:left;

}

.nps-labels span:last-child{

    text-align:right;

}

/**************************************************************************
14A. Validation
**************************************************************************/

.validation-error{

    border:2px solid #c62828 !important;
    border-radius:8px;
    padding:12px;
    background:#fff8f8;

}

.validation-message{

    color:#c62828;
    font-size:14px;
    font-weight:600;
    margin-top:8px;

}

.validation-message::before{

    content:"⚠ ";

}

.validation-shake{

    animation:validationShake .35s ease;

}

@keyframes validationShake{

    0%   {transform:translateX(0);}
    20%  {transform:translateX(-6px);}
    40%  {transform:translateX(6px);}
    60%  {transform:translateX(-4px);}
    80%  {transform:translateX(4px);}
    100% {transform:translateX(0);}

}

/**************************************************************************
15. Submit Area
**************************************************************************/

.review-actions{

    text-align:center;

    margin-top:45px;

}

.review-submit-btn{

    display:inline-block;

    min-width:240px;

    padding:14px 36px;

    border:none;

    border-radius:8px;

    background:#b30000;

    color:#ffffff;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:
        background-color .20s ease,
        transform .15s ease;

}

.review-submit-btn:hover{

    background:#8f0000;

}

.review-submit-btn:active{

    transform:translateY(1px);

}

.review-submit-btn:focus{

    outline:none;

    box-shadow:0 0 0 4px rgba(179,0,0,.18);

}

/**************************************************************************
16. Responsive
**************************************************************************/

@media (max-width:900px){

    .rating-item{

        grid-template-columns:1fr;

        gap:12px;

        align-items:flex-start;

    }

    .rating-caption{

        width:190px;

    }

}

@media (max-width:700px){

    .review-card{

        padding:22px;

    }

    .review-card-header h2{

        font-size:24px;

    }

    .review-radio-grid{

        grid-template-columns:1fr;

    }

    .nps-grid{

        grid-template-columns:repeat(6,1fr);

    }

}

@media (max-width:500px){

    .review-card{

        padding:18px;

    }

    .review-submit-btn{

        width:100%;

        min-width:0;

    }

    .rating-caption{

        width:100%;

    }

}