@charset "utf-8";
#feedback-survey-container h1 {
    margin: 33px auto;
    text-align: center;
}
        
        #feedback-survey-container p,
        #feedback-survey-form {
            margin: 1px auto 22px;
            max-width: 973px;
        }
        
        #feedback-survey-form .survey-question {
            margin: 44px 0;
            padding: 11px 0;
            font-family: Arial, sans-serif;
        }

        #feedback-survey-form .survey-question label {
            display: block;
            margin: 1px 0 0;
            font-weight: 600;
            color: rgb(60,60,60);
        }
        
        #feedback-survey-form .question-instruction {
            font-size: 18px;
            color: #777;
        }
        
        #feedback-survey-form .emoji-options {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            margin: 33px 0 44px;
        }

        #feedback-survey-form .emoji-options label {
            flex: 1;
            max-width: 185px;
            cursor: pointer;
        }

        #feedback-survey-form .emoji-options input[type="radio"] { display: none; /* Hide radio buttons */ }

        .emoji-btn {
            padding: 22px;
            text-align: center;
            border-radius: 8px;
            background: #f0f0f0;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .emoji-btn:hover {
            box-shadow: 0px 2px 4px rgba(0,0,255,0.3);
            transform: translateY(-5px);
        }
        
        #feedback-survey-form img.emoji {
            height: auto !important;
            width: auto !important;
            margin: 6px !important;
            vertical-align: baseline !important;
        }

        .emoji-btn span {
            display: block;
            margin: 1px 0;
            font-size: 18px;
            font-weight: 500;
        }
        
        #feedback-survey-form .emoji-options input[type="radio"]:checked + .emoji-btn {
          background: #007bff;
          color: #fff;
          border-color: #005ec2;
        }
        
        #feedback-survey-form .yes-no-options { justify-content: flex-start !important; }

        .yes-no-options label { flex: 0 1 120px; /* Slightly wider buttons */ }
        
        #feedback-survey-form strong { font-weight: 600; }
        
        #feedback-survey-form textarea {
            padding: 4px;
            width: 100%;
            font-size: 17px;
        }
        
        .contact-details {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin: 11px 0;
            max-width: 400px;
        }

        .contact-details input {
          padding: 12px;
          font-size: 1em;
          border: 1px solid #ccc;
          border-radius: 6px;
          transition: border-color 0.3s;
        }

        .contact-details input:focus {
          outline: none;
          border-color: #007bff;
          box-shadow: 0 0 5px rgba(0,123,255,0.3);
        }
        
        #feedback-survey-form button[type="submit"] {
            margin: 22px 0;
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 12px 24px;
            font-size: 1em;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
        }

        #feedback-survey-form button[type="submit"]:hover {
          background-color: #005ec2;
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0,123,255,0.3);
        }

        #feedback-survey-form button[type="submit"]:active {
          transform: translateY(0);
          box-shadow: none;
        }
        
        .google-review-btn {
          display: inline-block;
          text-decoration: none;
          background-color: #34A853; /* Google's green color */
          color: #fff;
          border-radius: 6px;
          padding: 12px 24px;
          font-size: 1em;
          transition: background-color 0.3s ease, transform 0.2s ease;
          margin-top: 15px;
        }

        .google-review-btn:hover {
          background-color: #2c8b46;
          transform: translateY(-2px);
          box-shadow: 0 4px 10px rgba(52,168,83,0.3);
        }

        .google-review-btn:active {
          transform: translateY(0);
          box-shadow: none;
        }
        
        .thank-you-container {
            max-width: 688px;
            margin: 40px auto;
            padding: 25px;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            background-color: #fafafa;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            text-align: center;
        }

        .thank-you-heading {
            font-size: 1.4em;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .thank-you-container.neutral {
            background-color: #f3f7ff;
            border: 1px solid #c5d7f2;
        }
@media all and (max-width: 759px) {
    #feedback-survey-container h1 { margin: 22px auto; }
    #feedback-survey-container p,
    #feedback-survey-form { max-width: 100%; }
    #feedback-survey-form .survey-question { margin: 33px 0; }
    #feedback-survey-form .emoji-options {
        flex-direction: column-reverse;
        gap: 3px;
        margin: 22px 0 33px;
    }
    .yes-no-options {
        flex-direction: row !important;
        gap: 8px;
    }
    #feedback-survey-form .emoji-options label { max-width: 175px; }
    .yes-no-options label {
        flex: 1 1 48%; /* buttons side-by-side */
        max-width: none;
    }
    .emoji-btn { padding: 21px; }
    #feedback-survey-form img.emoji { margin: 0 !important; }
    .contact-details {
        width: 100%;
        max-width: 100%;
    }
    .contact-details input,
    #feedback-survey-form textarea {
        font-size: 16px;
        padding: 10px;
    }
    #feedback-survey-form button[type="submit"],
    .google-review-btn {
        max-width: 100%;
        text-align: center;
        padding: 15px;
        font-size: 16px;
    }
    .thank-you-container {
        padding: 22px;
        margin: 33px auto;
        max-width: 100%;
    }
}