/* BASIC GLOBAL STYLES */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Roboto', sans-serif; background: #f8f9fa; color: #333; }
    a { color: inherit; text-decoration: none; }
    
    /* CONTAINER */
    .container { max-width: 1200px; margin: 20px auto; padding: 20px; }
    
    /* BREADCRUMB */
    .breadcrumb { font-size: 14px; margin-bottom: 15px; color: #555; }
    .breadcrumb a { color: #007bff; margin-right: 5px; }
    .breadcrumb a:hover { text-decoration: underline; }
    .breadcrumb .separator { color: #999; margin: 0 5px; }
    
    /* TOP SECTION: GALLERY + INFO */
    .top-section { display: flex; gap: 20px; margin-bottom: 20px; }
    
    /* GALLERY */
    .media-container {
      flex: 2;
      background: #fff;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      position: relative;
    }
    .main-photo {
      width: 100%;
      height: 400px;
      border-radius: 8px;
      overflow: hidden;
      background: #f0f0f0;
      margin-bottom: 10px;
      position: relative;
      cursor: pointer;
    }
    /* Watermark overlay */
    .main-photo .watermark {
      position: absolute;
      bottom: 10px;
      right: 10px;
      color: rgba(255,255,255,0.7);
      font-size: 18px;
      font-weight: bold;
      z-index: 10;
      pointer-events: none;
    }
    /* Video overlay for main media */
    .main-photo .video-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: rgba(255,255,255,0.8);
      font-size: 48px;
      pointer-events: none;
      z-index: 6;
    }
    /* For image media */
    .main-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s;
      display: block;
    }
    .main-photo img:hover { transform: scale(1.03); }
    /* Arrow controls on main media container */
    .main-photo .main-prev,
    .main-photo .main-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.5);
      color: #fff;
      padding: 8px;
      border-radius: 50%;
      cursor: pointer;
      z-index: 5;
      font-size: 24px;
    }
    .main-photo .main-prev { left: 10px; }
    .main-photo .main-next { right: 10px; }
    
    /* Thumbnails */
    .media-thumbnails {
      display: flex;
      gap: 10px;
      margin-top: 10px;
      flex-wrap: wrap;
    }
    .media-thumbnails img, .video-thumb {
      width: 80px;
      height: 60px;
      object-fit: cover;
      border-radius: 4px;
      cursor: pointer;
      transition: box-shadow 0.2s;
    }
    .media-thumbnails img:hover, .video-thumb:hover { box-shadow: 0 0 0 2px #007bff; }
    /* Video thumbnail styling */
    .video-thumb {
      position: relative;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .video-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .video-thumb i.video-icon {
      position: absolute;
      color: #fff;
      font-size: 24px;
      z-index: 2;
    }
    
    /* INFO PANEL */
    .info-panel {
      flex: 1;
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .info-top { display: flex; flex-direction: column; gap: 10px; }
    .info-top h1 { font-size: 22px; color: #333; }
    .info-top .price { font-size: 24px; color: #ff5722; font-weight: 700; }
    .property-meta { font-size: 14px; color: #555; line-height: 1.6; }
    .property-meta div { margin-bottom: 5px; }
    
    /* CTA BUTTONS */
    .cta-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .cta-buttons a,
    .cta-buttons button {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 12px;
      border: none;
      border-radius: 4px;
      font-size: 15px;
      font-weight: 500;
      color: #fff;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.3s;
    }
    .whatsapp-btn { background: #25d366; }
    .whatsapp-btn:hover { background: #20c057; }
    .call-btn { background: #28a745; }
    .call-btn:hover { background: #218838; }
    
    /* CALL US BLOCK */
    .call-us-block {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      border: 2px dashed #ff5722;
      background: #fffaf5;
      padding: 10px;
      border-radius: 6px;
      text-align: center;
    }
    .call-us-block a { color: inherit; }
    .call-us-block a:hover { text-decoration: underline; }
    
    /* CONTACT FORM */
    .contact-form {
      background: #fff;
      border-radius: 6px;
      padding: 15px;
      border: 1px solid #eee;
    }
    .contact-form h3 { font-size: 16px; margin-bottom: 15px; color: #333; }
    .form-group { display: flex; flex-direction: column; margin-bottom: 15px; }
    .form-group label { margin-bottom: 5px; font-size: 14px; color: #555; }
    .form-group input,
    .form-group textarea,
    .form-group select {
      padding: 10px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 4px;
      width: 100%;
    }
    .contact-form button {
      background: #ff5722;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.3s;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .contact-form button:hover { background: #e64a19; }
    
    /* This ensures the response message won't break the layout */
    #contactExpertResponse {
      margin-top: 10px;
      text-align: center;
      color: green;
      word-wrap: break-word;
      white-space: pre-line;
    }

    /* DETAILS SECTION */
    .details-section {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      padding: 20px;
      margin-bottom: 20px;
    }
    .details-section h1 { font-size: 20px; margin-bottom: 15px; color: #333; }
    .details-list {
      list-style: none;
      line-height: 1.6;
      margin-bottom: 15px;
      padding: 0;
    }
    .details-list li {
      font-size: 14px;
      color: #555;
      margin: 8px 0;
      padding-bottom: 8px;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .details-list li:last-child { border-bottom: none; }
    .details-list li i { color: #ff5722; font-size: 16px; }
    .details-list li strong { color: #333; }
    .description {
      margin-top: 10px;
      color: #444;
      line-height: 1.8;
      font-size: 16px;
    }
    .description ul {
      margin: 10px 0;
      padding-left: 40px;
      list-style: disc outside;
    }
    .description li { margin-bottom: 5px; line-height: 1.6; }
    
    /* Nearby Landmarks & Amenities Bullet List - uniform alignment */
    .landmarks-list {
      list-style: disc outside;
      margin: 10px 0;
      padding-left: 40px;
    }
    .landmarks-list li { margin-bottom: 8px; font-size: 15px; color: #444; }
    
    /* SIMILAR PROPERTIES */
    .similar-section {
      margin-top: 30px;
      /* ADDED: Make this container position:relative so arrows are centered correctly */
      position: relative;
    }
    .similar-section h2 { font-size: 20px; margin-bottom: 15px; color: #333; }
    
    /* Turn .similar-grid into a horizontal carousel, remove position: relative */
    .similar-grid {
      display: flex;
      gap: 15px;
      overflow: hidden;
      scroll-behavior: smooth;
      width: 100%;
      /* position: relative; REMOVED so arrow positions are based on .similar-section */
    }
    /* Arrow buttons for the carousel */
    .similar-arrow {
      position: absolute;
      top: 50%; /* center vertically in .similar-section */
      transform: translateY(-50%);
      background: rgba(0,0,0,0.5);
      color: #fff;
      padding: 10px;
      border-radius: 50%;
      cursor: pointer;
      z-index: 5;
      font-size: 20px;
    }
    .similar-arrow.left { left: 10px; }
    .similar-arrow.right { right: 10px; }
    
    .similar-card {
      background: #fff;
      border-radius: 6px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      padding: 10px;
      text-align: center;
      transition: transform 0.2s, box-shadow 0.2s;
      cursor: pointer; /* entire card clickable */
      flex: 0 0 240px; /* fixed width for each card */
    }
    .similar-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }
    .similar-card img {
      width: 100%;
      height: 140px;
      object-fit: cover;
      border-radius: 4px;
      margin-bottom: 8px;
      transition: transform 0.3s;
    }
    .similar-card img:hover { transform: scale(1.03); }
    .similar-card h3 { font-size: 16px; margin-bottom: 5px; color: #333; }
    .similar-card .price { font-weight: bold; color: #ff5722; margin-bottom: 10px; }
    .similar-card .btn {
      display: inline-block;
      background: #007bff;
      color: #fff;
      padding: 8px 14px;
      border-radius: 4px;
      font-size: 14px;
      text-decoration: none;
      transition: background 0.3s;
    }
    .similar-card .btn:hover { background: #0056b3; }
    
    /* MODAL FOR IMAGE/VIDEO ZOOM, NAVIGATION & ZOOM CONTROLS */
    .zoom-modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.9);
      align-items: center;
      justify-content: center;
    }
    /* Both image and video elements in modal */
    #zoomedImage, #zoomedVideo {
      max-width: 90%;
      max-height: 90%;
      transition: transform 0.3s;
    }
    #zoomedVideo { display: none; }
    .zoom-modal .close {
      position: absolute;
      top: 20px;
      right: 35px;
      color: #fff;
      font-size: 40px;
      font-weight: bold;
      cursor: pointer;
    }
    .zoom-modal .prev,
    .zoom-modal .next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      color: #fff;
      font-size: 40px;
      padding: 16px;
      cursor: pointer;
      user-select: none;
      background: rgba(0,0,0,0.5);
      border-radius: 50%;
    }
    .zoom-modal .prev { left: 20px; }
    .zoom-modal .next { right: 20px; }
    .zoom-modal .zoom-in {
      position: absolute;
      top: 20px;
      right: 80px;
      background: rgba(0,0,0,0.5);
      color: #fff;
      font-size: 30px;
      padding: 10px;
      border-radius: 50%;
      cursor: pointer;
    }
    .zoom-modal .zoom-out {
      position: absolute;
      top: 20px;
      right: 130px;
      background: rgba(0,0,0,0.5);
      color: #fff;
      font-size: 30px;
      padding: 10px;
      border-radius: 50%;
      cursor: pointer;
    }
    
    /* RESPONSIVE MEDIA QUERIES */
    @media (max-width: 768px) {
      .top-section { flex-direction: column; }
      .info-panel { margin-top: 20px; }
      .main-photo { height: 300px; }
    }
    @media (max-width: 480px) {
      .container { padding: 10px; }
      .main-photo { height: 250px; }
      .cta-buttons a, .cta-buttons button { font-size: 13px; padding: 10px; }
      .details-list li { font-size: 13px; }
      .description { font-size: 14px; }
      /* We'll see only 1 or 2 cards at a time in the carousel on mobile */
      .similar-card { flex: 0 0 200px; }
      /* Reduce arrow button size for main media too */
      .main-photo .main-prev, .main-photo .main-next {
          font-size: 18px;
          padding: 6px;
      }
    }