/* assets/css/main.css — публичная страница бронирования экскурсий GUDART */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Jost:wght@300;400;500&display=swap');

:root {
  --cream: #F7F4EF;
  --warm-white: #FDFBF8;
  --sand: #E8E0D5;
  --taupe: #C4B8A8;
  --brown: #8B7355;
  --dark: #2C2720;
  --accent: #A67C52;
  --text: #3D3530;
  --text-light: #7A6E66;
  --border: #DDD6CC;
  --success: #6B8F6B;
  --danger: #C0614F;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family:'Jost',sans-serif;
  background:var(--cream);
  color:var(--text);
  font-weight:300;
  font-size:15px;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.wrap { max-width:640px; margin:0 auto; padding:0 24px; width:100%; }

/* Header */
.site-header { background:var(--cream); padding:56px 0 32px; text-align:center; border-bottom:1px solid var(--border); }
.site-header h1 {
  font-family:'Cormorant Garamond',serif;
  font-size:44px;
  font-weight:600;
  letter-spacing:6px;
  color:var(--dark);
}
.site-header p { margin-top:14px; font-size:15px; color:var(--text-light); }

/* Main form section */
main { flex:1; padding:48px 0 64px; }

.field { margin-bottom:28px; }
.field label {
  display:block;
  font-size:12px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--dark);
  font-weight:500;
  margin-bottom:12px;
}

.field input[type="date"],
.field input[type="text"],
.field input[type="tel"],
.field select {
  width:100%;
  background:var(--warm-white);
  border:1px solid var(--border);
  padding:16px 18px;
  font-family:'Jost',sans-serif;
  font-size:15px;
  color:var(--text);
  outline:none;
  transition:border-color .2s;
  appearance:none;
  -webkit-appearance:none;
}
.field input:focus, .field select:focus { border-color:var(--accent); }
.field input::placeholder { color:var(--text-light); opacity:.7; }
.field input:disabled, .field select:disabled { color:var(--text-light); cursor:not-allowed; opacity:.75; }

.field select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%237A6E66' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 18px center;
  padding-right:44px;
  cursor:pointer;
}
.field select:disabled { cursor:not-allowed; }

.field-hint { margin-top:10px; font-size:13px; color:var(--text-light); line-height:1.5; }
.field-error { margin-top:10px; font-size:13px; color:var(--danger); display:none; }
.field-error.show { display:block; }

.btn-submit {
  width:100%;
  background:var(--dark);
  color:var(--warm-white);
  border:none;
  padding:19px 20px;
  font-family:'Jost',sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:2.5px;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s;
  margin-top:8px;
}
.btn-submit:hover { background:var(--accent); }
.btn-submit:disabled { background:var(--taupe); cursor:not-allowed; }

/* Alerts */
.alert { padding:16px 20px; margin-bottom:28px; font-size:14px; border-left:3px solid; }
.alert-ok { background:rgba(107,143,107,.1); border-color:var(--success); color:#4F6B4F; }
.alert-err { background:rgba(192,97,79,.1); border-color:var(--danger); color:#8C4737; }

/* Success screen */
.success-box { text-align:center; padding:48px 24px; }
.success-box .icon { font-size:40px; margin-bottom:20px; }
.success-box h2 { font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:500; color:var(--dark); margin-bottom:14px; }
.success-box p { color:var(--text-light); font-size:15px; margin-bottom:6px; }
.success-box .details { margin:24px auto 32px; max-width:360px; text-align:left; background:var(--warm-white); border:1px solid var(--border); padding:20px 24px; }
.success-box .details div { display:flex; justify-content:space-between; padding:6px 0; font-size:14px; }
.success-box .details span:first-child { color:var(--text-light); }
.success-box .details span:last-child { color:var(--dark); font-weight:500; }
.success-box a.btn-submit { display:inline-block; width:auto; text-decoration:none; padding:16px 36px; }

/* Footer */
footer { border-top:1px solid var(--border); padding:28px 0; text-align:center; }
footer p { font-size:13px; color:var(--text-light); }
footer a { color:var(--brown); text-decoration:none; font-weight:500; }
footer a:hover { color:var(--accent); }
footer .copyright { margin-top:6px; font-size:12px; color:var(--taupe); }

.spinner {
  display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; margin-right:8px;
}
@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width:560px) {
  .site-header h1 { font-size:34px; letter-spacing:4px; }
  .site-header { padding:40px 0 24px; }
  main { padding:32px 0 48px; }
}