/******************** COLOR TOKENS ********************/
:root{
 --pink:#fe36a1;--purple:#583dff;--green:#5ee100;--coral:#ff715f;
 --surface:#ffffff;--surface-alt:#f7f7f7;--text:#0f0f0f;--border:#e5e5e5;
}
[data-theme="dark"]{
 --surface:#0f0f0f;--surface-alt:#181818;--text:#ffffff;--border:#303030;
}

/******************** RESET ********************/
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;font-family:'Inter',sans-serif;background:var(--surface);color:var(--text);scroll-behavior:smooth;transition:background .3s,color .3s;}
h1,h2,h3{font-family:'Days One',sans-serif;margin:0 0 .5em;line-height:1.25;}

/******************** LAYOUT ********************/
section{padding:6rem 1rem;border-bottom:1px solid var(--border);scroll-margin-top:80px;}
section:nth-of-type(even){background:var(--surface-alt);} 
.container{width:90%;max-width:1200px;margin:0 auto;}

/******************** NAV ********************/
nav{position:fixed;top:0;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;z-index:1000;transition:background .3s,border-color .3s;}
nav ul{list-style:none;display:flex;gap:2.25rem;margin:0;padding:0;margin-left:auto;}
nav a{text-decoration:none;color:var(--text);font-weight:500;position:relative;}
nav a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:3px;background:var(--pink);transition:width .3s;}
nav a:hover::after,nav a.active::after{width:100%;}
nav a.nav-btn{background:var(--pink);color:#fff;padding:.45rem 1.1rem;border-radius:999px;margin-right:.75rem;}
nav a.nav-btn {
  max-width: 140px;
  min-width: 100px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
nav a.nav-btn::after{display:none;}

/* --- NAV alignment tweaks --- */
.logo{
  display:flex;
  align-items:center; /* по-Y */
  gap:.5rem;
  white-space:nowrap;
}
.logo img{
  height:48px;        /* было 32px → стало 48px */
  width:auto;
  object-fit:contain;
}
/* одинаковая «рамка» 36×36 px у бургер-иконки */
.burger{
  width:36px;
  height:36px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  margin:0;                /* убираем старый margin-left               */
}
.burger span{
  width:24px;
  height:3px;
}

/* круг-переключатель уже 36×36, просто убеждаемся */
#themeToggle{ width:36px; height:36px; }

/* --- mobile позиции (бургер край, круг левее) --- */
@media (max-width:768px){
  .burger     { right:16px; top:12px; } /* край экрана */
  #themeToggle{ right:64px; top:12px; } /* 16 + 36 + зазор */
}

/***** THEME TOGGLE BUTTON *****/
#themeToggle{
 background:none;border:2px solid var(--pink);color:var(--text);
 width:36px;height:36px;border-radius:50%;
 display:flex;align-items:center;justify-content:center;
 font-size:20px;line-height:1;padding:0;cursor:pointer;
 user-select:none; 
 transition:background .3s,color .3s,border-color .3s;
}
#themeToggle:hover{background:var(--pink);color:#fff;border-color:var(--pink);}

/***** BURGER ICON *****/
.burger{
  /* десктоп: скрыта */
  display:none;
  width:36px; height:36px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  cursor:pointer;
  margin:0;
}
/* сам символ ☾/☀︎ уже 36×36 px; сделаем бургер визуально таким же */
.burger span{
  width:24px;
  height:3px;
  background:var(--text);
  border-radius:2px;
}

/* — мобильное позиционирование: меняем местами элементы — */
@media (max-width:768px){
  /* теперь бургер-круг занимают одинаковую ширину,
     поэтому проще обменять их правыми отступами */
  .burger     { right:64px; }   /* левее */
  #themeToggle{ right:16px; }   /* край экрана */
}
/******************** HERO ********************/
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;background:linear-gradient(135deg,var(--purple) 0%,var(--pink) 100%);padding-top:6rem;}
.hero h1{font-size:clamp(2rem,5vw,4rem);} .hero p{max-width:640px;margin:1rem auto 2rem;}
.btn{display:inline-block;padding:.75rem 2rem;border-radius:999px;background:var(--pink);color:#fff;font-weight:600;text-decoration:none;transition:transform .2s;} .btn:hover{transform:scale(1.05);} 

/******************** SERVICES ********************/
.services-grid{
    /* ⬇  заменяем grid на flex-контейнер */
    display:flex;
    flex-wrap:wrap;          /* переносим, когда не влазит */
    gap:2rem;                /* тот же зазор между карточками */
    justify-content:center;  /* ВСЕ ряды по центру */
    margin-top:2.5rem;
    direction: ltr;
  }
  
  .service-card{
    /* ⬇  «колонка» ≈ 320 px, но может ужаться до 280 */
    flex:0 1 320px;
    background:var(--surface);
    border-radius:1.25rem;
    padding:2rem;
    text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
    transition:transform .2s;
  }
  
  [data-theme="dark"] .service-card{
    background:var(--surface-alt);
  }
.service-card:hover{transform:translateY(-4px);} 
.icon-square{width:88px;height:88px;border-radius:24px;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;color:#fff;}
.icon-square svg{width:44px;height:44px;}
.bg-purple{background:var(--purple);} .bg-green{background:var(--green);} .bg-coral{background:var(--coral);} 
[data-theme="dark"] .icon-square img{
    filter:brightness(0) invert(1);
  }

/******************** STATS ********************/
.stats{display:flex;flex-wrap:wrap;justify-content:space-around;gap:2rem;}
.stat{text-align:center;max-width:220px;}
.stat-icon{color:var(--pink);margin-bottom:.5rem;}
.stat-icon svg{width:32px;height:32px;}
.stat .number{font-size:2.25rem;font-family:'Days One',sans-serif;}

/******************** CONTACT ********************/
.contact-form{display:grid;gap:1rem;max-width:600px;margin:0 auto;}
.contact-form input,.contact-form textarea{width:100%;padding:.75rem 1rem;border-radius:.75rem;border:1px solid var(--border);background:var(--surface);color:var(--text);} 
.contact-form button{background:var(--pink);color:#fff;border:none;padding:.9rem 1.5rem;border-radius:.75rem;font-family:'Days One',sans-serif;cursor:pointer;}

/******************** FOOTER ********************/
footer{background:var(--surface-alt);padding:3rem 1rem;color:var(--text);font-size:.95rem;}
.footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;max-width:1200px;margin:0 auto;}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-links p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
}
.footer-links a{text-decoration:none;color:var(--text);margin-right:1.25rem;position:relative;}
.footer-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--pink);transition:width .25s;}
.footer-links a:hover::after{width:100%;}
.footer-contact p{margin:.25rem 0;}
.footer-contact a{color:var(--pink);text-decoration:none;} .footer-contact a:hover{color:var(--purple);} 

/******************** MOBILE NAV & FLOATING CTA ********************/
.contact-fab{display:none;}
@media (max-width:768px){
  /* toggle & burger positions */
  .burger{display:flex;position:fixed;top:12px;right:16px;z-index:1200;}
  #themeToggle{position:fixed;top:12px;right:56px;z-index:1200;}

  /* hidden menu until opened */
  nav ul{position:fixed;top:64px;right:-100%;width:220px;flex-direction:column;gap:1rem;padding:1rem;background:var(--surface);border-left:1px solid var(--border);box-shadow:-2px 0 8px rgba(0,0,0,.08);transition:right .3s,opacity .3s;opacity:0;pointer-events:none;}
  nav ul.open{right:0;opacity:1;pointer-events:auto;}

  /* floating contact */
  .contact-fab{display:inline-block;position:fixed;bottom:20px;right:16px;min-width:120px;text-align:center;background:var(--pink);color:#fff;padding:.6rem 1.4rem;border-radius:999px;font-family:'Days One',sans-serif;text-decoration:none;z-index:1100;}

  /* extra top padding for first section */
  .hero{padding-top:7rem;}
  .stats {
    flex-direction: column;
    align-items: center;
  }
  @media (max-width: 768px) {
    .nav-controls {
      position: fixed;
      top: 12px;
      right: 100px; /* слева от бургер-кнопки */
      z-index: 1200;
      background: var(--surface);
      padding: 0.25rem;
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      font-family: inherit;
      direction: ltr;
    }
    nav a.nav-btn {
      display: none;
    }
    .contact-fab {
      display: inline-block;
    }
  
    .burger {
      right: 16px;
    }
  }
  

  .stat {
    max-width: 100%;
  }
  section h2 {
    text-align: center;
    margin-bottom: 3rem; /* увеличим отступ снизу */
  }
}

/******************** INTERACTION – no text cursor on tap ********************/
body{-webkit-tap-highlight-color:transparent;user-select:none;}
a,button,input,textarea{user-select:text;}
.iti__country,
.iti__selected-country {
  background-color: white !important;
  color: black !important;
  border: 1px solid #ccc !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05) !important;
  border-radius: 8px !important;
}
/* Граница вокруг выпадающего списка */
.iti__dropdown-content {
  border: 1px solid #ccc !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05) !important;
  border-radius: 8px !important;
  z-index: 1000;
}

/* Стрелка — сделаем заметнее */
.iti__arrow {
  border-top: 6px solid black !important;
  margin-left: 6px;
}

.iti__flag-container,
.iti__country-list {
  background-color: white !important;
}
.iti__selected-dial-code {
  font-size: 10px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-top {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.stat-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon svg {
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: middle; /* ← ключевой момент */
}

/* ============ 2. CSS ============ */
.phone-field .iti{width:100%;}
.phone-field input{padding-left:80px;}        /* место под код */
.iti--separate-dial-code .iti__selected-dial-code{
  font-size:.9rem; color:var(--text);
}
input.invalid        { border:1px solid #ff3b3b; }
.phone-error-msg     { color:#ff3b3b; font-size:14px; margin-top:4px; }
/* Флаг + код всегда 100 % ширины поля */
.phone-field .iti { width:100%; }
/* Дополнительный отступ, чтобы текст не налезал на флаг */
.iti--separate-dial-code input { padding-left:80px; }

.iti__dropdown-content    { max-height:320px; overflow:auto; }
/* Флаг + код занимают фиксированную ширину */
.phone-field .iti        { width: 100%; }
.iti--separate-dial-code input { padding-left: 80px; }

input.invalid {
  border: 1px solid #ff3b3b;
}

.nav-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-family: inherit;
  direction: ltr;
}
nav {
  direction: ltr;
}

#langSelect {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 2px solid var(--pink);
  font-family: 'Days One', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  appearance: none;
  background-color: var(--surface); /* будет белым или чёрным в зависимости от темы */
  color: var(--pink);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fe36a1' d='M70 90L20 40h100z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 10px;
  padding-right: 2rem;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

#langSelect:hover,
#langSelect:focus {
  background-color: var(--surface);
  color: var(--pink);
  border-color: var(--pink);
}

footer {
  direction: ltr;
}

:lang(ar) {
  font-family: 'Tajawal', sans-serif;
  
}
.block-line {
  display: block;
  text-align: inherit; /* сохраняет выравнивание: слева или справа */
}