/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

#price-page {
  --accent:       #ABA582;
  --accent-soft:  rgba(171,165,130,0.09);
  --accent-line:  rgba(171,165,130,0.28);
  --black:        #000000;
  --muted:        #5a5a5a;
  --bg:           #F8F7F4;
  --white:        #ffffff;
  --radius:       25px;
  --shadow:       0 2px 24px rgba(0,0,0,0.055), 0 1px 4px rgba(0,0,0,0.03);
}

#price-page .us-wrapper {
  width: min(1264px, 100% - clamp(30px, 4.2vw, 96px));
  margin-inline: auto;
}

/* ─── Page header block ─── */
#price-page .page-header {
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--accent-line);
  margin-bottom: 64px;
  animation: fadeDown .6s ease both;
}

#price-page .page-header-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

#price-page h1 {
  font-size: 40px;
  font-weight: 500;
  color: var(--black);
  letter-spacing: -.5px;
  line-height: 1.15;
}

#price-page .header-note {
  text-align: right;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.75;
}
#price-page .header-note strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  margin-bottom: 2px;
}

/* ─── Content area ─── */
#price-page .price-content {
  padding-bottom: 80px;
}

/* ─── Section ─── */
#price-page .section {
  margin-bottom: 44px;
  animation: fadeUp .6s ease both;
}
#price-page .section:nth-child(1){ animation-delay:.06s }
#price-page .section:nth-child(2){ animation-delay:.13s }
#price-page .section:nth-child(3){ animation-delay:.20s }
#price-page .section:nth-child(4){ animation-delay:.27s }

#price-page .section-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--accent-line);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ─── Section title ─── */
#price-page .section-head {
  padding: 28px 40px 22px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-line);
}

#price-page h2 {
  font-size: 29px;
  font-weight: 500;
  color: var(--black);
  letter-spacing: -.3px;
  line-height: 1.2;
}

/* ─── Column labels ─── */
#price-page .col-labels {
  display: grid;
  grid-template-columns: 1fr 190px 210px;
  padding: 12px 40px;
  border-bottom: 1px solid var(--accent-line);
  background: rgba(171,165,130,0.04);
}

#price-page .col-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
}
#price-page .col-label.c { text-align: center; }
#price-page .col-label.r { text-align: right;  }

/* ─── Data row ─── */
#price-page .row {
  display: grid;
  grid-template-columns: 1fr 190px 210px;
  align-items: center;
  padding: 18px 40px;
  border-bottom: 1px solid var(--accent-line);
  transition: background .16s;
}
#price-page .row:last-child { border-bottom: none; }
#price-page .row:hover { background: var(--accent-soft); }

#price-page .cell {
  font-size: 16px;
  color: var(--black);
  font-weight: 400;
  line-height: 1.5;
}
#price-page .cell-name  { padding-right: 28px; }
#price-page .cell-term  { text-align: center; color: var(--muted); font-size: 14px; padding: 0 12px; }
#price-page .cell-price { text-align: right; font-weight: 500; white-space: nowrap; }

/* ─── Footer block ─── */
#price-page .page-footer {
  padding: 52px 0 68px;
  border-top: 1px solid var(--accent-line);
  animation: fadeUp .6s ease both .3s;
}

#price-page .footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

#price-page .footer-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.75;
  max-width: 560px;
}
#price-page .footer-note strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--black);
  margin-bottom: 4px;
}

#price-page .footer-cta {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--black);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 30px;
  text-decoration: none;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
#price-page .footer-cta:hover {
  background: var(--accent);
  color: var(--white);
}

/* ─── Keyframes ─── */
@keyframes fadeDown {
  from { opacity:0; transform:translateY(-16px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ══════════════════════════════════════
   MOBILE ≤ 760px → card layout
══════════════════════════════════════ */
@media (max-width: 760px) {

  #price-page .page-header { padding: 40px 0 30px; margin-bottom: 36px; }
  #price-page h1 { font-size: 26px; }
  #price-page .page-header-inner { flex-direction: column; align-items: flex-start; }
  #price-page .header-note { text-align: left; }

  #price-page .col-labels { display: none; }

  #price-page .section-head { padding: 20px 20px 16px; }
  #price-page h2 { font-size: 20px; }

  #price-page .row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px 20px;
  }

  #price-page .cell         { padding: 0; width: 100%; font-size: 15px; }
  #price-page .cell-name    { font-weight: 500; }
  #price-page .cell-term    { text-align: left; font-size: 13px; color: var(--muted); }
  #price-page .cell-price   { text-align: left; font-size: 15px; }

  #price-page #price-page .cell-term::before {
    content: "Строк: ";
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
  }
  #price-page .cell-price::before {
    content: "Вартість: ";
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
  }

  #price-page .footer-inner { flex-direction: column; align-items: flex-start; }
  #price-page .footer-cta   { width: 100%; text-align: center; }
}