/* ================================================================
   MEDI-DENT · components.css
   Przyciski, karty, cennik, opinie, FAQ, CTA block, floating btn
   ================================================================ */

/* ── PRZYCISKI ──────────────────────────────────────────────────── */

.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  font-family:     var(--font-body);
  font-size:       var(--text-xs);
  font-weight:     500;
  letter-spacing:  0.10em;
  text-transform:  uppercase;
  padding:         0.85rem 2rem;
  border-radius:   var(--radius-pill);
  cursor:          pointer;
  white-space:     nowrap;
  transition:      background  0.35s var(--ease-out),
                   color       0.35s var(--ease-out),
                   border-color 0.35s var(--ease-out),
                   transform   0.35s var(--ease-out),
                   box-shadow  0.35s var(--ease-out);
  text-decoration: none;
}

/* Primary */
.btn--primary {
  background:   var(--color-navy);
  color:        var(--color-white);
  border:       1px solid var(--color-navy);
}

.btn--primary:hover {
  background: var(--color-navy-80);
  transform:  translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Outline */
.btn--outline {
  background:   transparent;
  color:        var(--color-navy);
  border:       1px solid var(--color-navy);
}

.btn--outline:hover {
  background: var(--color-navy);
  color:      var(--color-white);
}

/* Light (na ciemnym tle) */
.btn--light {
  background: var(--color-white);
  color:      var(--color-navy);
  border:     1px solid var(--color-white);
}

.btn--light:hover {
  background: transparent;
  color:      var(--color-white);
}

/* Ghost (link z strzałką) */
.btn--ghost {
  background:     none;
  border:         none;
  padding-inline: 0;
  color:          var(--color-navy);
  font-weight:    400;
  letter-spacing: 0.06em;
  position:       relative;
}

.btn--ghost::after {
  content:    '\2192';
  display:    inline-block;
  margin-left: var(--space-2);
  transition: transform 0.35s var(--ease-spring);
}

.btn--ghost:hover::after {
  transform: translateX(6px);
}

/* Gold (główne CTA "Zadzwoń" — używaj bardzo oszczędnie) */
.btn--gold {
  background: var(--color-gold);
  color:      var(--color-white);
  border:     1px solid var(--color-gold);
}

.btn--gold:hover {
  background: var(--color-gold-hover);
  transform:  translateY(-1px);
}

/* Small */
.btn--sm {
  padding:   0.65rem 1.5rem;
  font-size: 0.68rem;
}

/* ── KARTY USŁUG ────────────────────────────────────────────────── */

.service-card {
  background:    var(--color-white);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-8);
  transition:    transform   0.35s var(--ease-out),
                 box-shadow  0.35s var(--ease-out),
                 border-color 0.35s var(--ease-out);
}

.service-card:hover {
  transform:    translateY(-4px);
  box-shadow:   var(--shadow-md);
  border-color: var(--color-navy-20);
}

.service-card__icon-wrap {
  width:         40px;
  height:        40px;
  margin-bottom: var(--space-6);
}

.service-card__icon-wrap svg {
  width:        40px;
  height:       40px;
  stroke:       var(--color-navy-40);
  fill:         none;
  stroke-width: 1.5;
}

.service-card__title {
  font-family:    var(--font-display);
  font-size:      var(--text-xl);
  font-weight:    400;
  color:          var(--color-navy);
  margin-bottom:  var(--space-3);
  line-height:    var(--leading-tight);
  letter-spacing: -0.01em;
}

.service-card__desc {
  font-family:  var(--font-body);
  font-size:    var(--text-sm);
  font-weight:  400;
  color:        var(--color-text-muted);
  line-height:  var(--leading-loose);
}

.service-card__link {
  display:        inline-flex;
  align-items:    center;
  margin-top:     var(--space-6);
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--color-navy-40);
  background:     none;
  border:         none;
  padding:        0;
  cursor:         pointer;
  transition:     color 0.25s var(--ease-out);
  text-decoration: none;
}

.service-card__link::after {
  content:     '\2192';
  margin-left: var(--space-2);
  display:     inline-block;
  transition:  transform 0.35s var(--ease-spring);
}

.service-card__link:hover {
  color: var(--color-navy);
}

.service-card__link:hover::after {
  transform: translateX(6px);
}

/* Karta wyróżniona */
.service-card--featured {
  background:   var(--color-navy);
  border-color: transparent;
}

.service-card--featured .service-card__icon-wrap svg {
  stroke: rgba(255, 255, 255, 0.50);
}

.service-card--featured .service-card__title {
  color: var(--color-white);
}

.service-card--featured .service-card__desc {
  color: rgba(255, 255, 255, 0.58);
}

.service-card--featured .service-card__link {
  color: rgba(255, 255, 255, 0.45);
}

.service-card--featured .service-card__link:hover {
  color: var(--color-white);
}

.service-card--featured:hover {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:   var(--shadow-lg);
}

/* ── KARTY WARTOŚCI ─────────────────────────────────────────────── */

.value-card {
  padding-top:  var(--space-8);
  padding-bottom: var(--space-8);
  border-top:   1px solid var(--color-border);
}

.value-card:first-child {
  border-top:  none;
  padding-top: 0;
}

.value-card__icon-wrap {
  margin-bottom: var(--space-5);
}

.value-card__icon-wrap svg {
  width:        32px;
  height:       32px;
  stroke:       var(--color-navy-20);
  fill:         none;
  stroke-width: 1.5;
}

.value-card__title {
  font-family:    var(--font-display);
  font-size:      var(--text-lg);
  font-weight:    400;
  color:          var(--color-navy);
  margin-bottom:  var(--space-3);
  letter-spacing: -0.01em;
  line-height:    var(--leading-tight);
}

.value-card__desc {
  font-family:  var(--font-body);
  font-size:    var(--text-sm);
  font-weight:  400;
  color:        var(--color-text-muted);
  line-height:  var(--leading-loose);
}

/* ── CENNIK ─────────────────────────────────────────────────────── */

/* Tabela — desktop */
.pricing-table {
  width:           100%;
  border-collapse: collapse;
}

.pricing-table thead tr {
  border-bottom: 1px solid var(--color-border-mid);
}

.pricing-table th {
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color:          var(--color-text-muted);
  text-align:     left;
  padding-bottom: var(--space-4);
  font-weight:    500;
}

.pricing-table td {
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  padding:        var(--space-4) 0;
  border-bottom:  1px solid var(--color-border);
  color:          var(--color-navy);
  vertical-align: baseline;
}

.pricing-table tr:hover td {
  background: var(--color-navy-06);
}

.pricing-table tr:last-child td {
  border-bottom: none;
}

.pricing-name {
  font-weight: 400;
}

.pricing-price {
  font-family:    var(--font-display);
  font-size:      var(--text-base);
  font-weight:    400;
  color:          var(--color-navy);
  text-align:     right;
  white-space:    nowrap;
  letter-spacing: -0.01em;
}

/* Karty — mobile */
.pricing-card {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  border-bottom:   1px solid var(--color-border);
  padding:         var(--space-5) 0;
}

.pricing-card:last-child {
  border-bottom: none;
}

.pricing-card__name {
  font-family: var(--font-body);
  font-size:   var(--text-sm);
  color:       var(--color-navy);
  font-weight: 400;
  flex:        1;
  padding-right: var(--space-4);
}

.pricing-card__price {
  font-family:    var(--font-display);
  font-size:      var(--text-base);
  font-weight:    400;
  color:          var(--color-navy);
  letter-spacing: -0.01em;
  white-space:    nowrap;
}

/* Sekcja cennika */
.pricing-section {
  margin-bottom: var(--space-12);
}

.pricing-section__title {
  font-family:    var(--font-display);
  font-size:      var(--text-xl);
  font-weight:    300;
  color:          var(--color-navy);
  letter-spacing: -0.01em;
  margin-bottom:  var(--space-6);
  padding-bottom: var(--space-4);
}

/* ── OPINIE ─────────────────────────────────────────────────────── */

.testimonial-card {
  background:    var(--color-white);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-8);
  position:      relative;
}

.testimonial-card::before {
  content:         '\201C';
  position:        absolute;
  top:             var(--space-3);
  right:           var(--space-6);
  font-family:     var(--font-display);
  font-size:       5rem;
  line-height:     1;
  color:           var(--color-navy-06);
  pointer-events:  none;
  user-select:     none;
}

.testimonial-card__stars {
  font-size:      0.8rem;
  color:          var(--color-gold);
  letter-spacing: 0.05em;
  margin-bottom:  var(--space-4);
}

.testimonial-card__text {
  font-family:   var(--font-body);
  font-size:     var(--text-sm);
  font-weight:   400;
  color:         var(--color-navy-80);
  line-height:   var(--leading-loose);
  font-style:    italic;
  margin-bottom: var(--space-6);
}

.testimonial-card__author {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
}

.testimonial-card__avatar {
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      var(--color-navy-06);
  color:           var(--color-navy-60);
  font-family:     var(--font-body);
  font-size:       var(--text-sm);
  font-weight:     500;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.testimonial-card__name {
  font-family: var(--font-body);
  font-size:   var(--text-sm);
  font-weight: 500;
  color:       var(--color-navy);
}

.testimonial-card__role {
  font-family: var(--font-body);
  font-size:   var(--text-xs);
  color:       var(--color-text-muted);
  margin-top:  2px;
}

/* ── FAQ ────────────────────────────────────────────────────────── */

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item:first-child {
  border-top: 1px solid var(--color-border);
}

.faq-question {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         var(--space-6) 0;
  cursor:          pointer;
  font-family:     var(--font-body);
  font-size:       var(--text-base);
  font-weight:     400;
  color:           var(--color-navy);
  gap:             var(--space-4);
  text-align:      left;
  background:      none;
  border:          none;
  width:           100%;
  transition:      color 0.20s var(--ease-out);
}

.faq-question:hover {
  color: var(--color-navy-60);
}

.faq-question__icon {
  width:       20px;
  height:      20px;
  flex-shrink: 0;
  position:    relative;
}

.faq-question__icon svg {
  stroke:       var(--color-navy-40);
  fill:         none;
  stroke-width: 1.5;
  width:        20px;
  height:       20px;
}

/* Pionowa kreska ikony obraca się przy otwarciu */
.faq-question__icon .icon-v {
  transition: transform 0.30s var(--ease-out);
  transform-origin: center;
}

.faq-item.is-open .faq-question__icon .icon-v {
  transform: rotate(90deg);
}

.faq-answer {
  max-height: 0;
  overflow:   hidden;
  transition: max-height 0.40s var(--ease-out);
}

.faq-answer.is-open {
  max-height: 600px;
}

.faq-answer__text {
  padding-bottom: var(--space-6);
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  font-weight:    400;
  color:          var(--color-text-muted);
  line-height:    var(--leading-loose);
}

/* ── CTA BLOCK ──────────────────────────────────────────────────── */

.cta-block {
  background:  var(--color-navy);
  padding:     clamp(var(--space-16), 10vw, var(--space-24)) var(--space-8);
  text-align:  center;
}

.cta-block__label {
  display:        block;
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.30);
  margin-bottom:  var(--space-4);
}

.cta-block__title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 5vw, 3.2rem);
  font-weight:    300;
  color:          var(--color-white);
  line-height:    1.1;
  letter-spacing: -0.02em;
  margin-bottom:  var(--space-4);
}

.cta-block__subtitle {
  font-family:   var(--font-body);
  font-size:     var(--text-base);
  font-weight:   400;
  color:         rgba(255, 255, 255, 0.48);
  line-height:   var(--leading-loose);
  max-width:     400px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

.cta-block__phone {
  font-family:    var(--font-display);
  font-size:      clamp(1.8rem, 4vw, 2.8rem);
  font-weight:    300;
  color:          var(--color-white);
  letter-spacing: -0.02em;
  display:        block;
  margin-bottom:  var(--space-8);
  transition:     opacity 0.25s var(--ease-out);
  text-decoration: none;
}

.cta-block__phone:hover {
  opacity: 0.75;
}

/* ── FLOATING PHONE BUTTON (tylko mobile) ───────────────────────── */

@keyframes pulse-soft {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.floating-cta {
  position:       fixed;
  bottom:         var(--space-6);
  right:          var(--space-5);
  z-index:        50;
  display:        flex;
  align-items:    center;
  gap:            var(--space-2);
  background:     var(--color-navy);
  color:          var(--color-white);
  border-radius:  var(--radius-pill);
  padding:        var(--space-3) var(--space-5);
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  font-weight:    500;
  letter-spacing: 0.04em;
  box-shadow:     var(--shadow-lg);
  opacity:        0;
  pointer-events: none;
  transform:      translateY(8px);
  transition:     opacity   0.30s var(--ease-out),
                  transform 0.30s var(--ease-out);
  text-decoration: none;
  border:         none;
  cursor:         pointer;
}

.floating-cta svg {
  width:        16px;
  height:       16px;
  stroke:       var(--color-white);
  fill:         none;
  stroke-width: 1.5;
  flex-shrink:  0;
}

.floating-cta.is-visible {
  opacity:        1;
  pointer-events: auto;
  transform:      translateY(0);
  animation:      pulse-soft 3s var(--ease-out) 2.5s infinite;
}

/* ── BADGE ──────────────────────────────────────────────────────── */

.badge {
  display:        inline-block;
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:        0.35rem 0.9rem;
  background:     var(--color-navy-06);
  color:          var(--color-navy-60);
  border-radius:  var(--radius-pill);
}

/* ── PULL QUOTE ─────────────────────────────────────────────────── */

.pull-quote {
  border-left:  2px solid var(--color-gold);
  padding-left: var(--space-6);
  margin-block: var(--space-8);
}

.pull-quote__text {
  font-family:    var(--font-display);
  font-size:      var(--text-lg);
  font-weight:    300;
  color:          var(--color-navy);
  line-height:    var(--leading-normal);
  letter-spacing: -0.01em;
  font-style:     italic;
}

/* ── SECTION HEADER ─────────────────────────────────────────────── */

.section-header {
  margin-bottom: clamp(var(--space-10), 6vw, var(--space-16));
}

.section-header--centered {
  text-align: center;
}

.section-header--centered .divider {
  margin-inline: auto;
}

.section-header__title {
  font-family:    var(--font-display);
  font-size:      clamp(1.8rem, 4vw, var(--text-3xl));
  font-weight:    300;
  color:          var(--color-navy);
  letter-spacing: -0.02em;
  line-height:    var(--leading-tight);
  margin-bottom:  var(--space-4);
}

.section-header__subtitle {
  font-family: var(--font-body);
  font-size:   var(--text-md);
  font-weight: 400;
  color:       var(--color-text-muted);
  line-height: var(--leading-loose);
  max-width:   520px;
}

.section-header--centered .section-header__subtitle {
  margin-inline: auto;
}

/* ── CONTACT INFO ───────────────────────────────────────────────── */

.contact-info__item {
  display:       flex;
  gap:           var(--space-4);
  align-items:   flex-start;
  margin-bottom: var(--space-8);
}

.contact-info__icon {
  width:        20px;
  height:       20px;
  flex-shrink:  0;
  margin-top:   2px;
}

.contact-info__icon svg {
  width:        20px;
  height:       20px;
  stroke:       var(--color-navy-40);
  fill:         none;
  stroke-width: 1.5;
}

.contact-info__label {
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-1);
}

.contact-info__value {
  font-family:  var(--font-body);
  font-size:    var(--text-base);
  font-weight:  400;
  color:        var(--color-navy);
  line-height:  var(--leading-normal);
}

.contact-info__value a {
  color:       var(--color-navy);
  transition:  color 0.25s var(--ease-out);
}

.contact-info__value a:hover {
  color: var(--color-gold);
}

/* ── GODZINY OTWARCIA ───────────────────────────────────────────── */

.hours-table {
  width:      100%;
  border-top: 1px solid var(--color-border);
}

.hours-table__row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         var(--space-3) 0;
  border-bottom:   1px solid var(--color-border);
  font-family:     var(--font-body);
  font-size:       var(--text-sm);
}

.hours-table__day {
  color:       var(--color-navy);
  font-weight: 400;
}

.hours-table__time {
  color:       var(--color-text-muted);
  font-weight: 400;
}

.hours-table__row--closed .hours-table__time {
  color: var(--color-navy-40);
}

/* ── MAP WRAPPER ────────────────────────────────────────────────── */

.map-wrap {
  border-radius: var(--radius-md);
  overflow:      hidden;
  height:        340px;
  border:        1px solid var(--color-border);
}

.map-wrap iframe {
  width:  100%;
  height: 100%;
  border: none;
  display: block;
}