/* ==========================================
   1. BASE STYLES & SHARED ELEMENTS
   ========================================== */
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    margin: 3% auto; 
    line-height: 1.6; 
    background: #F0B01B; 
    color: #003031; 
    padding: 0 15px; 
}
a {
	color:#307A7A;
	
}
a:hover{
	color:#91B7B7; 
	
}
h2 { border-bottom: 2px solid #007BFF; padding-bottom: 10px; color: #007BFF; }

.hidden { display: none; }

.char-counter { font-size: 0.8em; color: #666; text-align: right; }

.form-group { 
    margin-bottom: 25px; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 20px; 
}

label.main-label { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-weight: bold; 
    margin-bottom: 10px; 
}

/* Tooltips */
.tooltip-wrapper { position: relative; display: inline-flex; align-items: center; cursor: pointer; vertical-align: middle; }
.info-icon { background: #619999; color: white; border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; margin-left: 4px; }
.tooltip-content { 
    visibility: hidden; width: 180px; background-color: #003B3C; color: #F8F8F8; text-align: center; border-radius: 6px; 
    padding: 8px; position: absolute; z-index: 100; bottom: 130%; left: 50%; margin-left: -90px; opacity: 0; 
    transition: opacity 0.3s; font-size: 0.8em; font-weight: normal; pointer-events: none;
}
.tooltip-content::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; }
.tooltip-wrapper.active .tooltip-content { visibility: visible; opacity: 1; }

/* ==========================================
   2. STANDARD FORM CONTROLS
   ========================================== */
input[type="text"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
input:required { border-left: 5px solid #BE5B5E; }

.form-control-styled {
    width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; 
    box-sizing: border-box; font-family: inherit; resize: vertical;
}

.option-group { display: flex; gap: 15px; margin-top: 5px; flex-wrap: wrap; }
.option-group-vertical { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.option-row { display: flex; align-items: center; gap: 10px; }
.option-row label { margin: 0; cursor: pointer; }

#other-input-container { display: none; margin-top: 15px; }

/* ==========================================
   3. IMAGE SELECTION COMPONENT
   ========================================== */
.image-select-grid { 
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 10px; width: 100%;
}
.image-option { position: relative; cursor: pointer; }
.image-option.spacer { cursor: default; pointer-events: none; }
.image-option.spacer img { opacity: 0; }
.image-option input[type="radio"], .image-option input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.image-option img { width: 100%; height: auto; border-radius: 8px; border: 3px solid transparent; transition: all 0.2s; display: block; }
.image-option input:checked + img { border-color: #007BFF; box-shadow: 0 0 10px rgba(0,123,255,0.5); transform: scale(1.02); }
.image-caption { display: block; text-align: center; font-size: 0.8em; margin-top: 5px; color: #666; }

/* ==========================================
   4. NPS (NET PROMOTER SCORE)
   ========================================== */
.nps-container { margin-top: 35px; max-width: 100%; }
.nps-grid { display: grid !important; grid-template-columns: repeat(11, 1fr) !important; gap: 4px; margin-bottom: 8px; }
.nps-item { cursor: pointer; text-align: center; position: relative; margin-bottom: 25px; }
.nps-item input { display: none; }
.nps-number { display: block; padding: 10px 0; border: 1px solid #ccc; border-radius: 4px; background: #fff; transition: all 0.2s ease; font-weight: bold; font-size: 0.9em; }
.nps-item input:checked + .nps-number { background-color: #007BFF; color: white; border-color: #007BFF; }
.nps-labels { display: flex; justify-content: space-between; font-size: 0.75em; color: #666; }

/* NPS Descriptive Labels (Desktop) */
.nps-item:first-child::before { content: "Not at all likely"; position: absolute; top: -25px; left: 0; width: 150px; text-align: left; font-size: 0.85rem; color: #666; }
.nps-item:last-child::after { content: "Extremely likely"; position: absolute; top: -25px; right: 0; width: 150px; text-align: right; font-size: 0.85rem; color: #666; }

@media (max-width: 480px) {
    .nps-grid { grid-template-columns: repeat(11, minmax(30px, 1fr)); overflow-x: auto; padding-bottom: 5px; }
}

/* ==========================================
   5. LIKERT MATRIX (DESKTOP)
   ========================================== */
.likert-grid { display: grid; grid-template-columns: 200px repeat(5, 1fr); gap: 10px; align-items: center; background: #F8F8F8; padding: 15px; border-radius: 8px; }
.likert-options-container { display: contents; }
.likert-header { text-align: center; font-weight: bold; font-size: 0.9rem; padding-bottom: 10px; }
.dimension-label { padding: 10px 0; font-weight: 500; font-size: 0.95em; color: #464646; }
.likert-input { text-align: center; }
.mobile-label { display: none; }