/* ================================== */
/* 1. SECTION: BASE CALENDAR STRUCTURE */
/* ================================== */

/* 1.1 Wrapper for Overall Padding & Overflow */
.waypoint-calendar-wrapper {
    padding: 40px !important; /* Apply padding to wrapper */
    width: 100%;
    box-sizing: border-box;
    overflow: visible !important; /* Allow content to overflow */
    display: block !important; /* Ensure block behavior for padding */
}
/* end of 1.1 */

/* 1.2 Grid Definition */
#calendar-grid {
    display: grid;
    grid-template-columns: 150px repeat(7, 150px);
    gap: 5px;
    align-items: stretch;
    width: fit-content;
    margin: 0;
}
/* end of 1.2 */

/* 1.3 Container Styles */
/* Apply base container styles to both */
.calendar-container {
    padding: 25px !important; /* Keep original inner padding */
    border-radius: 15px;
    box-sizing: border-box;
    overflow: visible !important; /* Let grid overflow */
    width: 100% !important; /* Fill wrapper */
    min-width: unset !important;
    margin: 0 !important;
    /* Background/border applied in branding */
}
/* end of 1.3 */

/* 1.4 Grid Row Structure */
#calendar-grid .header-row,
#calendar-grid .slot-row {
    display: contents;
}
/* end of 1.4 */

/* 1.5 General Cell Styles (Headers & Labels) */
#calendar-grid .day-header,
#calendar-grid .slot-label {
    padding: 10px;
    border: 1px solid; /* Color set in branding */
    text-align: center !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 60px;
}
/* end of 1.5 */

/* 1.6 Booking Card Specific Styles */
#calendar-grid .booking-card {
    padding: 10px;
    border: 1px solid; /* Color set in branding */
    text-align: center !important;
    height: 160px !important; /* Fixed height */
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
}

#calendar-grid .booking-card p {
    margin: 5px 0;
    width: 100%;
}
/* end of 1.6 */

/* 1.7 Slot Label Specific Styles */
#calendar-grid .slot-label {
    line-height: 1.4;
    padding: 10px 5px;
}
/* end of 1.7 */


/* 1.8 Week Navigation Styles */
/* Target ID directly for both contexts */
#week-selector {
    padding: 10px 15px 5px 15px !important; /* Apply inner padding */
    margin-bottom: 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    text-align: center;
    border: 2px solid; /* Applied in branding */
    border-bottom: none !important;
    position: relative;
    z-index: 5;
    box-sizing: border-box;
    width: 100% !important; /* Fill wrapper */
    display: flex; /* Keep flex for front-end layout */
    flex-direction: column;
    align-items: center;
    /* Colors applied in branding */
}
/* Styles for the new inner divs (Front-end layout) */
.waypoint-calendar-wrapper #week-selector .week-selector-line-1 {
    margin-bottom: 10px; /* Space */
}
.waypoint-calendar-wrapper #week-selector .week-selector-line-2 button {
    margin: 0 5px;
}

/* Span styling */
#week-selector span {
    margin: 0 15px;
    display: inline-block;
    padding: 5px 0;
}
/* end of 1.8 */
/* end of 1 */


/* ================================== */
/* 2. SECTION: HARDCORE BRANDING STYLES */
/* ================================== */

/* 2.1 Container Background and Border */
.calendar-container {
    background-color: #030422 !important; /* Dark Navy */
    border: 2px solid #FD5D52 !important;   /* The weird "red" */
}
/* Tab effect overlap */
.waypoint-calendar-wrapper .calendar-container {
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    margin-top: -2px !important; /* Overlap border exactly */
}
/* end of 2.1 */

/* 2.2 Grid Cell Background and Borders */
#calendar-grid .day-header,
#calendar-grid .slot-label,
#calendar-grid .booking-card {
    border-color: #F29F05 !important; /* Orange 1 */
    background-color: rgba(51, 76, 120, 0.1) !important;
}
/* end of 2.2 */

/* 2.3 Text Colors */
body #wpbody-content .wrap,
.waypoint-calendar-wrapper,
#calendar-grid,
#week-selector span,
#week-selector button {
    color: #FDF2D5 !important; /* Cream Text */
}
#calendar-grid .day-header,
#calendar-grid .slot-label,
#calendar-grid .booking-card p {
    color: #FDF2D5 !important; /* Cream Text */
}
/* end of 2.3 */

/* 2.4 Header/Label Specific Styling */
#calendar-grid .day-header,
#calendar-grid .slot-label {
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    background-color: rgba(51, 76, 120, 0.2) !important;
}
/* end of 2.4 */

/* 2.5 Button Styling */
#calendar-grid .book-button,
#calendar-grid .change-button,
#week-selector button {
    background-color: transparent !important;
    padding: 5px 8px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
    border-radius: 3px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    font-size: 0.8em !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    width: auto !important;
    border: 1px solid;
    vertical-align: middle; /* Align buttons nicely with text */
}
#calendar-grid .book-button {
    color: #4DB885 !important; /* Green */
    border-color: #4DB885 !important;
    margin-top: auto !important;
}
#calendar-grid .change-button {
     color: #F29F05 !important; /* Orange 1 */
     border-color: #F29F05 !important;
     margin-top: auto !important;
}
#week-selector button {
     color: #F29F05 !important; /* Orange 1 */
     border-color: #F29F05 !important;
}

/* Hover States */
#calendar-grid .book-button:hover {
    background-color: #4DB885 !important;
    color: #030422 !important;
}
#calendar-grid .change-button:hover,
#week-selector button:hover {
     background-color: #F29F05 !important;
     color: #030422 !important;
}
/* end of 2.5 */

/* 2.6 Disabled Button Styling */
#calendar-grid .book-button:disabled {
  background-color: transparent !important;
  color: #F24405 !important;      /* Orange 4 */
  border-color: #F24405 !important; /* Orange 4 */
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}
#calendar-grid .book-button:disabled:hover {
  background-color: transparent !important;
  color: #F24405 !important;
  border-color: #F24405 !important;
  transform: none !important;
  opacity: 0.7 !important;
}
/* end of 2.6 */

/* 2.7 Week Selector Tab Background & Border */
#week-selector {
     background-color: #030422 !important; /* Dark Navy */
     border-color: #FD5D52 !important; /* The weird "Red" */
     /* color is handled in 2.3 */
}
/* end of 2.7 */
/* end of 2 */


/* ================================== */
/* 3. SECTION: MODAL STYLES           */
/* ================================== */

/* 3.1 Disclaimer Modal Wrapper */
.disclaimer-modal { 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    /* Use a dark navy overlay, matching the calendar's Dark Navy bg */
    background-color: rgba(3, 4, 34, 0.7); 
}
/* end of 3.1 */

/* 3.2 Modal Content Box */
.modal-content { 
    /* Use Cream for the light background */
    background-color: #FDF2D5 !important; 
    /* Use Deep Blue for the main text, ensuring readability */
    color: #334C78 !important; 
    margin: 10% auto; 
    padding: 25px !important; /* Match calendar container padding */
    /* Use Deep Blue for the main border */
    border: 3px solid #334C78 !important; 
    width: 80%; 
    max-width: 600px; 
    /* Match calendar container border-radius */
    border-radius: 15px !important; 
    box-sizing: border-box;
}
/* end of 3.2 */

/* 3.3 Modal Scrollable Area */
.modal-scroll { 
    max-height: 400px; 
    overflow-y: auto; 
    margin-bottom: 15px; 
    /* Use Sky Blue for the scroll box border */
    border: 2px solid #7CA7FE !important; 
    padding: 15px;
    /* Use Deep Blue for the scroll background */
    background-color: #334C78 !important; 
    /* Use Cream for the scroll text (matching calendar) */
    color: #FDF2D5 !important; 
    border-radius: 4px;
}

/* Ensure all text inside the scroll box is Cream */
.modal-scroll p,
.modal-scroll li {
    color: #FDF2D5 !important;
}
/* end of 3.3 */

/* 3.4 Modal Text and Buttons */
.modal-content h2 { 
    margin-top: 0; 
    /* Use Deep Blue for the heading */
    color: #334C78 !important; 
    /* Match calendar header style */
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
}

.modal-content label { 
    display: block; 
    margin: 15px 0; 
    font-weight: bold;
    color: #334C78 !important; /* Use Deep Blue for the label */
}

/* Base button styles */
.modal-content button { 
    margin: 5px; 
    padding: 10px 20px; 
    cursor: pointer; 
    border-radius: 20px; /* Rounded corners */
    border: 1px solid #555; 
}

/* Agree button */
#agree-button { 
    background-color: #4DB885; 
    color: white; 
    border-color: #4DB885; 
}
#agree-button:hover { 
    background-color: #3a9d6e; 
}

/* Cancel button */
#cancel-button { 
    background-color: #FD5D52; 
    color: white; 
    border-color: #FD5D52; 
}
#cancel-button:hover { 
    background-color: #e84c3d; 
}
/* end of 3.4 */
/* end of 3 */


/* ================================== */
/* 4. SECTION: COUPON STYLES (in Modal) */
/* ================================== */

/* 4.1 Coupon Section Wrapper */
.coupon-section {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 2px solid #334C78; /* Deep Blue border */
    background-color: #E8EBF1; /* A slightly off-white, lighter than cream */
    border-radius: 4px;
}
/* end of 4.1 */

/* 4.2 Price Display */
.coupon-price-display {
    font-size: 1.1em;
    font-weight: bold;
    color: #334C78; /* Deep Blue text */
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.coupon-price-display span {
    line-height: 1.5;
}

#coupon-discount-amount {
    color: #4DB885; /* Green for discount */
}

#coupon-final-price {
    font-size: 1.2em;
    color: #030422; /* Dark Navy for emphasis */
}
/* end of 4.2 */

/* 4.3 Input and Apply Button */
.coupon-input-wrapper {
    display: flex;
    width: 100%;
    margin-bottom: 5px;
    align-items: center; /* This will vertically center the input and button */
}

#coupon-code-input {
    flex-grow: 1;
    padding: 8px 10px;
    border: 1px solid #334C78; /* Deep Blue border */
    border-radius: 20px 0 0 20px; /* Rounded corners */
    color: #334C78;
    font-size: 1em;
    box-sizing: border-box; /* Ensures padding/border are included in height */
    height: 38px; /* Explicit height */
}
#coupon-code-input:disabled {
    background: #ccc;
    color: #777;
}

#apply-coupon-button {
    padding: 8px 15px;
    cursor: pointer;
    border: 1px solid;
    border-left: none;
    border-radius: 0 20px 20px 0; /* Rounded corners */
    font-weight: bold;
    /* Style to match "Agree" button */
    background-color: #4DB885;
    color: white;
    border-color: #4DB885;
    font-size: 1em;
    flex-shrink: 0;
    box-sizing: border-box; /* Ensures padding/border are included in height */
    height: 38px; /* Explicit height, matches input */
}
#apply-coupon-button:hover {
    background-color: #3a9d6e;
}
#apply-coupon-button:disabled {
    background-color: #4DB85; /* Stay Green */
    color: white;
    border-color: #4DB85; /* Stay Green */
    opacity: 0.7; /* Show it's disabled but still green */
    cursor: not-allowed;
}
/* end of 4.3 */

/* 4.4 Coupon Message Area */
.coupon-message {
    font-size: 0.9em;
    font-weight: bold;
    min-height: 1.2em; /* Reserve space */
}
.coupon-message.success {
    color: #4DB885; /* Green */
}
.coupon-message.error {
    color: #FD5D52; /* Red */
}
/* end of 4.4 */
/* end of 4 */


/* ================================== */
/* 5. SECTION: MOBILE RESPONSIVENESS  */
/* ================================== */
@media (max-width: 1299px) {
    /* 5.1 Enable horizontal scroll on smaller screens */
    .calendar-container {
        overflow-x: auto !important;
    }
     .waypoint-calendar-wrapper {
        padding: 20px 10px !important;
     }
     /* end of 5.1 */
}
/* end of 5 */


/* ================================== */
/* 6. SECTION: ADMIN SPECIFIC STYLES  */
/* ================================== */

/* 6.1 Adjust container width in WP Admin */
body.wp-admin .calendar-container {
    width: fit-content !important; /* Make container wrap the grid */
    margin: 0 auto !important;     /* Center the container */
    overflow-x: visible !important; /* Ensure grid isn't cut off */
    padding: 15px !important; /* Keep original admin padding */
}
/* end of 6.1 */

/* 6.2 Adjust week selector width and layout in WP Admin */
body.wp-admin #week-selector {
    width: fit-content !important; /* Make selector wrap its content */
    margin: 0 auto 0 auto !important; /* Center the selector, keep no bottom margin */
    min-width: unset !important;
    display: block !important; /* Restore single line layout */
    padding: 10px 15px !important; /* Keep original admin padding */
}
/* end of 6.2 */
/* end of 6 */


/* ================================== */
/* 7. SECTION: CONFIRMATION PAGE      */
/* ================================== */

/* 7.1 Main Confirmation Box Style */
.waypoint-confirmation {
    padding: 30px 35px;
    border-radius: 15px;
    border: 2px solid #F29F05; /* Orange 1 */
    background-color: #030422; /* Dark Navy */
    color: #FDF2D5; /* Cream Text */
    max-width: 700px;
    margin: 40px auto;
    box-sizing: border-box;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Body Font */
    font-size: 1.1em;
    line-height: 1.6;
}
/* end of 7.1 */

/* 7.2 Headings and Text */
.waypoint-confirmation h2 {
    font-family: "Acier BAT Solid", "Arial Black", sans-serif; /* Heading Font */
    text-transform: uppercase;
    margin-top: 0;
    padding-bottom: 10px;
    font-size: 1.5em;
    line-height: 1.3;
}

.waypoint-confirmation h3 {
    font-family: "Acier BAT Solid", "Arial Black", sans-serif; /* Heading Font */
    text-transform: uppercase;
    color: #FDF2D5; /* Cream */
    margin-top: 20px;
    margin-bottom: 5px;
    font-size: 1.2em;
}

.waypoint-confirmation p {
    color: #FDF2D5; /* Cream */
    margin-bottom: 10px;
}

.waypoint-confirmation hr {
    border: 0;
    border-top: 1px solid #F29F05; /* Orange 1 */
    margin: 25px 0;
}
/* end of 7.2 */

/* 7.3 Success State Styling (Green) */
.waypoint-confirmation.success h2 {
    color: #4DB885; /* Green */
    border-bottom: 2px solid #4DB885; /* Green */
}
/* end of 7.3 */

/* 7.4 Error State Styling (Red) */
.waypoint-confirmation.error {
    border-color: #FD5D52; /* Red */
}

.waypoint-confirmation.error h2 {
    color: #FD5D52; /* Red */
    border-bottom: 2px solid #FD5D52; /* Red */
}

.waypoint-confirmation.error p,
.waypoint-confirmation.error h3 {
     color: #FD5D52; /* Red */
}
/* end of 7.4 */
/* end of 7 */