@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('https://mk.vitamed.pro/assets/fonts/manrope-cyrillic.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('https://mk.vitamed.pro/assets/fonts/playfair-display-cyrillic-700.woff2') format('woff2')}

:root{
  --green:#0b725b;
  --green-deep:#12352e;
  --green-soft:#eaf7f2;
  --line:#cfe3dc;
  --text:#29453f;
  --white:#fff;
  --shadow:0 24px 70px rgba(18,53,46,.14);
}

*{box-sizing:border-box}

html{min-height:100%;background:#f5faf7}

body{
  min-height:100vh;
  margin:0;
  color:var(--text);
  font-family:'Manrope',Arial,sans-serif;
  background:
    linear-gradient(rgba(245,250,247,.88),rgba(245,250,247,.93)),
    url('https://mk.vitamed.pro/assets/herbal-page-background.svg') center/cover fixed;
}

a{color:inherit;text-decoration:none}

.country-page{
  width:min(920px,calc(100% - 40px));
  min-height:100vh;
  margin:auto;
  padding:44px 0;
  display:flex;
  flex-direction:column;
}

.brand{
  width:max-content;
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-symbol{
  width:52px;
  height:52px;
  overflow:hidden;
  border-radius:16px;
  background:var(--green);
  box-shadow:0 10px 24px rgba(11,114,91,.2);
}

.brand-symbol img{display:block;width:100%;height:100%}

.brand-copy strong{
  display:block;
  color:var(--green-deep);
  font-family:'Playfair Display',Georgia,serif;
  font-size:27px;
  line-height:1.05;
  letter-spacing:-.45px;
}

.brand-copy small{
  display:block;
  margin-top:3px;
  color:#4b635d;
  font-size:11px;
}

.selector{
  width:min(680px,calc(100vw - 40px));
  max-width:none;
  align-self:center;
  margin:auto;
  padding:58px;
  border:1px solid rgba(190,216,207,.9);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(234,247,242,.96));
  box-shadow:var(--shadow);
}

.selector h1{
  margin:0 0 32px;
  color:var(--green-deep);
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(36px,6vw,54px);
  line-height:1.08;
  text-align:center;
}

.country-card{
  display:grid;
  grid-template-columns:132px minmax(0,1fr) 46px;
  align-items:center;
  gap:24px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--white);
  box-shadow:0 12px 34px rgba(18,53,46,.08);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.country-card:hover,
.country-card:focus-visible{
  transform:translateY(-3px);
  border-color:var(--green);
  box-shadow:0 18px 42px rgba(18,53,46,.14);
  outline:none;
}

.flag-frame{
  display:block;
  overflow:hidden;
  border-radius:11px;
  box-shadow:0 5px 14px rgba(18,53,46,.16);
}

.flag-frame img{display:block;width:100%;height:auto}

.country-name{
  color:var(--green-deep);
  font-size:20px;
  font-weight:800;
  line-height:1.25;
}

.country-arrow{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--green);
  color:var(--white);
  font-size:23px;
  font-weight:800;
}

@media(max-width:640px){
  .country-page{width:min(100% - 28px,920px);padding:24px 0}
  .brand-symbol{width:45px;height:45px;border-radius:14px}
  .brand-copy strong{font-size:23px}
  .selector{width:calc(100vw - 28px);padding:34px 20px;border-radius:22px}
  .selector h1{margin-bottom:25px;font-size:clamp(31px,9.5vw,38px)}
  .country-card{grid-template-columns:96px minmax(0,1fr) 38px;gap:14px;padding:13px}
  .country-name{font-size:16px}
  .country-arrow{width:36px;height:36px;font-size:20px}
}

@media(max-width:410px){
  .brand-copy small{display:none}
  .country-card{grid-template-columns:82px minmax(0,1fr)}
  .country-arrow{display:none}
}

@media(prefers-reduced-motion:reduce){
  .country-card{transition:none}
}