/* ========== Survey Container ========== */
        .survey-container {
            background-color: #ffffff;
            min-height: 100vh;
            font-family: 'Inter', 'Cairo', sans-serif;
        }

        /* ========== Progress Bar ========== */
        .survey-progress {
            background-color: #f5f5f5;
            height: 60px;
            display: flex;
            align-items: center;
            padding: 0 20px;
        }
        .progress-bar-wrapper {
            width: 100%;
            max-width: 300px;
            background-color: #e0e0e0;
            border-radius: 30px;
            height: 10px;
            margin-right: 15px;
        }
        .progress-bar-fill {
            width: 0%;
            height: 10px;
            background-color: #d966c6;
            border-radius: 30px;
        }
        .progress-text {
            font-size: 14px;
            color: #666;
        }

        /* ========== Header ========== */
        .survey-header {
            background-color: #ffffff;
            border-bottom: 1px solid #eee;
            padding: 20px;
            text-align: center;
        }
        .survey-header img {
            max-height: 50px;
            margin-bottom: 10px;
        }
        .survey-header h1 {
            font-size: 24px;
            color: #1a2c3e;
            margin: 10px 0 0;
        }

        /* ========== Language Selector ========== */
        .language-selector {
            display: flex;
            justify-content: flex-end;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
        }
        .language-selector select {
            padding: 8px 15px;
            border-radius: 8px;
            border: 1px solid #ddd;
            font-family: inherit;
            font-size: 14px;
        }

        /* ========== Question Section ========== */
        .question-section {
            padding: 30px 20px;
            max-width: 800px;
            margin: 0 auto;
        }
        .question-title {
            font-size: 18px;
            font-weight: 600;
            color: #1a2c3e;
            margin-bottom: 5px;
        }
        .question-label {
            font-size: 16px;
            color: #666;
            margin-bottom: 25px;
        }

        /* ========== Rating Stars ========== */
        .rating-stars {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin: 30px 0;
        }
        .star-item {
            text-align: center;
            cursor: pointer;
        }
        .star-item svg {
            width: 40px;
            height: 40px;
            fill: #d6d6d6;
            transition: fill 0.2s;
        }
        .star-item.selected svg {
            fill: #d966c6 ;
        }

        .star-item.selected svg path {
            fill: #d966c6 !important;
        }

        .star-label {
            margin-top: 5px;
            font-size: 14px;
            color: #333;
        }

        /* ========== Rating Labels (Poor to Excellent) ========== */
        .rating-extremes {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            color: #999;
            font-size: 14px;
        }

        /* ========== Yes/No Options ========== */
        .yesno-options {
            display: flex;
            gap: 30px;
            justify-content: center;
            margin: 30px 0;
        }
        .yesno-item {
            text-align: center;
            cursor: pointer;
            padding: 10px 30px;
            border: 2px solid #ddd;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.2s;
        }
        .yesno-item.selected {
            background-color: #d966c6;
            border-color: #d966c6;
            color: white;
        }

        /* ========== Comment Box ========== */
        .comment-box {
            margin: 30px 0;
        }
        .comment-box textarea {
            width: 100%;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-family: inherit;
            font-size: 14px;
            resize: vertical;
        }

        /* ========== Contact Options ========== */
        .contact-options {
            margin: 30px 0;
        }
        .contact-option {
            margin: 10px 0;
        }
        .contact-option label {
            margin-left: 10px;
        }

        /* ========== Navigation Buttons ========== */
        .nav-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
        }
        .nav-btn {
            background-color: #d966c6;
            color: white;
            border: none;
            border-radius: 30px;
            padding: 12px 30px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }
        .nav-btn:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        .nav-btn.secondary {
            background-color: transparent;
            border: 2px solid #d966c6;
            color: #d966c6;
        }

        /* ========== RTL Support ========== */
        html[dir="rtl"] .progress-bar-wrapper {
            margin-right: 0;
            margin-left: 15px;
        }
        html[dir="rtl"] .rating-extremes {
            flex-direction: row-reverse;
        }