/*
 Theme Name:   Astra Child
 Theme URI:    https://wpastra.com/
 Description:  Child theme for Astra
 Author:       Your Name
 Author URI:   https://example.com/
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child
*/

/* =========================
   Cookie banner
========================= */
#cookie-banner{
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: auto;
  max-width: 90%;
}

.cookie-content{
  background: #ffffff;
  color: #333;
  padding: 20px 24px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  max-width: 700px;
}

.cookie-text{
  font-size: 14px;
  line-height: 1.5;
}

.cookie-text a{
  color: #000;
  text-decoration: underline;
}

#cookie-accept{
  background: #FFD400;
  color: #000;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
  white-space: nowrap;
}

#cookie-accept:hover{ opacity: 0.9; }

@media (max-width: 768px){
  #cookie-banner{
    left: 12px;
    right: 12px;
    transform: none;
    width: auto;
    max-width: none;
    bottom: 15px;
  }

  .cookie-content{
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    padding: 18px;
  }

  .cookie-text{ text-align: left; }

  #cookie-accept{
    width: 100%;
    text-align: center;
    padding: 12px;
  }
}

/* =========================
   Mobile call button
========================= */
.mobile-call-btn{
  display: none;
}

@media (max-width: 768px){
  .mobile-call-btn{
    display: block;
    position: fixed;
    right: 20px;
    bottom: 110px;
    z-index: 9998;
  }

  .mobile-call-btn a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #FFD400;
    color: #000;
    font-size: 24px;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    animation: callShake 2.5s infinite;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-call-btn a:hover{ transform: scale(1.05); }

  @keyframes callShake{
    0% { transform: rotate(0deg); }
    2% { transform: rotate(-8deg); }
    4% { transform: rotate(8deg); }
    6% { transform: rotate(-6deg); }
    8% { transform: rotate(6deg); }
    10%{ transform: rotate(0deg); }
    100%{ transform: rotate(0deg); }
  }
}

/* =========================
   Modal
========================= */
.cf7-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, visibility .15s ease;
}

.cf7-modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cf7-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 0;
}

html.cf7-modal-open,
html.cf7-modal-open body{
  overflow: hidden;
}

.cf7-modal__dialog{
  position: relative;
  z-index: 1;

  width: calc(100% - 32px);
  max-width: 560px;
  margin: 10vh auto 0;

  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.22);
  padding: 22px 18px 18px;
}

.cf7-modal__title{
  margin: 6px 44px 14px 4px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  color: #111;
}

.cf7-modal__close{
  position:absolute;
  top: 12px;
  right: 12px;

  width: 36px;
  height: 36px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;

  background: rgba(245,245,247,0.95);
  color: rgba(60,60,67,0.75);

  font-size: 20px;
  line-height: 1;
  cursor: pointer;

  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.cf7-modal__close:hover,
.cf7-modal__close:focus,
.cf7-modal__close:active{
  background: rgba(245,245,247,0.95);
  color: rgba(60,60,67,0.75);
  outline: none;
  box-shadow: none;
  transform: none;
}

.cf7-modal__close::-moz-focus-inner{ border:0; }

/* =========================
   Multi-photo form (hp-form)
========================= */
.hp-form{ margin:0; }

/* контейнер (чуть воздуха на мобиле/в модалке) */
.hp-form__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 14px;
}

/* чтобы на маленьких экранах не прилипало */
#cf7-modal .hp-form__grid{
  gap: 12px 12px;
}

.hp-field{ display:block; }
.hp-field--full{ grid-column: 1 / -1; }

.hp-label{
  display:block;
  font-weight: 700;
  margin: 0 0 8px;
  color: #111;
}

/* inputs */
input.hp-input{
  width:100%;
  box-sizing:border-box;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.18);
  font-size: 15px;
  outline: none;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.hp-input:focus{
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 0 0 3px rgba(255, 212, 0, .25); /* желтый ореол */
}

.hp-input::placeholder{ color: rgba(0,0,0,.35); }

/* honeypot */
.hp-hp{ display:none !important; }

/* file input hidden */
.hp-file{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}

/* upload button */
.hp-filebtn{
  display:block;
  width:100%;
  text-align:center;
  padding: 14px 16px;
  border-radius: 14px;
  background: #d6d6d6;
  color:#000;
  font-weight: 700;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}

.hp-filebtn:hover{
  background: #cfcfcf;
}

.hp-filebtn:active{
  transform: translateY(1px);
}

.hp-filehint{
  margin-top: 8px;
  font-size: 13px;
  color: rgba(0,0,0,.6);
}

/* consent */
.hp-consent{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  font-size: 14px;
  line-height: 1.35;
  color: #111;
}

.hp-consent input[type="checkbox"]{
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: #FFD400; /* фирменный желтый */
}

.hp-consent a{ color:#DECE00 !important; }

/* submit */
.hp-submit{
  width:100%;
  border:0;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 800;
  cursor:pointer;
  background:#000;
  color:#fff;
  transition: background .15s ease, color .15s ease, transform .05s ease, box-shadow .15s ease;
}

.hp-submit:hover{
  background:#FFD400;   /* желтый ховер */
  color:#000;
}

.hp-submit:active{
  transform: translateY(1px);
}

.hp-submit:disabled{
  opacity:.75;
  cursor: not-allowed;
}

/* notices */
.hp-form__notice{
  grid-column: 1 / -1;
  padding: 14px 14px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  margin-top: 6px;
  border: 1px solid rgba(0,0,0,.12);
}

.hp-form__notice--hidden{ display:none; }

/* держим фирменные цвета: зелёный/красный не используем */
.hp-form__notice--ok{
  background: rgba(255, 212, 0, .18);      /* желтый */
  border-color: rgba(255, 212, 0, .55);
  color: #111;
}

.hp-form__notice--err{
  background: rgba(0, 0, 0, .06);          /* серый */
  border-color: rgba(0, 0, 0, .18);
  color: #111;
}

/* =========================
   Mobile tuning
========================= */
@media (max-width: 520px){
  .hp-form__grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hp-label{
    margin-bottom: 6px;
    font-size: 15px;
  }

  input.hp-input{
    padding: 13px 14px;
    border-radius: 14px;
    font-size: 16px; /* чтобы iOS не зумил инпуты */
  }

  .hp-filebtn{
    padding: 14px 14px;
    border-radius: 14px;
    font-size: 16px;
  }

  .hp-consent{
    gap: 10px;
    font-size: 14px;
    line-height: 1.35;
  }

  .hp-submit{
    padding: 16px 14px;
    border-radius: 16px;
    font-size: 16px;
  }

  .hp-form__notice{
    padding: 14px 12px;
    border-radius: 14px;
    font-size: 15px;
  }
}

/* чуть шире мобилки (планшет/узкие экраны) */
@media (max-width: 820px){
  .hp-form__grid{ gap: 12px 12px; }
}


/* короткая форма — одна колонка даже на десктопе */
.hp-form--mini .hp-form__grid{
  grid-template-columns: 1fr;
}



/* FIX: показываем поля формы внутри модалки */
#cf7-modal .hp-form,
#cf7-modal .hp-form *{
  visibility: visible !important;
}

#cf7-modal .hp-form__grid{
  display: grid !important;
}

#cf7-modal .hp-field{
  display: block !important;
}

#cf7-modal .hp-field input.hp-input{
  display: block !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 44px;
}

#cf7-modal .hp-filebtn{
  display: block !important;
  opacity: 1 !important;
}

#cf7-modal .hp-filehint{
  display: block !important;
}