/*
Theme Name: Gharabhada Local Rental
Theme URI: https://gharabhada.com/
Author: Gharabhada
Description: Cuttack rental listings theme — real Property/Area content, working "List Your Property" submissions, and SEO foundations. Worker/Admin dashboards remain a demo.
Version: 0.5.3
Text Domain: gharabhada
*/

  html, body{ margin:0; padding:0; }
  body{
    display:flex;
    justify-content:center;
    background:var(--paper, #EFECE0);
  }

  :root{
    --ink:#1F2A28;
    --ink-soft:#4B5A57;
    --paper:#EFECE0;
    --paper-raised:#FAF8F0;
    --indigo:#2B3A67;
    --indigo-deep:#1C2747;
    --ochre:#E8A33D;
    --ochre-deep:#C97F1F;
    --teal:#1F6F6B;
    --red:#C4483C;
    --line:#D9D3BF;
    --radius:14px;
    --shadow:0 2px 10px rgba(28,39,71,0.08);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter','Noto Sans Oriya',sans-serif;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  .odia{font-family:'Noto Sans Oriya','Inter',sans-serif;}
  h1,h2,h3,.display{font-family:'Fraunces','Noto Sans Oriya',serif; font-weight:600; letter-spacing:-0.01em;}
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; cursor:pointer;}
  img{max-width:100%; display:block;}

  /* door-frame motif: recurring border used as a signature divider, echoing painted Odisha doorframes */
  .door-rule{
    height:8px;
    background:repeating-linear-gradient(90deg,
      var(--indigo) 0px, var(--indigo) 14px,
      var(--ochre) 14px, var(--ochre) 22px,
      var(--teal) 22px, var(--teal) 30px);
    border-radius:4px;
  }

  .app{max-width:480px; margin:0 auto; min-height:100vh; background:var(--paper); position:relative; padding-bottom:64px;}

  header.top{
    background:var(--indigo);
    color:#fff;
    padding:22px 18px 26px;
    position:relative;
  }
  header.top .brand{display:flex; align-items:baseline; gap:8px;}
  header.top .brand .odia-name{font-size:28px; font-weight:700;}
  header.top .brand .eng-name{font-size:13px; opacity:0.75; font-family:'Inter';}
  header.top .tagline{margin-top:4px; font-size:14px; opacity:0.9;}
  header.top .tagline .eng{display:block; font-size:12px; opacity:0.65; font-family:'Inter'; margin-top:2px;}

  .search-wrap{margin-top:16px; position:relative;}
  .search-box{
    background:var(--paper-raised);
    border-radius:12px;
    display:flex;
    align-items:center;
    padding:12px 14px;
    gap:8px;
    box-shadow:var(--shadow);
    position:relative;
  }
  .search-box input{
    border:none; outline:none; background:transparent; flex:1;
    font-size:15px; color:var(--ink); font-family:'Inter','Noto Sans Oriya';
  }
  .search-box button{
    background:var(--ochre); color:var(--indigo-deep); border:none; padding:8px 14px;
    border-radius:8px; font-weight:700; font-size:13px;
  }

  .suggest-box{
    display:none; position:absolute; left:0; right:0; top:calc(100% + 6px);
    background:#fff; border-radius:12px; box-shadow:var(--shadow);
    max-height:280px; overflow-y:auto; z-index:40; border:1px solid var(--line);
  }
  .suggest-item{
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--line);
    font-family:'Inter'; font-size:13.5px;
  }
  .suggest-item:last-child{border-bottom:none;}
  .suggest-item:hover, .suggest-item:active{background:var(--paper);}
  .suggest-item .s-name{color:var(--ink); font-weight:600;}
  .suggest-item .s-meta{color:var(--ink-soft); font-size:11.5px; white-space:nowrap;}
  .suggest-empty{padding:12px 14px; font-family:'Inter'; font-size:13px; color:var(--ink-soft);}

  .cta-row{display:flex; gap:10px; margin-top:16px;}
  .cta{
    flex:1; padding:14px 10px; border-radius:12px; text-align:center; border:none;
    font-weight:700; font-size:14px; box-shadow:var(--shadow);
    display:block; text-decoration:none; cursor:pointer;
  }
  .cta.primary{background:var(--ochre); color:var(--indigo-deep);}
  .cta.secondary{background:var(--paper-raised); color:var(--indigo);}
  .cta .odia{display:block; font-size:15px;}
  .cta .eng{display:block; font-size:11px; opacity:0.75; margin-top:1px; font-family:'Inter';}

  main{padding:18px;}
  section{margin-bottom:24px;}
  .section-title{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px;}
  .section-title h2{font-size:17px; margin:0;}
  .section-title .sub{font-size:11px; color:var(--ink-soft); font-family:'Inter';}

  .areas{display:flex; gap:8px; flex-wrap:wrap;}
  .area-chip{
    background:var(--paper-raised); border:1px solid var(--line); padding:8px 14px;
    border-radius:20px; font-size:13px; font-weight:600; color:var(--indigo-deep);
    display:inline-block; text-decoration:none; cursor:pointer;
  }
  .area-chip.active{background:var(--indigo); color:#fff; border-color:var(--indigo);}

  .type-row{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px;}
  .type-chip{
    flex:0 0 auto; background:var(--paper-raised); border:1px solid var(--line);
    padding:7px 13px; border-radius:20px; font-size:12.5px; font-weight:600; color:var(--ink-soft);
    white-space:nowrap;
  }
  .type-chip.active{background:var(--teal); color:#fff; border-color:var(--teal);}

  .card{
    background:var(--paper-raised); border-radius:var(--radius); overflow:hidden;
    box-shadow:var(--shadow); margin-bottom:14px; border:1px solid var(--line);
  }
  .card .photo{
    height:150px; background-size:cover; background-position:center;
    position:relative; display:flex; align-items:flex-end;
  }
  .card .badge{
    position:absolute; top:10px; left:10px; background:rgba(31,111,107,0.94); color:#fff;
    font-size:11px; font-weight:700; padding:4px 9px; border-radius:20px;
  }
  .card .badge.featured{background:rgba(232,163,61,0.96); color:var(--indigo-deep);}
  .card .price-tag{
    background:rgba(28,39,71,0.85); color:#fff; padding:5px 10px; margin:8px;
    border-radius:8px; font-weight:700; font-size:14px;
  }
  .card .body{padding:12px 14px;}
  .card .title{font-weight:700; font-size:15px; margin-bottom:4px;}
  .card .meta{display:flex; flex-wrap:wrap; gap:8px; font-size:12.5px; color:var(--ink-soft); margin-bottom:10px;}
  .card .meta span{display:flex; align-items:center; gap:3px;}
  .card .status-live{color:var(--teal); font-weight:700;}
  .card .actions{display:flex; gap:8px;}
  .card .actions button, .card .actions a{
    flex:1; text-align:center; padding:9px 0; border-radius:8px; font-size:13px; font-weight:700; border:none;
  }
  .btn-call{background:var(--indigo); color:#fff;}
  .btn-whatsapp{background:#2BA84A; color:#fff;}
  .btn-outline{background:transparent; border:1px solid var(--line)!important; color:var(--ink);}

  .empty{text-align:center; padding:40px 10px; color:var(--ink-soft); font-size:14px;}

  footer.tabbar{
    position:fixed; bottom:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:480px; background:var(--paper-raised);
    border-top:1px solid var(--line); display:flex;
  }
  footer.tabbar a{
    flex:1; text-align:center; padding:10px 4px 8px; font-size:11px; color:var(--ink-soft); font-weight:600;
  }
  footer.tabbar a.active{color:var(--indigo);}
  footer.tabbar a .ic{display:block; font-size:18px; margin-bottom:2px;}

  /* detail page */
  .detail-gallery{display:flex; gap:6px; overflow-x:auto; padding:14px 14px 0;}
  .detail-gallery .ph{flex:0 0 78%; height:180px; border-radius:12px; background-size:cover; background-position:center; scroll-snap-align:start;}
  .detail-gallery{scroll-snap-type:x mandatory;}
  .detail-body{padding:16px;}
  .detail-body h1{font-size:20px; margin:0 0 6px;}
  .price-line{font-size:22px; font-weight:700; color:var(--indigo-deep); margin-bottom:2px;}
  .price-line .per{font-size:13px; font-weight:500; color:var(--ink-soft);}
  .verified-row{display:flex; align-items:center; gap:6px; color:var(--teal); font-weight:700; font-size:13px; margin:8px 0 4px;}
  .verified-date{font-size:11.5px; color:var(--ink-soft); margin-bottom:14px;}
  .info-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0;}
  .info-grid .item{background:var(--paper-raised); border:1px solid var(--line); border-radius:10px; padding:10px 12px;}
  .info-grid .item .k{font-size:11px; color:var(--ink-soft); margin-bottom:2px;}
  .info-grid .item .v{font-size:14px; font-weight:700;}
  .sticky-contact{
    position:sticky; bottom:64px; display:flex; gap:10px; padding:12px 0; background:var(--paper);
  }
  .sticky-contact button{flex:1; padding:13px 0; border-radius:12px; font-weight:700; font-size:14px; border:none;}
  .report-link{display:block; text-align:center; font-size:12px; color:var(--ink-soft); margin-top:18px; text-decoration:underline;}

  /* generic panel pages (list property / worker / admin) */
  .panel-header{background:var(--indigo); color:#fff; padding:18px; display:flex; align-items:center; gap:10px;}
  .panel-header .back{font-size:20px;}
  .panel-header h2{margin:0; font-size:16px;}
  .form-block{padding:16px;}
  .form-block label{display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin:14px 0 6px;}
  .form-block input, .form-block select, .form-block textarea{
    width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--line);
    background:var(--paper-raised); font-size:14px; font-family:inherit; color:var(--ink);
  }
  .plan-cards{display:flex; flex-direction:column; gap:10px; margin-top:8px;}
  .plan-card{border:2px solid var(--line); border-radius:12px; padding:14px; background:var(--paper-raised);}
  .plan-card.rec{border-color:var(--ochre);}
  .plan-card .top{display:flex; justify-content:space-between; align-items:center;}
  .plan-card .name{font-weight:700; font-size:14.5px;}
  .plan-card .price{font-weight:700; color:var(--indigo-deep);}
  .plan-card ul{margin:8px 0 0; padding-left:18px; font-size:12.5px; color:var(--ink-soft);}
  .submit-btn{
    width:100%; background:var(--ochre); color:var(--indigo-deep); border:none; padding:14px;
    border-radius:12px; font-weight:700; font-size:15px; margin-top:20px;
  }
  .consent{display:flex; gap:10px; align-items:flex-start; font-size:12px; color:var(--ink-soft); margin-top:16px;}

  .stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:16px;}
  .stat-card{background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; padding:14px;}
  .stat-card .n{font-size:22px; font-weight:700; color:var(--indigo-deep);}
  .stat-card .l{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}
  .worker-hero{background:linear-gradient(135deg,var(--indigo),var(--indigo-deep)); color:#fff; padding:20px 16px; margin:0 16px 6px; border-radius:14px; margin-top:16px;}
  .worker-hero .name{font-size:18px; font-weight:700;}
  .worker-hero .area{font-size:12.5px; opacity:0.8; margin-top:2px;}
  .quick-actions{display:flex; gap:10px; padding:0 16px 8px;}
  .quick-actions button{flex:1; background:var(--paper-raised); border:1px solid var(--line); border-radius:10px; padding:12px 6px; font-size:12px; font-weight:700; color:var(--indigo-deep);}
  .list-row{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); font-size:13.5px;}
  .pill{font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px;}
  .pill.pending{background:#FCEBC7; color:#8A5A00;}
  .pill.live{background:#D9EFE0; color:var(--teal);}
  .pill.rejected{background:#F6DAD6; color:var(--red);}
  .admin-row{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line);}
  .admin-row .meta{font-size:12px; color:var(--ink-soft);}
  .admin-row .btns{display:flex; gap:6px;}
  .admin-row .btns button{padding:6px 10px; font-size:11.5px; border-radius:7px; border:none; font-weight:700;}
  .approve{background:var(--teal); color:#fff;}
  .reject{background:var(--red); color:#fff;}
  .tabs-inline{display:flex; gap:6px; padding:12px 16px 0;}
  .tabs-inline button{flex:1; padding:8px 0; font-size:12px; font-weight:700; border-radius:8px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink-soft);}
  .tabs-inline button.active{background:var(--indigo); color:#fff; border-color:var(--indigo);}
  .demo-notice{font-size:10.5px;line-height:1.35;padding:7px 14px;background:#FFF4D8;color:#6D4C10;text-align:center;border-bottom:1px solid var(--line);}
  .plan-card.selected{border-color:var(--teal);box-shadow:0 0 0 2px rgba(31,111,107,.10);}
  .success-box{background:#D9EFE0;border:1px solid #A9D3B6;color:#195C3B;padding:12px;border-radius:10px;font-size:13px;line-height:1.45;margin-top:14px;}
  .mini-note{font-size:11px;color:var(--ink-soft);line-height:1.4;margin-top:8px;}
  .login-box{padding:30px 20px;}
  .login-box .display{font-size:20px; margin-bottom:4px;}
  .toast{position:fixed; bottom:80px; left:50%; transform:translateX(-50%); background:var(--indigo-deep); color:#fff; padding:10px 18px; border-radius:24px; font-size:13px; z-index:50; box-shadow:var(--shadow); opacity:0; transition:opacity .25s;}
  .toast.show{opacity:1;}

  /* ---------------- DESKTOP / LAPTOP LAYOUT ----------------
     Mobile styles above stay untouched. From ~900px, the app
     stops being a narrow centered phone-strip and opens full
     width, with listing cards flowing into a grid. */
  @media (min-width:900px){
    .app{
      max-width:1240px;
      padding-bottom:32px;
    }
    header.top{ padding:40px 48px 44px; }
    header.top .brand .odia-name{ font-size:32px; }
    header.top .brand .eng-name{ font-size:14px; }
    header.top .tagline{ font-size:15px; }
    .search-wrap, .cta-row{ max-width:640px; }
    .demo-notice{ padding:9px 48px; }
    main{ padding:32px 48px 8px; }
    .panel-header{ padding:24px 48px; }
    .form-block, .detail-body{ padding:24px 48px; max-width:760px; }

    .card-grid{
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
      gap:18px;
    }
    .card{ margin-bottom:0; }
    .card .photo{ height:180px; }

    .detail-gallery{ padding:20px 48px 0; }
    .detail-gallery .ph{ flex:0 0 320px; height:220px; }

    .info-grid{ grid-template-columns:repeat(3,1fr); max-width:760px; }
    .sticky-contact{ max-width:760px; }

    .plan-cards{ flex-direction:row; max-width:760px; }
    .plan-card{ flex:1; }

    .stat-grid{ grid-template-columns:repeat(4,1fr); max-width:900px; padding:24px 48px; }
    .worker-hero{ margin:24px 48px 6px; }
    .quick-actions{ padding:0 48px 8px; max-width:760px; }
    .list-row, .admin-row{ padding:12px 48px; }
    .tabs-inline{ padding:16px 48px 0; max-width:520px; }

    footer.tabbar{ max-width:1240px; }
  }