/* =====================================================================
   SURVEY CARDS — shared styles for the Customer.io inline-card pattern
   Source of truth as of 2026-09-08. Byte-identical copies still exist in the
   page-level custom CSS of page 735 (/user/) and page 785 (/account/) until
   the additive-first consolidation removes them (KNOWN-ISSUES #14).
   ===================================================================== */

/* =============================
   SURVEY LOADING SKELETON
============================= */

.survey-loading-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fadeIn 0.3s ease;
}

.skeleton {
  background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
}

.skeleton.title { height: 20px; width: 40%; }
.skeleton.line { height: 14px; width: 70%; }
.skeleton.button { height: 40px; width: 160px; border-radius: 20px; }

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

/* =============================
   EMPTY STATE
============================= */

.survey-empty-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  animation: fadeIn 0.3s ease;
}

/* =============================
   SECTION ACCENT COLORS
============================= */

#yunite-surveys-anchor .survey-empty-card {
  border-left: 4px solid #30A06C;
}

#partner-surveys-anchor .survey-empty-card {
  border-left: 4px solid #3B82F6;
}

#profiling-anchor .survey-empty-card {
  border-left: 4px solid #F59E0B;
}

.survey-empty-card,
.survey-loading-card {
  transition: all 0.25s ease;
}

.survey-empty-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #21262B;
}

.survey-empty-text {
  font-size: 14px;
  color: #6B7280;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================================
   PROFILING DESIGN OVERRIDE
================================ */

#profiling-section {
  background: linear-gradient(135deg, #FFF7EF 0%, #FFFAF5 100%);
}

/* Make profiling card slightly softer */
#profiling-section .survey-empty-card {
  padding: 24px;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

/* Tighter vertical rhythm */
#profiling-section .survey-empty-title {
  font-size: 17px;
  margin-bottom: 8px;
}

#profiling-section .survey-empty-text {
  font-size: 13px;
  line-height: 1.5;
}

/* =============================
   SECTION + ANCHOR BASE
============================= */

.survey-anchor {
  width: 100%;
}

.survey-anchor > div {
  margin-bottom: 16px;
}

.survey-section {
  background: #F8FAF9;
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border: 1px solid #E6ECE9;
}

.partner-survey-section {
  background: linear-gradient(135deg, #F2F6FB 0%, #F8FAFD 100%);
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* =============================
   MOBILE (max-width: 768px) — the survey rules from the pages' mobile block; wrapper reconstructed
============================= */

@media (max-width: 768px) {

  .survey-section,
  .partner-survey-section{
    width:100%;
    border-radius:22px;
    padding:5px;
    margin:0 0 20px 0;
  }

  .survey-anchor{
    width:100% !important;
  }

  .survey-anchor iframe,
  .survey-anchor .gist-frame{
    width:100% !important;
    max-width:100% !important;
  }

}

/* =========================================
   Survey Section Header (Premium Styling)
========================================= */

/* Base wrapper */
.survey-header {
  font-family: 'Geologica', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #21262B;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Colored dot */
.survey-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Accent colors */
.yunite-dot {
  background: #30A06C;
}

.partner-dot {
  background: #2F6FED;
}

/* Meta text (secondary description) */
.survey-meta {
  font-size: 13px;
  font-weight: 400;
  color: #6B7280;
}

/* Hide meta on mobile for cleaner UI */
@media (max-width: 768px) {
  .survey-meta {
    display: none !important;
  }
}

/* ===================================
   NOTIFICATIONS (CIO IN-APP ANCHOR)
=================================== */


#notifications-anchor {
  width: 100%;
  display: block;
}

#notifications-anchor > div {
  width: 100% !important;
}

/* =============================
   NEW — verification-result card accent (page not yet built)
============================= */

#sm-verify-result-anchor .survey-empty-card {
  border-left: 4px solid #30A06C;
}