/* styles/components.css — All component styles */

/* InfoRow */
.info-row { height: calc(4 * var(--rem)); display: flex; align-items: center; padding-left: calc(1 * var(--rem)); padding-right: calc(3.7 * var(--rem)); padding-top: calc(0.75 * var(--rem)); }
.info-row-logo { width: calc(3 * var(--rem)); height: calc(3 * var(--rem)); margin-right: calc(1.5 * var(--rem)); }
.info-row-title { font-size: calc(1.125 * var(--rem)); font-weight: var(--font-weight-bold); color: white; }
.info-row-spacer { flex: 1; }
.info-row-user { display: flex; align-items: center; margin-right: calc(4 * var(--rem)); }
.info-row-user-icon { width: calc(2.25 * var(--rem)); height: calc(1.75 * var(--rem)); margin-right: calc(0.5 * var(--rem)); }
.info-row-user-name { font-size: calc(1.125 * var(--rem)); font-weight: var(--font-weight-bold); color: white; }
.info-row-language { display: flex; align-items: center; gap: 0; }
.lang-btn { background: none; border: none; padding: 0 0 0 calc(1 * var(--rem)); cursor: pointer; height: calc(1.5 * var(--rem)); display: flex; align-items: center; }
.lang-btn img { height: 100%; width: auto; opacity: 0.7; transition: opacity 150ms ease; }
.lang-btn.active img { opacity: 1; }
.lang-btn:hover img { opacity: 0.85; }

/* Footer */
.footer { height: calc(4 * var(--rem)); display: flex; align-items: center; justify-content: center; gap: 0; }
.footer-link { padding: calc(0.5 * var(--rem)) calc(0.75 * var(--rem)); font-size: var(--text-size-footer); font-weight: var(--font-weight-medium); color: var(--color-rabbit-white); text-decoration: none; cursor: pointer; transition: opacity 150ms ease; }
.footer-link:hover { opacity: 0.8; }
.footer-divider { width: 1px; height: calc(1.5 * var(--rem)); background: var(--color-rabbit-white); }

/* Buttons */
.btn-primary { width: calc(7.5 * var(--rem)); height: calc(2.5 * var(--rem)); border-radius: calc(1.25 * var(--rem)); border: none; background-color: var(--color-vivid-green-600); color: var(--color-rabbit-white); font-size: var(--rem); font-weight: var(--font-weight-medium); letter-spacing: 1px; line-height: 1.5; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: calc(0.75 * var(--rem)); transition: background-color 150ms ease; }
.btn-primary:hover { background-color: var(--color-vivid-green-700); }
.btn-primary:active { background-color: var(--color-vivid-green-800); }
.btn-primary:disabled { background-color: var(--color-donkey-gray); cursor: not-allowed; }
.btn-grey { width: calc(8.5 * var(--rem)); height: calc(2.5 * var(--rem)); border-radius: calc(1.25 * var(--rem)); border: none; background-color: var(--color-rabbit-white); color: var(--color-vivid-green-600); font-size: var(--rem); font-weight: var(--font-weight-medium); letter-spacing: 1px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: opacity 150ms ease; }
.btn-grey:hover { opacity: 0.9; }
.back-btn { height: calc(2.5 * var(--rem)); border-radius: calc(1.25 * var(--rem)); border: none; background: var(--color-rabbit-white); color: var(--color-vivid-green-600); padding: calc(0.5 * var(--rem)) calc(1.5 * var(--rem)); font-size: var(--rem); font-weight: var(--font-weight-medium); letter-spacing: 1px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: calc(0.75 * var(--rem)); transition: opacity 150ms ease; }
.back-btn:hover { opacity: 0.9; }

/* Form Row */
.form-row { width: calc(32 * var(--rem)); position: relative; margin-bottom: calc(1.40 * var(--rem)); }
.form-row-input-container { width: 100%; display: flex; align-items: center; padding: calc(0.5 * var(--rem)) calc(1 * var(--rem)); border: 1px solid var(--color-donkey-gray); border-radius: calc(0.25 * var(--rem)); background: white; box-sizing: border-box; }
.form-row-icon { width: calc(1.5 * var(--rem)); height: calc(1.5 * var(--rem)); margin-right: calc(0.75 * var(--rem)); flex-shrink: 0; color: var(--color-vivid-green-600); }
.form-row input { flex: 1; border: none; outline: none; background: transparent; font-size: var(--rem); font-weight: var(--font-weight-medium); color: var(--color-skunk-gray); line-height: 1.5; padding: 0; }
.form-row input::placeholder { color: var(--color-donkey-gray); font-weight: var(--font-weight-medium); }
.form-row input:disabled { cursor: not-allowed; color: var(--color-donkey-gray); }
.form-row-input-container.disabled { background-color: var(--color-wolf-gray); cursor: not-allowed; }
.form-row-error { display: block; margin-top: calc(0.5 * var(--rem)); font-size: calc(0.75 * var(--rem)); font-weight: var(--font-weight-regular); color: var(--color-fox-red); line-height: 1; }

/* Carousel */
.carousel-container { background: var(--color-deep-space-blue); border-radius: 0; padding: 0; box-shadow: 0 4px 20px rgba(0,0,0,0.3); max-width: calc(50 * var(--rem)); }
.carousel-title { font-size: calc(1.75 * var(--rem)); font-weight: 700; text-align: center; line-height: 1.2; white-space: nowrap; padding: calc(1.5 * var(--rem)); color: var(--color-rabbit-white); }
.carousel-wrapper { display: flex; align-items: flex-start; gap: 0; }
.carousel-arrow { width: calc(3 * var(--rem)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.carousel-arrow button { background: none; border: none; cursor: pointer; padding: 0; opacity: 0.8; transition: opacity 150ms ease; }
.carousel-arrow button:hover { opacity: 1; }
.carousel-arrow svg { width: calc(3 * var(--rem)); height: calc(33 * var(--rem)); stroke: var(--color-vivid-green-400); stroke-width: 0.5; stroke-linecap: round; stroke-linejoin: round; }
.carousel-arrow svg path { fill: none; }
.carousel-grid-container { flex: 1; overflow: hidden; position: relative; }
.carousel-grid { display: grid; grid-template-columns: repeat(3, calc(9.5 * var(--rem))); gap: 0; justify-content: center; }
.company-tile { width: calc(9.5 * var(--rem)); height: calc(7.5 * var(--rem)); margin-top: calc(1.25 * var(--rem)); display: flex; flex-direction: column; align-items: center; cursor: pointer; opacity: 0.5; transition: opacity 150ms ease; border: none; padding: 0; background: transparent; }
.company-tile.selected { opacity: 1; }
.company-tile:hover { opacity: 0.7; }
.company-tile.selected:hover { opacity: 1; }
.company-logo { width: calc(5.5 * var(--rem)); height: calc(3.5 * var(--rem)); background-color: var(--color-rabbit-white); padding: calc(0.25 * var(--rem)); display: flex; align-items: center; justify-content: center; }
.company-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.company-name { margin-top: calc(0.25 * var(--rem)); font-size: calc(1 * var(--rem)); font-weight: var(--font-weight-medium); color: var(--color-rabbit-white); text-align: center; line-height: 1.2; padding: 0 calc(0.25 * var(--rem)); }
.carousel-dots { display: flex; justify-content: center; align-items: center; height: calc(3.25 * var(--rem)); gap: calc(0.5 * var(--rem)); margin-top: calc(1 * var(--rem)); }
.carousel-dot { width: calc(0.75 * var(--rem)); height: calc(0.75 * var(--rem)); border-radius: 50%; border: 2px solid var(--color-vivid-green-400); background-color: var(--color-deep-space-blue); cursor: pointer; transition: background-color 150ms ease; }
.carousel-dot.active { background-color: var(--color-vivid-green-400); }
.carousel-dot:hover { opacity: 0.8; }

/* Summary Card */
.summary-card { background: var(--color-deep-space-blue); max-width: calc(50 * var(--rem)); padding: calc(1.5 * var(--rem)) calc(4 * var(--rem)); box-shadow: 0 4px 20px rgba(0,0,0,0.3); color: var(--color-rabbit-white); }
.summary-title { font-size: calc(1.75 * var(--rem)); font-weight: var(--font-weight-bold); text-align: center; margin-bottom: calc(1.5 * var(--rem)); color: var(--color-rabbit-white); }
.summary-company { display: flex; flex-direction: column; align-items: center; margin-bottom: calc(1 * var(--rem)); }
.summary-company-logo { width: calc(5.5 * var(--rem)); height: calc(3.5 * var(--rem)); background-color: var(--color-rabbit-white); padding: calc(0.25 * var(--rem)); display: flex; align-items: center; justify-content: center; margin-bottom: calc(0.5 * var(--rem)); }
.summary-company-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.summary-company-name { font-size: calc(1 * var(--rem)); font-weight: var(--font-weight-regular); text-align: center; color: var(--color-rabbit-white); }
.summary-info { border-top: 1px solid var(--color-vivid-green-400); margin-top: calc(0.5 * var(--rem)); }
.summary-row { padding: calc(0.75 * var(--rem)) 0; border-bottom: 1px solid var(--color-vivid-green-400); text-align: center; font-size: calc(1 * var(--rem)); font-weight: var(--font-weight-regular); color: var(--color-rabbit-white); }
.summary-row.empty { padding: calc(0.75 * var(--rem)) 0; }
.summary-back-btn { margin-top: calc(1.5 * var(--rem)); display: flex; justify-content: center; }

/* Action Buttons */
.action-btn-container { display: inline-flex; flex-direction: column; align-items: center; padding-top: calc(1.25 * var(--rem)); margin: 0 calc(1 * var(--rem)); width: calc(10 * var(--rem)); }
.action-btn { width: calc(3 * var(--rem)); height: calc(3 * var(--rem)); border-radius: 50%; border: none; background: var(--color-vivid-green-600); color: var(--color-rabbit-white); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 150ms ease; }
.action-btn:hover { background: var(--color-vivid-green-700); }
.action-btn:active { background: var(--color-vivid-green-800); }
.action-btn-text { padding-top: calc(0.125 * var(--rem)); font-size: calc(0.875 * var(--rem)); font-weight: var(--font-weight-medium); color: var(--color-deep-space-blue); text-align: center; line-height: 1.5; max-width: calc(10 * var(--rem)); }

/* Notification */
.notification-overlay { position: fixed; top: 9vh; left: 50%; transform: translateX(-50%); width: auto; min-width: 40vw; max-width: 100vw; z-index: 1000; animation: fadeInNotification 1200ms cubic-bezier(0.4,0.0,0.2,1); }
.notification { width: 100%; color: var(--color-rabbit-white); padding: calc(1 * var(--rem)) calc(2.4 * var(--unit)); font-size: calc(1.6 * var(--unit)); font-weight: 600; text-align: center; border-radius: 0; box-shadow: 0 4px 6px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; }
.notification.success { background: var(--color-system-green-600); }
.notification.error { background: var(--color-system-red-600); }
.notification.info { background: var(--color-vivid-green-600); }
@keyframes fadeInNotification { from { opacity: 0; } to { opacity: 1; } }

/* Loader */
.loader-container { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-rabbit-white); }
.loader { width: calc(25 * var(--unit)); height: calc(25 * var(--unit)); background: url('/assets/icons/loader.gif') center center no-repeat; background-size: contain; }

/* Nope External */
.nope-external { width: 100%; min-height: calc(30 * var(--rem)); background: var(--color-deep-space-blue); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(3 * var(--rem)); text-align: center; }
.nope-external-icon { width: calc(8 * var(--rem)); height: calc(8 * var(--rem)); margin-bottom: calc(2 * var(--rem)); opacity: 0.7; }
.nope-external-title { font-size: calc(2.2 * var(--rem)); font-weight: var(--font-weight-bold); color: var(--color-rabbit-white); margin-bottom: calc(1 * var(--rem)); }
.nope-external-message { font-size: var(--rem); font-weight: var(--font-weight-medium); color: var(--color-rabbit-white); max-width: calc(40 * var(--rem)); line-height: 1.6; }

/* Static Page Panel (Data Protection, TOS, Licenses) */
.static-page-panel {
  background: var(--color-rabbit-white);
  margin: calc(3 * var(--rem)) calc(8 * var(--rem));
  padding: var(--rem) calc(6 * var(--rem));
  height: calc(100vh - calc(4 * var(--rem)) - calc(6 * var(--rem)));  /* viewport minus InfoRow(64px) minus vertical margins(96px) */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Page Layout */
#form-page, #download-page { display: flex; flex-direction: column; min-height: 100vh; }
.main-layout { flex: 1; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding-top: calc(1 * var(--rem)); padding-bottom: calc(2 * var(--rem)); position: relative; }
.main-layout::before { content: ''; position: absolute; top: calc(1 * var(--rem)); left: 0; right: calc(6 * var(--rem)); bottom: calc(1 * var(--rem)); background: var(--color-rabbit-white); z-index: 0; }
.form-panel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; position: relative; z-index: 1; }
.form-content { display: flex; flex-direction: column; align-items: center; }
.form-title { font-size: calc(1.75 * var(--rem)); font-weight: var(--font-weight-bold); color: var(--color-skunk-gray); margin-top: calc(2.5 * var(--rem)); margin-bottom: calc(2 * var(--rem)); }
.button-container { width: calc(32 * var(--rem)); display: flex; justify-content: center; }
.carousel-panel { flex: 0 0 calc(37.5 * var(--rem)); width: calc(37.5 * var(--rem)); height: calc(44 * var(--rem)); margin-right: calc(3.25 * var(--rem)); position: relative; z-index: 1; }