/* ═══════════════════════════════════════════════════
   RAPTAX MEDIA — CONTACT PAGE STYLES
═══════════════════════════════════════════════════ */

/* ─── PAGE HERO ──────────────────────────────────── */
.contact-hero {
  background:  var(--black);
  padding:     140px 0 80px;
  position:    relative;
  overflow:    hidden;
}

.contact-hero::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  height:     1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--lime),
    transparent
  );
}

.hero-glow {
  position:      absolute;
  top:           -100px;
  right:         -200px;
  width:         600px;
  height:        600px;
  background:    radial-gradient(
    circle,
    rgba(200,255,89,0.07) 0%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
}

/* ─── HERO INNER GRID ────────────────────────────── */
.contact-hero-inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   80px;
  align-items:           center;
}

.contact-hero-content {}

.page-hero-title {
  font-family:   var(--font-head);
  font-size:     clamp(2.5rem, 5vw, 4rem);
  font-weight:   800;
  line-height:   1.05;
  color:         var(--white);
  margin-bottom: 20px;
  margin-top:    12px;
}

.page-hero-title span { color: var(--lime); }

.page-hero-desc {
  font-size:     1rem;
  line-height:   1.8;
  color:         var(--gray);
  max-width:     480px;
  margin-bottom: 36px;
}

/* ─── HERO IMAGE ─────────────────────────────────── */
.contact-hero-img {
  position:      relative;
  border-radius: var(--radius-lg);
  overflow:      visible;
}

.contact-hero-img img {
  width:         100%;
  height:        420px;
  object-fit:    cover;
  border-radius: var(--radius-lg);
  border:        1px solid var(--border);
  display:       block;
}

.hero-img-badge-wrap {
  position:      absolute;
  bottom:        -20px;
  left:          50%;
  transform:     translateX(-50%);
  display:       flex;
  gap:           12px;
  width:         calc(100% - 40px);
}

.hero-info-badge {
  flex:       1;
  background: var(--surface);
  border:     1px solid var(--border);
  border-radius:   var(--radius-md);
  padding:         14px 16px;
  display:         flex;
  align-items:     center;
  gap:             12px;
  border-top:      2px solid var(--lime);
}

.badge-icon {
  width:           36px;
  height:          36px;
  background:      var(--lime-dim);
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--lime);
  flex-shrink:     0;
}

.badge-icon i {
  width:  16px;
  height: 16px;
}

.hero-info-badge strong {
  display:     block;
  font-size:   0.85rem;
  font-weight: 700;
  color:       var(--white);
}

.hero-info-badge span {
  display:   block;
  font-size: 0.75rem;
  color:     var(--gray);
  margin-top: 2px;
}

/* ─── QUICK BUTTONS ──────────────────────────────── */
.contact-quick-btns {
  display:   flex;
  gap:       12px;
  flex-wrap: wrap;
}

.quick-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       12px 20px;
  border-radius: var(--radius-sm);
  font-size:     0.85rem;
  font-weight:   600;
  transition:    var(--transition);
  border:        2px solid transparent;
}

.quick-btn i {
  width:  16px;
  height: 16px;
}

.quick-whatsapp {
  background:   #25D366;
  color:        var(--white);
  border-color: #25D366;
}

.quick-whatsapp:hover {
  background:   transparent;
  color:        #25D366;
}

.quick-call {
  background:   var(--lime);
  color:        var(--black);
  border-color: var(--lime);
}

.quick-call:hover {
  background:   transparent;
  color:        var(--lime);
}

.quick-email {
  background:   transparent;
  color:        var(--white);
  border-color: var(--border);
}

.quick-email:hover {
  border-color: var(--lime);
  color:        var(--lime);
}

/* ─── CONTACT SECTION ────────────────────────────── */
.contact-section {
  background: var(--black);
  border-top: 1px solid var(--border);
}

.contact-inner {
  display:               grid;
  grid-template-columns: 1fr 1.2fr;
  gap:                   64px;
  align-items:           start;
}

/* ─── CONTACT LEFT ───────────────────────────────── */
.contact-left {
  display:        flex;
  flex-direction: column;
  gap:            28px;
}

/* ─── CONTACT IMAGE ──────────────────────────────── */
.contact-img-wrap {
  position:      relative;
  border-radius: var(--radius-lg);
  overflow:      hidden;
  border:        1px solid var(--border);
}

.contact-img-wrap img {
  width:        100%;
  height:       280px;
  object-fit:   cover;
  display:      block;
  transition:   transform 0.6s ease;
}

.contact-img-wrap:hover img {
  transform: scale(1.04);
}

.contact-img-overlay {
  position:        absolute;
  bottom:          0;
  left:            0;
  right:           0;
  background:      linear-gradient(
    to top,
    rgba(19,19,19,0.96) 0%,
    transparent 100%
  );
  padding:         24px;
  display:         flex;
  align-items:     center;
  justify-content: space-around;
}

.overlay-stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4px;
}

.os-num {
  font-family: var(--font-head);
  font-size:   1.8rem;
  font-weight: 800;
  color:       var(--lime);
  line-height: 1;
}

.os-label {
  font-size:   0.72rem;
  font-weight: 600;
  color:       rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.overlay-divider {
  width:      1px;
  height:     40px;
  background: rgba(255,255,255,0.1);
}

/* ─── INFO CARDS ─────────────────────────────────── */
.info-cards {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.info-card {
  display:       flex;
  gap:           14px;
  align-items:   flex-start;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       16px 18px;
  transition:    var(--transition);
}

.info-card:hover {
  border-color: rgba(200,255,89,0.25);
  transform:    translateX(4px);
}

.info-icon {
  width:           40px;
  height:          40px;
  background:      var(--lime-dim);
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--lime);
  flex-shrink:     0;
  transition:      var(--transition);
}

.info-card:hover .info-icon {
  background: var(--lime);
  color:      var(--black);
}

.info-icon i {
  width:  18px;
  height: 18px;
}

.info-content h4 {
  font-family:   var(--font-head);
  font-size:     0.9rem;
  font-weight:   700;
  color:         var(--white);
  margin-bottom: 4px;
}

.info-content p {
  font-size:   0.84rem;
  line-height: 1.6;
  color:       var(--gray);
}

.info-content a {
  display:     block;
  font-size:   0.84rem;
  color:       var(--lime);
  font-weight: 600;
  transition:  var(--transition);
}

.info-content a:hover { color: var(--white); }

.info-content span {
  display:    block;
  font-size:  0.78rem;
  color:      var(--gray);
  margin-top: 2px;
}

/* ─── CONTACT SOCIALS ────────────────────────────── */
.contact-socials {}

.socials-label {
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--gray);
  margin-bottom:  12px;
}

.socials-row {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
}

.contact-social {
  display:       inline-flex;
  align-items:   center;
  gap:           7px;
  padding:       9px 14px;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size:     0.8rem;
  font-weight:   600;
  color:         var(--gray);
  transition:    var(--transition);
  flex:          1;
  justify-content: center;
}

.contact-social i {
  width:  15px;
  height: 15px;
}

.contact-social:hover {
  border-color: var(--lime);
  color:        var(--lime);
  background:   var(--lime-dim);
}

/* ─── CONTACT FORM WRAP ──────────────────────────── */
.contact-form-wrap {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       40px;
  border-top:    3px solid var(--lime);
}

.form-header {
  display:       flex;
  align-items:   flex-start;
  gap:           16px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.form-header-icon {
  width:           48px;
  height:          48px;
  background:      var(--lime);
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--black);
  flex-shrink:     0;
}

.form-header-icon i {
  width:  22px;
  height: 22px;
}

.form-header h3 {
  font-family:   var(--font-head);
  font-size:     1.4rem;
  font-weight:   700;
  color:         var(--white);
  margin-bottom: 4px;
}

.form-header p {
  font-size:   0.85rem;
  color:       var(--gray);
  line-height: 1.6;
}

/* ─── CONTACT FORM ───────────────────────────────── */
.contact-form {
  display:        flex;
  flex-direction: column;
  gap:            18px;
}

.form-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
}

.form-group {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.form-group label {
  display:        flex;
  align-items:    center;
  gap:            6px;
  font-size:      0.76rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--gray);
}

.form-group label i {
  width:  13px;
  height: 13px;
  color:  var(--lime);
}

.form-group input,
.form-group select,
.form-group textarea {
  background:    var(--black);
  border:        1.5px solid var(--border);
  color:         var(--white);
  font-size:     0.92rem;
  padding:       12px 15px;
  border-radius: var(--radius-sm);
  transition:    var(--transition);
  width:         100%;
  resize:        none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--lime);
  background:   rgba(200,255,89,0.02);
  box-shadow:   0 0 0 3px rgba(200,255,89,0.06);
  outline:      none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #3a3a3a;
}

.form-group select option {
  background: var(--surface);
  color:      var(--white);
}

/* ─── FORM STATUS ────────────────────────────────── */
.form-status {
  display:       none;
  padding:       14px 18px;
  border-radius: var(--radius-sm);
  font-size:     0.88rem;
  font-weight:   600;
  line-height:   1.5;
}

.form-status.success {
  display:    block;
  background: rgba(0,200,100,0.08);
  border:     1px solid rgba(0,200,100,0.25);
  color:      #00c864;
}

.form-status.error {
  display:    block;
  background: rgba(255,77,77,0.08);
  border:     1px solid rgba(255,77,77,0.2);
  color:      #ff4d4d;
}

/* ─── SUBMIT BUTTON ──────────────────────────────── */
.submit-btn {
  width:           100%;
  justify-content: center;
  padding:         15px;
  font-size:       0.95rem;
}

.submit-btn i {
  width:  18px;
  height: 18px;
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor:  not-allowed;
}

/* ─── MAP SECTION ────────────────────────────────── */
.map-section {
  border-top: 1px solid var(--border);
}

.map-header {
  background:    var(--surface);
  padding:       24px 0;
  border-bottom: 1px solid var(--border);
}

.map-header-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             20px;
  flex-wrap:       wrap;
}

.map-title {
  font-family:   var(--font-head);
  font-size:     1.2rem;
  font-weight:   700;
  color:         var(--white);
  margin-bottom: 4px;
}

.map-header p {
  font-size: 0.85rem;
  color:     var(--gray);
}

.map-header .btn i {
  width:  16px;
  height: 16px;
}

.map-embed iframe {
  display: block;
  filter:  invert(90%) hue-rotate(180deg);
}

/* ─── FAQ SECTION ────────────────────────────────── */
.faq-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.faq-inner {
  display:               grid;
  grid-template-columns: 1fr 1.5fr;
  gap:                   80px;
  align-items:           start;
}

.faq-header {}

.faq-header .btn i {
  width:  16px;
  height: 16px;
}

/* ─── ACCORDION ──────────────────────────────────── */
.faq-accordion {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.accordion-item {
  border-bottom: 1px solid var(--border);
  overflow:      hidden;
}

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

.accordion-btn {
  width:           100%;
  display:         flex;
  align-items:     center;
  gap:             16px;
  padding:         22px 0;
  background:      none;
  border:          none;
  cursor:          pointer;
  text-align:      left;
  transition:      var(--transition);
}

.accordion-btn:hover .accordion-q {
  color: var(--lime);
}

.accordion-btn:hover .accordion-num {
  color:      var(--lime);
  background: var(--lime-dim);
}

.accordion-num {
  font-family:    var(--font-head);
  font-size:      0.85rem;
  font-weight:    800;
  color:          var(--gray);
  background:     var(--surface2);
  border:         1px solid var(--border);
  border-radius:  var(--radius-sm);
  padding:        4px 10px;
  flex-shrink:    0;
  transition:     var(--transition);
  letter-spacing: 0.05em;
}

.accordion-q {
  font-family: var(--font-head);
  font-size:   1rem;
  font-weight: 700;
  color:       var(--white);
  flex:        1;
  line-height: 1.3;
  transition:  var(--transition);
}

.accordion-icon {
  width:           32px;
  height:          32px;
  border-radius:   50%;
  background:      var(--surface2);
  border:          1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--gray);
  flex-shrink:     0;
  transition:      var(--transition);
}

.accordion-icon i {
  width:      16px;
  height:     16px;
  transition: transform 0.3s ease;
}

/* Open state */
.accordion-item.open .accordion-btn .accordion-q {
  color: var(--lime);
}

.accordion-item.open .accordion-num {
  color:      var(--lime);
  background: var(--lime-dim);
  border-color: rgba(200,255,89,0.2);
}

.accordion-item.open .accordion-icon {
  background:   var(--lime);
  border-color: var(--lime);
  color:        var(--black);
}

.accordion-item.open .accordion-icon i {
  transform: rotate(45deg);
}

/* ─── ACCORDION BODY ─────────────────────────────── */
.accordion-body {
  max-height: 0;
  overflow:   hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              padding    0.4s ease;
  padding:    0 0 0 62px;
}

.accordion-item.open .accordion-body {
  padding: 0 0 22px 62px;
}

.accordion-body p {
  font-size:   0.92rem;
  line-height: 1.8;
  color:       var(--gray);
}

.accordion-body p strong {
  color:       var(--white);
  font-weight: 600;
}

/* ─── CTA BANNER ─────────────────────────────────── */
.cta-banner {
  background: var(--lime);
  padding:    80px 0;
}

.cta-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             48px;
  flex-wrap:       wrap;
}

.cta-title {
  font-family:   var(--font-head);
  font-size:     clamp(2rem, 4vw, 3rem);
  font-weight:   800;
  color:         var(--black);
  line-height:   1.1;
  margin-bottom: 12px;
}

.cta-text p {
  font-size: 1rem;
  color:     rgba(19,19,19,0.7);
}

.cta-btns {
  display:   flex;
  gap:       16px;
  flex-wrap: wrap;
}

.cta-btns .btn i {
  width:  16px;
  height: 16px;
}

.cta-banner .btn-primary {
  background:   var(--black);
  color:        var(--lime);
  border-color: var(--black);
}

.cta-banner .btn-primary:hover {
  background:   transparent;
  color:        var(--black);
}

.cta-banner .btn-outline {
  border-color: rgba(19,19,19,0.3);
  color:        var(--black);
}

.cta-banner .btn-outline:hover {
  border-color: var(--black);
  background:   rgba(19,19,19,0.1);
  color:        var(--black);
}

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 1024px) {
  .contact-hero-inner {
    grid-template-columns: 1fr;
    gap:                   48px;
  }

  .contact-hero-img {
    display: none;
  }

  .contact-inner {
    grid-template-columns: 1fr;
    gap:                   48px;
  }

  .faq-inner {
    grid-template-columns: 1fr;
    gap:                   48px;
  }
}

@media (max-width: 768px) {
  .contact-quick-btns {
    flex-direction: column;
  }

  .quick-btn {
    justify-content: center;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-form-wrap {
    padding: 24px;
  }

  .map-header-inner {
    flex-direction: column;
    align-items:    flex-start;
  }

  .cta-inner {
    flex-direction: column;
    text-align:     center;
  }

  .cta-btns {
    justify-content: center;
  }

  .accordion-body,
  .accordion-item.open .accordion-body {
    padding-left: 16px;
  }
}

@media (max-width: 480px) {
  .socials-row {
    grid-template-columns: 1fr 1fr;
    display:               grid;
  }

  .hero-img-badge-wrap {
    flex-direction: column;
    gap:            8px;
  }
}