/* ==========================================================================
   Calm & Central — Core Theme
   ========================================================================== */

:root{
  /* Base colors */
  --bg: #070707;
  --card: rgba(12,12,12,.72);

  --gold: #d2aa5a;
  --gold2: #f3d28a;

  --text: rgba(255,255,255,.86);
  --muted: rgba(255,255,255,.62);

  --border: rgba(210,170,90,.28);
  --border-soft: rgba(255,255,255,.10);

  /* Effects */
  --shadow: 0 24px 70px rgba(0,0,0,.65);

  /* Radii */
  --radius: 22px;
  --radius-sm: 12px;

  /* Navbar */
  --nav-bg: rgba(0,0,0,.55);
  --nav-blur: 10px;

  /* Brand/logo size (keep realistic so it won't clip) */
  --brand-h: 42px;     /* desktop logo height */
  --brand-h-sm: 36px;  /* mobile logo height */

  /* Navbar height should comfortably fit the logo */
  --nav-min-h: 64px;

  /* Chips */
  --chip-bg: rgba(0,0,0,.22);
  --chip-border: rgba(255,255,255,.12);
}

/* ==========================================================================
   Layout (sticky footer helper class)
   ========================================================================== */

html, body{ height: 100%; }

body.cc-layout{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main.cc-main{ flex: 1 0 auto; }
footer, .cc-footer{ flex-shrink: 0; }

/* ==========================================================================
   Base
   ========================================================================== */

body{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(210,170,90,0.10), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(210,170,90,0.07), transparent 55%),
    radial-gradient(800px 500px at 50% 95%, rgba(210,170,90,0.08), transparent 60%),
    var(--bg);
  color: var(--text);
}

a{
  color: rgba(255,255,255,.75);
  text-decoration: none;
}
a:hover{ color: var(--gold2); }

/* Hide carousel indicators */
#ccAptCarousel .carousel-indicators{ display: none; }

/* ==========================================================================
   Navbar
   ========================================================================== */

.cc-nav.navbar{
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(var(--nav-blur));
  backdrop-filter: blur(var(--nav-blur));
  border-bottom: 1px solid rgba(255,255,255,.06);

  min-height: var(--nav-min-h);

  /* Fix logo clipping */
  padding-top: .5rem;
  padding-bottom: .5rem;
  overflow: visible;
}

.cc-nav .navbar-brand{
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
}

.cc-nav .cc-brand{
  height: var(--brand-h);
  width: auto;
  object-fit: contain;
  display: block;
}

/* Button-like nav links */
.cc-nav .navbar-nav .nav-link{
  display: inline-flex;
  align-items: center;

  border-radius: var(--radius-sm);
  border: 1px solid rgba(210,170,90,.35);
  background: rgba(210,170,90,.06);

  color: rgba(255,255,255,.88);
  padding: .35rem .65rem;
  line-height: 1.2;
}

.cc-nav .navbar-nav .nav-link:hover,
.cc-nav .navbar-nav .nav-link:focus{
  color: #fff;
  border-color: rgba(210,170,90,.55);
  background: rgba(210,170,90,.10);
}

.cc-nav .navbar-nav .nav-link.active{
  border-color: rgba(243,210,138,.75);
  background: rgba(210,170,90,.16);
  color: #fff;
}

/* Dropdown menu (dark theme) */
.cc-nav .dropdown-menu{
  background: rgba(8,8,8,.92);
  border: 1px solid rgba(210,170,90,.22);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  border-radius: 14px;
  overflow: hidden;
}

.cc-nav .dropdown-item{ color: rgba(255,255,255,.85); }
.cc-nav .dropdown-item:hover,
.cc-nav .dropdown-item:focus{
  background: rgba(210,170,90,.14);
  color: #fff;
}

/* Right side text */
.cc-nav .navbar-text{ color: rgba(255,255,255,.78); }

/* Mobile navbar: visible toggler + readable collapsed menu */
.cc-nav .navbar-toggler{
  border: 1px solid rgba(210,170,90,.35);
  background: rgba(0,0,0,.55);
  padding: .35rem .55rem;
  border-radius: 12px;
}
.cc-nav .navbar-toggler:hover{
  border-color: rgba(210,170,90,.55);
  background: rgba(0,0,0,.70);
}
.cc-nav .navbar-toggler:focus{
  box-shadow: 0 0 0 .2rem rgba(210,170,90,.22);
}
.cc-nav .navbar-toggler-icon{
  filter: brightness(1.6) contrast(1.2);
}

@media (max-width: 991.98px){
  .cc-nav .navbar-collapse{
    margin-top: .75rem;
    padding: .75rem;
    border-radius: 16px;
    background: rgba(0,0,0,.82);
    border: 1px solid rgba(210,170,90,.20);
    box-shadow: 0 18px 55px rgba(0,0,0,.55);
  }

  .cc-nav .navbar-nav .nav-link{
    width: 100%;
    justify-content: flex-start;
  }
}

/* Slightly smaller logo on small screens */
@media (max-width: 768px){
  .cc-nav .cc-brand{ height: var(--brand-h-sm); }
}

/* ==========================================================================
   Cards / Buttons
   ========================================================================== */

.cc-card{
  background: linear-gradient(180deg, rgba(20,20,20,.75), rgba(8,8,8,.62));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.cc-btn{
  border-radius: 14px;
  border: 1px solid rgba(210,170,90,.55);
  background: linear-gradient(180deg, rgba(210,170,90,.22), rgba(210,170,90,.10));
  color: rgba(255,255,255,.92);
  font-weight: 650;
}

.cc-btn-outline{
  border-radius: 12px;
  border: 1px solid rgba(210,170,90,.35);
  background: rgba(210,170,90,.06);
  color: rgba(255,255,255,.85);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.cc-footer{
  border-top: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.55);
}

.cc-footer img{
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.cc-footer a:hover img{ opacity: .8; }

/* ==========================================================================
   Media / Frames
   ========================================================================== */

.ratio-9x16{ --bs-aspect-ratio: 177.7778; }

.media-frame{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}

/* ==========================================================================
   Gallery controls / badges
   ========================================================================== */

.photo-card{ position: relative; }

.delete-btn{
  position: absolute;
  right: 10px;
  top: 10px;

  padding: 6px 10px;
  border-radius: 10px;

  border: 1px solid rgba(220,53,69,.35);
  background: rgba(220,53,69,.20);
  color: rgba(255,255,255,.90);

  font-size: 12px;
  cursor: pointer;
  user-select: none;
  z-index: 3;
}
.delete-btn:hover{ background: rgba(220,53,69,.35); }

.tag-badge{
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 12px;
  color: rgba(255,255,255,.92);

  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.14);

  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Remove button */
.photo-card button.remove-btn,
.photo-card .remove-btn{
  background: transparent;
  border: 0;
  box-shadow: none;

  color: #dc3545;
  font-weight: 700;
  letter-spacing: .2px;
  text-shadow: 0 0 6px rgba(220,53,69,.35);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  margin: 10px auto 0;
  padding: 8px 10px;
  cursor: pointer;
}

/* ==========================================================================
   Amenities chips (old style; still used in some pages)
   ========================================================================== */

.amenities-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.amenity-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 999px;

  border: 1px solid var(--chip-border);
  background: var(--chip-bg);

  color: rgba(255,255,255,.88);
  font-size: 14px;
  line-height: 1.2;
}

.amenity-chip small{
  color: rgba(255,255,255,.60);
  font-size: 12px;
}

/* ==========================================================================
   Admin look tweaks
   ========================================================================== */

.cc-admin .navbar { background: transparent !important; }
.cc-admin .navbar .navbar-nav .nav-link { color: #fff !important; }
.cc-admin footer { background: transparent !important; color: #fff !important; }

/* ==========================================================================
   Inline edit UX
   ========================================================================== */

.cc-edit[contenteditable="true"]{
  cursor: text;
  border-radius: .5rem;
  padding: .35rem .5rem;
  min-width: 70px;
}
.cc-edit.cc-editing{
  outline: 2px solid rgba(13,110,253,.25);
  background: rgba(13,110,253,.05);
}

tr.cc-saving td{
  filter: blur(1.2px);
  opacity: .65;
  transition: filter .15s ease, opacity .15s ease;
}
tr.cc-saving td:last-child{
  filter: none;
  opacity: 1;
}

.cc-saved{ box-shadow: inset 0 0 0 9999px rgba(25,135,84,.08); }
.cc-error{ box-shadow: inset 0 0 0 9999px rgba(220,53,69,.10); }

/* ==========================================================================
   Calm & Central styled select
   ========================================================================== */

.cc-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding: 6px 34px 6px 12px;
  border-radius: 12px;

  font-size: 14px;
  line-height: 1.3;

  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M5.5 7.5L10 12l4.5-4.5'/%3E%3C/svg%3E")
      no-repeat right 12px center / 12px;

  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.18);
  background-color: rgba(0,0,0,.35);
  cursor: pointer;
}

.cc-select:focus{
  outline: none;
  border-color: rgba(243,210,138,.75);
  box-shadow: 0 0 0 2px rgba(243,210,138,.25);
}

.cc-select option{ color: #111; }

/* ==========================================================================
   Amenities (new public gallery block)
   ========================================================================== */

.cc-amenities-card{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
}

.cc-amen-title{
  font-weight: 600;
  margin-bottom: 10px;
  color: rgba(255,255,255,.92);
}

.cc-amen-grid{
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 10px;
}


  /* Inline edit feel */
  td.cc-editable { cursor: pointer; }
  td.cc-editable.cc-editing { position: relative; }
  td.cc-editable.cc-editing::after{
    content:"";
    position:absolute; inset:0;
    backdrop-filter: blur(1.5px);
    background: rgba(255,255,255,.55);
    pointer-events:none;
  }
  .cc-editor {
    position: relative;
    z-index: 2;
    width: 100%;
  }
  .cc-saving { opacity: .6; }



@media (min-width: 576px){
  .cc-amen-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px){
  .cc-amen-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cc-amen-chip{
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 10px 12px;
}

.cc-amen-name{
  font-weight: 600;
  color: rgba(255,255,255,.92);
  line-height: 1.2;
}

.cc-amen-desc{
  margin-top: 4px;
  font-size: 12.5px;
  color: rgba(255,255,255,.65);
  line-height: 1.35;
}

/* Optional login logo polish */
.login-logo{ opacity: .92; }