@charset "utf-8";
/* CSS Document */

/* FILE UPLOAD */ 
.preview-image{	height: 38px; width: auto;	}
.preview-pdf{ font-size: 1.4rem;	}
.dropzone{	padding: 1rem;	border: 3px dashed #eaebec;	}
.dropzone-over{	border: 3px dashed var(--cc-light-accent);	}

/* CCSURVEY CLASSES */
.cc-survey-form{
	background: #f7f8f9;
	border-radius: 0.333em;
	color: #6b7c93;
}

.cc-survey-form-no-color{
	border-radius: 0.333em;
}

.cc-survey-form input[type="checkbox"],
.cc-survey-form input[type="radio"],
.cc-survey-form-no-color input[type="checkbox"],
.cc-survey-form-no-color input[type="radio"]
{
	/* Reset checkbox and radio styles */
	height: auto;
	padding: auto;
	width: auto;
	border: 0;
	border-radius: 0;
	box-shadow: 0 0 0 0 transparent;
}

.cc-survey-form input,
.cc-survey-form select,
.cc-survey-form-no-color input,
.cc-survey-form-no-color select{
	height: 2.5em;
}

.cc-survey-form textarea,
.cc-survey-form-no-color textarea{
	height: 7.5em;
}

.cc-survey-form input,
.cc-survey-form textarea,
.cc-survey-form select,
.cc-survey-form-no-color input,
.cc-survey-form-no-color textarea,
.cc-survey-form-no-color select{
	padding: 0 0.75em;
	color: #32325d;
	width: 100%;
    /*-webkit-min-logical-width:100%;*/
	background-color: white;
	border: 1px solid transparent;
	border-radius: 0.25em;
	box-shadow: 0 1px 3px 0px #e6ebf1;
	-webkit-transition: box-shadow 150ms ease;
	transition: box-shadow 150ms ease;
}
.cc-survey-form input:not([type="checkbox"]):not([type="radio"]):disabled,
.cc-survey-form select:disabled,
.cc-survey-form-no-color input:not([type="checkbox"]):not([type="radio"]):disabled,
.cc-survey-form-no-color select:disabled{
	background-color: #DDDDDD;
	cursor: no-drop;
}

.cc-survey-form input:not([type="checkbox"]):not([type="radio"]):focus,
.cc-survey-form select:focus,
.cc-survey-form-no-color input:not([type="checkbox"]):not([type="radio"]):focus,
.cc-survey-form-no-color select:focus{
	outline: none;
	box-shadow: 0 1px 3px 0 #CFD7Df;
}

.cc-survey-form label,
.cc-survey-form-no-color label{
	margin-bottom: .333em;
	font-size: 0.9rem;
	word-break: break-word;
}

.cc-survey-form input:not(:placeholder-shown):not(-moz-placeholder):not(-ms-input-placeholder):invalid,
.cc-survey-form-no-color input:not(:placeholder-shown):not(-moz-placeholder):not(-ms-input-placeholder):invalid{
	color: #fa755a;
	border: #fa755a 1px solid;
}

.cc-survey-form input:valid:focus,
.cc-survey-form select:valid:focus,
.cc-survey-form-no-color input:valid:focus,
.cc-survey-form-no-color select:valid:focus{
	border-color: #66FC32;
}

.cc-survey-section h1,
.cc-survey-section h2,
.cc-survey-section h3,
.cc-survey-section h4{
	color: #32325d;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #aab7c4;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #aab7c4;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #aab7c4;
}
:-moz-placeholder { /* Firefox 18- */
  color: #aab7c4;
}

.cc-survey-form-container{
	margin: auto;
	max-width: 880px;
	background:#f7f8f9;
	border-radius: 5px;
	padding:20px;
	color:#6b7c93;
	text-align:left;
}

.cc-survey-form-container-no-color{
	margin: auto;
	max-width: 880px;
	border-radius: 5px;
	padding:20px;
	text-align:left;
}

.cc-survey-form-container h1, .cc-survey-form-container h2, .cc-survey-form-container h3, .cc-survey-form-container h4{
	color: #32325d;
}

.cc-survey-form-container .btn-cc,
.cc-survey-form-container-no-color .btn-cc{
	display:block;
	width: 100%;
	margin: auto;
	margin-top: 30px;
}

.cc-survey-blur
{
	background-color: rgba(255,2555,255,.15);
    backdrop-filter: blur(8px);
}

.cc-survey-blur-cool
{
	background: linear-gradient(45deg, rgba(2,0,36,0.15) 0%, rgba(9,9,121,0.25) 35%, rgba(0,212,255,0.45) 100%);
}

.cc-survey-blur-warm
{
	background: linear-gradient(45deg, rgba(131,58,180,0.15) 0%, rgba(253,29,29,0.25) 35%, rgba(252,176,69,0.45) 100%);
}

.cc-survey-blur-neutral
{
	background: linear-gradient(45deg, rgba(50,50,59,0.15) 0%, rgba(134,134,144,0.25) 35%, rgba(207,207,217,0.45) 100%);
}

/* =========================================================
   Dark Mode Overrides – File Upload & CC Survey Components
   (Assumes parent <html> or <body> has class .dark and
    existing dark palette variables already defined)
   ========================================================= */

/* FILE UPLOAD */
.dark .preview-image {
	filter: brightness(0.85) contrast(1.05);
}

.dark .preview-pdf {
	color: var(--brand-secondary);
}

.dark .dropzone {
	background: #2a3242;
	border: 3px dashed rgba(255,255,255,0.18);
	color: var(--text-muted);
	transition: background-color .25s, border-color .25s;
}

.dark .dropzone:hover {
	background: #313b4d;
	border-color: rgba(255,255,255,0.28);
}

.dark .dropzone-over {
	border-color: var(--brand-primary);
	background: #313f56;
}

/* CC SURVEY CLASSES */
.dark .cc-survey-form {
	background: #252c3b;
	border-radius: 0.333em;
	color: var(--text-muted);
}

.dark .cc-survey-form-no-color {
	color: var(--text-muted);
}

.dark .cc-survey-form input[type="checkbox"],
.dark .cc-survey-form input[type="radio"],
.dark .cc-survey-form-no-color input[type="checkbox"],
.dark .cc-survey-form-no-color input[type="radio"] {
	background: #2f394b;
}

/* Heights remain same – no change needed */

/* Textareas / inputs / selects */
.dark .cc-survey-form input,
.dark .cc-survey-form textarea,
.dark .cc-survey-form select,
.dark .cc-survey-form-no-color input,
.dark .cc-survey-form-no-color textarea,
.dark .cc-survey-form-no-color select {
	background-color: #2a3242;
	color: var(--text-default);
	border: 1px solid rgba(255,255,255,0.08);
	box-shadow: 0 1px 3px 0 rgba(0,0,0,0.8);
	transition: box-shadow 150ms ease, background-color .25s, border-color .25s;
}

.dark .cc-survey-form input:not([type="checkbox"]):not([type="radio"]):disabled,
.dark .cc-survey-form select:disabled,
.dark .cc-survey-form-no-color input:not([type="checkbox"]):not([type="radio"]):disabled,
.dark .cc-survey-form-no-color select:disabled{
	background-color: #3a4456;
	color: rgba(230,234,240,0.6);
	cursor: not-allowed;
}

.dark .cc-survey-form input:not([type="checkbox"]):not([type="radio"]):focus,
.dark .cc-survey-form select:focus,
.dark .cc-survey-form textarea:focus,
.dark .cc-survey-form-no-color input:not([type="checkbox"]):not([type="radio"]):focus,
.dark .cc-survey-form-no-color select:focus,
.dark .cc-survey-form-no-color textarea:focus {
	outline: none;
	border-color: var(--brand-primary);
	box-shadow: 0 0 0 2px rgba(77,168,255,0.35);
	background-color: #313b4d;
}

.dark .cc-survey-form label,
.dark .cc-survey-form-no-color label {
	color: var(--text-default);
}

.dark .cc-survey-form input:not(:placeholder-shown):not(-moz-placeholder):not(-ms-input-placeholder):invalid,
.dark .cc-survey-form-no-color input:not(:placeholder-shown):not(-moz-placeholder):not(-ms-input-placeholder):invalid {
	color: #ff9583;
	border: 1px solid #ff7b72;
	background: #3a2828;
}

.dark .cc-survey-form input:valid:focus,
.dark .cc-survey-form select:valid:focus,
.dark .cc-survey-form-no-color input:valid:focus,
.dark .cc-survey-form-no-color select:valid:focus {
	border-color: #56d144;
	box-shadow: 0 0 0 2px rgba(86,209,68,0.3);
}

/* Section headings */
.dark .cc-survey-section h1,
.dark .cc-survey-section h2,
.dark .cc-survey-section h3,
.dark .cc-survey-section h4,
.dark .cc-survey-form-container h1,
.dark .cc-survey-form-container h2,
.dark .cc-survey-form-container h3,
.dark .cc-survey-form-container h4 {
	color: var(--text-default);
}

/* Placeholders */
.dark ::-webkit-input-placeholder { color: #7f8c9c; }
.dark ::-moz-placeholder { color: #7f8c9c; }
.dark :-ms-input-placeholder { color: #7f8c9c; }
.dark :-moz-placeholder { color: #7f8c9c; }

/* Form container */
.dark .cc-survey-form-container {
	background: #252c3b;
	color: var(--text-muted);
	box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.dark .cc-survey-form-container-no-color {
	color: var(--text-muted);
}

/* Buttons inside container can rely on global dark theme button styles */

/* Blur variants */
.dark .cc-survey-blur {
	background-color: rgba(37,44,59,0.6); /* fixed typo & tuned for dark */
	backdrop-filter: blur(8px);
}

.dark .cc-survey-blur-cool {
	background: linear-gradient(45deg,
		rgba(2,0,36,0.35) 0%,
		rgba(9,9,121,0.35) 35%,
		rgba(0,212,255,0.55) 100%);
	backdrop-filter: blur(8px);
}

.dark .cc-survey-blur-warm {
	background: linear-gradient(45deg,
		rgba(131,58,180,0.35) 0%,
		rgba(253,29,29,0.40) 35%,
		rgba(252,176,69,0.55) 100%);
	backdrop-filter: blur(8px);
}

.dark .cc-survey-blur-neutral {
	background: linear-gradient(45deg,
		rgba(50,50,59,0.35) 0%,
		rgba(134,134,144,0.40) 35%,
		rgba(207,207,217,0.55) 100%);
	backdrop-filter: blur(8px);
}

/* Fine-tuned focus for checkboxes/radios if styled via :focus-visible */
.dark .cc-survey-form input[type="checkbox"]:focus-visible,
.dark .cc-survey-form input[type="radio"]:focus-visible,
.dark .cc-survey-form-no-color input[type="checkbox"]:focus-visible,
.dark .cc-survey-form-no-color input[type="radio"]:focus-visible {
	outline: 2px solid var(--brand-secondary);
	outline-offset: 2px;
}

/* Optional subtle inset highlight for active inputs */
.dark .cc-survey-form input:active,
.dark .cc-survey-form textarea:active,
.dark .cc-survey-form select:active,
.dark .cc-survey-form-no-color input:active,
.dark .cc-survey-form-no-color textarea:active,
.dark .cc-survey-form-no-color select:active {
	background-color: #354055;
}