/**
 * VRI VikBooking Theme - Responsive Overrides
 * Covers all VikBooking shortcode views at tablet, mobile, and small mobile breakpoints.
 */


/* ==========================================================================
   TABLET (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {

  /* Step bar stacks slightly */
  .vbo-stepbar li {
    font-size: 12px;
    padding: 10px 6px;
  }

  /* Room cards: image takes less width */
  .vbimglistdiv {
    width: 40% !important;
  }

  /* Options grid: 2 columns */
  .vbo-showprc-option-entry {
    width: calc(50% - 8px) !important;
  }

  /* Payment methods: 2 per row */
  .vbo-oconfirm-paymethods-list li {
    min-width: 180px;
  }

  /* Search form: tighter layout */
  .vbo-search-inpblock {
    min-width: 140px !important;
  }

  /* Packages: 2 columns */
  .vbo-pkglist-container {
    gap: 16px !important;
  }

  .vbo-pkglist-pkg {
    flex-direction: column !important;
  }

  .vbo-pkglist-pkg-bone,
  .vbo-pkglist-pkg-btwo,
  .vbo-pkglist-pkg-bthree {
    width: 100% !important;
  }

  /* Promotions */
  .vbo-promotion-dates {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Booking solutions: tighter */
  .vbo-booking-solution {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Availability calendar: scroll */
  .vbo-availability-room-monthcal {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}


/* ==========================================================================
   MOBILE (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {

  /* --- Mobile Summary Bar --- */
  .vri-mobile-summary {
    display: flex !important;
  }

  body.vri-has-mobile-summary {
    padding-bottom: 80px;
  }


  /* --- Step Bar --- */
  .vbo-stepbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .vbo-stepbar li {
    font-size: 11px;
    padding: 8px 4px;
    min-width: 80px;
    flex-shrink: 0;
  }


  /* --- Search Form: stack vertically on mobile --- */
  .vbo-search-mainview,
  .vbdivsearch {
    border-radius: 28px !important;
    padding: 6px !important;
  }

  .vb-search-inner {
    flex-direction: column !important;
    border-radius: 22px !important;
    padding: 12px 20px !important;
    gap: 0 !important;
  }

  .vbo-search-inpblock {
    width: 100% !important;
    min-width: auto !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    flex: none !important;
  }

  .vbo-search-inpblock:last-of-type {
    border-bottom: none !important;
  }

  .vbo-search-num-racblock {
    flex-direction: row !important;
    width: 100% !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    flex: none !important;
  }

  .vbo-search-num-rooms {
    padding: 0 12px 0 0 !important;
  }

  .vbo-search-num-adults-entry,
  .vbo-search-num-children-entry {
    padding: 0 12px !important;
  }

  .vbo-search-num-aduchild-block {
    flex-direction: row !important;
  }

  .vbo-search-categories {
    width: 100% !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  .vbo-search-submit {
    width: 100% !important;
    margin: 8px 0 4px 0 !important;
  }

  .vbo-search-submit .vbo-pref-color-btn,
  .vbo-search-submit button[type="submit"] {
    width: 100% !important;
    border-radius: 44px !important;
    padding: 16px !important;
  }


  /* --- Results Header --- */
  .vbo-results-head {
    flex-direction: column !important;
    padding: 14px !important;
  }

  .vbo-results-head > span {
    width: 100% !important;
    display: block !important;
    margin-bottom: 6px;
  }


  /* --- Property Cards / Room List --- */
  .vbimglistdiv {
    width: 100% !important;
    float: none !important;
  }

  .vbimglistdiv .vblistimg {
    height: 200px !important;
    border-radius: var(--vri-radius-card) var(--vri-radius-card) 0 0 !important;
  }

  .vbo-info-room,
  .vbdescrlistdiv {
    width: 100% !important;
    padding: 16px !important;
  }

  .vbcontdivtot {
    width: 100% !important;
    padding: 0 16px 16px !important;
  }

  .vbrowcname {
    font-size: 16px !important;
  }

  .room_result-inner,
  .vbo-room-result-inner,
  .vblistroomblock {
    flex-direction: column !important;
  }


  /* --- Compact Search Results --- */
  .vbo-room-result-head,
  .vbo-room-result-body {
    flex-direction: column !important;
  }

  .vbo-room-result-body-img,
  .vbo-room-result-body-details,
  .vbo-room-result-body-bookingsolutions {
    width: 100% !important;
  }


  /* --- Room Details --- */
  .vblistroomname {
    font-size: 22px !important;
  }

  .vbroomimgdesc {
    flex-direction: column !important;
  }

  .vbpricedetstable {
    font-size: 13px !important;
  }

  .room_carats,
  .roomlist_carats {
    gap: 6px !important;
  }

  .room_carats span,
  .roomlist_carats span {
    font-size: 12px !important;
    padding: 4px 8px !important;
  }


  /* --- Rate Plan Headers --- */
  .vbsearchheadroom,
  .vbsearchheadperson {
    border-radius: var(--vri-radius-input) !important;
    margin-bottom: 4px !important;
    display: block !important;
  }


  /* --- Options Grid: Single Column --- */
  .vbo-showprc-option-entry {
    width: 100% !important;
  }


  /* --- Booking Details --- */
  .vbo-booking-details-topcontainer {
    padding: 16px !important;
  }

  .vbvordroominfo {
    padding: 14px !important;
  }

  .vbvordroominfo-multi {
    flex-direction: column !important;
  }

  .vbo-booking-roomphoto {
    width: 100% !important;
    max-width: none !important;
  }

  .vbvordcosts {
    padding: 16px !important;
  }

  .vbo-booking-cost-detail {
    flex-direction: column !important;
    gap: 4px !important;
  }


  /* --- Confirmation Page --- */
  .vbcustomfields {
    padding: 16px !important;
  }

  .vbo-oconfirm-cfield-entry {
    margin-bottom: 12px !important;
  }

  .vbo-oconfirm-cfield-label,
  .vbo-oconfirm-cfield-input {
    width: 100% !important;
    display: block !important;
  }

  .vbo-oconfirm-paymethods-list {
    flex-direction: column !important;
  }

  .vbo-oconfirm-paymethods-list li {
    min-width: auto !important;
  }

  .vbentercoupon-inner {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .vbinputcoupon {
    width: 100% !important;
  }


  /* --- Order Table --- */
  .vbtableorder {
    font-size: 13px !important;
  }

  .vbtableorderfrow td,
  .vbtableorderfrow th,
  .vbo-oconfirm-roomrow td,
  .vbordrowtotal td {
    padding: 10px 12px !important;
  }


  /* --- Orders List / Guest Portal --- */
  .vbo-bookings-list-table-head {
    display: none !important;
  }

  .vbo-bookings-list-table-body-row {
    flex-direction: column !important;
    padding: 16px !important;
    gap: 8px !important;
  }

  .vbo-bookings-list-table-cell {
    width: 100% !important;
    padding: 4px 0 !important;
  }

  .vbo-bookings-list-table-cell-lbl {
    display: inline-block !important;
    font-weight: 600;
    margin-right: 8px;
  }


  /* --- Availability Calendar --- */
  .vbo-availability-room-details {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .vbo-availability-room-details-first {
    flex-direction: column !important;
  }

  .vbo-availability-room-details-left,
  .vbo-availability-room-details-right {
    width: 100% !important;
  }

  .vbo-availability-room-container {
    margin-bottom: 16px !important;
  }

  .vbo-availability-room-monthcal {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .vbo-availability-month-day,
  .vbo-availability-month-status {
    min-width: 36px !important;
    font-size: 11px !important;
  }


  /* --- Search Suggestions --- */
  .vbo-booking-solution {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .vbo-booking-solution-dates {
    flex-direction: row !important;
    gap: 12px !important;
  }

  .vbo-booking-solution-rooms {
    width: 100% !important;
  }

  .vbo-search-suggestions-av {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .vbo-search-suggestions-month-day {
    min-width: 40px !important;
  }


  /* --- Packages --- */
  .vbo-pkglist-pkg {
    flex-direction: column !important;
  }

  .vbo-pkglist-pkg-bone,
  .vbo-pkglist-pkg-btwo,
  .vbo-pkglist-pkg-bthree {
    width: 100% !important;
  }

  .vbo-pkglist-pkg-img {
    height: 200px !important;
    border-radius: var(--vri-radius-card) var(--vri-radius-card) 0 0 !important;
  }

  .vbo-pkgdet-topwrap {
    flex-direction: column !important;
  }

  .vbo-pkgdet-img {
    width: 100% !important;
    height: 200px !important;
  }


  /* --- Promotions --- */
  .vbo-promotion-wrapper {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .vbo-promotion-dates {
    flex-direction: column !important;
  }

  .vbo-promotion-rooms-list {
    flex-direction: column !important;
  }

  .vbo-promotion-room-block {
    width: 100% !important;
    flex-direction: column !important;
  }


  /* --- Login / Register --- */
  .loginregistercont {
    padding: 16px !important;
  }

  .loginregister-block {
    width: 100% !important;
  }

  .loginregister-row {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .loginregister-lbl,
  .loginregister-val {
    width: 100% !important;
  }


  /* --- Pre-Check-in --- */
  .vbo-precheckin-container {
    padding: 16px !important;
  }

  .vbo-precheckin-guest-fields {
    flex-direction: column !important;
    gap: 8px !important;
  }


  /* --- Signature --- */
  .vbo-signature-pad-body canvas {
    max-width: 100% !important;
  }

  .vbo-sign-bookdet-container {
    flex-direction: column !important;
    gap: 8px !important;
  }


  /* --- Review / Rating --- */
  .vbo-booking-leavereview-wrap {
    padding: 16px !important;
  }

  .vbo-booking-starrating-wrap {
    flex-direction: column !important;
    gap: 16px !important;
  }


  /* --- Buttons: Full Width --- */
  .com_vikbooking .booknow,
  .com_vikbooking .vbsubmit,
  .com_vikbooking .vbo-pref-color-btn {
    width: 100% !important;
    text-align: center !important;
  }


  /* --- Forms: Full Width --- */
  .com_vikbooking input[type="text"],
  .com_vikbooking input[type="email"],
  .com_vikbooking input[type="tel"],
  .com_vikbooking input[type="number"],
  .com_vikbooking select,
  .com_vikbooking textarea {
    width: 100% !important;
  }


  /* --- Modals --- */
  .vbo-offline-cc-overlay-inner,
  .vbdialog-inner {
    margin: 10px !important;
    max-width: none !important;
    border-radius: var(--vri-radius-input) !important;
  }


  /* --- Gallery --- */
  .vikfx-gallery-navigation-controls button {
    width: 32px !important;
    height: 32px !important;
  }
}


/* ==========================================================================
   SMALL MOBILE (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {

  /* Images smaller */
  .vbimglistdiv .vblistimg {
    height: 180px !important;
  }

  /* Prices smaller */
  .room_cost,
  .vbsrowpricediv {
    font-size: 18px !important;
  }

  /* Room name smaller */
  .vblistroomname {
    font-size: 20px !important;
  }

  /* Step bar: compact */
  .vbo-stepbar li {
    min-width: 60px;
    font-size: 10px;
  }

  /* Costs total smaller */
  .vbvordcoststot {
    font-size: 18px !important;
  }

  /* Booking info tighter */
  .vbo-booking-details-bookinfo {
    padding: 8px 0 !important;
  }

  /* Calendar day cells smaller */
  .vbo-availability-month-day,
  .vbo-availability-month-status,
  .vbo-search-suggestions-month-day {
    min-width: 32px !important;
    font-size: 10px !important;
    padding: 4px 2px !important;
  }

  /* Packages: compact */
  .vbo-pkglist-pkg-name {
    font-size: 16px !important;
  }

  .vbo-pkglist-pkg-price {
    font-size: 18px !important;
  }

  /* Promotions: compact */
  .vbo-promotion-name {
    font-size: 16px !important;
  }

  .vbo-promotion-discount-percent-amount {
    font-size: 18px !important;
  }

  /* Review stars smaller */
  .vbo-review-star {
    font-size: 20px !important;
  }

  /* Signature pad constraints */
  .vbo-signature-pad-body {
    max-height: 200px !important;
  }

  /* Mobile summary bar: tighter */
  .vri-mobile-summary {
    padding: 10px 12px !important;
  }

  .vri-mobile-summary__price {
    font-size: 16px !important;
  }

  .vri-mobile-summary__btn {
    padding: 10px 18px !important;
    font-size: 13px !important;
  }

  /* Favourites button smaller */
  .vri-favourite-btn {
    width: 32px !important;
    height: 32px !important;
  }

  .vri-favourite-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
}