@import "theme.css";

:root{
  --bg:#070a17;
  --card:rgba(12, 20, 46, .55);
  --card2:rgba(16, 28, 69, .75);
  --brd:rgba(120,160,255,.18);
  --brd2:rgba(120,160,255,.10);
  --text:#eef5ff;
  --muted:#aebbdc;
  --muted2:#8294bd;
  --cyan:#2fe0d8;
  --cyan-soft:#9df4ef;
  --blue:#2068ff;
  --blue-bright:#5aa8ff;
  --shadow:0 18px 60px rgba(0,0,0,.35);
  --r-sm:10px;
  --r-md:16px;
  --r-lg:26px;
  --font:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --display:"Space Grotesk", Inter, ui-sans-serif;
  --mono:"Space Mono", ui-monospace;
}

body.light{
  --bg:#f5f7ff;
  --card:rgba(255,255,255,.72);
  --card2:rgba(245,248,255,.9);
  --brd:rgba(40,90,255,.14);
  --brd2:rgba(40,90,255,.10);
  --text:#0b1333;
  --muted:#4b5b86;
  --muted2:#5f719c;
  --shadow:0 18px 60px rgba(10,20,55,.12);
}

body{
  margin:0;
  background: radial-gradient(ellipse at 50% 30%, rgba(32,104,255,.18), transparent 58%),
              radial-gradient(ellipse at 50% 85%, rgba(47,224,216,.10), transparent 55%),
              var(--bg);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1240px;margin:0 auto;padding:0 28px;}
.page-pad{padding:26px 0 70px;}
.page-center{min-height:calc(100vh - 90px);display:flex;align-items:center;justify-content:center;}

.nav{
  position:sticky;top:0;z-index:200;
  background:rgba(5,8,20,.42);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--brd2);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;color:var(--text);}
.brand-mark{width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(32,104,255,.35), rgba(47,224,216,.25));border:1px solid var(--brd);}
.nav-links{display:flex;gap:26px;align-items:center;}
.nav-links a{color:var(--muted);font-weight:600;font-size:14.5px;position:relative;transition:color .2s;}
.nav-links a:hover{color:var(--text);} 

.nav-actions{display:flex;align-items:center;gap:14px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:14.5px;padding:12px 18px;border-radius:999px;cursor:pointer;
  border:1px solid transparent; text-decoration:none; color:var(--text);
  background:rgba(255,255,255,.06);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active{transform:scale(.98);}
.btn:disabled{opacity:.55;cursor:not-allowed;}

.btn-flat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);}
.btn-flat:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);}

.btn-outline{background:transparent;border-color:rgba(120,160,255,.32);} 
.btn-outline:hover{border-color:var(--cyan);box-shadow:0 0 24px rgba(47,224,216,.18);} 

.btn-glitch{
  background:linear-gradient(135deg, rgba(32,104,255,.28), rgba(47,224,216,.18));
  border-color:rgba(47,224,216,.35);
  box-shadow:0 0 28px rgba(47,224,216,.14);
  position:relative;overflow:hidden;
}
.btn-glitch:hover{transform:translateY(-2px);}
.btn-glitch .label{position:relative;z-index:2;}

.glass{background:var(--card);border:1px solid var(--brd);backdrop-filter:blur(18px);box-shadow:var(--shadow);}

.hero{min-height:78vh;position:relative;overflow:hidden;}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.75;filter:saturate(1.05) contrast(1.02);} 
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(7,10,23,.35) 0%, rgba(7,10,23,.58) 40%, rgba(7,10,23,.95) 100%);} 
.hero-content{position:relative;z-index:2;padding:90px 0 50px;display:flex;flex-direction:column;gap:22px;}
.hero-text{max-width:640px;}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-soft);} 
.hero-text h1{font-family:var(--display);font-size:clamp(34px,4.8vw,58px);margin-top:10px;line-height:1.05;text-shadow:0 0 22px rgba(86,168,255,.35);} 
.muted{color:var(--muted2);} 

.search-card{
  display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr auto;gap:14px;align-items:end;
  margin-top:18px;padding:18px;border-radius:var(--r-lg);
}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);} 
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(120,160,255,.18);
  color:var(--text);
  border-radius:var(--r-sm);
  padding:11px 12px;
  font-size:14px;
  outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(47,224,216,.10);} 

.section{padding:60px 0 20px;}
.section-head{max-width:560px;margin-bottom:22px;}
.section-head h2{font-family:var(--display);font-size:clamp(22px,3.2vw,36px);} 

.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}

.pcard{background:rgba(16,28,69,.62);border:1px solid var(--brd);border-radius:var(--r-md);overflow:hidden;transition:transform .25s ease, box-shadow .25s ease;}
.pcard:hover{transform:translateY(-6px);box-shadow:0 18px 50px rgba(0,0,0,.35);}
.pcard-img{position:relative;height:170px;}
.ph{position:absolute;inset:0;background-size:cover;background-position:center;}
.badge-verified{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.45);border:1px solid rgba(47,224,216,.42);border-radius:999px;padding:6px 10px;font-family:var(--mono);font-size:11px;color:var(--cyan-soft);}
.pcard-body{padding:16px 18px 18px;}
.pcard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.rating{font-family:var(--mono);color:var(--cyan-soft);}
.pcard-loc{margin-top:6px;color:var(--muted);} 
.pcard-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid rgba(120,160,255,.10);} 
.price{font-family:var(--mono);color:var(--text);font-size:17px;}
.price small{color:var(--muted2);font-size:12px;}

.auth-card{width:min(520px,100%);padding:26px;border-radius:var(--r-lg);} 
.form-grid{margin-top:18px;display:flex;flex-direction:column;gap:14px;}
.form-grid .field{width:100%;}
.inline-error{color:#ff6b7a;font-size:13px;min-height:18px;}
.loading-row{display:flex;align-items:center;gap:12px;margin-top:10px;color:var(--muted);} 
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:var(--cyan);animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

.toastHost{position:fixed;}
#toastHost{position:fixed;right:18px;bottom:18px;z-index:10000;display:flex;flex-direction:column;gap:10px;}
.toast{width:320px;max-width:calc(100vw - 36px);
  background:var(--card2);border:1px solid var(--brd);
  border-radius:16px;padding:14px 14px;box-shadow:0 30px 80px rgba(0,0,0,.45);
  opacity:1;transform:translateY(0);
  transition:opacity .2s ease, transform .2s ease;
}
.toast.success{border-color:rgba(47,224,216,.35);} 
.toast.error{border-color:rgba(255,107,122,.35);} 
.toast .thead{font-weight:800;font-family:var(--display);} 
.toast .tmsg{color:var(--muted2);margin-top:4px;font-size:14px;}
.ticon{width:32px;height:32px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);border:1px solid rgba(120,160,255,.15);} 

.filters{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1.1fr auto;gap:12px;align-items:end;}
.filters .field{width:100%;}

.filters select{width:100%;}

.empty-state{text-align:center;padding:26px 14px;background:rgba(255,255,255,.04);border:1px dashed rgba(120,160,255,.22);border-radius:var(--r-md);grid-column:1/-1;}

.details-grid{display:grid;grid-template-columns:2fr 1fr;gap:40px;}
.details-gallery{display:flex;gap:10px;}
.main-shot{flex:1;height:340px;border-radius:var(--r-md);background-size:cover;background-position:center;border:1px solid rgba(120,160,255,.14);} 
.thumbs{display:flex;flex-direction:column;gap:8px;width:90px;}
.thumb{height:80px;border-radius:10px;cursor:pointer;border:2px solid transparent;background-size:cover;background-position:center;transition:border-color .2s ease, transform .2s ease;} 
.thumb:hover{transform:translateY(-2px);border-color:rgba(47,224,216,.35);} 

.details-main h2{font-family:var(--display);margin:0 0 6px;font-size:clamp(24px,2.6vw,32px);} 
.details-loc{display:flex;align-items:center;gap:8px;color:var(--muted2);margin-top:10px;} 
.sep{opacity:.8;}
.pin{opacity:.9}

.details-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px;}
.spec{background:var(--card);border:1px solid var(--brd);border-radius:var(--r-md);padding:18px;}
.spec .tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-soft);} 

.details-amenities{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;}
.details-amenities .a{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.04);border:1px solid rgba(120,160,255,.14);border-radius:999px;padding:8px 12px;color:var(--muted2);font-size:13px;}

.nearby-list{margin:10px 0 0;padding-left:18px;color:var(--muted2);} 

.book-card{margin-top:18px;padding:18px;border-radius:var(--r-lg);} 

.dashboard-card{padding:26px;border-radius:var(--r-lg);} 
.dash-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.dash-tab{border-radius:999px;padding:10px 16px;border:1px solid rgba(120,160,255,.22);background:rgba(255,255,255,.04);color:var(--muted2);cursor:pointer;font-weight:800;}
.dash-tab.active{border-color:var(--cyan);color:var(--text);box-shadow:0 0 24px rgba(47,224,216,.14);} 
.tab-panel{display:none;margin-top:18px;}
.tab-panel.active{display:block;}
.profile-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:6px;}
.profile-row{display:flex;justify-content:space-between;gap:16px;border:1px solid rgba(120,160,255,.12);background:rgba(255,255,255,.04);padding:14px 16px;border-radius:var(--r-md);} 
.profile-row .tag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);} 

@media (max-width:980px){
  .cards-grid{grid-template-columns:1fr 1fr;}
  .search-card{grid-template-columns:1fr 1fr;}
  .filters{grid-template-columns:1fr 1fr;}
  .details-grid{grid-template-columns:1fr;}
  .details-specs{grid-template-columns:1fr;}
}

@media (max-width:640px){
  .cards-grid{grid-template-columns:1fr;}
  .filters{grid-template-columns:1fr;}
  .search-card{grid-template-columns:1fr;}
  .nav-links{display:none;}
}
.otp-box{

display:flex;

justify-content:space-between;

gap:10px;

margin-top:15px;

}

.otp-input{

width:50px;

height:55px;

font-size:24px;

text-align:center;

border-radius:12px;

border:1px solid rgba(255,255,255,.2);

background:#081223;

color:white;

outline:none;

transition:.3s;

}

.otp-input:focus{

border-color:#25d0ff;

box-shadow:0 0 15px rgba(37,208,255,.4);

}
.popup-actions{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-top:28px;
}

.popup-btn{
    width:100%;
    justify-content:center;
    text-align:center;
}
/* =====================================================
   CAMPORA PREMIUM INTRO
===================================================== */

#introScreen{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

background:#020617;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

z-index:999999;

transition:1s;

}

#introScreen.hide{

opacity:0;

visibility:hidden;

}

.intro-bg{

position:absolute;

width:180%;

height:180%;

background:

radial-gradient(circle at 20% 30%,rgba(37,99,235,.35),transparent 25%),

radial-gradient(circle at 80% 60%,rgba(124,58,237,.30),transparent 25%),

radial-gradient(circle at 50% 80%,rgba(6,182,212,.25),transparent 30%);

animation:bgMove 18s linear infinite;

filter:blur(60px);

}

@keyframes bgMove{

0%{

transform:rotate(0deg) scale(1);

}

100%{

transform:rotate(360deg) scale(1.15);

}

}

.intro-card{

position:relative;

z-index:2;

width:520px;

max-width:92%;

padding:50px;

text-align:center;

border-radius:30px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.12);

box-shadow:

0 25px 70px rgba(0,0,0,.45);

}

.intro-logo{

width:120px;

margin-bottom:25px;

animation:logoFloat 3s ease-in-out infinite;

filter:drop-shadow(0 0 30px rgba(37,99,235,.6));

}

@keyframes logoFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

#typingText{

font-size:28px;

font-weight:700;

color:white;

height:45px;

margin-bottom:15px;

}

.intro-title{

font-size:68px;

font-weight:900;

margin:0;

background:linear-gradient(90deg,#60A5FA,#A855F7,#06B6D4);

background-clip:text;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.intro-subtitle{

font-size:18px;

color:#CBD5E1;

margin-top:15px;

margin-bottom:40px;

}

.loading-wrapper{

width:100%;

height:10px;

background:rgba(255,255,255,.12);

border-radius:50px;

overflow:hidden;

}

#loadingBar{

width:0;

height:100%;

border-radius:50px;

background:linear-gradient(90deg,#2563EB,#7C3AED,#06B6D4);

transition:5s linear;

}

.loading-text{

margin-top:18px;

font-size:15px;

color:#94A3B8;

letter-spacing:.6px;

}