/* ======= GLOBALS =========================================== */
 :root {
	 --spacing-xxs: 10px;
	 --spacing-xs: 17px;
	 --spacing-sm: 26px;
	 --spacing-md: 43px;
	 --spacing-lg: 70px;
	 --spacing-xl: 113px;
	 --spacing-xxl: 183px;
	 --font-size-label: 14px;
	 --font-size-paragraph: 16px;
	 --font-size-subtitle: 18px;
	 --font-size-heading: 24px;
	 --font-size-title: 58px;
	 --border-radius-sm: 5px;
	 --border-radius-md: 10px;
	 --border-radius-lg: 20px;
	 --color-background: #c7c7c7;
	 --color-primary: #7e0d32;
	 --color-primary-dark: #5e0a24;
	 --color-secondary: #dadada;
	 --color-white: #ffffff;
	 --color-black: #000000;
	 --color-text-main: #333333;
	 --color-text-sub: #959595;
	 --color-border: #d4d4d4;
	 --color-input: #E9E9E9;
	 --box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.06);
}
 *, *::before, *::after {
	 margin: 0;
	 padding: 0;
	 box-shadow: unset !important;
	 outline: none;
}
 *:focus {
	 box-shadow: none !important;
	 outline: none !important;
}
 .full-width {
	 width: 100%;
}
 .half-width {
	 flex: 0 0 50%;
}
 .hidden {
	 display: none;
}
 .container {
	 margin: 0;
	 padding: 0;
	 min-width: 100%;
	 min-height: 100%;
}
/* ======= FAB =============================================== */
 .button-container {
	 position: absolute;
	 bottom: var(--spacing-md);
	 right: var(--spacing-md);
}
 .btn {
	 padding: var(--spacing-xs) var(--spacing-md);
	 border-radius: 30px;
	 font-size: var(--font-size-subtitle);
	 font-weight: 800;
	 color: var(--color-white);
	 background: var(--color-primary);
	 border: none;
	 box-shadow: var(--box-shadow) !important;
	 cursor: pointer;
	 text-decoration: none;
	 min-width: 0;
}
 .btn.small {
	 padding: 0;
	 width: var(--spacing-lg) ;
	 height: var(--spacing-lg) ;
	 border-radius: 50%;
	 display: flex;
	 justify-content: center;
	 align-items: center;
}
/* ======= POPUP ============================================= */
 .info-popup {
	 position: fixed;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	 background-color: var(--color-white);
	 padding: var(--spacing-md);
	 box-shadow: var(--box-shadow-global) !important;
	 border-radius: var(--border-radius-lg);
	 z-index: 1000;
	 max-width: 1000px;
	 width: 80%;
	 text-align: center;
}
 .popup-header {
	 font-size: var(--font-size-heading);
	 font-weight: bold;
	 margin-bottom: var(--spacing-sm);
}
 .popup-content {
	 margin-bottom: var(--spacing-md);
	 font-size: var(--font-size-paragraph);
	 color: var(--color-text-main);
}
 .popup-content h2 {
	 margin-top: 0;
}
 .popup-content p {
	 margin: 15px 0;
}
 .popup-button {
	 display: inline-block;
	 background-color: var(--color-primary);
	 color: var(--color-white);
	 padding: var(--spacing-xs) var(--spacing-md);
	 border-radius: var(--border-radius-sm);
	 text-decoration: none;
	 margin-top: var(--spacing-sm);
}
 .popup-button:hover {
	 background-color: var(--color-primary-dark);
}
 .popup-link {
	 display: inline-block;
	 margin-top: 15px;
	 padding: 10px 15px;
	 background: var(--color-primary);
	 color: white;
	 text-decoration: none;
	 border-radius: 4px;
}
 .popup-link:hover {
	 background: #005bb5;
}
 .close-popup {
	 margin-top: 20px;
	 padding: 10px 20px;
	 background: #333;
	 color: white;
	 border: none;
	 border-radius: 4px;
	 cursor: pointer;
}
 .close-popup:hover {
	 background: #555;
}
/* ======= HTML BODY ETC =========================================== */
 html, body {
	 width: 100%;
	 height: 100%;
	 min-width: 100vw;
	 min-height: 100vh;
	 overflow: hidden;
	 margin: 0;
	 padding: 0;
	 display: flex;
	 flex-direction: column;
}
 body {
	 flex-grow: 1;
	 background-color: var(--color-background);
}
/* ======= HEADER ================================================== */
 header.cd-main-header {
	 width: 100%;
	 text-align: center;
	 margin: 0;
}
/* ======= FORM CONTAINER ========================================== */
 .form-wrap {
	 width: 100%;
	 height: 100%;
	 display: flex;
	 align-items: flex-start;
	 justify-content: center;
	 margin: 0;
	 margin-top: var(--spacing-md);
}
 .form-container {
	 display: flex;
	 flex-wrap: nowrap;
	 width: 100%;
	 height: 75vh;
	 max-height: 750px;
	 max-width: 1300px;
	 background: var(--color-white);
	 border-radius: var(--border-radius-lg);
	 overflow: hidden;
	 box-shadow: var(--box-shadow) !important;
}
/* ======= FORM (RIGHT SIDE INTRO) ================================= */
 .form-desc {
	 width: 100%;
	 padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg) var(--spacing-sm);
	 position: relative;
}
 .form-area-text, .form-place {
	 flex: 0 0 58%;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 position: relative;
	 padding-left: var(--spacing-lg);
	 padding-top: var(--spacing-lg);
}
 .form-title {
	 font-size: var(--font-size-title);
	 font-weight: 900;
	 color: var(--color-black);
	 margin-left: var(--spacing-lg);
}
 .form-subtitle {
	 margin: 0 var(--spacing-lg);
}
 .info-section {
	 margin: var(--spacing-md) var(--spacing-lg);
}
 .info-section li {
	 margin-left: var(--spacing-md);
	 color: var(--color-black);
	 font-size: var(--font-size-paragraph);
}
/* ======= FORM LEFT CAROUSEL ====================================== */
/* The carousel track styles are local to the rc-intro-format due carousel items being dynamic. */
 .carousel {
	 flex: 0 0 42%;
	 background: var(--color-secondary);
	 padding: var(--spacing-lg), var(--spacing-md);
	 position: relative;
	 display: flex;
	 flex-direction: column;
	 overflow: hidden;
	 justify-content: baseline;
}
 .carousel-dots {
	 margin: var(--spacing-sm) var(--spacing-sm) 0 var(--spacing-sm);
	 display: flex;
	 gap: var(--spacing-xs);
	 align-self: center;
}
 .carousel-dot {
	 width: 12px;
	 height: 12px;
	 background: rgba(255, 255, 255, 0.5);
	 border-radius: 50%;
	 cursor: pointer;
	 transition: all 0.3s ease-in-out;
}
 .carousel-dot.active {
	 background: var(--color-white);
	 width: 26px;
	 border-radius: 18px;
}
 .carousel-arrow {
	 position: absolute;
	 top: 48%;
	 font-size: var(--font-size-heading);
	 color: var(--color-border);
	 width: var(--spacing-sm);
	 height: var(--spacing-sm);
	 border-radius: 50%;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 cursor: pointer;
	 z-index: 10;
}
 .carousel-arrow.left {
	 left: var(--spacing-xs);
}
 .carousel-arrow.right {
	 right: var(--spacing-xs);
}
 .carousel-myth {
	 margin: var(--spacing-sm) var(--spacing-md) 0 var(--spacing-md);
	 font-size: var(--font-size-subtitle);
	 text-align: left;
	 color: var(--color-text-main);
	 height: 50%;
	 padding-top: var(--spacing-md);
	 padding-bottom: var(--spacing-lg);
	 display: flex;
	 flex-wrap: wrap;
	 align-content: flex-start;
	 width: 70%;
}
 .carousel-myth-title {
	 width: 100%;
	 font-size: var(--font-size-subtitle);
	 font-weight: 700;
	 text-align: left;
	 color: var(--color-text-sub);
	 margin-bottom: var(--spacing-xs);
}
 .carousel-myth-description {
	 font-size: var(--font-size-paragraph);
	 text-align: left;
	 color: var(--color-text-sub);
}
/* ======= PAGE 1 FORM ============================================= */
 .input-section {
	 display: flex;
	 flex-direction: column;
	 gap: var(--spacing-sm);
	 width: 100%;
	 padding: 0 var(--spacing-lg);
}
 .input-row {
	 display: flex;
	 gap: var(--spacing-xs);
}
 .input-group {
	 display: flex;
	 flex-direction: column;
	 flex: 1;
}
 .input-row.full-width {
	 flex-direction: column;
	 gap: var(--spacing-xs);
}
 .input-row.full-width label {
	 margin-bottom: var(--spacing-xxs);
}
 .input-section label {
	 font-size: var(--font-size-label);
	 margin-bottom: var(--spacing-xxs);
	 color: var(--color-text-sub);
}
 .input-section input, .input-section select {
	 padding: 10px !important;
	 border-radius: var(--border-radius-xxs);
	 font-size: var(--font-size-paragraph);
	 width: 100%;
}
 .input-section input {
	 background-color: var(--color-input);
	 border: 0px solid transparent !important;
}
 .input-section select {
	 background-color: var(--color-white);
	 border: 1px solid black !important;
}
/* ======= CAR LEFT BREADCRUMBS ================================== */
 .car-crumbs {
	 display: flex;
	 flex: 0 0 30%;
	 background-color: var(--color-secondary);
}
/* ======= QUESTION FORM ========================================= */
 .form-place {
	 display: flex;
	 flex: 0 0 70%;
	 justify-content: start;
}
 .question-container {
	 padding: var(--spacing-sm) var(--spacing-md);
	 margin: var(--spacing-sm) var(--spacing-lg) 0 0;
	 position: relative;
	 box-sizing: border-box;
	 border: 1.0114px solid #EFF0F7;
	 box-shadow: 0px 5.057px 16.1824px rgba(8, 15, 52, 0.06) !important;
	 border-radius: 8px;
}
 .question-container h3 {
	 font-size:var(--font-size-heading);
}
 .info-btn {
	 position: absolute;
	 top: 10px;
	 right: 10px;
	 width: 33px;
	 height: 32.11px;
	 background: #7E0D32;
	 border-radius: 100px;
	 color: #fff;
	 font-size: 16px;
	 font-weight: bold;
	 border: none;
	 cursor: pointer;
}
/* ======= DUAL-CHOICE QUESTION TYPE ============================= */
 .dual-choice-options, .dual-choice-expanded {
	 display: flex;
	 flex-wrap: wrap;
	 gap: 10px;
	 margin-top: 10px;
}
 .dual-choice-btn {
	 background: #E9E9E9;
	 border-radius: 38.6517px;
	 padding: var(--spacing-xxs) var(--spacing-md);
	 font-size: var(--font-size-subtitle);
	 cursor: pointer;
	 transition: background-color 0.3s ease, color 0.3s ease;
	 border: 1px solid #EFF0F7;
	 box-shadow: 0px 1.68051px 5.04153px rgba(19, 18, 66, 0.15);
}
 .dual-choice-btn.selected {
	 background: var(--color-primary);
	 color: var(--color-white);
}
/* ======= NUMBER INPUT QUESTION TYPE ============================ */
 .numbers-input-group {
	 display: flex;
	 flex-wrap: wrap;
	 gap: 30px;
}
 .numbers-input-group .input-row {
	 display: flex;
	 flex-direction: column;
	 align-items: flex-start;
	 width: auto;
	 flex-basis: 15%;
	 gap: 5px;
}
 .numbers-input-group label {
	 display: block;
	 font-size: var(--font-size-label);
	 color: var(--color-black);
}
 .numbers-input-group input {
	 width: 100%;
	 height: 40px;
	 padding: 5px 10px;
	 font-size: var(--font-size-paragraph);
	 text-align: left;
	 border: 1px solid #ccc;
	 background-color: var(--color-input);
	 border-radius: 8px;
	 box-sizing: border-box;
	 appearance: auto;
	 transition: border-color 0.3s ease, background-color 0.3s ease;
	/* Rectangle 4284 */
	 border: 2px solid #DBE3EE;
	 border-radius: 8px;
}
 .numbers-input-group input:focus {
	 border-color: var(--color-primary);
	 outline: none;
	 background-color: #ffffff;
}
 .numbers-input-group input::-webkit-inner-spin-button, .numbers-input-group input::-webkit-outer-spin-button {
	 appearance: auto;
	 margin: 0;
}
/* ======= DORM SELECTION QUESTION TYPE ========================== */
 .dorm-container {
	 grid-template-columns: 300px 1fr;
	/* Two-column layout */
	 gap: 20px;
	 width: 100%;
	/* Span the full width of parent */
	 margin: 60px auto 20px;
	 padding: 20px;
	 background-color: #f9f9f9;
	 border-radius: 10px;
	 position: relative;
}
 .search-bar {
	 position: absolute;
	 top: -50px;
	 left: 20px;
	 width: calc(100% - 40px);
	/* Adjust width dynamically */
	 max-width: 1200px;
	 padding: 8px 12px;
	 font-size: 14px;
	 border: 1px solid #ccc;
	 border-radius: 5px;
	 background-color: #fff;
	 z-index: 1;
	 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 .dorm-filter {
	 display: flex;
	 flex-direction: column;
	 gap: 15px;
	 background-color: #ffffff;
	 padding: 15px;
	 border: 1px solid #ddd;
	 border-radius: 8px;
}
 .filter-dropdowns {
	 display: flex;
	 flex-direction: column;
	 gap: 10px;
}
 .filter-dropdowns select {
	 padding: 8px;
	 font-size: 14px;
	 border: 1px solid #ccc;
	 border-radius: 5px;
}
 .reset-filters {
	 padding: 8px 12px;
	 font-size: 14px;
	 background-color: var(--color-primary);
	 color: white;
	 border: none;
	 border-radius: 5px;
	 cursor: pointer;
}
 .reset-filters:hover {
	 background-color: #0056b3;
}
 .dorm-list {
	 grid-column: 2 / 3;
	 width: 100%;
	/* Ensure full width of column */
	 max-width: none;
	 max-height: 500px;
	 overflow-y: auto;
	 display: flex;
	 flex-direction: column;
	 gap: 10px;
	 padding: 10px;
	 border: 1px solid #ddd;
	 background-color: #fff;
	 border-radius: 8px;
}
 .dorm-card {
	 display: flex;
	 justify-content: space-between;
	/* Space between text and image */
	 align-items: center;
	/* Vertically center content */
	 padding: 16px;
	/* Increased padding for a taller card */
	 border: 1px solid #ccc;
	 border-radius: 5px;
	 background-color: #f9f9f9;
	 cursor: pointer;
	 transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
	 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	/* Subtle shadow for depth */
}
 .dorm-card:hover {
	 background-color: #f1f1f1;
	 transform: translateY(-2px);
	/* Slight lift on hover */
	 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	/* Enhanced shadow on hover */
}
 .dorm-card-content {
	 flex-grow: 1;
	/* Allows content to grow and take up available space */
	 margin-right: 10px;
	/* Space between text and the image */
	 text-align: left;
	/* Ensure text aligns to the left */
}
 .dorm-card-content h4 {
	 margin: 0;
	 font-size: 16px;
	/* Slightly larger font for better readability */
	 color: #333;
}
 .dorm-card-content p {
	 margin: 5px 0 0;
	/* Optional: Add a small description under the title */
	 font-size: 14px;
	 color: #555;
}
 .dorm-card img {
	 width: 60px;
	/* Increased size for better visibility */
	 height: 60px;
	 object-fit: cover;
	 border-radius: 5px;
}
 .dorm-details {
	 display: none;
	 padding: 20px;
	 background-color: #fff;
	 border: 1px solid #ddd;
	 border-radius: 8px;
}
 .dorm-details.active {
	 display: block;
}
 .back-button {
	 position: relative;
	 margin-bottom: 10px;
	 padding: 5px 10px;
	 font-size: 14px;
	 color: white;
	 background-color: var(--color-primary);
	 border: none;
	 border-radius: 5px;
	 cursor: pointer;
}
 .back-button:hover {
	 background-color: #0056b3;
}
/* Expanded view styles */
 .dorm-container.expanded {
	 grid-template-columns: 1fr;
	/* Single-column layout */
	 width: 100%;
	/* Ensure full width */
}
 .dorm-container.expanded .dorm-main-view {
	 display: none;
	/* Hide the main two-column layout */
}
 .dorm-container.expanded .dorm-details {
	 grid-column: span 1;
	/* Take the full width of the container */
	 display: block;
}
 .dorm-container.expanded .dorm-filter, .dorm-container.expanded .dorm-list {
	 grid-column: span 1;
	/* Take up the full width in the expanded view */
	 width: 100%;
	/* Expand to fill the parent container */
	 max-width: none;
	/* Prevent unnecessary restrictions */
	 align-self: stretch;
	/* Stretch to fill the grid area */
}
 .dorm-main-view {
	 display: grid;
	 grid-template-columns: 1fr 3fr;
	/* Default two-column layout */
	 gap: 20px;
}
 .dorm-filter {
	 grid-column: 1 / 2;
}
 .dorm-list {
	 grid-column: 2 / 3;
	 max-height: 500px;
	 overflow-y: auto;
	 display: flex;
	 flex-direction: column;
	 gap: 10px;
	 padding: 10px;
	 border: 1px solid #ddd;
	 background-color: #fff;
	 border-radius: 8px;
	 width: 100%;
}