/* ---------- style.css (обновлённый: рамка видна всегда, адаптивный padding.wrap min 3px) ---------- */

@font-face {
  font-family: "Cheque";
  src: url("cheque/Cheque-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lobster";
  src: url("Lobster/Lobster-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --- Палитра --- */
:root{
  --bg: #f6efe2;
  --card-top: #f3ead8;
  --card-bottom: #efe6cf;
  --text: #453a23;
  --accent: #b8872e;
  --muted: rgba(43,36,22,0.12);
  --shadow: rgba(43,36,22,0.10);
  --border-muted: rgba(184,135,46,0.06);
}

/* Базовые правила */
*{box-sizing:border-box}

/* Глобальные правила запрета разрыва слов и дефисов */
html,body, *::before, *::after {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;            /* Запрет дефисов */
  word-break: normal;       /* Не ломать слова */
  overflow-wrap: normal;    /* Не переносить слово посередине */
  -webkit-font-smoothing:antialiased;
}

html,body{
  width: 100%;
  margin:0;
  font-family: "Georgia", "Times New Roman", serif;
  background:var(--bg);
  color:var(--text);
  overflow-x: hidden;
}
html { font-size: 16px; }

/* фон */
body{
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 10% 10%, rgba(69,58,35,0.03) 0%, transparent 20%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g fill='none' stroke='%23453a23' stroke-opacity='0.30' stroke-width='1'><path d='M100 10 L130 60 L100 110 L70 60 Z' /><path d='M20 100 L70 130 L120 100 L70 70 Z' transform='translate(40,20)'/><circle cx='100' cy='100' r='45' stroke-opacity='0.12'/></g></svg>");
  background-repeat:repeat;
  background-size: 260px 260px, 220px 220px;
}

/* обертка
   Поменял padding на адаптивный с clamp — min 3px (требование).
   Теперь padding будет: минимум 3px, затем масштабируется по vw, максимум 36px */
.wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(3px, 1vw, 36px); /* min 3px — строго */
}

/* карточка */
.card{
  width:100%;
  max-width:920px;
  border-radius:12px;
  padding:28px;
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
  border: 1px solid var(--border-muted);
  box-shadow: 0 14px 40px var(--shadow), 0 0 0 6px rgba(0,0,0,0.03) inset;
  position:relative;
  overflow:visible;
}

/* рамка — возвращена и видна всегда (card::before/::after + corners) */
.card::before,
.card::after{
  content:"";
  pointer-events:none;
  position:absolute;
  left:12px; right:12px; top:12px; bottom:12px;
  border-radius:6px;
}
.card::before{ box-shadow: inset 0 0 0 2px rgba(184,135,46,0.18); }
.card::after{ left:28px; right:28px; top:28px; bottom:28px; box-shadow: inset 0 0 0 2px rgba(184,135,46,0.12); }

/* corners — декоративные углы (оставляем их включёнными всегда) */
.corner { position:absolute; width:84px; height:84px; pointer-events:none; }
.corner .line { position:absolute; background:linear-gradient(90deg, rgba(184,135,46,0.95), rgba(184,135,46,0.65)); }

/* конкретные позиции (как раньше) */
.corner.tl{ left:6px; top:6px; transform:translateZ(0); }
.corner.tl .h{ top:6px; left:6px; height:4px; width:64px; border-radius:2px; }
.corner.tl .v{ left:6px; top:6px; width:4px; height:64px; border-radius:2px; }
.corner.tl .diag{ left:18px; top:18px; width:38px; height:4px; transform: rotate(90deg); }

.corner.tr{ right:6px; top:6px; }
.corner.tr .h{ top:6px; right:6px; height:4px; width:64px; border-radius:2px; }
.corner.tr .v{ right:6px; top:6px; width:4px; height:64px; border-radius:2px; }

.corner.bl{ left:6px; bottom:6px; }
.corner.bl .h{ bottom:6px; left:6px; height:4px; width:64px; border-radius:2px; }
.corner.bl .v{ left:6px; bottom:6px; width:4px; height:64px; border-radius:2px; }

.corner.br{ right:6px; bottom:6px; }
.corner.br .h{ bottom:6px; right:6px; height:4px; width:64px; border-radius:2px; }
.corner.br .v{ right:6px; bottom:6px; width:4px; height:64px; border-radius:2px; }

.corner .thin { position:absolute; background: linear-gradient(90deg, rgba(184,135,46,0.6), rgba(184,135,46,0.25)); }
.corner.tl .thin.h{ top:22px; left:22px; height:2px; width:46px; border-radius:1px; }
.corner.tl .thin.v{ left:22px; top:22px; width:2px; height:46px; border-radius:1px; }
.corner.tr .thin.h{ top:22px; right:22px; height:2px; width:46px; border-radius:1px; }
.corner.tr .thin.v{ right:22px; top:22px; width:2px; height:46px; border-radius:1px; }
.corner.bl .thin.h{ bottom:22px; left:22px; height:2px; width:46px; border-radius:1px; }
.corner.bl .thin.v{ left:22px; bottom:22px; width:2px; height:46px; border-radius:1px; }
.corner.br .thin.h{ bottom:22px; right:22px; height:2px; width:46px; border-radius:1px; }
.corner.br .thin.v{ right:22px; bottom:22px; width:2px; height:46px; border-radius:1px; }

/* контент (как раньше) */
.header{ text-align:center; margin-bottom:18px; }
.pre-title{ color:var(--accent);font-weight: 900;font-size:30px; letter-spacing:2px; margin:20px 0; text-transform:uppercase; font-family:'Cheque' }
.title-name{ color:var(--accent);font-weight: 900;font-size:40px; letter-spacing:2px; margin:15px 0; text-transform:uppercase; font-family:'Cheque' }
.title-jubely{ color:var(--accent);font-weight: 900;font-size:22px; letter-spacing:2px; margin:15px 0; text-transform:uppercase; font-family:'Cheque' }
.subtitle{ color:var(--text); opacity:0.95;font-weight: 600; margin: 40px 20px 20px 20px; font-size:25px; font-family:'Cheque'; letter-spacing:1px }
.subtitle2.long {
  text-align: center;
  font-size: clamp(13px, 3.8vw, 18px);
  line-height: 1.55;
  opacity: 0.92;
  max-width: 92%;
  margin: 8px auto 16px auto;
  white-space: normal; /* разрешаем перенос между словами */
  display: block;
}

/* layout блоки */
.section{ background:transparent; padding:12px 8px; margin-bottom:12px; border-radius:8px }
.block{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.01)); border:1px solid rgba(184,135,46,0.04); padding:14px;border-radius:10px; }

/* event-date */
.event-date { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; position: relative; padding: 16px 0; }
.event-date::before, .event-date::after { content: ""; position: absolute; top: 50%; width: 32%; height: 1.6px; background: linear-gradient(90deg, transparent 0%, rgba(184,135,46,0.25) 20%, var(--accent) 50%, rgba(184,135,46,0.25) 80%, transparent 100%); transform: translateY(-50%); }
.event-date::before { left: 0; } .event-date::after { right: 0; }
.event-date .value{ font-size:20px; color:var(--text); font-weight:700; letter-spacing:1px }

/* calendar */
.calendar-wrap{ margin-top:10px }
.month-title{ text-align:center; font-weight:700; color:var(--text); margin-bottom:10px; font-size:20px }
.calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px }
.day-name{ font-size:16px; text-align:center; color: var(--text); padding:6px 0 }
.day{ height:44px; display:flex; align-items:center; justify-content:center; border-radius:6px; color:var(--text); font-weight:700; background:transparent; padding:4px; box-sizing:border-box; }
.day.out{ color:var(--muted) }
.day.event{ background: linear-gradient(180deg,var(--accent), #8f6f30); color: var(--bg); box-shadow: 0 6px 14px rgba(140,105,45,0.14); transform:translateY(-2px); }
.day.today{ outline:2px solid rgba(184,135,46,0.06) }

/* countdown */
.countdown-grid{ display:flex; gap:14px; justify-content:center; margin-top:12px; flex-wrap:wrap }
.count-seg{ display:flex; flex-direction:column; align-items:center; min-width:84px }
.count-num{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); padding:14px 10px; border-radius:8px; font-size:28px; font-weight:900; color:var(--text); min-width:72px; text-align:center; border:1px solid rgba(184,135,46,0.04); }
.count-label{ margin-top:6px; font-size:13px; color: var(--text); text-transform:uppercase; letter-spacing:0.6px }

/* place */
.place{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; margin-top:30px; }
.place .address{ font-weight:700; color:var(--text); font-size:18px; width:100%; display:block; margin:6px 0; text-align:center; }
.place .place-name{ color:var(--accent); font-weight:400; font-size:25px; font-family: 'Lobster'; width:100%; display:block; text-align:center; margin:6px 0; }
.map-links{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; justify-content:center; }
.map-links a{ display:inline-flex; padding:8px 10px; border-radius:8px; background:linear-gradient(180deg, rgba(212,175,55,0.25), rgba(212,175,55,0.12)); border:1.5px solid rgba(212,175,55,0.45); color:var(--text); font-weight:700; text-decoration:none; min-width: 160px; justify-content:center; }

/* dress code */
.dress-block { text-align: center; padding: 20px; }
.dress-text { font-size: 18px; color: var(--text); opacity: 0.95; line-height: 1.55; max-width: 600px; margin: 0 auto 20px auto; }

/* фото */
.dress-photos { display:flex; justify-content:center; align-items:flex-start; gap:16px; margin-top:20px; flex-wrap:wrap; }
.dress-photo { width: 100%; max-width: 280px; border-radius:12px; overflow:hidden; border:1px solid rgba(212,175,55,0.35); box-shadow: 0 8px 24px rgba(0,0,0,0.55), inset 0 0 18px rgba(212,175,55,0.18); }
.dress-photo img { width:100%; height:100%; object-fit:cover; display:block; }

/* RSVP стили */
.rsvp2-block { background: linear-gradient(180deg, var(--card-top), var(--card-bottom)); border: 1px solid var(--border-muted); box-shadow: 0 8px 20px var(--shadow); padding: 18px; border-radius: 10px; max-width: 640px; margin: 0 auto; }
.rsvp2-title { /* word-break: keep-all; */   text-align:center; font-size:18px; font-weight:800; color:var(--text); margin-bottom:14px; padding-bottom:12px; position:relative; letter-spacing:1px; font-family:'Cheque', Georgia, serif; }

/* ФОРМЫ: запрещаем разрыв внутри слов в полях и кнопках */
.rsvp2-row { margin-bottom:16px; }
.rsvp2-label { display:block; font-size:14px; color:var(--text); margin-bottom:8px; font-weight:600; }
.rsvp2-input, .rsvp2-input[type="text"], .rsvp2-input[type="email"], .rsvp2-input[type="number"], #partnerName, #kidsList input {
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(184,135,46,0.12);
  background: rgba(212, 175, 55, 0.2);
  color:var(--text);
  font-size:14px;
  outline:none;
  transition: box-shadow .18s ease, border-color .18s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
.rsvp2-input:focus { border-color: var(--accent); box-shadow: 0 6px 18px rgba(43,36,22,0.06); }
.option { display:flex; align-items:center; gap:10px; margin:8px 0; font-size:14px; color:var(--text); cursor:pointer; flex-wrap:wrap; }
.option input[type="radio"] { width:18px; height:18px; accent-color: var(--accent); cursor:pointer; }

/* кнопки */
.mini-btn { padding:7px 10px; border-radius:8px; background: linear-gradient(180deg, rgba(184,135,46,0.12), rgba(184,135,46,0.06)); border:1px solid rgba(184,135,46,0.18); color:var(--text); cursor:pointer; font-weight:700; font-size:13px; transition: transform .12s ease, box-shadow .12s ease; display:inline-block; margin-top:8px; }
.mini-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(43,36,22,0.06); }

.rsvp2-btn { display:inline-block; margin-top:10px; padding:10px 18px; border-radius:10px; font-size:15px; font-weight:800; background: linear-gradient(180deg, rgba(184,135,46,0.30), rgba(184,135,46,0.12)); border:1.5px solid rgba(184,135,46,0.45); color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,0.25); cursor:pointer; transition: transform .12s ease, box-shadow .12s ease; }
.rsvp2-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(43,36,22,0.10); }

/* disabled state */
.rsvp2-btn.disabled, .rsvp2-btn:disabled { opacity:0.65; cursor:default; box-shadow:none; transform:none; }

/* ---------- Новые/объединённые правила по твоим просьбам ---------- */

/* 1) date-time - шрифт Cheque (для меток Дата и Время) */
.date-time {
  text-align: center;
  font-family: 'Cheque', Georgia, serif;
  font-weight: 700;
  font-size: clamp(16px, 3.6vw, 20px);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

/* 2) Заголовки секций в Cheque + золотая полоса под ними */
.place-heading,
.rsvp2-title {
  font-family: 'Cheque', Georgia, serif;
  font-weight: 800;
  font-size: clamp(16px, 3.6vw, 20px);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text);
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 10px;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

/* золотая полоса под заголовками (центральная полоска) */
.place-heading::after,
.rsvp2-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 60%;
  height: 3px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212,175,55,0.25) 20%,
    var(--accent) 50%,
    rgba(212,175,55,0.25) 80%,
    transparent 100%);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(184,135,46,0.08) inset;
}

/* 3) Центрирование блока place (обязательное) */
.place {
  text-align: center !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.place .address,
.place .place-name {
  text-align: center !important;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* 4) Переносы и защита от выхода текста */
/* Убраны break-word/auto-hyphens — запрещаем разрыв внутри слов по умолчанию */
.option {
  display: inline-flex;        /* label как inline-flex — не ломает поток, но делает flex-контейнер */
  align-items: center;        /* вертикальное выравнивание круга и текста */
  gap: 12px;                  /* расстояние между кружком и текстом */
  flex-wrap: nowrap;          /* запрещаем перенос внутренних flex-элементов на новую строку */
  width: 100%;                /* сохраняем поведение: метки занимают ширину контейнера */
  box-sizing: border-box;
  white-space: normal;        /* разрешаем перенос между словами, но не внутри слова */
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

/* Убедимся, что сам radio не растягивается и не даёт лишних отступов */
.option > input[type="radio"] {
  flex: 0 0 auto;             /* фиксируем размер радиокнопки */
  width: 18px;
  height: 18px;
  margin: 0;                  /* сбрасываем возможные внешние отступы */
  vertical-align: middle;
}

/* Текст внутри label — будет занимать оставшееся место и корректно переноситься */
.option span {
  display: inline-block;
  min-width: 0;
  word-break: normal;       /* НЕ ломать слова */
  overflow-wrap: normal;
  hyphens: none;
}

/* На очень узких экранах немного уменьшим gap чтобы не давать переноса строки */
@media (max-width: 420px) {
  .option { gap: 8px; }
  .option > input[type="radio"] { width:16px; height:16px; }
}

/* ====== Счётчик всегда в один ряд ======= */

.countdown-grid {
    display: flex !important;
    flex-wrap: nowrap !important;  /* запрещаем переносы среди сегментов */
    justify-content: center;
    align-items: stretch;
    gap: clamp(6px, 2vw, 14px);
    overflow: hidden;              /* предотвращает выход за границы */
}

.count-seg {
    min-width: 0;                  /* детям можно сжиматься */
    flex: 1 1 0;                   /* равномерное распределение */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.count-num {
    width: 100%;
    min-width: 0;
    padding: clamp(8px, 2vw, 14px);
    font-size: clamp(18px, 5vw, 28px);
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.count-label {
    font-size: clamp(10px, 2.4vw, 13px);
    text-align: center;
    hyphens: none;
}

/* responsive typography and controls */
.pre-title { font-size: clamp(18px, 4.5vw, 30px); }
.title-name { font-size: clamp(24px, 6.5vw, 40px); }
.title-jubely { font-size: clamp(14px, 3.5vw, 22px); }
.subtitle { font-size: clamp(16px, 4.5vw, 25px); margin: 28px 12px 18px; }
.subtitle2 { font-size: clamp(13px, 3.8vw, 18px); max-width: 92%; margin: 8px auto; line-height:1.45; /* hyphens:auto; убрано */ }
.card { padding: clamp(14px, 4vw, 28px); margin: 0 12px; }

/* Убираем break-word из полей и ссылок */
.rsvp2-input, .rsvp2-btn, #partnerName, #kidsList input, .map-links a {
  max-width:100%;
  box-sizing:border-box;
  overflow-wrap: normal;
  word-break: normal;
  -webkit-hyphens: none;
  hyphens: none;
}

.calendar-grid .day { font-size: clamp(12px, 2.6vw, 16px); height: clamp(34px, 8vw, 44px); padding:4px; }
.dress-photos { gap: clamp(8px, 2.6vw, 16px); }
.dress-photo { max-width: clamp(160px, 40vw, 280px); }

/* small screens */
@media (max-width: 420px) {
  .pre-title { font-size: clamp(16px, 5.6vw, 22px); }
  .title-name { font-size: clamp(20px, 7.4vw, 30px); }
  .subtitle { font-size: clamp(14px, 4.2vw, 18px); }
  .subtitle2 { font-size: clamp(12px, 3.6vw, 16px); }
  .count-num { font-size:20px; padding:8px; min-width:58px; }
  .map-links a { min-width: 120px; font-size: 12px; padding: 9px 10px; }
}

/* print */
@media print { body{ background:white; color:black } .card{ box-shadow:none; border:none } .frame{ display:none } }

/* ---- Fix: radio + label alignment: keep text always to the right of the circle ---- */
/* (правки уже выше в .option) */

/* Стандартный мелкий ресет для мобильных изображений */
@media (max-width: 600px) {
    .dress-photo {
        max-width: 100% !important;   /* вместо 280px */
        width: 100%;
    }

    .dress-photo img {
        height: auto;
        width: 100%;
        object-fit: cover;
    }
}