/* Sand-colored directory and campground detail pages. Keep map tiles and overlays independent. */
html:root body.camp-directory,
html:root body.camp-detail {
  --paper: #f6f2ea;
  --sand: #e9e2d6;
  --linen: #f1eadf;
  --ink: #302b25;
  --rule: #cfc4b6;
  --clay: #833e28;
  background: var(--paper) !important;
  color: var(--ink) !important;
}
.camp-directory #directory {padding-bottom: 48px}
.camp-directory #directory .title {padding: 24px 0 14px !important}
.camp-directory #directory .title .kicker {display: none}
.camp-directory #directory .camp-toolbar {background: transparent; border-block: 1px solid var(--rule); padding: 8px 0}
.camp-directory #regionFilters {background: transparent !important; padding: 0; box-shadow: none}
.camp-directory #directory .condition-search {background: var(--sand) !important; padding: 18px; margin: 0; border-radius: 6px; box-shadow: none}
.camp-directory #directory .map-panel {padding: 0; margin: 0; background: transparent !important; border: 0; box-shadow: none; min-width: 0}
.camp-directory #directory .result-heading {text-align: left}
.camp-directory #directory .camp-list-card {background: var(--linen) !important; border-color: var(--rule) !important; border-radius: 8px; overflow: hidden; box-shadow: none}
.camp-directory #directory .camp-list-card:hover {border-color: var(--clay) !important}
.camp-card-photo {display: block; width: 100%; aspect-ratio: 1.9; object-fit: cover; border-radius: 4px; margin-bottom: 12px}
.camp-directory #directory :is(.season-tab,.condition-button,.detail-toggle,.filter,.result-view-toggle button,.condition-reset) {background: #f5efe5 !important; border-color: #b7aa99 !important; color: var(--ink) !important}
.camp-directory #directory :is(.active,button[aria-pressed=true],.condition-apply,.camp-list-actions a),
.camp-detail #app :is(.reserve-button,.review-menu a) {background: var(--clay) !important; border-color: var(--clay) !important; color: #fff !important; min-height: 44px}
.camp-directory #directory .camp-list-actions button {color: #663b2a !important; background: transparent !important; border: 0; text-decoration: underline; min-height: 44px}
.camp-directory #directory .camp-list-actions a {display: inline-flex; align-items: center; padding-inline: 15px}
.camp-directory #directory :is(.detail-conditions,.camp-search-results,.chosen-condition) {background: var(--linen) !important; color: var(--ink) !important}
.camp-directory #directory :is(.condition-search,.camp-list-card,.result-heading) :is(p,span,strong,h2,h3) {color: var(--ink) !important}
.camp-directory #directory .directory-layout {display: grid; gap: 20px; align-items: start; margin-top: 18px}
@media(min-width: 901px) {
  .camp-directory .directory-layout {grid-template-columns: 260px minmax(0,1fr)}
  .camp-directory #directory :is(.season-heading,.stay-condition-row,.condition-group) {display: grid; gap: 8px}
  .camp-directory #directory .season-tabs {display: flex; flex-wrap: wrap; gap: 4px}
  .camp-directory #directory .season-tab {min-width: 0; padding: 8px}
  .camp-directory #directory .detail-toggle {margin-left: 0}
  .camp-directory #directory .camp-list {grid-template-columns: repeat(2,minmax(0,1fr))}
}
@media(max-width: 900px) {
  .camp-directory #directory .directory-layout {grid-template-columns: minmax(0,1fr)}
}
@media(max-width: 640px) {
  .camp-directory #directory .camp-list {grid-template-columns: minmax(0,1fr)}
}
.camp-detail #app {max-width: 940px}
.camp-detail #app :is(.hero,.panel,.score-grid,.score-card,.bb-weather,.bb-reservation,.manager-card) {background: var(--linen) !important; border-color: var(--rule) !important; box-shadow: none; color: var(--ink) !important}
.camp-detail #app :is(.info-box,.rule-box,.tag,.weather-card,.weather-map,.weather-metrics div,.ra-steps li,.ra-install,.score-card,.keyword-group-title) {background: var(--sand) !important; border-color: var(--rule) !important; color: var(--ink) !important}
.camp-detail #app :is(.panel,.hero,.score-card,.bb-weather,.bb-reservation,.manager-card) :is(h1,h2,h3,h4,dt,dd,li,p,span,strong,small,b,label,div) {color: var(--ink) !important}
.camp-detail #app :is(.weather-day,.ra-controls,.weather-badge,.price-item) {border-color: #b9ad9e}
.camp-detail #app :is(.weather-day-range,.weather-warning,.weather-day-tip,.score-value) {color: #773821 !important; font-weight: 700}
.camp-detail #app :is(.back-link,.info-box a,.weather-guide a,.ra-install a,.ra-links a) {color: #71391f !important; text-underline-offset: 3px}
.camp-detail #app .ra-number {background: #e2c6a6; color: #412e20 !important}
.camp-detail #app button[aria-pressed=true] {background: var(--clay) !important; color: white !important}
.camp-detail #app .info-box.pro {border-left: 3px solid #678159}
.camp-detail #app .info-box.con {border-left: 3px solid #a56449}
.list-selects {display:flex;flex-wrap:wrap;align-items:center;gap:6px}
#directory .result-controls {flex-wrap:wrap}
#directory #mapTitle {scroll-margin-top:88px}
#directory #campPages {display:flex;justify-content:center;gap:3px;flex-wrap:wrap;margin:18px 0}
#directory #campPages:empty {display:none}
#directory #campPages button {min-width:38px;min-height:44px;padding:4px 8px;background:#f1eadf;color:#513723;border:1px solid #c6b9a6;border-radius:6px;cursor:pointer}
#directory #campPages button[aria-current="page"] {background:#833e28;color:white}
#directory #campPages button:disabled {opacity:.48;cursor:default}

.camp-detail #app .weather-map {
  padding:clamp(15px,2vw,20px);
  border:1px solid var(--rule);
  border-radius:12px;
}
.camp-detail #app .weather-map-heading {flex-wrap:wrap}
.camp-detail #app .weather-map-buttons button {white-space:nowrap}
@media(max-width:640px){
  .camp-detail #app .weather-map-buttons {margin-top:4px}
}