/* filepath: wp-content/plugins/rca-api/assets/css/style-rca-api.css */
/* Purpose: Styling for RCA API front-end form components (selects, validation, loaders, feedback animations). */
/* Intent: Centralize consistent, accessible UI states including new reusable loading overlay for dynamic selects. */
/* Relevant files: rca-api.php, assets/js/step-2-cities.js, assets/js/step-2-streets.js, rca-api.js */

/**
 * Fișier pentru stilizare elemente RCA API
 */

.checkbox-tab.inactive {
    pointer-events: none;
}

/*Calculator Form*/
select:not([disabled]) {
    cursor: pointer;
}

#car_subcategory {
    color: #666;
    /*background-color: #eee;*/
    border: 1px solid #aaa;
    opacity: 1;
}

#car_subcategory:disabled {
    background-color: #eee;
}

.prima .smaller-text {
    font-size: 0.5em; /* Adjust this value to your preference */
    vertical-align: super; /* This puts the text at the top */
}

/*.tbipay-product-installment-amount {*/
/*    color: #ff6600;*/
/*}*/

.info-car {
    padding: 30px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
    border-radius: 25px;
}

.info-car h3 {
    margin-bottom: 20px;
    color: rgba(97, 206, 112, 1) !important;
}

.info-car strong {
    color: rgba(97, 206, 112, 1);
}

.info-car li.active strong {
    color: green;
}

/*RCA form*/
#to-step-1,
#to-step-2 {
    margin-top: 20px;
}

.form.client-info__row {
    grid-template-columns: 2fr 2fr 1fr;
}

.leasing-heading {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #000;
}

/*Input validation elements*/
.validation-tag {
    display: none;
    position: absolute;
    right: 30px;
    top: 13px;
    width: 21px;
    height: 21px;
    text-align: center;
    border-radius: 100%;
}

.validation-tag.small {
    right: 6px;
    top: 14px;
}

.validation-tag.valid {
    background: #61ce70;
}

.validation-tag.invalid {
    background: #FE4544;
}

.validation-tag.valid::before {
    content: "✓";
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.validation-tag.invalid::before {
    content: "!";
    color: #fff;
    position: absolute;
    top: 47%;
    left: 51%;
    transform: translate(-50%, -50%);
    font-weight: 600;
}

.without-events {
    pointer-events: none;
}

input:not(#email):not(#email_leasing):not(#form-field-email_fisiere):not(#form-field-email_pf):not(#form-field-email_pj):not(#form-field-localitate_pj):not(#form-field-localitate_pf):not(#strada):not(#numar):not(#strada_leasing):not(#numar_leasing),
select:not(#judet):not(#localitate_siruta):not(#judet_leasing):not(#localitate_siruta_leasing):not(#form-field-judet_pj):not(#form-field-judet_pf):not(#etaj):not(#etaj_leasing) {
    text-transform: uppercase;
}

.detalii_consultanta {
    /*display: none;*/
    margin-top: 30px;
    margin-bottom: 0;
}

/*Advantages and disadvantages*/
.advantage-tag {
    font-size: 16px;
    font-weight: bold;
}

.disadvantage-tag {
    font-size: 13px;
    font-weight: bold;
}

.advantage-tag::before {
    content: "✓";
    color: #61CE70;
}

.disadvantage-tag::before {
    content: "✗";
    color: #FE4544;
}

select:not(.ui-datepicker-year):not(.ui-datepicker-month) {
    /*padding-right: 50px;*/
    /*white-space: nowrap;*/
    /*text-overflow: ellipsis;*/
    padding-right: 50px;
    white-space: nowrap; /* This will not handle overflow correctly in select */
    overflow: hidden; /* This won't work in native select either */
    text-overflow: ellipsis; /* This won't work in native select */
    max-width: 460px; /* Adjust as needed */
    display: inline-block;
}

.rca-form__body .element .select-container {
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 0;
    display: table;
    table-layout: fixed;
}

.order-offers__button {
    /*display: none;*/
    position: fixed;
    left: 50%;
    bottom: 40px;
    transform: translate(-50%, 0);
    padding: 15px 15px 16px 15px;
    z-index: 9999;
    color: #fff;
    background: #2E384D;
    box-shadow: 0 0 0 0 rgba(97, 206, 112, 1);
    animation: pulse-red 2s infinite;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    border-radius: 25px;
    font-weight: 700;
    pointer-events: none;
    width: max-content;
    line-height: 20px;
}

.order-offers__button.hide {
    display: none;
}

@keyframes pulse-red {
    0% {
        /*transform: scale(0.95);*/
        box-shadow: 0 0 0 0 rgba(97, 206, 112, 0.8);
    }

    70% {
        /*transform: scale(1);*/
        box-shadow: 0 0 0 20px rgba(97, 206, 112, 0);
    }

    100% {
        /*transform: scale(0.95);*/
        box-shadow: 0 0 0 0 rgba(97, 206, 112, 0);
    }
}

#email {
    padding-right: 27px;
}

.offers_action_btn {
    display: flex;
    align-items: center;
}

.offers_action_anim {
    width: 50px;
}

#etaj-parent .select2-selection__rendered,
#etaj_leasing-parent .select2-selection__rendered {
    padding-right: 30px;
}

#etaj-parent .validation-tag,
#etaj_leasing-parent .validation-tag {
    right: 13px;
}

.detalii_suplimentare {
    text-align: center;
}

.detalii_suplimentare div {
    font-size: 14px;
}

/**
 * ==============================================
 * Dot Pulse
 * ==============================================
 */
.dot-pulse {
    position: relative;
    left: -9999px;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background-color: #61CE70;
    color: #61CE70;
    box-shadow: 9999px 0 0 -5px;
    animation: dot-pulse 1.5s infinite linear;
    animation-delay: 0.25s;
    margin-left: 25px;
}

.dot-pulse::before, .dot-pulse::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background-color: #61CE70;
    color: #61CE70;
}

.dot-pulse::before {
    box-shadow: 9984px 0 0 -5px;
    animation: dot-pulse-before 1.5s infinite linear;
    animation-delay: 0s;
}

.dot-pulse::after {
    box-shadow: 10014px 0 0 -5px;
    animation: dot-pulse-after 1.5s infinite linear;
    animation-delay: 0.5s;
}

#drept_legal_de_utilizare-error,
#prelucrare_date_personale-error,
#consult_produs_electronic-error,
#informare_precontractuala-error {
    display: block;
}

@keyframes dot-pulse-before {
    0% {
        box-shadow: 9984px 0 0 -5px;
    }
    30% {
        box-shadow: 9984px 0 0 2px;
    }
    60%, 100% {
        box-shadow: 9984px 0 0 -5px;
    }
}

@keyframes dot-pulse {
    0% {
        box-shadow: 9999px 0 0 -5px;
    }
    30% {
        box-shadow: 9999px 0 0 2px;
    }
    60%, 100% {
        box-shadow: 9999px 0 0 -5px;
    }
}

@keyframes dot-pulse-after {
    0% {
        box-shadow: 10014px 0 0 -5px;
    }
    30% {
        box-shadow: 10014px 0 0 2px;
    }
    60%, 100% {
        box-shadow: 10014px 0 0 -5px;
    }
}

.client-info__wrapper .discount {
    padding-right: 50px;
}

.client-info__wrapper .discount .switch {
    margin-top: 10px;
}

/* Checkbox wrapper styling - ensures error appears after both checkbox and label */
.legal-check .checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.legal-check .checkbox-wrapper input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 3px;
}

.legal-check .checkbox-wrapper label {
    flex: 1;
    min-width: 0;
}

/* Force jQuery Validation error label to appear after the wrapper, not inside it */
.legal-check label.error {
    display: block;
    width: 100%;
    margin-top: 5px;
    order: 10; /* Ensure it appears last */
}

@media only screen and (max-width: 767px) {
    .client-info__wrapper .discount {
        padding-right: 0;
    }

    .legal-check {
        margin-bottom: 30px;
    }
}

/*RCA form page*/
.checkbox-additional-text {
    font-size: 14px;
    display: block;
    margin-top: 10px;
}

/* -------------------------------------------------- */
/* Reusable Select Loading Overlay (cities, streets)  */
/* -------------------------------------------------- */
.select-container.is-loading {
    position: relative;
}

.select-container .rca-select-loader {
    display: none;
}

.select-container.is-loading .rca-select-loader {
    display: flex;
}

.rca-select-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    z-index: 6;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
    color: #2E384D;
    font-weight: 500;
    pointer-events: none; /* let focus stay on prior element */
    border-radius: 4px;
}

.rca-select-loader__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #61CE70;
    border-top-color: transparent;
    border-radius: 50%;
    animation: rca-spin .6s linear infinite;
    margin-right: 6px;
    flex-shrink: 0;
}

@keyframes rca-spin {
    to {
        transform: rotate(360deg);
    }
}

/* High contrast / prefers-reduced-motion considerations */
@media (prefers-reduced-motion: reduce) {
    .rca-select-loader__spinner {
        animation: none;
        border-top-color: #61CE70;
    }
}

/* While loading, subtly mute selection text (non-destructive) */
.select-container.is-loading .select2-container--default .select2-selection--single .select2-selection__rendered.rca-select-loading-text {
    opacity: 0.8;
    font-style: italic;
}

/* Edge case: if native select visible (Select2 not yet initialized) */
.select-container.is-loading select {
    color: #555;
}

/* ==============================================
 * Phase 6B Task 6B.17: Loading States
 * Purpose: Visual feedback for autocomplete operations
 * ==============================================
 */

/* Button Loading States */
.autocomplete__button {
    position: relative;
    transition: all 0.3s ease;
}

.autocomplete__button[data-state="initial"] {
    background: #0073aa;
    color: white;
    cursor: pointer;
}

.autocomplete__button[data-state="loading"] {
    background: #0073aa;
    color: white;
    cursor: wait;
    opacity: 0.8;
}

.autocomplete__button[data-state="loading"] .button__icon::before {
    content: "⟳";
    display: inline-block;
    animation: spin 1s linear infinite;
    margin-right: 5px;
}

.autocomplete__button[data-state="success"] {
    background: #46b450;
    color: white;
}

.autocomplete__button[data-state="success"] .button__icon::before {
    content: "✓";
    margin-right: 5px;
}

.autocomplete__button[data-state="error"] {
    background: #dc3232;
    color: white;
}

.autocomplete__button[data-state="error"] .button__icon::before {
    content: "⚠";
    margin-right: 5px;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Loading Indicator */
.autocomplete-loading {
    display: flex;
    align-items: center;
    margin-top: 10px;
    padding: 10px;
    background: #f0f7ff;
    border: 1px solid #0073aa;
    border-radius: 4px;
    color: #0073aa;
    font-size: 14px;
}

.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #0073aa;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
}

.loading-text {
    flex: 1;
}

/* Success Indicator */
.autocomplete-success {
    display: flex;
    align-items: center;
    margin-top: 10px;
    padding: 10px;
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    color: #155724;
    font-size: 14px;
}

.success-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #28a745;
    color: white;
    border-radius: 50%;
    margin-right: 8px;
    font-weight: bold;
}

.success-text {
    flex: 1;
}

/* Error Indicator */
.autocomplete-error {
    display: flex;
    align-items: center;
    margin-top: 10px;
    padding: 10px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
    font-size: 14px;
}

.error-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    margin-right: 8px;
    font-weight: bold;
}

.error-text {
    flex: 1;
}

/* Field Loading State - Shimmer Effect */
.field-loading {
    background: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #e0e0e0 50%,
        #f0f0f0 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Field Populated Animation */
.field-populated {
    animation: fadeInGreen 0.5s ease-out;
}

@keyframes fadeInGreen {
    0% {
        background-color: #e7f5e9;
        transform: scale(1.02);
    }
    100% {
        background-color: white;
        transform: scale(1);
    }
}

/* Accessibility: Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .autocomplete__button,
    .field-loading,
    .field-populated,
    .loading-spinner {
        animation: none;
        transition: none;
    }

    .autocomplete__button[data-state="loading"] .button__icon::before {
        animation: none;
    }
}

/* Mobile Responsive Adjustments */
@media only screen and (max-width: 767px) {
    .autocomplete-loading,
    .autocomplete-success,
    .autocomplete-error {
        font-size: 13px;
        padding: 8px;
    }

    .loading-spinner {
        width: 14px;
        height: 14px;
    }

    .success-icon,
    .error-icon {
        width: 18px;
        height: 18px;
        line-height: 18px;
    }
}

/* ==============================================
 * Phase 6B Task 6B.17 Step 2: Full-Screen Loader
 * Purpose: Prevent body scroll when loading overlay active
 * ==============================================
 */

/* Prevent body scroll when full-screen loader is active */
body.loader-active {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* Ensure autocomplete loader has higher z-index than other elements */
.full-loader.autocomplete-loader {
    z-index: 99999999;
}

/* Smooth fade-in for full-screen loader */
.full-loader.autocomplete-loader {
    animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ==============================================
 * V3 API Consent Flow Styles (v1.5.8)
 * Phase 3: Form Integration - Task 3.1, Task 3.3
 * Purpose: Styling for dynamically injected consent questions and informational notice
 * Related: templates/parts/step-3-completion.php, consent-handler.js
 * ==============================================
 */

/* Consent Information Notice (Task 3.3 - GitHub Issue #77) */
.consent-info-notice {
	background: #e3f2fd;
	border-left: 4px solid #2196f3;
	padding: 1.5rem;
	margin-bottom: 2rem;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.3s ease;
}

.consent-info-notice:hover {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.consent-info-notice h4 {
	margin-top: 0;
	margin-bottom: 1rem;
	color: #1976d2;
	font-size: 1.25rem;
	font-weight: 600;
}

.consent-info-notice p {
	margin-bottom: 1rem;
	line-height: 1.6;
	color: #333;
	font-size: 1rem;
}

.consent-info-notice p:last-child {
	margin-bottom: 0;
}

.consent-info-notice ul {
	margin-left: 1.5rem;
	margin-bottom: 1rem;
	list-style-type: disc;
}

.consent-info-notice li {
    font-size: 1rem;
	margin-bottom: 0.2rem;
	color: #555;
	line-height: 1.5;
}

.consent-info-notice a {
	color: #2196f3;
	text-decoration: underline;
	font-weight: 500;
	transition: color 0.2s ease;
}

.consent-info-notice a:hover {
	color: #1976d2;
	text-decoration: none;
}

@media only screen and (max-width: 767px) {
	.consent-info-notice {
		padding: 1rem;
		margin-bottom: 1.5rem;
	}

	.consent-info-notice h4 {
		font-size: 1.1rem;
	}

	.consent-info-notice ul {
		margin-left: 1rem;
	}
}

/* Consent Section Container */
.consent-section {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f5f5f5;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

/* Consent Header */
.consent-header h3 {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    color: #333;
    font-weight: 600;
}

.consent-header p {
    color: #666;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
}

/* Consent Questions Container */
.consent-questions-container {
    min-height: 50px;
}

/* Question Group Styling */
.consent-question-group {
    margin-bottom: 2rem;
    padding: 1rem;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.consent-question-group h4 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #444;
    font-weight: 600;
}

/* Individual Question Styling */
.consent-question {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #fafafa;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    font-size: 1rem;
}

.consent-question:hover {
    background: #f0f0f0;
}

.consent-question.hidden {
    display: none;
}

.consent-question.error {
    border: 2px solid #d32f2f;
    background: #ffebee;
}

.consent-question-text {
    margin-bottom: 3px;
}

.consent-question label {
    display: block;
    margin-bottom: 0;
    font-weight: 500;
    color: #333;
    line-height: 1.6;
}

.consent-answer {
    display: flex;
    align-items: center;
    margin-bottom: 3px;
}

.consent-answer input {
    margin-top: 0 !important;
    margin-bottom: 2px;
}

/* Checkbox and Radio Styling */
.consent-question input[type="checkbox"],
.consent-question input[type="radio"] {
    margin-right: 0.5rem;
    margin-top: 0.25rem;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.consent-question .answer-option {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.consent-question .answer-option:hover {
    background: #e8e8e8;
}

.consent-question .answer-option label {
    margin-bottom: 0;
    cursor: pointer;
    flex: 1;
}

/* Text Input Styling */
.consent-question input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

.consent-question input[type="text"]:focus {
    outline: none;
    border-color: #4caf50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
}

/* Extra Field Styling (conditional inputs) */
.extra-field {
    margin-top: 1rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: none;
}

.extra-field.visible {
    display: block;
    animation: slideDown 0.3s ease;
}

.extra-field label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #555;
}

.extra-field input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

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

/* Loading Spinner */
.consent-loading {
    text-align: center;
    padding: 2rem;
}

.consent-loading .spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #4caf50;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.consent-loading p {
    color: #666;
    font-size: 0.95rem;
}

/* Validation Error Messages */
.consent-messages {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 4px;
    display: none;
}

.consent-messages.show {
    display: block;
    animation: fadeIn 0.3s ease;
}

.consent-messages.error {
    background: #ffebee;
    color: #d32f2f;
    border: 1px solid #ef9a9a;
}

.consent-messages.success {
    background: #e8f5e9;
    color: #388e3c;
    border: 1px solid #81c784;
}

.consent-messages.warning {
    background: #fff3e0;
    color: #f57c00;
    border: 1px solid #ffb74d;
}

.consent-messages ul {
    margin: 0.5rem 0 0 1.5rem;
    padding: 0;
}

.consent-messages li {
    margin-bottom: 0.5rem;
}

/* Validation Error Highlight */
.consent-error-marker {
    display: inline-block;
    color: #d32f2f;
    font-weight: bold;
    margin-left: 0.25rem;
}

/* Accessibility Improvements */
.consent-question input:focus,
.consent-question input[type="checkbox"]:focus,
.consent-question input[type="radio"]:focus {
    outline: 2px solid #4caf50;
    outline-offset: 2px;
}

/* Responsive Design */
@media only screen and (max-width: 768px) {
    .consent-section {
        margin: 1rem 0;
        padding: 1rem;
        border-radius: 6px;
    }

    .consent-header h3 {
        font-size: 1.25rem;
    }

    .consent-header p {
        font-size: 0.95rem;
    }

    .consent-question-group {
        padding: 0.75rem;
    }

    .consent-question {
        padding: 0.75rem;
    }

    .consent-loading {
        padding: 1.5rem;
    }

    .consent-loading .spinner {
        width: 35px;
        height: 35px;
    }
}

@media only screen and (max-width: 480px) {
    .consent-section {
        padding: 0.75rem;
    }

    .consent-header h3 {
        font-size: 1.1rem;
    }

    .consent-header p {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    .consent-question {
        font-size: 0.9rem;
    }

    .consent-messages {
        font-size: 0.9rem;
        padding: 0.75rem;
    }
}

/* ============================================================================
   Consent Status Banner Styles - Task 5.2
   ============================================================================
   Purpose: Styles for dismissible consent confirmation banner on Results page
   Features:
   - Green gradient background for positive confirmation
   - Accessible design with ARIA support
   - Mobile responsive layout
   - Smooth fade-out animation on dismiss
   ========================================================================== */

.consent-status-banner {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-left: 4px solid #4caf50;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 1.5rem auto;
    max-width: 1200px;
    padding: 1rem 1.5rem;
    position: relative;
    transition: opacity 0.3s ease;
}

.consent-banner-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.consent-banner-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.consent-banner-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #4caf50;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.consent-banner-text {
    flex-grow: 1;
    color: #2e7d32;
}

.consent-banner-text strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    color: #1b5e20;
}

.consent-banner-text p {
    margin: 0;
    color: #2e7d32;
    line-height: 1.6;
    font-size: 0.95rem;
}

.consent-banner-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.consent-link {
    color: #2e7d32;
    text-decoration: underline;
    font-size: 0.9rem;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.consent-link:hover,
.consent-link:focus {
    color: #1b5e20;
    text-decoration: none;
}

.consent-dismiss {
    background: transparent;
    border: none;
    color: #2e7d32;
    cursor: pointer;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.2s ease;
}

.consent-dismiss:hover,
.consent-dismiss:focus {
    color: #1b5e20;
    transform: scale(1.1);
    outline: 2px solid #4caf50;
    outline-offset: 2px;
    border-radius: 50%;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .consent-status-banner {
        margin: 1rem;
        padding: 1rem;
    }

    .consent-banner-content {
        flex-direction: column;
        gap: 0.75rem;
    }

    .consent-banner-text strong {
        font-size: 1rem;
    }

    .consent-banner-text p {
        font-size: 0.875rem;
    }

    .consent-banner-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        width: 100%;
    }

    .consent-link {
        font-size: 0.875rem;
    }

    .consent-dismiss {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }
}

/* Tablet Styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .consent-status-banner {
        margin: 1.25rem auto;
    }

    .consent-banner-content {
        gap: 0.875rem;
    }
}

/* Accessibility: High Contrast Mode Support */
@media (prefers-contrast: high) {
    .consent-status-banner {
        background: #fff;
        border: 2px solid #2e7d32;
    }

    .consent-banner-text,
    .consent-link {
        color: #000;
    }

    .consent-dismiss {
        color: #000;
        border: 1px solid #000;
    }
}

/* Accessibility: Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .consent-status-banner {
        transition: none;
    }

    .consent-dismiss {
        transition: none;
    }
}

/* ==== No-Offers Modal ==== */
/* Purpose: Styles for the modal shown when offers fail to load on the results page */
/* Cases: no active offers, all requests failed, all offers invalid */
/* Related: rca-api.js showNoOffersModal(), rca-offers-tabel.php */

.no-offers-modal .modal-privacy {
    max-width: 550px;
}

.no-offers-modal__body {
    padding: 25px 20px;
    text-align: center;
}

.no-offers-modal__icon {
    margin-bottom: 15px;
}

.no-offers-modal__message {
    font-size: 15px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 25px;
    padding: 0 10px;
}

.no-offers-modal__btn {
    display: inline-block;
    background-color: #2E384D;
    color: #fff !important;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.no-offers-modal__btn:hover {
    background-color: #404e6d;
    color: #fff;
    text-decoration: none;
}

@media (max-width: 576px) {
    .no-offers-modal .modal-privacy {
        max-width: 95%;
        margin: 0 auto;
    }

    .no-offers-modal__body {
        padding: 20px 15px;
    }

    .no-offers-modal__message {
        font-size: 14px;
    }
}