/*!
 * Template Name: Hostina Template
 * Author: hostk.com
 * Version: 1.0
 * Description: Modern Responsive Bootstrap Hosting Template
 * Created: 2025
 */
 
 /* Contact Information Styles */
.contact-info {
  padding: 2rem 0;
}

.contact-info .contact-item {
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.contact-info .contact-icon {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  background: #00000012;
  border-radius: var(--radius-16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.contact-info .contact-details {
  flex: 1;
  width: 100%;
}

.contact-info .contact-label {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.contact-info .contact-text {
  font-size: 1.7rem;
  margin-bottom: 0;
  line-height: 1.5;
  font-weight: 600;
}

/* Contact Form Styles */
.contact-form-container {
  background: white;
  padding: 4rem 3rem;
  border-radius: var(--radius-24);
  box-shadow: var(--shadow-special);
  border: 1px solid #f1f3f4;
}

.contact-form-container .form-heading {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 3rem;
  text-align: left;
}

.contact-form-container .contact-form {
  width: 100%;
}

.contact-form-container .form-input,
.contact-form-container .form-textarea {
  padding: 1.5rem 2rem !important;
  border-radius: var(--radius-16);
  font-size: 1.5rem;
  font-weight: 500;
  transition: var(--transition-base);
}

.contact-form-container .form-input::placeholder,
.contact-form-container .form-textarea::placeholder {
  color: var(--color-text);
  font-weight: 400;
}

.contact-form-container .form-textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
  background-color: var(--color-light-gray);
}

/* Map Section */
.map-container {
  width: 100%;
  height: 450px;
  overflow: hidden;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  /* The embed is a cross-origin iframe, so its contents cannot be styled from
     this page, and Google's keyless ?output=embed accepts no style parameters.
     A filter on the element is the only route that does not mean replacing the
     map: it composites over the rendered frame without needing access to it.
     invert flips the light basemap dark; hue-rotate(180deg) puts the hues back
     the right way round afterwards, so water reads blue rather than orange. */
  filter: invert(92%) hue-rotate(180deg) saturate(0.78) contrast(0.88) brightness(0.94);
  transition: var(--transition-base);
}

/* Hover lifts it slightly rather than clearing the filter - dropping it would
   flash the map back to white against a dark page. */
.map-container:hover iframe {
  filter: invert(92%) hue-rotate(180deg) saturate(0.92) contrast(0.92) brightness(1.02);
}

/* Loading States */
.contact-form.loading {
  opacity: 0.7;
  pointer-events: none;
}

.contact-form.loading .submit-btn {
  position: relative;
  color: transparent;
}

.contact-form.loading .submit-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2rem;
  margin: -1rem 0 0 -1rem;
  border: 2px solid transparent;
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Success/Error States */
.form-message {
  padding: 1.5rem 2rem;
  border-radius: var(--radius-16);
  margin-bottom: 2rem;
  font-size: 1.5rem;
  font-weight: 500;
}

.form-message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.form-message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Animation Enhancements */
.contact-item {
  transition: var(--transition-base);
}

.contact-item:hover {
  transform: translateX(10px);
}

.contact-item:hover .contact-icon {
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

/* Responsive Design */
@media (max-width: 767px) {
  .contact-form-container {
    padding: 3rem 2rem;
  }

  .contact-form-container .form-heading {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  .contact-form-container .form-input,
  .contact-form-container .form-textarea {
    padding: 1.2rem 1.5rem;
    font-size: 1.4rem;
  }

  .contact-form-container .submit-btn {
    padding: 1.5rem 3rem;
    font-size: 1.4rem;
    width: 100%;
  }

  .contact-info {
    text-align: center;
  }

  .contact-info .contact-item {
    flex-direction: column;
    text-align: center;
  }

  .contact-info .contact-icon {
    align-self: center;
    margin-bottom: 1rem;
  }

  .map-container {
    height: 300px;
  }
}

/* ==========================================================================
   Contact form: honeypot field and submit status message.
   ========================================================================== */

/* Off-screen, not display:none. A field a script cannot detect as hidden is
   what actually catches an unsophisticated bot; one it can see is skipped. */
.contact-form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form-status {
  margin-top: 1rem;
  padding: 0.9rem 1.2rem;
  border-radius: 10px;
  font-size: 0.95rem;
}

.contact-form-status.is-sending {
  background: rgba(13, 110, 253, 0.08);
  color: #0d6efd;
}

.contact-form-status.is-ok {
  background: rgba(25, 135, 84, 0.1);
  color: #146c43;
}

.contact-form-status.is-error {
  background: rgba(220, 53, 69, 0.1);
  color: #b02a37;
}

button.primary-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}


/* ==========================================================================
   "Fastest route" cards.

   An existing customer with a broken site should not be queuing behind
   pre-sales mail, so these route the three real cases into WHMCS. Sizes use
   this theme's 62.5% root (1rem = 10px), matching the rest of the sheet.
   ========================================================================== */

.contact-form-container .form-intro {
  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1.65;
  margin: -0.8rem 0 2.4rem;
}

.contact-routes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
}

@media (max-width: 991px) {
  .contact-routes__grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
}

.contact-route {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 3rem 2.6rem;
  border-radius: var(--radius-24);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.contact-route:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.contact-route__ico {
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(60% 60% at 50% 50%, #151515 0%, #0f0f0f 100%);
  margin-bottom: 1.8rem;
}

.contact-route__ico iconify-icon {
  font-size: 2.6rem;
  color: #e8e8e8;
  line-height: 1;
}

.contact-route h3 {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.9rem;
}

.contact-route p {
  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1.65;
  margin-bottom: 1.8rem;
}

.contact-route a {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.contact-route a iconify-icon {
  font-size: 1.7rem;
  transition: transform 0.3s ease;
}

.contact-route a:hover {
  color: var(--color-primary);
}

.contact-route a:hover iconify-icon {
  transform: translateX(3px);
}

/* ==========================================================================
   The Select Service field

   .form-input gave it the padding, radius and type of its neighbours, but a
   <select> keeps the operating system's own control until appearance is
   cleared - so it arrived with a native chevron jammed against the right
   edge, a different weight to every other field in the form and a different
   look on every OS.

   The caret is drawn as a background image instead: it is the same chevron
   the header uses for its dropdowns, and it is inset from the edge rather
   than hard against it, matching what was done to the panel's selects.
   ========================================================================== */
.contact-form-container select.form-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101a2b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2rem center;
  background-size: 1.4rem;

  /* Room for the caret, so a long service name never runs under it. */
  padding-right: 4.6rem !important;
  cursor: pointer;
}

/* Firefox draws its own arrow even with appearance:none unless the text is
   given a transparent shadow trick; simpler to just hide the widget. */
.contact-form-container select.form-input::-ms-expand {
  display: none;
}

/* Until a service is chosen the control is :invalid, because it is required
   and its first option has an empty value. That is exactly the placeholder
   state, so it gets the placeholder colour the other fields use. */
.contact-form-container select.form-input:invalid {
  color: var(--color-text);
  font-weight: 400;
}

.contact-form-container select.form-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(56, 130, 255, 0.25);
}

/* The dropdown list itself is drawn by the OS. Only these two properties
   carry across, and setting them stops a dark-mode browser rendering white
   text on a white list. */
.contact-form-container select.form-input option {
  background: #ffffff;
  color: #101a2b;
}

/* ==========================================================================
   Two-click map placeholder.

   The Google embed is not loaded until this button is pressed, so that the
   privacy policy's "this site sets no cookies at all" holds for anyone who
   does not ask for the map. See src/assets/js/main/map-consent.js.

   It occupies the same .map-container box as the iframe it replaces, so the
   section height does not change when the map appears.
   ========================================================================== */

.map-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  width: 100%;
  height: 100%;
  padding: 2rem;
  text-align: center;

  /* A shade off the page rather than the same black, so the panel reads as a
     surface waiting to be filled rather than a gap in the layout. */
  background: #0d111c;
  border: 1px solid #1e2536;
}

.map-consent__icon {
  font-size: 3rem;
  color: var(--color-secondary);
}

.map-consent__note {
  max-width: 46ch;
  margin: 0;
  color: var(--color-text-dark);
  font-size: 1.4rem;
  line-height: 1.6;
}

.map-consent__button {
  cursor: pointer;
}

@media (max-width: 575px) {
  .map-consent {
    padding: 1.5rem;
  }

  .map-consent__note {
    font-size: 1.3rem;
  }
}