/* visa-theme.css
   Visual tuning for zh/germany-services/visa hub + detail pages.
*/

.visa-theme .page-main{
  background:
    radial-gradient(980px 420px at 10% -12%, rgba(125,211,252,.26), rgba(125,211,252,0) 62%),
    radial-gradient(900px 420px at 100% 0%, rgba(196,181,253,.22), rgba(196,181,253,0) 64%),
    linear-gradient(180deg, #f8fcff 0%, #f6fbff 38%, #f9fcff 100%);
}

.visa-theme .hero{
  border:1px solid rgba(37,99,235,.18);
  border-radius:var(--radius-lg);
  padding:clamp(18px, 3vw, 30px);
  background:
    radial-gradient(860px 360px at 88% -10%, rgba(59,130,246,.22), rgba(59,130,246,0) 64%),
    radial-gradient(700px 320px at -8% 100%, rgba(14,165,233,.14), rgba(14,165,233,0) 60%),
    linear-gradient(170deg, rgba(255,255,255,.98), rgba(233,244,255,.9));
  box-shadow:var(--shadow-md);
}

.visa-theme .other-hub{
  gap:calc(var(--space-section) + 14px);
}

.visa-theme .other-hub-hero{
  border-color:rgba(37,99,235,.18);
  background:
    radial-gradient(940px 360px at 86% -6%, rgba(59,130,246,.24), rgba(59,130,246,0) 62%),
    radial-gradient(740px 320px at -4% 104%, rgba(20,184,166,.16), rgba(20,184,166,0) 62%),
    linear-gradient(165deg, rgba(255,255,255,.98), rgba(235,247,255,.9));
}

.visa-theme .hero .lead{
  color:rgba(15,23,42,.78);
}

.visa-theme .section{
  border:1px solid rgba(37,99,235,.14);
  border-radius:var(--radius-lg);
  padding:clamp(16px, 2.4vw, 24px);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,248,255,.86));
  box-shadow:var(--shadow-sm);
}

.visa-theme .service-grid{
  gap:18px;
}

.visa-theme .hub-flow,
.visa-theme .hub-faq{
  padding:clamp(20px, 2.9vw, 30px);
}

.visa-theme .section .card{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,247,255,.92));
  border-color:rgba(37,99,235,.16);
}

.visa-theme .steps li{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,247,255,.9));
  border-color:rgba(37,99,235,.16);
}

.visa-theme .service-card{
  background:
    radial-gradient(130% 90% at 100% -10%, rgba(186,230,253,.24), rgba(186,230,253,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(240,247,255,.95));
  border-color:rgba(37,99,235,.2);
  box-shadow:0 12px 26px rgba(30,64,175,.1);
}

.visa-theme .service-card:hover{
  border-color:rgba(37,99,235,.36);
  box-shadow:0 14px 30px rgba(30,64,175,.14);
}

.visa-theme .service-card-top{
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:14px;
}

.visa-theme .service-title-btn{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  min-height:48px;
  padding:6px 12px;
  border-radius:10px;
  border:1px solid rgba(37,99,235,.24) !important;
  background:linear-gradient(135deg, rgba(234,244,255,.98), rgba(248,252,255,.98)) !important;
  color:#1e40af !important;
  text-decoration:none;
  font-weight:740;
  line-height:1.25;
  box-shadow:0 4px 10px rgba(30,64,175,.08);
  flex:0 0 auto !important;
  width:auto !important;
  max-width:calc(100% - 78px);
  white-space:normal;
  word-break:break-word;
  min-width:0;
}

.visa-theme .service-title-btn .cn{
  display:block;
  white-space:nowrap;
}

.visa-theme .service-title-btn .de{
  display:block;
  font-size:13px;
  line-height:1.2;
  color:rgba(30,58,138,.92);
  font-weight:700;
}

.visa-theme .service-title-btn:hover{
  background:linear-gradient(135deg, rgba(186,224,255,.96), rgba(215,234,255,.98)) !important;
  color:#1e3a8a !important;
  border-color:rgba(37,99,235,.44) !important;
  transform:translateY(-1px);
}

.visa-theme .service-title-btn:focus-visible{
  outline:2px solid rgba(59,130,246,.45);
  outline-offset:2px;
}

.visa-theme .service-tag{
  display:inline-flex !important;
  flex-direction:row !important;
  min-width:56px;
  min-height:34px;
  width:auto;
  height:auto;
  justify-content:center;
  align-items:center;
  text-align:center;
  white-space:nowrap;
  word-break:keep-all;
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
  transform:none !important;
  line-height:1;
  padding:8px 12px;
  font-weight:800;
  font-size:13px;
  letter-spacing:0;
  flex-shrink:0;
}

.visa-theme .service-card-top > .service-tag{
  margin-left:auto;
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
}

.visa-theme .hub-flow{
  border-color:rgba(37,99,235,.16);
  background:
    radial-gradient(780px 300px at 0% 100%, rgba(56,189,248,.13), rgba(56,189,248,0) 64%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(236,248,255,.9));
}

.visa-theme .hub-faq{
  border-color:rgba(37,99,235,.16);
  background:
    radial-gradient(760px 300px at 100% 0%, rgba(167,243,208,.16), rgba(167,243,208,0) 64%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,250,255,.92));
}

.visa-theme .hub-faq-item{
  border-color:rgba(37,99,235,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,249,255,.92));
}

.visa-theme .faq.faq-static details{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,248,255,.92));
  border-color:rgba(37,99,235,.16);
}

.visa-theme .faq.faq-static summary{
  cursor:default;
  pointer-events:none;
  user-select:text;
}

.visa-theme .faq.faq-static summary::after{
  content:"";
}

.visa-theme .btn.self-check-btn,
.visa-theme a.btn[href*="/chancenkarte-check/"],
.visa-theme a.btn[href*="/self-check/"]{
  border:1px solid rgba(29,78,216,.72);
  background:
    radial-gradient(130% 120% at 8% 0%, rgba(191,219,254,.4), rgba(191,219,254,0) 56%),
    linear-gradient(135deg, #2563eb 0%, #1d4ed8 48%, #0ea5e9 100%);
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
  text-shadow:0 1px 2px rgba(15,23,42,.28);
  box-shadow:0 14px 30px rgba(29,78,216,.35), inset 0 1px 0 rgba(255,255,255,.3);
}

.visa-theme .btn.self-check-btn:hover,
.visa-theme a.btn[href*="/chancenkarte-check/"]:hover,
.visa-theme a.btn[href*="/self-check/"]:hover{
  background:
    radial-gradient(130% 120% at 8% 0%, rgba(219,234,254,.48), rgba(219,234,254,0) 56%),
    linear-gradient(135deg, #3b82f6 0%, #2563eb 48%, #06b6d4 100%);
  border-color:rgba(29,78,216,.9);
  box-shadow:0 16px 32px rgba(29,78,216,.42), inset 0 1px 0 rgba(255,255,255,.38);
}

.visa-theme .btn.self-check-btn:focus-visible,
.visa-theme a.btn[href*="/chancenkarte-check/"]:focus-visible,
.visa-theme a.btn[href*="/self-check/"]:focus-visible{
  outline:2px solid rgba(37,99,235,.48);
  outline-offset:2px;
}