/* Survey System Styles */

/* Simple Floating Survey Widget */
.survey-widget {
    position: fixed;
    bottom: 100px; /* 20px above floating arrow (arrow is at 30px + 50px height) */
    right: 30px; /* Same as floating arrow */
    width: 50px; /* Same as floating arrow */
    height: 50px; /* Same as floating arrow */
    border-radius: 50%; /* Same as floating arrow */
    background: linear-gradient(135deg, #10B981 0%, #059669 100%); /* Green gradient like floating arrow */
    color: white; /* Same as floating arrow */
    display: flex; /* Same as floating arrow */
    align-items: center; /* Same as floating arrow */
    justify-content: center; /* Same as floating arrow */
    font-size: 1.25rem; /* Same as floating arrow */
    z-index: 999; /* High z-index to ensure visibility */
    opacity: 1; /* Always visible unlike floating arrow */
    visibility: visible; /* Always visible unlike floating arrow */
    transition: all 0.3s ease; /* Smooth transitions */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Shadow like floating arrow */
    cursor: pointer;
}

.survey-widget:hover {
    transform: translateY(-2px); /* Similar to floating arrow hover effect */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.survey-widget.expanded {
    width: 400px;
    height: auto;
    min-height: 300px;
    border-radius: 15px;
    padding: 25px;
    flex-direction: column;
    align-items: stretch;
    background: white;
    color: #333;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    /* Center in viewport */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Make draggable */
    cursor: move;
    z-index: 10000;
}

.survey-widget.expanded:hover {
    transform: translate(-50%, -50%); /* Maintain center position on hover */
}

.survey-widget.expanded.dragging {
    cursor: grabbing;
    user-select: none;
}

.survey-widget-header {
    cursor: grab; /* Indicate draggable area */
}

.survey-widget.hidden {
    display: none;
}

/* Survey Widget Content */
.survey-widget-icon {
    display: block;
    transition: all 0.3s ease;
}

.survey-widget.expanded .survey-widget-icon {
    display: none;
}

.survey-widget-content {
    display: none;
    width: 100%;
}

.survey-widget.expanded .survey-widget-content {
    display: block;
}

.survey-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f8f9fa;
}

.survey-widget-title {
    font-size: 18px;
    font-weight: 700;
    color: #007bff;
    margin: 0;
}

.survey-widget-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.survey-widget-close:hover {
    background: #f8f9fa;
    color: #333;
}

/* Simple Survey Form */
.survey-simple-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.survey-simple-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.survey-simple-label {
    font-weight: 600;
    color: #333;
    font-size: 13px;
}

.survey-simple-input {
    padding: 10px 12px;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    font-size: 13px;
    transition: border-color 0.3s ease;
    font-family: inherit;
}

.survey-simple-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.survey-simple-textarea {
    min-height: 80px;
    resize: vertical;
}

.survey-simple-btn {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.survey-simple-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.survey-simple-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.survey-success-message {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
    margin-bottom: 10px;
}

/* Form Styles */
.survey-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.survey-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.survey-form-label {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.survey-form-input {
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.survey-form-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.survey-form-textarea {
    min-height: 100px;
    resize: vertical;
    font-family: inherit;
}

.survey-form-btn {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.survey-form-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.survey-form-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Draggable Survey Form */
.survey-draggable-form {
    position: fixed;
    top: 100px;
    right: 20px;
    width: 350px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 100002;
    display: none;
    border: 2px solid #007bff;
}

.survey-draggable-form.show {
    display: block;
}

.survey-drag-header {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    padding: 15px 20px;
    border-radius: 13px 13px 0 0;
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.survey-drag-title {
    font-weight: 600;
    font-size: 16px;
    margin: 0;
}

.survey-drag-close {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.survey-drag-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.survey-drag-body {
    padding: 20px;
}

.survey-drag-instructions {
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 15px;
    font-size: 13px;
    color: #1565c0;
}

/* Survey Entries Display */
.survey-entries-container {
    max-height: 400px;
    overflow-y: auto;
}

.survey-entry {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.survey-entry:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.survey-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.survey-entry-user {
    font-weight: 600;
    color: #007bff;
    font-size: 14px;
}

.survey-entry-date {
    font-size: 12px;
    color: #6c757d;
}

.survey-entry-page {
    font-size: 13px;
    color: #495057;
    margin-bottom: 8px;
    font-weight: 500;
}

.survey-entry-section {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #6c757d;
}

.survey-entry-comment {
    color: #333;
    font-size: 14px;
    line-height: 1.4;
}

/* Click Capture Mode */
.survey-click-mode {
    cursor: crosshair !important;
}

.survey-click-mode * {
    cursor: crosshair !important;
}

.survey-highlight-section {
    outline: 3px solid #007bff !important;
    outline-offset: 2px;
    background: rgba(0, 123, 255, 0.1) !important;
    transition: all 0.2s ease;
}

/* Instructions Modal */
.survey-instructions {
    background: #e8f4fd;
    border: 2px solid #007bff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.survey-instructions h4 {
    color: #007bff;
    margin-bottom: 15px;
    font-size: 18px;
}

.survey-instructions ul {
    margin: 0;
    padding-left: 20px;
}

.survey-instructions li {
    margin-bottom: 8px;
    color: #495057;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .survey-widget {
        bottom: 100px; /* 20px above floating arrow on mobile (arrow at 30px + 50px height) */
        right: 30px; /* Same as floating arrow on mobile */
        width: 50px; /* Same as floating arrow on mobile */
        height: 50px; /* Same as floating arrow on mobile */
        font-size: 1.25rem; /* Same as floating arrow on mobile */
    }

    .survey-widget:hover {
        transform: translateY(-2px); /* Same hover effect as desktop */
    }

    .survey-widget.expanded {
        width: calc(100vw - 40px); /* Account for 20px margins on both sides */
        max-width: 350px;
        min-height: 280px;
        /* Center in viewport on mobile too */
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .survey-widget.expanded:hover {
        transform: translate(-50%, -50%); /* Maintain center position on mobile */
    }

    .survey-simple-input {
        font-size: 16px; /* Prevent zoom on iOS */
    }
}