/**

 * adisiya-overrides.css

 * Adisiya Properties Ltd — brand overrides & CRO additions

 * Loaded AFTER custom.css — does NOT modify layout, only adds new components

 */



/* =====================================================

   PROJECT STATUS BADGES

   ===================================================== */

.project-status-badge {

  position: absolute;

  top: 16px;

  left: 16px;

  z-index: 10;

  padding: 4px 12px;

  border-radius: 4px;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  line-height: 1.6;

  pointer-events: none;

}

.badge-ongoing  { background: #16a34a; color: #fff; }

.badge-completed{ background: #2563eb; color: #fff; }

.badge-upcoming { background: #d97706; color: #fff; }



/* Ensure project-item-image is relative for badge positioning */

.project-item-image { position: relative; overflow: hidden; }



/* =====================================================

   PROJECT CARD HIGHLIGHTS

   ===================================================== */

.project-card-highlights {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 10px;

}

.project-card-highlight {

  font-size: 12px;

  color: var(--accent-color, #b8963e);

  display: inline-flex;

  align-items: center;

  gap: 4px;

}

.project-card-highlight i { font-size: 10px; }



/* =====================================================

   FILTER TABS (Projects & Gallery pages)

   ===================================================== */

.filter-tabs {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 40px;

  justify-content: center;

}

.filter-tab {

  padding: 8px 24px;

  border: 1px solid currentColor;

  border-radius: 4px;

  cursor: pointer;

  font-size: 14px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  transition: all 0.25s ease;

  background: transparent;

  color: inherit;

}

.filter-tab.active,

.filter-tab:hover {

  background: var(--accent-color, #b8963e);

  color: #fff;

  border-color: var(--accent-color, #b8963e);

}



/* =====================================================

   FLOATING WHATSAPP BUTTON

   ===================================================== */

.whatsapp-float {

  position: fixed;

  bottom: 24px;          /* sits above sticky bar on mobile */

  right: 24px;

  width: 56px;

  height: 56px;

  background: #25D366;

  color: #fff;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 26px;

  text-decoration: none;

  z-index: 9998;

  box-shadow: 0 4px 16px rgba(37,211,102,0.45);

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

}

.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(37,211,102,0.6); color: #fff; }

.whatsapp-float::before {

  content: '';

  position: absolute;

  width: 56px; height: 56px;

  border-radius: 50%;

  background: rgba(37,211,102,0.3);

  animation: wa-pulse 2s ease-out infinite;

}

@keyframes wa-pulse {

  0%   { transform: scale(1);   opacity: 0.7; }

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

}



/* =====================================================

   STICKY MOBILE CONTACT BAR

   ===================================================== */

.sticky-contact-bar {

  display: none;  /* shown only on mobile via media query */

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  height: 56px;

  background: #0f0f0f;

  z-index: 9997;

  border-top: 1px solid rgba(255,255,255,0.1);

}

.sticky-contact-bar a {

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-size: 10px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  text-decoration: none;

  gap: 3px;

  transition: background 0.2s;

}

.sticky-contact-bar a:hover { background: rgba(255,255,255,0.1); }

.sticky-contact-bar a i { font-size: 18px; }

.sticky-contact-bar .scb-call    { color: #4ade80; }

.sticky-contact-bar .scb-whatsapp{ color: #25D366; }

.sticky-contact-bar .scb-inquiry  { color: #f59e0b; }



@media (max-width: 991.98px) {

  .sticky-contact-bar { display: flex; }

  body { padding-bottom: 56px; }

  /* Move WA float above sticky bar */

  .whatsapp-float { bottom: 72px; }

}



/* =====================================================

   SOCIAL PROOF STRIP

   ===================================================== */

.social-proof-strip {

  background: var(--secondary-color, #1a1a1a);

  border-top: 1px solid rgba(255,255,255,0.07);

  border-bottom: 1px solid rgba(255,255,255,0.07);

  padding: 17px 0;

  overflow: hidden;

}

.social-proof-strip .container {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: 0;

}

.social-proof-item {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 0 24px;

  font-size: 13px;

  font-weight: 600;

  color: rgba(0,0,0,0.75);

  border-right: 1px solid rgba(0,0,0,0.15);

  white-space: nowrap;

}

.social-proof-item:last-child { border-right: none; }

.social-proof-item .stars { color: #f59e0b; letter-spacing: -1px; }

.social-proof-item i { color: var(--accent-color, #b8963e); }

@media (max-width: 575.98px) {

  .social-proof-item { font-size: 11px; padding: 4px 12px; }

}



/* =====================================================

   CONTACT FORM — UPGRADED FIELDS

   ===================================================== */

.form-group select.form-control {

  appearance: none;

  -webkit-appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 14px center;

  padding-right: 36px;

  cursor: pointer;

}

.form-trust-line {

  margin-top: 14px;

  font-size: 13px;

  color: rgba(255,255,255,0.5);

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

}

.form-trust-line span { display: flex; align-items: center; gap: 5px; color: #1A1A1A; }

.form-trust-line i { color: #4ade80; font-size: 12px; }

/* success state */

#form-success {

  display: none;

  padding: 20px;

  background: rgba(22,163,74,0.15);

  border: 1px solid #16a34a;

  border-radius: 8px;

  color: #4ade80;

  text-align: center;

  margin-top: 16px;

}

#form-success i { font-size: 32px; display: block; margin-bottom: 8px; }

/* honeypot */

.hp-field { opacity: 0; position: absolute; top: 0; left: 0; height: 0; width: 0; z-index: -1; pointer-events: none; }



/* =====================================================

   PROJECT DETAIL PAGE — SIDEBAR ENHANCEMENTS

   ===================================================== */

.sidebar-cta-actions {

  display: flex;

  flex-direction: column;

  gap: 10px;

  margin-top: 16px;

}

.sidebar-cta-actions a {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 12px 16px;

  border-radius: 6px;

  font-weight: 600;

  font-size: 14px;

  text-decoration: none;

  transition: opacity 0.2s;

}

.sidebar-cta-actions a:hover { opacity: 0.88; }

.btn-call-sidebar     { background: var(--accent-color, #b8963e); color: #fff; }

.btn-whatsapp-sidebar { background: #25D366; color: #fff; }



/* =====================================================

   PROJECT AMENITY ICON GRID

   ===================================================== */

.amenity-icon-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin: 24px 0;

}

.amenity-icon-item {

  display: flex;

  align-items: center;

  gap: 8px;

  background: rgba(255,255,255,0.05);

  border: 1px solid rgba(255,255,255,0.1);

  border-radius: 6px;

  padding: 8px 14px;

  font-size: 13px;

  font-weight: 500;

  min-width: 180px;

  flex: 1;

}

.amenity-icon-item i {

  color: var(--accent-color, #b8963e);

  font-size: 15px;

  width: 18px;

  text-align: center;

}



/* =====================================================

   APARTMENT SPECS TABLE

   ===================================================== */

.apt-specs-table {

  width: 100%;

  border-collapse: collapse;

  margin: 20px 0;

  font-size: 14px;

}

.apt-specs-table th,

.apt-specs-table td {

  padding: 10px 14px;

  border: 1px solid rgba(255,255,255,0.1);

  text-align: left;

}

.apt-specs-table th {

  background: rgba(255,255,255,0.06);

  font-weight: 700;

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  color: var(--accent-color, #b8963e);

}

.apt-specs-table tr:hover td { background: rgba(255,255,255,0.03); }



/* =====================================================

   CAREER PAGE CARDS

   ===================================================== */

.career-item {

  border: 1px solid rgba(255,255,255,0.1);
  background: #fff;
  border-radius: 10px;

  padding: 32px 28px;

  height: 100%;

  transition: border-color 0.25s, transform 0.25s;

}

.career-item:hover {

  border-color: var(--accent-color, #b8963e);

  transform: translateY(-4px);

}

.career-item .icon-box {

  width: 56px;

  height: 56px;

  border-radius: 50%;

  background: rgba(184,150,62,0.12);

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 20px;

}

.career-item .icon-box i {

  font-size: 22px;

  color: var(--accent-color, #b8963e);

}

.career-item h3 { margin-bottom: 10px; font-size: 18px; }

.career-item p  { font-size: 14px; line-height: 1.7; }

.career-item .career-tags {

  display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0;

}

.career-tag {

  padding: 3px 10px;

  border-radius: 3px;

  background: rgba(255,255,255,0.07);

  font-size: 11px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



/* =====================================================

   FAQ REAL ESTATE ANSWERS

   ===================================================== */

/* No structural changes — FAQ styling comes from template */



/* =====================================================

   GALLERY FILTER SPACING

   ===================================================== */

.page-gallery-box .project-item { margin-bottom: 0; }

.gallery-hidden { display: none !important; }



/* =====================================================

   ACCESSIBILITY — FOCUS STYLES & KEYBOARD NAV

   ===================================================== */



/* Visible focus ring for keyboard navigation (WCAG 2.1 AA) */

a:focus-visible,

button:focus-visible,

input:focus-visible,

select:focus-visible,

textarea:focus-visible,

[tabindex]:focus-visible {

  outline: 2px solid var(--accent-color, #b8963e);

  outline-offset: 3px;

  border-radius: 2px;

}



/* Remove default focus ring only when mouse is used */

a:focus:not(:focus-visible),

button:focus:not(:focus-visible),

input:focus:not(:focus-visible),

select:focus:not(:focus-visible),

textarea:focus:not(:focus-visible) {

  outline: none;

}



/* Skip link */

.skip-to-main {

  position: absolute;

  left: -9999px;

  top: 0;

  z-index: 99999;

  padding: 8px 16px;

  background: var(--accent-color, #b8963e);

  color: #fff;

  font-weight: 700;

  font-size: 14px;

  text-decoration: none;

  border-radius: 0 0 4px 0;

  transition: left 0s;

}

.skip-to-main:focus {

  left: 0;

}



/* =====================================================

   FORM VALIDATION STATES

   ===================================================== */

.form-control.is-invalid {

  border-color: #f87171 !important;

  box-shadow: 0 0 0 3px rgba(248,113,113,0.2);

}

.form-control.is-invalid:focus-visible {

  outline: 2px solid #f87171;

}

/* Success field state */

.form-control.is-valid {

  border-color: #4ade80 !important;

}

/* Error message below field */

.field-error {

  display: block;

  font-size: 12px;

  color: #f87171;

  margin-top: 4px;

}



/* =====================================================

   PERFORMANCE — REDUCE LAYOUT SHIFT

   ===================================================== */



/* Reserve space for images to prevent CLS */

figure img {

  display: block;

  width: 100%;

  height: auto;

}

.project-item-image figure,

.photo-gallery figure,

.amenity-item-image figure,

.why-choose-image figure,

.page-single-image figure {

  overflow: hidden;

  background-color: rgba(255,255,255,0.04);

}



/* Smooth image reveal on lazy load */

img[loading="lazy"] {

  opacity: 0;

  transition: opacity 0.4s ease;

}

img[loading="lazy"].loaded,

img:not([loading]) {

  opacity: 1;

}



/* =====================================================

   PRINT STYLES — Basic print optimisation

   ===================================================== */

@media print {

  .sticky-contact-bar,

  .whatsapp-float,

  .preloader,

  .main-header,

  .cursor-follower,

  .magic-cursor {

    display: none !important;

  }

  body {

    padding-bottom: 0 !important;

    color: #000 !important;

    background: #fff !important;

  }

  a[href^="http"]:after {

    content: " (" attr(href) ")";

    font-size: 11px;

    color: #666;

  }

}



/* =====================================================

   PROJECT INQUIRY FORM (project detail pages)

   ===================================================== */

/* The form inside project pages reuses .cta-form-box styles */

/* Preset project field visual treatment */

.form-control[readonly] {

  opacity: 0.6;

  cursor: default;

  background: rgba(255,255,255,0.03);

}



/* =====================================================

   RESPONSIVE BREAKPOINT FIXES

   ===================================================== */



/* Fix project card image overflow on tablet */

@media (max-width: 767.98px) {

  .project-item-image img {

    width: 100%;

    height: 220px;

    object-fit: cover;

  }

  .amenity-icon-item {

    min-width: 140px;

  }

  .filter-tabs {

    gap: 6px;

  }

  .filter-tab {

    padding: 6px 14px;

    font-size: 12px;

  }

  .apt-specs-table { font-size: 12px; }

  .apt-specs-table th, .apt-specs-table td { padding: 8px 10px; }

}



/* Fix social proof strip on very small screens */

@media (max-width: 399.98px) {

  .social-proof-item { display: none; }

  .social-proof-item:first-child,

  .social-proof-item:last-child { display: flex; }

}



/* Ensure sidebar CTA actions stack correctly on mobile */

@media (max-width: 575.98px) {

  .sidebar-cta-actions {

    flex-direction: column;

  }

  .sidebar-cta-actions a {

    width: 100%;

  }

}



/* =====================================================

   COLOUR CONTRAST IMPROVEMENTS

   ===================================================== */



/* Ensure form labels have sufficient contrast */

label {

  color: rgba(255,255,255,0.85);

  font-size: 13px;

  font-weight: 500;

  margin-bottom: 6px;

  display: block;

}



/* Ensure placeholder text is visible but de-emphasised */

input::placeholder,

textarea::placeholder,

select::placeholder {

  color: rgba(255,255,255,0.35);

}



/* Ensure trust-line text is readable */

.form-trust-line {

  color: rgba(255,255,255,0.55);

}



/* Project card highlights — ensure legibility */

.project-card-highlight {

  color: var(--accent-color, #b8963e);

}



/* =====================================================

   LAZY LOAD JS TRIGGER

   ===================================================== */

/* Applied by site.js IntersectionObserver — see assets/js/site.js */



/* =====================================================

   OUR SERVICE AREA (Interior page)

   ===================================================== */

.our-service-area .service-area-tag {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 8px 14px;

  background: #fff;

  border: 1px solid rgba(0,0,0,0.08);

  border-radius: 8px;

  font-size: 13px;

  font-weight: 500;

  color: #1a1a1a;

  white-space: nowrap;

  transition: border-color 0.2s, box-shadow 0.2s;

}

.our-service-area .service-area-tag:hover {

  border-color: var(--accent-color, #b8963e);

  box-shadow: 0 2px 8px rgba(184,150,62,0.15);

}

.our-service-area .service-area-tag i {

  color: #c53030;

  font-size: 12px;

}

.our-service-area .service-area-card::-webkit-scrollbar {

  width: 6px;

}

.our-service-area .service-area-card::-webkit-scrollbar-track {

  background: rgba(0,0,0,0.04);

  border-radius: 3px;

}

.our-service-area .service-area-card::-webkit-scrollbar-thumb {

  background: rgba(0,0,0,0.15);

  border-radius: 3px;

}

.our-service-area .service-area-card::-webkit-scrollbar-thumb:hover {

  background: rgba(0,0,0,0.25);

}