/* De Dakhaas 2026 Retro Clean v2.1.11
   Deep mobile fix for WP Simple Booking Calendar.
   The issue is not the month card but the inner days grid/table staying at the
   plugin's old fixed width. This file is deliberately broad, but only inside
   WPSBC/SBC calendar wrappers and only on small screens.
*/
@media only screen and (max-width: 768px) {
  /* Some WP Simple Booking Calendar versions output dynamic color CSS in a <style> tag
     with WPSBC classes. Earlier broad selectors made that <style> tag visible as text.
     Keep all inline/plugin style tags hidden. */
  html body.dedakhaas-retro-clean style,
  html body.dedakhaas-retro-clean script,
  html body.dedakhaas-retro-clean style[class*="wpsbc"],
  html body.dedakhaas-retro-clean style[class*="sbc"],
  html body.dedakhaas-retro-clean .wpsbc-container style,
  html body.dedakhaas-retro-clean #sbc-calendar-wrapper style,
  html body.dedakhaas-retro-clean #sbc-calendar style {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }

  html body.dedakhaas-retro-clean #sbc-calendar-wrapper,
  html body.dedakhaas-retro-clean #sbc-calendar,
  html body.dedakhaas-retro-clean .sbc-calendar-month,
  html body.dedakhaas-retro-clean .wpsbc-container,
  html body.dedakhaas-retro-clean .wpsbc-calendars,
  html body.dedakhaas-retro-clean .wpsbc-calendar,
  html body.dedakhaas-retro-clean .wpsbc-calender-wrapper,
  html body.dedakhaas-retro-clean .wpsbc-calendar-wrapper,
  html body.dedakhaas-retro-clean [class*="wpsbc-"]:not(style):not(script) {
    box-sizing: border-box !important;
  }

  /* Outer plugin wrappers */
  html body.dedakhaas-retro-clean #sbc-calendar-wrapper,
  html body.dedakhaas-retro-clean #sbc-calendar,
  html body.dedakhaas-retro-clean .wpsbc-container,
  html body.dedakhaas-retro-clean .wpsbc-calendars,
  html body.dedakhaas-retro-clean .wpsbc-calender-wrapper,
  html body.dedakhaas-retro-clean .wpsbc-calendar-wrapper {
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* One month per row on phone */
  html body.dedakhaas-retro-clean .sbc-calendar-month,
  html body.dedakhaas-retro-clean .wpsbc-calendar {
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    min-width: 0 !important;
    margin: 0 auto 20px auto !important;
    padding: 14px !important;
    overflow: visible !important;
  }

  /* Headers stay full width */
  html body.dedakhaas-retro-clean .sbc-calendar-month > div,
  html body.dedakhaas-retro-clean .wpsbc-calendar-header,
  html body.dedakhaas-retro-clean .wpsbc-calendar-title,
  html body.dedakhaas-retro-clean .wpsbc-calendar-month-name {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* OLD table-based plugin: make the real table wider, not only the card */
  html body.dedakhaas-retro-clean #sbc-calendar table,
  html body.dedakhaas-retro-clean #sbc-calendar-wrapper table,
  html body.dedakhaas-retro-clean .sbc-calendar-month table,
  html body.dedakhaas-retro-clean .wpsbc-container table,
  html body.dedakhaas-retro-clean .wpsbc-calendar table,
  html body.dedakhaas-retro-clean .wpsbc-calender-wrapper table,
  html body.dedakhaas-retro-clean .wpsbc-calendar-wrapper table {
    float: none !important;
    clear: both !important;
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 3px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  html body.dedakhaas-retro-clean #sbc-calendar table col,
  html body.dedakhaas-retro-clean #sbc-calendar-wrapper table col,
  html body.dedakhaas-retro-clean .sbc-calendar-month table col,
  html body.dedakhaas-retro-clean .wpsbc-container table col,
  html body.dedakhaas-retro-clean .wpsbc-calendar table col {
    width: 14.285714% !important;
  }

  html body.dedakhaas-retro-clean #sbc-calendar table tr,
  html body.dedakhaas-retro-clean #sbc-calendar-wrapper table tr,
  html body.dedakhaas-retro-clean .sbc-calendar-month table tr,
  html body.dedakhaas-retro-clean .wpsbc-container table tr,
  html body.dedakhaas-retro-clean .wpsbc-calendar table tr {
    display: table-row !important;
    width: 100% !important;
  }

  html body.dedakhaas-retro-clean #sbc-calendar table th,
  html body.dedakhaas-retro-clean #sbc-calendar table td,
  html body.dedakhaas-retro-clean #sbc-calendar-wrapper table th,
  html body.dedakhaas-retro-clean #sbc-calendar-wrapper table td,
  html body.dedakhaas-retro-clean .sbc-calendar-month table th,
  html body.dedakhaas-retro-clean .sbc-calendar-month table td,
  html body.dedakhaas-retro-clean .wpsbc-container table th,
  html body.dedakhaas-retro-clean .wpsbc-container table td,
  html body.dedakhaas-retro-clean .wpsbc-calendar table th,
  html body.dedakhaas-retro-clean .wpsbc-calendar table td {
    display: table-cell !important;
    width: 14.285714% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    line-height: 36px !important;
    padding: 0 !important;
    font-size: 15px !important;
    text-align: center !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  /* NEW div/flex/grid-based plugin variants */
  html body.dedakhaas-retro-clean .wpsbc-calendar-content,
  html body.dedakhaas-retro-clean .wpsbc-calendar-days,
  html body.dedakhaas-retro-clean .wpsbc-calendar-dates,
  html body.dedakhaas-retro-clean .wpsbc-dates,
  html body.dedakhaas-retro-clean .wpsbc-weekdays,
  html body.dedakhaas-retro-clean .wpsbc-calendar-weekdays,
  html body.dedakhaas-retro-clean .wpsbc-calendar-week,
  html body.dedakhaas-retro-clean [class*="wpsbc-calendar-days"],
  html body.dedakhaas-retro-clean [class*="wpsbc-calendar-dates"],
  html body.dedakhaas-retro-clean [class*="wpsbc-weekdays"] {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 3px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
  }

  html body.dedakhaas-retro-clean .wpsbc-date,
  html body.dedakhaas-retro-clean .wpsbc-calendar-day,
  html body.dedakhaas-retro-clean .wpsbc-day,
  html body.dedakhaas-retro-clean .wpsbc-date-inner,
  html body.dedakhaas-retro-clean .wpsbc-date-number,
  html body.dedakhaas-retro-clean [class*="wpsbc-date"],
  html body.dedakhaas-retro-clean [class*="wpsbc-day"] {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    line-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 15px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  html body.dedakhaas-retro-clean #sbc-calendar-wrapper br,
  html body.dedakhaas-retro-clean #sbc-calendar br,
  html body.dedakhaas-retro-clean .wpsbc-container br,
  html body.dedakhaas-retro-clean .wpsbc-calendar br {
    display: none !important;
  }




  /* v2.1.11: clean up the mobile month header.
     The plugin adds a pale full-width header bar behind the month name. On the
     enlarged mobile calendar that bar looks broken, so keep only the title text
     and the small prev/next button aligned on the same 32px row. */
  html body.dedakhaas-retro-clean .sbc-calendar-month > div:first-child,
  html body.dedakhaas-retro-clean .sbc-calendar-month .sbc-calendar-month-name,
  html body.dedakhaas-retro-clean .sbc-calendar-month .sbc-calendar-title,
  html body.dedakhaas-retro-clean .sbc-calendar-month .sbc-calendar-header,
  html body.dedakhaas-retro-clean .wpsbc-calendar-header,
  html body.dedakhaas-retro-clean .wpsbc-calendar-title,
  html body.dedakhaas-retro-clean .wpsbc-calendar-month-name,
  html body.dedakhaas-retro-clean .wpsbc-calendar-month-title {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    margin: 0 0 12px 0 !important;
    padding: 0 42px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html body.dedakhaas-retro-clean .sbc-calendar-month > div:first-child *,
  html body.dedakhaas-retro-clean .wpsbc-calendar-header *,
  html body.dedakhaas-retro-clean .wpsbc-calendar-title *,
  html body.dedakhaas-retro-clean .wpsbc-calendar-month-name *,
  html body.dedakhaas-retro-clean .wpsbc-calendar-month-title * {
    line-height: 32px !important;
    vertical-align: middle !important;
  }


  /* Navigation arrows/next-prev controls.
     Keep the desktop look on mobile: a small grey square inside the month header,
     not a full-width bar between the title and the calendar grid. */
  html body.dedakhaas-retro-clean .sbc-calendar-month,
  html body.dedakhaas-retro-clean .wpsbc-calendar {
    position: relative !important;
    z-index: 1 !important;
  }

  html body.dedakhaas-retro-clean .sbc-calendar-month [class*="navigation"],
  html body.dedakhaas-retro-clean .sbc-calendar-month [class*="pagination"],
  html body.dedakhaas-retro-clean .wpsbc-calendar [class*="navigation"],
  html body.dedakhaas-retro-clean .wpsbc-calendar [class*="pagination"],
  html body.dedakhaas-retro-clean .wpsbc-container [class*="navigation"],
  html body.dedakhaas-retro-clean .wpsbc-container [class*="pagination"] {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    right: 14px !important;
    bottom: auto !important;
    z-index: 20 !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  html body.dedakhaas-retro-clean .sbc-calendar-month a[class*="prev"],
  html body.dedakhaas-retro-clean .sbc-calendar-month a[class*="next"],
  html body.dedakhaas-retro-clean .sbc-calendar-month button[class*="prev"],
  html body.dedakhaas-retro-clean .sbc-calendar-month button[class*="next"],
  html body.dedakhaas-retro-clean .sbc-calendar-month [class*="arrow"],
  html body.dedakhaas-retro-clean .wpsbc-calendar a[class*="prev"],
  html body.dedakhaas-retro-clean .wpsbc-calendar a[class*="next"],
  html body.dedakhaas-retro-clean .wpsbc-calendar button[class*="prev"],
  html body.dedakhaas-retro-clean .wpsbc-calendar button[class*="next"],
  html body.dedakhaas-retro-clean .wpsbc-calendar [class*="arrow"] {
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    line-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #c1c8cc !important;
    border: 0 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    color: transparent !important;
    text-decoration: none !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    z-index: 25 !important;
    pointer-events: auto !important;
  }

  html body.dedakhaas-retro-clean .sbc-calendar-month a[class*="prev"],
  html body.dedakhaas-retro-clean .sbc-calendar-month button[class*="prev"],
  html body.dedakhaas-retro-clean .sbc-calendar-month [class*="prev"][class*="arrow"],
  html body.dedakhaas-retro-clean .wpsbc-calendar a[class*="prev"],
  html body.dedakhaas-retro-clean .wpsbc-calendar button[class*="prev"],
  html body.dedakhaas-retro-clean .wpsbc-calendar [class*="prev"][class*="arrow"] {
    left: 0 !important;
    right: auto !important;
  }

  html body.dedakhaas-retro-clean .sbc-calendar-month a[class*="next"],
  html body.dedakhaas-retro-clean .sbc-calendar-month button[class*="next"],
  html body.dedakhaas-retro-clean .sbc-calendar-month [class*="next"][class*="arrow"],
  html body.dedakhaas-retro-clean .wpsbc-calendar a[class*="next"],
  html body.dedakhaas-retro-clean .wpsbc-calendar button[class*="next"],
  html body.dedakhaas-retro-clean .wpsbc-calendar [class*="next"][class*="arrow"] {
    right: 0 !important;
    left: auto !important;
  }

  html body.dedakhaas-retro-clean .sbc-calendar-month a[class*="prev"]::after,
  html body.dedakhaas-retro-clean .sbc-calendar-month button[class*="prev"]::after,
  html body.dedakhaas-retro-clean .sbc-calendar-month [class*="prev"][class*="arrow"]::after,
  html body.dedakhaas-retro-clean .wpsbc-calendar a[class*="prev"]::after,
  html body.dedakhaas-retro-clean .wpsbc-calendar button[class*="prev"]::after,
  html body.dedakhaas-retro-clean .wpsbc-calendar [class*="prev"][class*="arrow"]::after {
    content: "" !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 7px solid transparent !important;
    border-bottom: 7px solid transparent !important;
    border-right: 10px solid #fff !important;
    margin-left: -2px !important;
    text-indent: 0 !important;
  }

  html body.dedakhaas-retro-clean .sbc-calendar-month a[class*="next"]::after,
  html body.dedakhaas-retro-clean .sbc-calendar-month button[class*="next"]::after,
  html body.dedakhaas-retro-clean .sbc-calendar-month [class*="next"][class*="arrow"]::after,
  html body.dedakhaas-retro-clean .wpsbc-calendar a[class*="next"]::after,
  html body.dedakhaas-retro-clean .wpsbc-calendar button[class*="next"]::after,
  html body.dedakhaas-retro-clean .wpsbc-calendar [class*="next"][class*="arrow"]::after {
    content: "" !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 7px solid transparent !important;
    border-bottom: 7px solid transparent !important;
    border-left: 10px solid #fff !important;
    margin-right: -2px !important;
    text-indent: 0 !important;
  }

  html body.dedakhaas-retro-clean .sbc-calendar-month,
  html body.dedakhaas-retro-clean .wpsbc-calendar {
    position: relative !important;
    z-index: 1 !important;
  }

}


/* v2.1.12: final mobile calendar polish
   - align legend icons with their labels
   - keep month title and arrow on one visual row
   - center day numbers in the day boxes
   - remove the old plugin's fixed/min-height so the card does not leave a large empty area below the grid
*/
@media only screen and (max-width: 768px) {
  html body.dedakhaas-retro-clean .wpsbc-legend,
  html body.dedakhaas-retro-clean .wpsbc-legend-item,
  html body.dedakhaas-retro-clean #sbc-calendar-wrapper .legend,
  html body.dedakhaas-retro-clean #sbc-calendar .legend {
    box-sizing: border-box !important;
  }

  html body.dedakhaas-retro-clean .wpsbc-legend-item,
  html body.dedakhaas-retro-clean #sbc-calendar-wrapper .legend span,
  html body.dedakhaas-retro-clean #sbc-calendar .legend span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 22px !important;
    vertical-align: middle !important;
  }

  html body.dedakhaas-retro-clean .wpsbc-legend-item-icon,
  html body.dedakhaas-retro-clean .wpsbc-legend-item-icon > div,
  html body.dedakhaas-retro-clean #sbc-calendar-wrapper .legend img,
  html body.dedakhaas-retro-clean #sbc-calendar .legend img {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto !important;
  }

  html body.dedakhaas-retro-clean .sbc-calendar-month,
  html body.dedakhaas-retro-clean .wpsbc-calendar {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
  }

  html body.dedakhaas-retro-clean .sbc-calendar-month > div:first-child,
  html body.dedakhaas-retro-clean .sbc-calendar-month .sbc-calendar-month-name,
  html body.dedakhaas-retro-clean .sbc-calendar-month .sbc-calendar-title,
  html body.dedakhaas-retro-clean .sbc-calendar-month .sbc-calendar-header,
  html body.dedakhaas-retro-clean .wpsbc-calendar-header,
  html body.dedakhaas-retro-clean .wpsbc-calendar-title,
  html body.dedakhaas-retro-clean .wpsbc-calendar-month-name,
  html body.dedakhaas-retro-clean .wpsbc-calendar-month-title {
    position: relative !important;
    height: 32px !important;
    min-height: 32px !important;
    line-height: 32px !important;
    margin: 0 0 10px 0 !important;
    padding: 0 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transform: translateY(3px) !important;
  }

  html body.dedakhaas-retro-clean .sbc-calendar-month [class*="navigation"],
  html body.dedakhaas-retro-clean .sbc-calendar-month [class*="pagination"],
  html body.dedakhaas-retro-clean .wpsbc-calendar [class*="navigation"],
  html body.dedakhaas-retro-clean .wpsbc-calendar [class*="pagination"] {
    top: 10px !important;
  }

  html body.dedakhaas-retro-clean .sbc-calendar-month a[class*="prev"],
  html body.dedakhaas-retro-clean .sbc-calendar-month a[class*="next"],
  html body.dedakhaas-retro-clean .sbc-calendar-month button[class*="prev"],
  html body.dedakhaas-retro-clean .sbc-calendar-month button[class*="next"],
  html body.dedakhaas-retro-clean .sbc-calendar-month [class*="arrow"],
  html body.dedakhaas-retro-clean .wpsbc-calendar a[class*="prev"],
  html body.dedakhaas-retro-clean .wpsbc-calendar a[class*="next"],
  html body.dedakhaas-retro-clean .wpsbc-calendar button[class*="prev"],
  html body.dedakhaas-retro-clean .wpsbc-calendar button[class*="next"],
  html body.dedakhaas-retro-clean .wpsbc-calendar [class*="arrow"] {
    top: 0 !important;
  }

  html body.dedakhaas-retro-clean #sbc-calendar table,
  html body.dedakhaas-retro-clean #sbc-calendar-wrapper table,
  html body.dedakhaas-retro-clean .sbc-calendar-month table,
  html body.dedakhaas-retro-clean .wpsbc-container table,
  html body.dedakhaas-retro-clean .wpsbc-calendar table,
  html body.dedakhaas-retro-clean .wpsbc-calender-wrapper table,
  html body.dedakhaas-retro-clean .wpsbc-calendar-wrapper table {
    margin-bottom: 0 !important;
  }

  html body.dedakhaas-retro-clean #sbc-calendar table th,
  html body.dedakhaas-retro-clean #sbc-calendar table td,
  html body.dedakhaas-retro-clean #sbc-calendar-wrapper table th,
  html body.dedakhaas-retro-clean #sbc-calendar-wrapper table td,
  html body.dedakhaas-retro-clean .sbc-calendar-month table th,
  html body.dedakhaas-retro-clean .sbc-calendar-month table td,
  html body.dedakhaas-retro-clean .wpsbc-container table th,
  html body.dedakhaas-retro-clean .wpsbc-container table td,
  html body.dedakhaas-retro-clean .wpsbc-calendar table th,
  html body.dedakhaas-retro-clean .wpsbc-calendar table td {
    position: relative !important;
    text-align: center !important;
    vertical-align: middle !important;
    line-height: normal !important;
    padding: 0 !important;
  }

  html body.dedakhaas-retro-clean #sbc-calendar table th > *,
  html body.dedakhaas-retro-clean #sbc-calendar table td > *,
  html body.dedakhaas-retro-clean #sbc-calendar-wrapper table th > *,
  html body.dedakhaas-retro-clean #sbc-calendar-wrapper table td > *,
  html body.dedakhaas-retro-clean .sbc-calendar-month table th > *,
  html body.dedakhaas-retro-clean .sbc-calendar-month table td > *,
  html body.dedakhaas-retro-clean .wpsbc-container table th > *,
  html body.dedakhaas-retro-clean .wpsbc-container table td > *,
  html body.dedakhaas-retro-clean .wpsbc-calendar table th > *,
  html body.dedakhaas-retro-clean .wpsbc-calendar table td > *,
  html body.dedakhaas-retro-clean .wpsbc-date-number,
  html body.dedakhaas-retro-clean .wpsbc-date-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 36px !important;
    line-height: normal !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  html body.dedakhaas-retro-clean .wpsbc-date,
  html body.dedakhaas-retro-clean .wpsbc-calendar-day,
  html body.dedakhaas-retro-clean .wpsbc-day,
  html body.dedakhaas-retro-clean [class*="wpsbc-date"],
  html body.dedakhaas-retro-clean [class*="wpsbc-day"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
}