/* Chuka-inspired Landing Styles
   - Balanced, brighter blue and warm gold accents
   - Improved contrast and accessible buttons
   - This file overrides existing `style.css` rules for the landing page
*/
:root{
    --primary-blue: #083e8a;
    --primary-blue-2: #0b4da2;
    --accent-gold: #F4B400;
    --accent-gold-bright: #FFD54A;

    --text: #1f2937;
    --muted: #6b7280;
    --bg: #f8fafc;
    --surface: #ffffff;
    --border: #e6edf7;

    --shadow-sm: 0 6px 18px rgba(3,19,58,0.06);
    --shadow-md: 0 18px 40px rgba(3,19,58,0.10);
    --transition: 220ms cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;-webkit-font-smoothing:antialiased}
body{font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;background:var(--bg);color:var(--text);font-size:16px;line-height:1.5}

/* NAVBAR */
.navbar{background:linear-gradient(90deg,var(--primary-blue),var(--primary-blue-2));color:var(--surface);position:sticky;top:0;z-index:1100}
.navbar-container{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:1rem}
.logo{font-weight:800;color:var(--surface);font-size:1.15rem}
.nav-links{display:flex;gap:1.25rem;align-items:center}
.nav-links a{color:var(--surface);text-decoration:none;font-weight:600;position:relative;padding:0.25rem}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:3px;background:var(--accent-gold);transition:width var(--transition)}
.nav-links a:hover::after{width:100%}

.hamburger{display:none;background:none;border:none;gap:6px;flex-direction:column}
.hamburger span{width:24px;height:3px;background:var(--surface);border-radius:2px}

.landlord-link{background:var(--accent-gold);color:#032033;padding:0.55rem 0.9rem;border-radius:18px;font-weight:700}
.landlord-link:hover{filter:brightness(0.95)}

.access-btn{background:transparent;border:2px solid var(--surface);color:var(--surface);padding:0.45rem 0.8rem;border-radius:16px;font-weight:700}
.access-btn:hover{background:rgba(255,255,255,0.06)}

/* HERO */
.hero{background:linear-gradient(180deg,var(--primary-blue-2) 0%, #0e60c6 70%);color:var(--surface);padding:4rem 1.25rem;display:flex;align-items:center;justify-content:center;min-height:420px;text-align:center}
.hero-content{max-width:900px}
.hero-title{font-size:clamp(1.6rem,3.2vw,3rem);font-weight:800;margin-bottom:0.6rem}
.hero-subtitle{font-size:1.05rem;opacity:0.95;margin-bottom:1rem}
.cta-button{background:var(--accent-gold);color:#08203a;padding:0.85rem 1.8rem;border-radius:28px;border:none;font-weight:800;cursor:pointer;box-shadow:var(--shadow-md)}
.cta-button:hover{background:color-mix(in srgb,var(--accent-gold) 80%, black 20%);transform:translateY(-3px)}

/* 50ton100 Listings Section */
.ton100-section{background:linear-gradient(180deg,rgba(255,243,224,0.9),rgba(255,250,240,0.9));padding:2.5rem 1.25rem;border-radius:14px;box-shadow:var(--shadow-sm);margin:2rem auto;max-width:1200px}
.ton100-content{max-width:980px;margin:0 auto;text-align:center}
.ton100-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1.5rem}
.ton100-card{background:var(--surface);border-radius:12px;padding:1.5rem;box-shadow:var(--shadow-sm);border:1px solid rgba(11, 77, 162, 0.15)}
.ton100-card h3{font-size:1.15rem;color:var(--primary-blue);margin-bottom:0.5rem}
.ton100-card p{color:var(--muted);font-size:0.95rem;line-height:1.5}

/* SEARCH / CONTAINER */
.search-section{max-width:1200px;margin: -2.2rem auto 1.5rem;padding:1.25rem;background:var(--surface);border-radius:12px;box-shadow:var(--shadow-sm)}
.search-container{display:flex;gap:0.5rem}
.search-box{flex:1;padding:0.9rem;border-radius:10px;border:1px solid var(--border)}
.search-btn{background:var(--primary-blue);color:#fff;padding:0.75rem;border-radius:10px;border:none}

/* LISTINGS */
.listings-section{max-width:1200px;margin:2rem auto;padding:0 1.25rem}
.section-title{font-size:1.9rem;margin-bottom:1rem;color:#072c5f}
.listings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}

.house-card{background:var(--surface);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition)}
.house-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.card-image{height:180px;background:linear-gradient(135deg,var(--primary-blue), rgba(4,55,114,0.85));position:relative;overflow:hidden}
.card-image img{width:100%;height:100%;object-fit:cover}
.card-badge{position:absolute;top:10px;right:10px;background:var(--accent-gold);color:#081026;padding:0.35rem 0.7rem;border-radius:14px;font-weight:800}
.card-content{padding:1rem}
.card-title{font-size:1.05rem;font-weight:800;color:#05223f;margin-bottom:0.35rem}
.card-location{color:var(--muted);font-size:0.9rem;margin-bottom:0.45rem}
.card-price{font-size:1.2rem;font-weight:800;color:var(--accent-gold);margin-bottom:0.6rem}
.feature-tag{display:inline-block;background:#f6fbff;padding:0.25rem 0.5rem;border-radius:10px;font-size:0.78rem;color:#05223f}
.card-footer{display:flex;gap:0.5rem;margin-top:0.5rem}
.btn-view{flex:1;background:var(--primary-blue);color:#fff;padding:0.6rem;border-radius:8px;border:none;font-weight:800}
.btn-view:hover{background:var(--primary-blue-2)}
.btn-like{background:transparent;border:2px solid var(--accent-gold);color:var(--accent-gold);padding:0.55rem 0.85rem;border-radius:8px}

/* MODALS */
.modal{display:none;position:fixed;inset:0;background:rgba(2,6,23,0.6);z-index:2200}
.modal-content{background:var(--surface);margin:3% auto;border-radius:12px;max-width:920px;overflow:hidden}
.modal-body{padding:1.25rem}
.close{float:right;font-size:1.8rem;padding:0.6rem;color:var(--muted)}
.close:hover{color:var(--text)}

/* FORMS & BUTTONS */
.form-input{width:100%;padding:0.8rem;border-radius:8px;border:1px solid var(--border)}
.book-btn,.confirm-btn,.payment-btn{background:var(--accent-gold);color:#041225;padding:0.85rem;border-radius:10px;border:none;font-weight:800}
.book-btn:hover{background:color-mix(in srgb,var(--accent-gold) 80%, black 20%)}

/* ABOUT */
.about-section{background:linear-gradient(135deg,#f7fbff,#eef6ff);padding:2.5rem;border-radius:12px}
.feature{background:#fff;padding:1rem;border-radius:10px}
.feature-icon{font-size:2rem;color:var(--accent-gold);margin-bottom:0.5rem}

/* FOOTER */
.footer{background:linear-gradient(90deg,var(--primary-blue),var(--primary-blue-2));color:#fff;padding:1.75rem;text-align:center}
.footer a{color:var(--accent-gold);text-decoration:none}
.footer a:hover{opacity:0.95}

/* RESPONSIVE */
@media(max-width:768px){
  .nav-links{position:fixed;left:-100%;top:64px;right:0;bottom:0;background:linear-gradient(180deg,var(--primary-blue),var(--primary-blue-2));flex-direction:column;padding-top:1.25rem;gap:0}
  .nav-links.active{left:0}
  .hamburger{display:flex}
  .search-section{margin:-1.25rem auto 1rem;padding:1rem}
  .hero{padding:2rem 1rem;min-height:300px}
  .card-image{height:150px}
}

@media(max-width:480px){
  .logo{font-size:1rem}
  .hero-title{font-size:1.2rem}
}

/* Landing-specific rate modal styles (loaded last to override generic rules) */
.rate-modal-body {
    text-align: center;
    padding: 2rem;
    background: var(--surface);
}
.rate-modal-body h2 {
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
    font-size: 1.8rem;
}
.rate-subtitle {
    color: var(--muted);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}
.rating-stars {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.star {
    font-size: 2rem;
    color: #ddd;
    cursor: pointer;
    transition: color 0.3s ease;
}
.star.active,
.star:hover {
    color: var(--accent-gold);
}
.rating-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-blue);
    margin-bottom: 1rem;
}
.rating-comment {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    resize: vertical;
    margin-bottom: 1rem;
    font-family: inherit;
}
.rating-comment:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(252, 211, 77, 0.2);
}
.rate-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}
.submit-rating-btn {
    background: var(--accent-gold);
    color: var(--primary-blue);
    border: none;
    padding: 0.75rem 1.8rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}
.submit-rating-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.submit-rating-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-gold) 80%, black 20%);
}
.cancel-rating-btn {
    background: transparent;
    color: var(--muted);
    border: 2px solid var(--border);
    padding: 0.75rem 1.8rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}
.cancel-rating-btn:hover {
    background: var(--bg);
}