/* Survey Frontend Styles */
.angie-survey-wrapper {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    padding: 36px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.survey-field-row {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f0f0f0;
}
.survey-field-row:last-of-type {
    border-bottom: none;
}
.survey-question-label {
    display: block;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 12px;
    color: #1a1a2e;
    line-height: 1.4;
}
.survey-question-label .req {
    color: #e53935;
    margin-left: 3px;
}

/* Inputs */
.angie-survey-form textarea,
.angie-survey-form .survey-input-text {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color .2s;
    box-sizing: border-box;
}
.angie-survey-form textarea {
    resize: vertical;
}
.angie-survey-form textarea:focus,
.angie-survey-form .survey-input-text:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 2px rgba(34,113,177,.15);
}

/* Phone input fixes for intl-tel-input */
.iti {
    width: 100%;
}
.iti__flag {background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/img/flags.png");}
@media (min-resolution: 2x) {
  .iti__flag {background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/img/flags@2x.png");}
}

/* Radio / Checkbox */
.survey-opt-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 6px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    font-size: 14px;
    color: #333;
}
.survey-opt-label:hover {
    background: #f0f6ff;
    border-color: #2271b1;
}
.survey-opt-label input {
    accent-color: #2271b1;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Stars */
.survey-star-rating {
    display: flex;
    gap: 6px;
}
.survey-star-rating span {
    font-size: 36px;
    color: #ddd;
    cursor: pointer;
    transition: color .15s, transform .1s;
    line-height: 1;
}
.survey-star-rating span:hover,
.survey-star-rating span.hover,
.survey-star-rating span.active {
    color: #f5b301;
}
.survey-star-rating span:active {
    transform: scale(1.2);
}

/* Emoji */
.survey-emoji-rating {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.survey-emoji-rating span {
    font-size: 36px;
    cursor: pointer;
    filter: grayscale(100%) opacity(.6);
    transition: filter .2s, transform .2s;
    line-height: 1;
}
.survey-emoji-rating span:hover,
.survey-emoji-rating span.active {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.25);
}

/* Scale */
.survey-scale-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.scale-label-min,
.scale-label-max {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
}
.scale-opt {
    text-align: center;
    cursor: pointer;
}
.scale-opt input {
    display: none;
}
.scale-opt span {
    display: block;
    padding: 9px 13px;
    background: #f5f5f5;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s, color .15s, border-color .15s;
    min-width: 36px;
}
.scale-opt input:checked + span {
    background: #2271b1;
    color: #fff;
    border-color: #2271b1;
}
.scale-opt:hover span {
    background: #e8f0fb;
    border-color: #2271b1;
}

/* Submit */
.survey-submit-row {
    margin-top: 10px;
}
.survey-submit-btn {
    background: #2271b1;
    color: #fff;
    border: none;
    padding: 13px 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: background .2s, transform .1s;
    width: 100%;
}
.survey-submit-btn:hover {
    background: #135e96;
}
.survey-submit-btn:active {
    transform: scale(.98);
}
.survey-submit-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Messages */
.survey-msg {
    margin-top: 16px;
}
.survey-success-msg {
    color: #155724;
    background: #d4edda;
    border: 1px solid #c3e6cb;
    padding: 14px 18px;
    border-radius: 6px;
    font-weight: 500;
}
.survey-error-msg {
    color: #721c24;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 14px 18px;
    border-radius: 6px;
    font-weight: 500;
}

/* Mobile */
@media (max-width: 600px) {
    .angie-survey-wrapper {
        padding: 20px;
    }
    .survey-scale-rating {
        gap: 3px;
    }
    .scale-opt span {
        padding: 8px 9px;
        min-width: 28px;
        font-size: 12px;
    }
}