/*!
Theme Name: nessaa-theme
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: nessaa-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

nessaa-theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Alignments
--------------------------------------------- */
.alignleft {
  /*rtl:ignore*/
  float: left;

  /*rtl:ignore*/
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  /*rtl:ignore*/
  float: right;

  /*rtl:ignore*/
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}

/* =========================================
   THANK YOU PAGE
========================================= */

.thank-you-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  background: var(--color-background);
}

/* =========================================
   SECTION
========================================= */

.thank-you-section {
  width: 100%;
  padding: 120px 0;
}

/* =========================================
   CONTENT
========================================= */

.thank-you-content {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* =========================================
   ICON
========================================= */

.thank-you-icon {
  width: 82px;
  height: 82px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: var(--color-yellow);
  border: 1px solid rgba(50, 30, 30, 0.15);

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

.thank-you-icon span {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);

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

  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 500;
}

/* =========================================
   SUBTITLE
========================================= */

.thank-you-subtitle {
  display: block;
  margin-bottom: 16px;

  font-family: var(--font-body);
  font-size: var(--font-size-body-md);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--color-primary);
}

/* =========================================
   HEADING
========================================= */

.thank-you-content h1 {
  margin: 0 auto;

  max-width: 700px;

  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  font-weight: 400;
  line-height: 1.05;

  color: var(--color-primary);
}

.thank-you-content h1 span {
  display: block;
  color: var(--color-primary);
  font-style: italic;
}

/* =========================================
   DESCRIPTION
========================================= */

.thank-you-content p {
  max-width: 600px;
  margin: 28px auto 0;

  font-family: var(--font-body);
  font-size: var(--font-size-body-lg);
  line-height: 1.6;

  color: var(--color-rgba-dark);
}

/* =========================================
   BUTTONS
========================================= */

.thank-you-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;

  margin-top: 42px;
}

/* Primary Button */

.thank-you-actions .btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 170px;
  min-height: 54px;
  padding: 14px 28px;

  background: var(--color-primary);
  color: var(--color-white);

  border: 1px solid var(--color-primary);

  font-family: var(--font-body);
  font-size: var(--font-size-body-md);
  text-decoration: none;

  transition: all 0.3s ease;
}

.thank-you-actions .btn--primary:hover {
  background: transparent;
  color: var(--color-primary);
}

/* Outline Button */

.thank-you-actions .btn--outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 170px;
  min-height: 54px;
  padding: 14px 28px;

  background: transparent;
  color: var(--color-primary);

  border: 1px solid var(--color-primary);

  font-family: var(--font-body);
  font-size: var(--font-size-body-md);
  text-decoration: none;

  transition: all 0.3s ease;
}

.thank-you-actions .btn--outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {
  .thank-you-section {
    padding: 90px 0;
  }

  .thank-you-content h1 {
    font-size: 64px;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {
  .thank-you-page {
    min-height: 70vh;
  }

  .thank-you-section {
    padding: 70px 20px;
  }

  .thank-you-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 22px;
  }

  .thank-you-icon span {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }

  .thank-you-subtitle {
    margin-bottom: 12px;
  }

  .thank-you-content h1 {
    font-size: 48px;
    line-height: 1.08;
  }

  .thank-you-content p {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.6;
  }

  .thank-you-actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
  }

  .thank-you-actions .btn {
    width: 100%;
    max-width: 280px;
  }
}

/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {
  .thank-you-section {
    padding: 60px 16px;
  }

  .thank-you-content h1 {
    font-size: 40px;
  }

  .thank-you-content p {
    font-size: 15px;
  }
}

/* =========================================
   FLOATING ACTION BUTTONS
========================================= */

.floating-buttons-container {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* =========================================
   COMMON BUTTON
========================================= */

.float-btn {
  width: 58px;
  height: 58px;

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

  border-radius: 50%;

  text-decoration: none;

  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.16),
    0 2px 8px rgba(0, 0, 0, 0.08);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

  position: relative;
}

/* SVG */

.float-btn svg {
  width: 27px;
  height: 27px;

  display: block;

  fill: #ffffff;

  transition: transform 0.3s ease;
}

/* Hover */

.float-btn:hover {
  transform: translateY(-4px);

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.float-btn:hover svg {
  transform: scale(1.08);
}

/* =========================================
   PHONE
========================================= */

.float-phone {
  background: var(--color-primary);
}

/* =========================================
   WHATSAPP
========================================= */

.float-whatsapp {
  background: #25d366;
}

/* =========================================
   PULSE EFFECT
========================================= */

.float-phone::before,
.float-whatsapp::before {
  content: "";

  position: absolute;

  inset: -4px;

  border-radius: 50%;

  border: 1px solid currentColor;

  opacity: 0;

  transform: scale(0.85);

  animation: floatPulse 2.5s infinite;
}

.float-phone::before {
  color: var(--color-primary);
}

.float-whatsapp::before {
  color: #25d366;
}

@keyframes floatPulse {
  0% {
    opacity: 0.5;
    transform: scale(0.85);
  }

  70% {
    opacity: 0;
    transform: scale(1.25);
  }

  100% {
    opacity: 0;
    transform: scale(1.25);
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {
  .floating-buttons-container {
    right: 15px;
    bottom: 18px;
    gap: 10px;
  }

  .float-btn {
    width: 52px;
    height: 52px;
  }

  .float-btn svg {
    width: 24px;
    height: 24px;
  }
}