/* ============================================
   STYLE QUIZ - Bulletproof Standalone Styles
   All selectors use .style-quiz-widget prefix
   Critical properties use !important
   ============================================ */

/* ============================================
   CSS VARIABLES
   ============================================ */
.style-quiz-widget {
    /* Colors */
    --sq-bg-lightest: #F9F7F3;
    --sq-bg-light: #EFEBE2;
    --sq-bg-medium: #E0D8C8;
    --sq-neutral: #CCBEA5;
    --sq-accent: #A88A67;
    --sq-primary: #9B795B;
    --sq-primary-dark: #81624D;
    --sq-text-medium: #6A5142;
    --sq-text-dark: #564338;
    --sq-text-darkest: #2E221C;

    /* Font Families */
    --sq-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --sq-font-heading: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Font Weights */
    --sq-font-weight-light: 300;
    --sq-font-weight-normal: 400;
    --sq-font-weight-medium: 500;
    --sq-font-weight-semibold: 600;
    --sq-font-weight-bold: 700;

    /* Font Sizes */
    --sq-font-size-xs: 14px;
    --sq-font-size-sm: 15px;
    --sq-font-size-base: 16px;
    --sq-font-size-md: 18px;
    --sq-font-size-lg: 20px;
    --sq-font-size-xl: 28px;
    --sq-font-size-2xl: 32px;
    --sq-font-size-3xl: 36px;

    /* Line Heights */
    --sq-line-height-tight: 1.3;
    --sq-line-height-normal: 1.5;
    --sq-line-height-relaxed: 1.7;

    /* Spacing */
    --sq-spacing-xs: 8px;
    --sq-spacing-sm: 12px;
    --sq-spacing-md: 16px;
    --sq-spacing-lg: 24px;
    --sq-spacing-xl: 32px;
    --sq-spacing-2xl: 48px;

    /* Border Radius */
    --sq-radius-sm: 8px;
    --sq-radius-md: 12px;
    --sq-radius-lg: 14px;
    --sq-radius-xl: 16px;

    /* Layout */
    --sq-content-max-width: 1100px;
    --sq-form-max-width: 400px;

    /* Image Grid */
    --sq-image-size: 200px;
    --sq-image-gap: 24px;
    --sq-image-border-radius: 12px;

    /* Animation */
    --sq-transition-fast: 0.2s ease;
    --sq-transition-normal: 0.3s ease;
    --sq-transition-slow: 0.5s ease;
    --sq-progress-transition: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   COMPREHENSIVE RESET
   Reset all elements inside the widget
   ============================================ */
.style-quiz-widget,
.style-quiz-widget *,
.style-quiz-widget *::before,
.style-quiz-widget *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    background: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    text-shadow: none !important;
    box-shadow: none !important;
    vertical-align: baseline !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ============================================
   MAIN CONTAINER
   ============================================ */
.style-quiz-widget {
    font-family: var(--sq-font-primary) !important;
    font-weight: var(--sq-font-weight-normal) !important;
    font-size: var(--sq-font-size-base) !important;
    line-height: var(--sq-line-height-normal) !important;
    color: var(--sq-text-darkest) !important;
    background-color: var(--sq-bg-lightest) !important;
    padding: 40px 20px !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

.style-quiz-widget .style-quiz-container {
    max-width: var(--sq-content-max-width) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
}

/* ============================================
   SCREEN MANAGEMENT
   ============================================ */
.style-quiz-widget .sq-screen {
    display: none !important;
    text-align: center !important;
    -webkit-animation: sqFadeIn var(--sq-transition-normal) !important;
    animation: sqFadeIn var(--sq-transition-normal) !important;
}

.style-quiz-widget .sq-screen.active {
    display: block !important;
}

@-webkit-keyframes sqFadeIn {
    from { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); }
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

@keyframes sqFadeIn {
    from { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); }
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

/* ============================================
   PROGRESS BAR
   ============================================ */
.style-quiz-widget .sq-progress {
    text-align: center !important;
    margin-bottom: var(--sq-spacing-xl) !important;
    display: block !important;
}

.style-quiz-widget .sq-progress.sq-hidden {
    display: none !important;
}

.style-quiz-widget .sq-progress-text {
    font-family: var(--sq-font-heading) !important;
    font-size: var(--sq-font-size-xs) !important;
    font-weight: var(--sq-font-weight-normal) !important;
    color: var(--sq-accent) !important;
    display: block !important;
    margin-bottom: var(--sq-spacing-sm) !important;
    line-height: var(--sq-line-height-normal) !important;
}

.style-quiz-widget .sq-progress-bar {
    width: 100% !important;
    max-width: var(--sq-content-max-width) !important;
    height: 3px !important;
    background-color: var(--sq-bg-medium) !important;
    border-radius: 2px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    display: block !important;
}

.style-quiz-widget .sq-progress-fill {
    height: 100% !important;
    background-color: var(--sq-accent) !important;
    border-radius: 2px !important;
    display: block !important;
    -webkit-transition: width var(--sq-progress-transition) !important;
    transition: width var(--sq-progress-transition) !important;
}

/* ============================================
   HERO IMAGE
   ============================================ */
.style-quiz-widget .sq-hero-image {
    margin-top: var(--sq-spacing-xl) !important;
    margin-bottom: var(--sq-spacing-xl) !important;
    display: block !important;
}

.style-quiz-widget .sq-hero-image img {
    width: 450px !important;
    height: 229px !important;
    max-width: 100% !important;
    object-fit: cover !important;
    border-radius: var(--sq-radius-lg) !important;
    display: block !important;
    margin: 0 auto !important;
    background-color: var(--sq-bg-medium) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='450' height='229' viewBox='0 0 450 229'%3E%3Crect fill='%23E0D8C8' width='450' height='229'/%3E%3Cpath fill='%23CCBEA5' d='M180 80c-11 0-20 9-20 20s9 20 20 20 20-9 20-20-9-20-20-20zm115 85H155l50-65 25 35 40-55 25 85z'/%3E%3C/svg%3E") !important;
    background-size: cover !important;
    background-position: center !important;
}

.style-quiz-widget .sq-hero-image img.sq-img-error {
    opacity: 0 !important;
}

/* ============================================
   START SCREEN
   ============================================ */
.style-quiz-widget #sq-screen-start {
    text-align: center !important;
}

.style-quiz-widget .sq-title {
    font-family: var(--sq-font-heading) !important;
    font-weight: var(--sq-font-weight-medium) !important;
    font-size: var(--sq-font-size-3xl) !important;
    line-height: 44px !important;
    text-align: center !important;
    color: var(--sq-text-darkest) !important;
    margin-bottom: var(--sq-spacing-lg) !important;
    display: block !important;
}

.style-quiz-widget .sq-title-accent {
    color: var(--sq-accent) !important;
    display: inline !important;
}

.style-quiz-widget .sq-description {
    font-family: var(--sq-font-heading) !important;
    font-weight: var(--sq-font-weight-light) !important;
    font-size: var(--sq-font-size-md) !important;
    line-height: 150% !important;
    text-align: center !important;
    color: var(--sq-text-darkest) !important;
    margin-bottom: var(--sq-spacing-md) !important;
    display: block !important;
}

/* Rich text formatting for all editor content */
.style-quiz-widget p {
    display: block !important;
    margin-bottom: 0.75em !important;
}

.style-quiz-widget p:last-child {
    margin-bottom: 0 !important;
}

.style-quiz-widget strong,
.style-quiz-widget b {
    font-weight: var(--sq-font-weight-bold) !important;
}

.style-quiz-widget em,
.style-quiz-widget i {
    font-style: italic !important;
}

.style-quiz-widget u {
    text-decoration: underline !important;
}

.style-quiz-widget s,
.style-quiz-widget strike,
.style-quiz-widget del {
    text-decoration: line-through !important;
}

.style-quiz-widget a {
    color: var(--sq-accent) !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}

.style-quiz-widget a:hover {
    color: var(--sq-primary-dark) !important;
}

.style-quiz-widget ul,
.style-quiz-widget ol {
    display: inline-block !important;
    margin: 0.75em 0 !important;
    padding-left: 1.5em !important;
    text-align: left !important;
}

.style-quiz-widget ul {
    list-style-type: disc !important;
}

.style-quiz-widget ol {
    list-style-type: decimal !important;
}

.style-quiz-widget li {
    display: list-item !important;
    margin-bottom: 0.25em !important;
    text-align: left !important;
}

.style-quiz-widget br {
    display: inline !important;
}

.style-quiz-widget .sq-start-wrapper {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: column !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    margin-top: var(--sq-spacing-xl) !important;
}

.style-quiz-widget .sq-start-button {
    background: linear-gradient(180deg, var(--sq-accent) 0%, var(--sq-primary) 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 12px 24px !important;
    font-size: var(--sq-font-size-base) !important;
    font-weight: var(--sq-font-weight-medium) !important;
    font-family: var(--sq-font-heading) !important;
    line-height: 150% !important;
    border-radius: var(--sq-radius-sm) !important;
    cursor: pointer !important;
    display: inline-block !important;
    text-align: center !important;
    -webkit-transition: all var(--sq-transition-fast) !important;
    transition: all var(--sq-transition-fast) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.style-quiz-widget .sq-start-button:hover {
    background: linear-gradient(180deg, var(--sq-primary) 0%, var(--sq-primary-dark) 100%) !important;
}

.style-quiz-widget .sq-time-note {
    font-family: var(--sq-font-heading) !important;
    font-size: var(--sq-font-size-xs) !important;
    font-weight: var(--sq-font-weight-normal) !important;
    color: var(--sq-text-medium) !important;
    margin-top: var(--sq-spacing-md) !important;
    opacity: 0.7 !important;
    display: block !important;
}

/* ============================================
   STEP SCREENS
   ============================================ */
.style-quiz-widget .sq-step-title {
    font-family: var(--sq-font-heading) !important;
    font-size: var(--sq-font-size-3xl) !important;
    font-weight: var(--sq-font-weight-medium) !important;
    color: var(--sq-text-darkest) !important;
    margin-bottom: var(--sq-spacing-lg) !important;
    line-height: var(--sq-line-height-tight) !important;
    display: block !important;
    text-align: center !important;
}

.style-quiz-widget .sq-step-subtitle {
    font-family: var(--sq-font-heading) !important;
    font-size: var(--sq-font-size-md) !important;
    font-weight: var(--sq-font-weight-light) !important;
    color: var(--sq-text-darkest) !important;
    margin-bottom: var(--sq-spacing-2xl) !important;
    line-height: 150% !important;
    display: block !important;
    text-align: center !important;
}

/* ============================================
   IMAGE GRID
   Desktop: 2 rows of 5 (5 columns)
   Tablet/Mobile: 5 rows of 2 (2 columns)
   ============================================ */
.style-quiz-widget .sq-image-grid {
    display: -ms-grid !important;
    display: grid !important;
    grid-template-columns: repeat(5, var(--sq-image-size)) !important;
    gap: var(--sq-image-gap) !important;
    -webkit-box-pack: center !important;
    -webkit-justify-content: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    margin-bottom: var(--sq-spacing-2xl) !important;
}

.style-quiz-widget .sq-image-item {
    position: relative !important;
    width: var(--sq-image-size) !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: var(--sq-image-border-radius) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    -webkit-transition: all var(--sq-transition-fast) !important;
    transition: all var(--sq-transition-fast) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    background-color: var(--sq-bg-medium) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='150' viewBox='0 0 200 150'%3E%3Crect fill='%23E0D8C8' width='200' height='150'/%3E%3Cpath fill='%23CCBEA5' d='M80 50c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15zm65 60H55l30-35 15 18 25-30 20 47z'/%3E%3C/svg%3E") !important;
    background-size: cover !important;
    background-position: center !important;
    display: block !important;
}

.style-quiz-widget .sq-image-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    -webkit-transition: -webkit-transform var(--sq-transition-fast) !important;
    transition: transform var(--sq-transition-fast) !important;
    display: block !important;
    border: none !important;
    border-radius: 0 !important;
}

.style-quiz-widget .sq-image-item img.sq-img-error {
    opacity: 0 !important;
}

.style-quiz-widget .sq-image-item:hover {
    -webkit-transform: scale(1.02) !important;
    transform: scale(1.02) !important;
}

.style-quiz-widget .sq-image-item.selected {
    outline: 3px solid var(--sq-accent) !important;
    outline-offset: 2px !important;
}

.style-quiz-widget .sq-image-item.selected::after {
    content: '\2713' !important;
    position: absolute !important;
    top: var(--sq-spacing-xs) !important;
    right: var(--sq-spacing-xs) !important;
    width: 24px !important;
    height: 24px !important;
    background-color: var(--sq-accent) !important;
    color: white !important;
    border-radius: 50% !important;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -webkit-justify-content: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    font-size: var(--sq-font-size-xs) !important;
    font-weight: var(--sq-font-weight-bold) !important;
    line-height: 1 !important;
}

/* ============================================
   NAVIGATION BUTTONS
   ============================================ */
.style-quiz-widget .sq-nav-buttons {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: row !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -webkit-justify-content: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    position: relative !important;
    margin-top: var(--sq-spacing-xl) !important;
    padding: 0 var(--sq-spacing-md) !important;
}

.style-quiz-widget .sq-back-link {
    position: absolute !important;
    left: 0 !important;
    font-family: var(--sq-font-heading) !important;
    font-size: var(--sq-font-size-base) !important;
    font-weight: var(--sq-font-weight-normal) !important;
    color: var(--sq-text-medium) !important;
    text-decoration: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    cursor: pointer !important;
    -webkit-transition: font-weight var(--sq-transition-fast) !important;
    transition: font-weight var(--sq-transition-fast) !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    display: inline-block !important;
}

.style-quiz-widget .sq-back-link:hover,
.style-quiz-widget .sq-back-link:focus,
.style-quiz-widget .sq-back-link:active,
.style-quiz-widget .sq-back-link:visited {
    font-weight: var(--sq-font-weight-semibold) !important;
    color: var(--sq-text-medium) !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    border: none !important;
}

.style-quiz-widget .sq-next-button,
.style-quiz-widget .sq-submit-button {
    background: linear-gradient(180deg, var(--sq-accent) 0%, var(--sq-primary) 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 14px 40px !important;
    font-size: var(--sq-font-size-base) !important;
    font-weight: var(--sq-font-weight-medium) !important;
    font-family: var(--sq-font-heading) !important;
    border-radius: var(--sq-radius-sm) !important;
    cursor: pointer !important;
    -webkit-transition: all var(--sq-transition-fast) !important;
    transition: all var(--sq-transition-fast) !important;
    min-width: 180px !important;
    display: inline-block !important;
    text-align: center !important;
    line-height: 150% !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.style-quiz-widget .sq-next-button:hover,
.style-quiz-widget .sq-submit-button:hover {
    background: linear-gradient(180deg, var(--sq-primary) 0%, var(--sq-primary-dark) 100%) !important;
}

.style-quiz-widget .sq-next-button:disabled,
.style-quiz-widget .sq-submit-button:disabled {
    background: var(--sq-neutral) !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* ============================================
   LEAD FORM
   ============================================ */
.style-quiz-widget #sq-screen-form .sq-step-subtitle {
    margin-bottom: var(--sq-spacing-lg) !important;
}

.style-quiz-widget .sq-form-container {
    max-width: var(--sq-form-max-width) !important;
    margin: 0 auto !important;
    text-align: left !important;
    display: block !important;
}

.style-quiz-widget .sq-form-group {
    margin-bottom: var(--sq-spacing-lg) !important;
    display: block !important;
}

.style-quiz-widget .sq-form-label {
    display: block !important;
    font-family: var(--sq-font-heading) !important;
    font-size: var(--sq-font-size-md) !important;
    font-weight: var(--sq-font-weight-light) !important;
    color: var(--sq-text-darkest) !important;
    margin-bottom: var(--sq-spacing-xs) !important;
    line-height: var(--sq-line-height-normal) !important;
}

.style-quiz-widget .sq-form-input {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: var(--sq-font-size-base) !important;
    font-weight: var(--sq-font-weight-normal) !important;
    font-family: var(--sq-font-primary) !important;
    border: 1px solid var(--sq-bg-medium) !important;
    border-radius: var(--sq-radius-sm) !important;
    background-color: #FFFFFF !important;
    color: var(--sq-text-darkest) !important;
    -webkit-transition: border-color var(--sq-transition-fast) !important;
    transition: border-color var(--sq-transition-fast) !important;
    display: block !important;
    line-height: var(--sq-line-height-normal) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none !important;
}

.style-quiz-widget .sq-form-input:focus {
    outline: none !important;
    border-color: var(--sq-accent) !important;
    box-shadow: none !important;
}

.style-quiz-widget .sq-form-input::-webkit-input-placeholder {
    color: var(--sq-neutral) !important;
    opacity: 1 !important;
}

.style-quiz-widget .sq-form-input::-moz-placeholder {
    color: var(--sq-neutral) !important;
    opacity: 1 !important;
}

.style-quiz-widget .sq-form-input:-ms-input-placeholder {
    color: var(--sq-neutral) !important;
    opacity: 1 !important;
}

.style-quiz-widget .sq-form-input::placeholder {
    color: var(--sq-neutral) !important;
    opacity: 1 !important;
}

/* ============================================
   CUSTOM CHECKBOX
   ============================================ */
.style-quiz-widget .sq-checkbox-group {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: start !important;
    -webkit-align-items: flex-start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
    gap: var(--sq-spacing-sm) !important;
    margin-bottom: var(--sq-spacing-md) !important;
}

.style-quiz-widget .sq-checkbox-wrapper {
    position: relative !important;
    display: -webkit-inline-box !important;
    display: -webkit-inline-flex !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    cursor: pointer !important;
    -webkit-flex-shrink: 0 !important;
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
}

.style-quiz-widget .sq-checkbox-input {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.style-quiz-widget .sq-checkbox-custom {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--sq-bg-medium) !important;
    border-radius: 4px !important;
    background-color: #FFFFFF !important;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -webkit-justify-content: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -webkit-transition: all var(--sq-transition-fast) !important;
    transition: all var(--sq-transition-fast) !important;
    -webkit-flex-shrink: 0 !important;
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
}

.style-quiz-widget .sq-checkbox-custom::after {
    content: '\2713' !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: var(--sq-font-weight-bold) !important;
    opacity: 0 !important;
    -webkit-transform: scale(0) !important;
    transform: scale(0) !important;
    -webkit-transition: all var(--sq-transition-fast) !important;
    transition: all var(--sq-transition-fast) !important;
    display: block !important;
    line-height: 1 !important;
}

.style-quiz-widget .sq-checkbox-input:checked + .sq-checkbox-custom {
    background-color: var(--sq-accent) !important;
    border-color: var(--sq-accent) !important;
}

.style-quiz-widget .sq-checkbox-input:checked + .sq-checkbox-custom::after {
    opacity: 1 !important;
    -webkit-transform: scale(1) !important;
    transform: scale(1) !important;
}

.style-quiz-widget .sq-checkbox-input:focus + .sq-checkbox-custom {
    border-color: var(--sq-accent) !important;
}

.style-quiz-widget .sq-checkbox-content {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: column !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.style-quiz-widget .sq-checkbox-label {
    font-family: var(--sq-font-primary) !important;
    font-size: var(--sq-font-size-sm) !important;
    font-weight: var(--sq-font-weight-light) !important;
    color: var(--sq-text-darkest) !important;
    line-height: var(--sq-line-height-normal) !important;
    cursor: pointer !important;
    display: inline !important;
}

.style-quiz-widget .sq-checkbox-label a {
    color: var(--sq-accent) !important;
    text-decoration: underline !important;
    -webkit-transition: color var(--sq-transition-fast) !important;
    transition: color var(--sq-transition-fast) !important;
    cursor: pointer !important;
    display: inline !important;
}

.style-quiz-widget .sq-checkbox-label a:hover {
    color: var(--sq-primary-dark) !important;
    text-decoration: underline !important;
}

.style-quiz-widget .sq-checkbox-subtext {
    font-family: var(--sq-font-primary) !important;
    font-size: var(--sq-font-size-xs) !important;
    font-weight: var(--sq-font-weight-light) !important;
    color: var(--sq-text-medium) !important;
    line-height: var(--sq-line-height-normal) !important;
    display: block !important;
}

/* ============================================
   RESULTS SCREEN
   ============================================ */
.style-quiz-widget .sq-result-label {
    font-family: var(--sq-font-heading) !important;
    font-size: var(--sq-font-size-xs) !important;
    font-weight: var(--sq-font-weight-normal) !important;
    color: var(--sq-text-medium) !important;
    opacity: 0.7 !important;
    margin-bottom: var(--sq-spacing-sm) !important;
    display: block !important;
    text-align: center !important;
}

.style-quiz-widget .sq-result-title {
    font-family: var(--sq-font-heading) !important;
    font-size: var(--sq-font-size-3xl) !important;
    font-weight: var(--sq-font-weight-medium) !important;
    color: var(--sq-text-darkest) !important;
    margin-bottom: var(--sq-spacing-lg) !important;
    line-height: var(--sq-line-height-tight) !important;
    display: block !important;
    text-align: center !important;
}

.style-quiz-widget .sq-result-description {
    font-family: var(--sq-font-heading) !important;
    font-size: var(--sq-font-size-md) !important;
    font-weight: var(--sq-font-weight-light) !important;
    color: var(--sq-text-darkest) !important;
    margin-bottom: var(--sq-spacing-xl) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 150% !important;
    max-width: 600px !important;
    display: block !important;
    text-align: center !important;
}

/* Color Palette Blobs */
.style-quiz-widget .sq-color-palette {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center !important;
    -webkit-justify-content: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    margin-bottom: var(--sq-spacing-xl) !important;
    padding: var(--sq-spacing-md) 0 !important;
    gap: var(--sq-spacing-md) !important;
    -webkit-flex-wrap: wrap !important;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
}

.style-quiz-widget .sq-blob {
    width: 90px !important;
    height: 82px !important;
    -webkit-transition: -webkit-transform var(--sq-transition-fast) !important;
    transition: transform var(--sq-transition-fast) !important;
    display: block !important;
}

.style-quiz-widget .sq-blob:hover {
    -webkit-transform: scale(1.1) !important;
    transform: scale(1.1) !important;
    z-index: 10 !important;
    position: relative !important;
}

/* Result Characteristics List */
.style-quiz-widget .sq-result-list {
    text-align: left !important;
    max-width: 700px !important;
    margin: 0 auto var(--sq-spacing-xl) auto !important;
    display: block !important;
}

.style-quiz-widget .sq-result-list ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

.style-quiz-widget .sq-result-list li {
    font-family: var(--sq-font-heading) !important;
    font-size: var(--sq-font-size-base) !important;
    font-weight: var(--sq-font-weight-light) !important;
    color: var(--sq-text-darkest) !important;
    line-height: var(--sq-line-height-normal) !important;
    padding-left: var(--sq-spacing-lg) !important;
    position: relative !important;
    margin-bottom: var(--sq-spacing-xs) !important;
    display: block !important;
    text-align: left !important;
}

.style-quiz-widget .sq-result-list li::before {
    content: '\2022' !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--sq-text-darkest) !important;
    font-weight: var(--sq-font-weight-normal) !important;
    display: block !important;
}

/* Result Images Grid */
.style-quiz-widget .sq-result-images {
    display: -ms-grid !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--sq-image-gap) !important;
    max-width: 720px !important;
    margin: 0 auto var(--sq-spacing-xl) auto !important;
}

.style-quiz-widget .sq-result-image-item {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: var(--sq-image-border-radius) !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    background-color: var(--sq-bg-medium) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='150' viewBox='0 0 200 150'%3E%3Crect fill='%23E0D8C8' width='200' height='150'/%3E%3Cpath fill='%23CCBEA5' d='M80 50c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15zm65 60H55l30-35 15 18 25-30 20 47z'/%3E%3C/svg%3E") !important;
    background-size: cover !important;
    background-position: center !important;
    display: block !important;
}

.style-quiz-widget .sq-result-image-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    -webkit-transition: -webkit-transform var(--sq-transition-fast) !important;
    transition: transform var(--sq-transition-fast) !important;
    border: none !important;
    border-radius: 0 !important;
}

.style-quiz-widget .sq-result-image-item img.sq-img-error {
    opacity: 0 !important;
}

.style-quiz-widget .sq-result-image-item:hover img {
    -webkit-transform: scale(1.03) !important;
    transform: scale(1.03) !important;
}

/* Result Buttons Container */
.style-quiz-widget .sq-result-buttons {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: column !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    gap: var(--sq-spacing-md) !important;
    margin-top: var(--sq-spacing-xl) !important;
}

/* CTA Button (Primary) */
.style-quiz-widget .sq-results-cta-button {
    background: linear-gradient(180deg, var(--sq-accent) 0%, var(--sq-primary) 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 14px 40px !important;
    font-size: var(--sq-font-size-base) !important;
    font-weight: var(--sq-font-weight-medium) !important;
    font-family: var(--sq-font-heading) !important;
    border-radius: var(--sq-radius-sm) !important;
    cursor: pointer !important;
    -webkit-transition: all var(--sq-transition-fast) !important;
    transition: all var(--sq-transition-fast) !important;
    display: inline-block !important;
    text-align: center !important;
    line-height: 150% !important;
    text-decoration: none !important;
}

.style-quiz-widget .sq-results-cta-button:hover {
    background: linear-gradient(180deg, var(--sq-primary) 0%, var(--sq-primary-dark) 100%) !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

/* Retake Button (Secondary - plain text link) */
.style-quiz-widget .sq-retake-button {
    font-family: var(--sq-font-heading) !important;
    font-size: var(--sq-font-size-base) !important;
    font-weight: var(--sq-font-weight-normal) !important;
    color: var(--sq-text-medium) !important;
    text-decoration: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    cursor: pointer !important;
    -webkit-transition: font-weight var(--sq-transition-fast) !important;
    transition: font-weight var(--sq-transition-fast) !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    display: inline-block !important;
}

.style-quiz-widget .sq-retake-button:hover,
.style-quiz-widget .sq-retake-button:focus,
.style-quiz-widget .sq-retake-button:active {
    font-weight: var(--sq-font-weight-semibold) !important;
    color: var(--sq-text-medium) !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    border: none !important;
}

/* Required Fields Note */
.style-quiz-widget .sq-required-note {
    font-family: var(--sq-font-heading) !important;
    font-size: var(--sq-font-size-xs) !important;
    font-weight: var(--sq-font-weight-normal) !important;
    color: var(--sq-text-medium) !important;
    margin-top: var(--sq-spacing-md) !important;
    opacity: 0.7 !important;
    display: block !important;
    text-align: center !important;
}

/* ============================================
   RESPONSIVE - TABLET & MOBILE
   ============================================ */
@media (max-width: 1200px) {
    .style-quiz-widget .sq-image-grid {
        grid-template-columns: repeat(2, var(--sq-image-size)) !important;
    }

    .style-quiz-widget .sq-hero-image img {
        width: 100% !important;
        max-width: 450px !important;
        height: auto !important;
        aspect-ratio: 450 / 229 !important;
    }

    .style-quiz-widget .sq-progress-bar {
        max-width: 90% !important;
    }

    .style-quiz-widget .sq-step-title {
        font-size: var(--sq-font-size-2xl) !important;
    }

    .style-quiz-widget .sq-nav-buttons {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -webkit-flex-direction: column !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
        gap: var(--sq-spacing-md) !important;
    }

    .style-quiz-widget .sq-back-link {
        position: static !important;
        -webkit-box-ordinal-group: 3 !important;
        -webkit-order: 2 !important;
        -ms-flex-order: 2 !important;
        order: 2 !important;
        background: none !important;
        background-color: transparent !important;
    }

    .style-quiz-widget .sq-next-button,
    .style-quiz-widget .sq-submit-button {
        -webkit-box-ordinal-group: 2 !important;
        -webkit-order: 1 !important;
        -ms-flex-order: 1 !important;
        order: 1 !important;
    }

    .style-quiz-widget .sq-blob {
        width: 70px !important;
        height: 64px !important;
    }

    .style-quiz-widget .sq-result-images {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 480px !important;
    }
}

/* ============================================
   RESPONSIVE - MOBILE (smaller screens)
   ============================================ */
@media (max-width: 480px) {
    .style-quiz-widget {
        padding: var(--sq-spacing-lg) var(--sq-spacing-md) !important;
    }

    .style-quiz-widget .sq-title {
        font-size: 2rem !important;
        line-height: 1.3 !important;
    }

    .style-quiz-widget .sq-step-title {
        font-size: 2rem !important;
    }

    .style-quiz-widget .sq-step-subtitle {
        font-size: 1rem !important;
    }

    .style-quiz-widget .sq-description {
        font-size: 1rem !important;
    }

    .style-quiz-widget .sq-image-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--sq-spacing-md) !important;
    }

    .style-quiz-widget .sq-image-item {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
    }

    .style-quiz-widget .sq-next-button,
    .style-quiz-widget .sq-submit-button {
        padding: 12px 24px !important;
        min-width: 140px !important;
    }

    .style-quiz-widget .sq-progress-bar {
        max-width: 100% !important;
    }

    .style-quiz-widget .sq-form-container {
        padding: 0 var(--sq-spacing-sm) !important;
    }

    .style-quiz-widget .sq-result-title {
        font-size: 2rem !important;
    }

    .style-quiz-widget .sq-result-description {
        font-size: 1rem !important;
    }

    .style-quiz-widget .sq-color-palette {
        gap: var(--sq-spacing-sm) !important;
    }

    .style-quiz-widget .sq-blob {
        width: 55px !important;
        height: 50px !important;
    }

    .style-quiz-widget .sq-result-list {
        padding: 0 var(--sq-spacing-sm) !important;
    }

    .style-quiz-widget .sq-result-list li {
        font-size: var(--sq-font-size-sm) !important;
    }
}

/* ============================================
   GDPR MODAL
   ============================================ */
.style-quiz-widget .sq-modal-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 999999 !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -webkit-justify-content: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    padding: var(--sq-spacing-lg) !important;
}

.style-quiz-widget .sq-modal-overlay.active {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.style-quiz-widget .sq-modal {
    background-color: #FFFFFF !important;
    border-radius: var(--sq-radius-xl) !important;
    max-width: 500px !important;
    width: 100% !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    padding: var(--sq-spacing-xl) !important;
    position: relative !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
}

.style-quiz-widget .sq-modal-close {
    position: absolute !important;
    top: var(--sq-spacing-md) !important;
    right: var(--sq-spacing-md) !important;
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    cursor: pointer !important;
    font-size: 24px !important;
    line-height: 32px !important;
    color: var(--sq-text-medium) !important;
    -webkit-transition: color var(--sq-transition-fast), -webkit-transform var(--sq-transition-fast) !important;
    transition: color var(--sq-transition-fast), transform var(--sq-transition-fast) !important;
    outline: none !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -webkit-justify-content: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.style-quiz-widget .sq-modal-close:hover,
.style-quiz-widget .sq-modal-close:focus {
    color: var(--sq-text-darkest) !important;
    -webkit-transform: scale(1.1) !important;
    transform: scale(1.1) !important;
    outline: none !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.style-quiz-widget .sq-modal h3 {
    font-family: var(--sq-font-heading) !important;
    font-size: var(--sq-font-size-lg) !important;
    font-weight: var(--sq-font-weight-semibold) !important;
    color: var(--sq-text-darkest) !important;
    margin-bottom: var(--sq-spacing-md) !important;
    display: block !important;
    text-align: left !important;
}

.style-quiz-widget .sq-modal h4 {
    font-family: var(--sq-font-heading) !important;
    font-size: var(--sq-font-size-base) !important;
    font-weight: var(--sq-font-weight-semibold) !important;
    color: var(--sq-text-darkest) !important;
    margin-top: var(--sq-spacing-md) !important;
    margin-bottom: var(--sq-spacing-xs) !important;
    display: block !important;
    text-align: left !important;
}

.style-quiz-widget .sq-modal p {
    font-family: var(--sq-font-primary) !important;
    font-size: var(--sq-font-size-xs) !important;
    font-weight: var(--sq-font-weight-normal) !important;
    color: var(--sq-text-medium) !important;
    line-height: var(--sq-line-height-relaxed) !important;
    margin-bottom: var(--sq-spacing-sm) !important;
    display: block !important;
    text-align: left !important;
}

.style-quiz-widget .sq-modal ul,
.style-quiz-widget .sq-modal ol {
    display: block !important;
    margin: 0.5em 0 !important;
    padding-left: 1.5em !important;
    text-align: left !important;
}

.style-quiz-widget .sq-modal li {
    font-family: var(--sq-font-primary) !important;
    font-size: var(--sq-font-size-xs) !important;
    color: var(--sq-text-medium) !important;
    line-height: var(--sq-line-height-relaxed) !important;
    margin-bottom: 0.25em !important;
}

.style-quiz-widget .sq-modal br {
    display: block !important;
    content: "" !important;
    margin-top: 0.5em !important;
}

/* ============================================
   FALLBACK FOR OLDER BROWSERS
   ============================================ */
@supports not (aspect-ratio: 4 / 3) {
    .style-quiz-widget .sq-image-item {
        height: calc(var(--sq-image-size) * 0.75) !important;
    }

    .style-quiz-widget .sq-result-image-item {
        height: 0 !important;
        padding-bottom: 75% !important;
    }

    .style-quiz-widget .sq-result-image-item img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
}