/* Annapara Home Stay – site additions (banner, forms, gallery, phone view) */

/* page-builder entrance animations: always visible */
.spb_animate_when_almost_visible, .sgu-item-wrap[data-animation], .animated { opacity: 1 !important; animation: none !important; transform: none !important; }

/* ---------- home banner ---------- */
.sg-hero { position: relative; width: 100%; aspect-ratio: 1920 / 900; overflow: hidden; background: #2e2a20; }
.sg-hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; }
.sg-hero-slide.is-active { opacity: 1; z-index: 1; animation: sgKen 10s linear forwards; }
@keyframes sgKen { from { transform: scale(1.05); } to { transform: scale(1); } }
.sg-hero-nav { position: absolute; top: 50%; z-index: 3; width: 42px; height: 42px; margin-top: -21px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.4); color: #fff; font-size: 28px; line-height: 40px; padding: 0; cursor: pointer; }
.sg-hero-nav:hover { background: rgba(99,50,0,.85); }
.sg-hero-prev { left: 20px; } .sg-hero-next { right: 20px; }

/* ---------- testimonial slider ---------- */
.sg-slides { position: relative; }
.sg-slides .sgu-item-wrap { display: none; }
.sg-slides .sgu-item-wrap.is-active { display: block; animation: sgFade .6s ease; }
@keyframes sgFade { from { opacity: 0; } to { opacity: 1; } }
.sg-dots { text-align: center; margin-top: 18px; }
.sg-dots button { width: 12px; height: 12px; margin: 0 5px; padding: 0; border: 1px solid #633200; background: transparent; cursor: pointer; transform: rotate(45deg); }
.sg-dots button.is-active { background: #633200; }

/* ---------- gallery ---------- */
.dt-sc-portfolio-container { display: flex; flex-wrap: wrap; }
.dt-sc-portfolio-container .portfolio { float: none !important; position: relative !important; left: auto !important; top: auto !important; }
.dt-sc-portfolio-container .portfolio figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.dt-sc-portfolio-container .portfolio figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.88); display: none; align-items: center; justify-content: center; }
.sg-lightbox.is-open { display: flex; }
.sg-lightbox img { max-width: 90vw; max-height: 82vh; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.sg-lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 46px; cursor: pointer; line-height: 1; padding: 10px; }
.sg-lb-close { top: 10px; right: 18px; } .sg-lb-prev { left: 10px; top: 50%; margin-top: -30px; } .sg-lb-next { right: 10px; top: 50%; margin-top: -30px; }
.sg-lb-cap { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #eee; font-size: 15px; }

/* ---------- forms ---------- */
.sg-form .sg-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sg-form input, .sg-form select, .sg-form textarea { width: 100%; box-sizing: border-box; font-family: inherit; }
.sg-form .is-invalid { border-color: #d63638 !important; background: #fff5f5 !important; }
.sg-form-submit { cursor: pointer; }
.sg-form-submit[disabled] { opacity: .6; cursor: wait; }
.sg-form-msg { margin-top: 12px; font-size: 14px; line-height: 1.5; }
.sg-form-msg:empty { display: none; }
.sg-form-msg.is-ok { color: #1c7c43; background: #e9f8ef; border-left: 4px solid #1c9d4f; padding: 9px 12px; }
.sg-form-msg.is-error { color: #b32d2e; background: #fdf0f0; border-left: 4px solid #d63638; padding: 9px 12px; }
/* footer quick enquiry (same look as before: name, email, send) */
.sg-quick-form input { margin-bottom: 12px; padding: 12px 14px; border: 1px solid #e5dccb; background: #fff; }
.sg-quick-form .sg-form-submit { width: 100%; padding: 11px; border: 0; border-top: 2px solid #633200; background: #fff; color: #633200; text-transform: uppercase; letter-spacing: 1px; }
.sg-quick-form .sg-form-submit:hover { background: #633200; color: #fff; }
/* contact page */
.sg-contact-form p { margin: 0 0 16px; }
.sg-contact-form input, .sg-contact-form textarea { padding: 12px 14px; border: 1px solid #d9cdb4; background: #fff; }
.sg-contact-form .sg-form-submit, .sg-book-form .sg-form-submit { background: #633200; color: #fff; border: 0; padding: 12px 34px; text-transform: uppercase; letter-spacing: 1px; }
.sg-contact-form .sg-form-submit:hover, .sg-book-form .sg-form-submit:hover { background: #8a4a0c; }
/* booking page */
.sg-book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-bottom: 20px; }
.sg-book-grid label { display: block; font-size: 14px; color: #4a3a22; }
.sg-book-grid input, .sg-book-grid select { margin-top: 6px; padding: 11px 12px; border: 1px solid #d9cdb4; background: #fff; }

/* ---------- back to top ---------- */
.sg-top { position: fixed; right: 18px; bottom: 18px; z-index: 999; width: 42px; height: 42px; line-height: 46px; text-align: center; font-size: 24px;
  background: #633200; color: #fff !important; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .3s; text-decoration: none; }
.sg-top.is-visible { opacity: .9; pointer-events: auto; }

/* ---------- sticky header (desktop) ---------- */
#main-header-wrapper.sg-scrolled { position: fixed; top: 0; left: 0; right: 0; z-index: 9990; box-shadow: 0 2px 12px rgba(0,0,0,.15); }

/* ---------- phone / tablet ---------- */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  .sg-hero-nav { width: 32px; height: 32px; margin-top: -16px; font-size: 22px; line-height: 30px; }
  .sg-hero-prev { left: 8px; } .sg-hero-next { right: 8px; }
  .sg-book-grid { grid-template-columns: 1fr; }
  .dt-sc-portfolio-container .portfolio { width: 50% !important; margin: 0 !important; padding: 3px !important; box-sizing: border-box; }
}

/* full-width page rows (were stretched by a script) */
[data-sv-full-width="true"] { position: relative; width: 100vw; left: 50%; margin-left: -50vw !important; margin-right: 0 !important; box-sizing: border-box;
  padding-left: max(15px, calc((100vw - 1170px) / 2)); padding-right: max(15px, calc((100vw - 1170px) / 2)); }
[data-sv-full-width="true"][data-sv-stretch-content="true"] { padding-left: 0; padding-right: 0; }
.sgu-carousel-wrapper { visibility: visible !important; }
@media (min-width: 992px) { .fixed-paralax[data-sv-parallax-image] { background-attachment: fixed; } }

/* ---------- phone header: logo left, menu button right, small badges row (was 450px tall) ---------- */
@media (max-width: 767px) {
  #main-header-wrapper .container { width: 94% !important; max-width: none !important; }
  #main-header-wrapper .main-header { width: 100% !important; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 8px 0 6px !important; position: relative; }
  #main-header-wrapper .header-left { display: none !important; }
  #main-header-wrapper #logo { order: 1; width: auto !important; margin: 0 !important; padding: 0 !important; display: block !important; }
  #main-header-wrapper #logo img { max-height: 46px !important; width: auto !important; height: auto !important; }
  #main-header-wrapper #logo img.retina_logo { display: none !important; }
  #main-header-wrapper #menu-wrapper { order: 2; width: auto !important; margin: 0 !important; position: static !important; }
  #main-header-wrapper #dt-menu-toggle { width: 46px !important; height: 40px; padding: 0 !important; font-size: 0 !important; background: #633200 !important; border-radius: 3px; margin: 0 !important; }
  #main-header-wrapper #dt-menu-toggle .dt-menu-toggle-icon { right: 13px !important; }
  #main-header-wrapper .main-header > a { order: 3; display: inline-block; margin: 6px 6px 0 0 !important; }
  #main-header-wrapper .main-header > a img { width: 40px !important; margin: 0 !important; }
  /* menu panel */
  #main-header-wrapper #main-menu { position: absolute !important; left: 0; right: 0; top: 100%; z-index: 9999; width: 100% !important; display: block !important; }
  #main-header-wrapper #main-menu ul.menu { display: none !important; background: #633200; margin: 0; padding: 4px 0; box-shadow: 0 8px 18px rgba(0,0,0,.2); }
  body.sg-menu-open #main-header-wrapper #main-menu ul.menu { display: block !important; }
  #main-header-wrapper #main-menu ul.menu > li { display: block !important; float: none !important; width: 100% !important; border-bottom: 1px solid rgba(255,255,255,.12); }
  #main-header-wrapper #main-menu ul.menu > li:empty { display: none !important; }
  #main-header-wrapper #main-menu ul.menu > li > a { display: block !important; padding: 12px 18px !important; color: #fff !important; font-size: 14px; line-height: 1.3; }
}
@media (max-width: 767px) {
  #main-header-wrapper #logo { flex: 1 1 calc(100% - 60px); }
  #main-header-wrapper #logo a, #main-header-wrapper #logo img.normal_logo { display: block !important; visibility: visible !important; opacity: 1 !important; }
  #main-header-wrapper .main-header > a:first-of-type { margin-left: 0 !important; }
}
@media (max-width: 767px) {
  #main-header-wrapper #logo, #main-header-wrapper #logo a { text-align: left !important; }
  #main-header-wrapper #logo img.normal_logo { margin: 0 !important; }
  #main-header-wrapper .main-header { padding: 6px 0 4px !important; }
  #main-header-wrapper .main-header > a img { width: 36px !important; }
}
@media (max-width: 767px) {
  /* home gallery strip: 2 photos per row instead of one big photo per screen */
  [data-sv-stretch-content="true"] > .sv_col-sm-3 { width: 50% !important; float: left !important; }
  /* footer bottom line stacked & centred */
  .footer-copyright .column, .footer-copyright [class*="dt-sc-one-"] { width: 100% !important; float: none !important; text-align: center !important; margin: 4px 0 !important; }
}
@media (max-width: 767px) {
  .footer-copyright .container > div { flex-direction: column !important; gap: 6px; padding: 10px 0; }
  .footer-copyright .footer-left, .footer-copyright .footer-center, .footer-copyright .footer-right { text-align: center !important; width: 100%; }
}

/* =====================================================================
   FIXES v2
   1) Home: "waterfall + 3 cards" row  -> brown background + equal-height white panel
   2) Testimonial dots -> centered
   3) Quick-enquiry box must never cover page content (testimonial / book-now / corporate)
   ===================================================================== */

/* 1) brown pattern background (was lost when the builder script was removed) */
.sv_row.sv_custom_1569652290427 {
  background-color: #693c0e !important;
  background-image: url(../images/brown-pattern.jpg) !important;
  background-repeat: repeat !important;
  background-position: 0 0 !important;
  background-size: contain !important;
}
.sv_row.sv_custom_1569652290427 > .upb_bg_img { display: none !important; }

/* equal-height columns: left (waterfall) + right (3 cards) form one clean white panel */
@media (min-width: 768px) {
  .sv_row.sv_custom_1569652290427 { display: flex !important; flex-wrap: nowrap; align-items: stretch; }
  .sv_row.sv_custom_1569652290427:before,
  .sv_row.sv_custom_1569652290427:after { display: none !important; content: none !important; }
  .sv_row.sv_custom_1569652290427 > .sv_column_container { float: none !important; display: flex; flex-direction: column; }
  .sv_row.sv_custom_1569652290427 > .sv_column_container > .sv_column-inner { flex: 1 1 auto; height: auto; }
}

/* 2) testimonial slider bullets: always centered (theme made the buttons float:left) */
.sg-dots { display: flex !important; width: 100% !important; box-sizing: border-box; justify-content: center; align-items: center; gap: 14px; text-align: center; margin: 22px 0 6px; }
.sg-dots button { float: none !important; display: block !important; margin: 0 !important; flex: 0 0 auto; }

/* 3) quick-enquiry box overlaps the section above by 110px: keep that look, but reserve the space */
body.page-id-5323 #primary,
body.page-id-5445 #primary,
body.page-id-5862 #primary { padding-bottom: 150px !important; }

/* phone: remove the extra empty space under the waterfall photo (only needed on desktop to match card height) */
@media (max-width: 767px) {
  .sv_custom_1569651833514 > .spb_wrapper > img ~ div { display: none !important; }
  .sv_custom_1569651833514 { padding-bottom: 30px !important; }
}