/* css/style.css */

/*
=========================================================
    BODY & H2 CSS & ADMIN TITLES
=========================================================
*/

body.admin-page {
    font-family: Arial, sans-serif;
    background: #F5F5F5; /* #F5F5F5 color=very light gray */
    padding: 0px 20px 20px;  /* TOP   LEFT & RIGHT   BOTTOM */
}

body {
    font-family: Arial, sans-serif;
    background: #F5F5F5; /* #F5F5F5 color=very light gray */
    background-image: url("../images/background_image.png"); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-attachment: fixed;
    padding: 0px 20px 20px;  /* TOP   LEFT & RIGHT   BOTTOM */

/*
Pale coastal blue-gray 	#f2f6f7	Clean, coastal, professional
Soft blue		#eef5f8	Slightly more beach/coastal
Warm off-white		#f7f6f2	Soft, upscale condo feel
Light sand		#f5f1e8	Warmer, more beach-oriented
Cool light gray		#f4f5f6	Neutral, modern
Warm light gray		#E8E6E1	Soft, slightly warm
Dull gray		#E2E2E0	Neutral and clean
Muted beige-gray	#E5E1D8	Warmer, condo/beach feel
Dull blue-gray		#DDE2E3	Subtle coastal feel
Dull sage-gray		#DEE1D8	Very muted green
Slightly darker gray	#D8D8D5	More noticeable contrast
*/
}

h2 {color: #333;}	/* color=dark gray */

.admin-titles {
    /* font-family: "Script MT"; */
    /* font-family: "Team MT", sans-serif; */
    font-family: "Stencil";

    font-size: 42px;	
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
    margin-bottom: 12px;   /* 👈 controls space */
}

.guest-LRC-titles {
    font-family: "Team MT", sans-serif;
    font-size: 36px;	
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    margin: 0px 0px;   /* 👈 controls space */
    line-height: 1;   
}

.guest-titles {
    font-family: "Team MT", sans-serif;
    font-size: 34px;	
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
    margin: 0px 0px;   /* 👈 controls space */
    line-height: 1;   
}

/*
=========================================================
    BUTTONS CSS 
=========================================================
*/

/* Base Large Buttons Linking To Pages Within */
.btn-Pages {
    display: inline-block;
    /* background: #1E73BE; */
    color: #FFFFFF;
    text-decoration: none;
    text-align: center; 
    font-size: 20px;
    font-weight: bold;
    padding: 12px 16px;    /* padding: [top & bottom] [left & right]; */
    border-radius: 12px;
    transition: background 0.2s ease;
    box-sizing: border-box;
    border: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.btn-Pages:hover {
    background: #155A96;
    color: #000000;
}

/* Base Button */
.btn-admin {
    border: none;
    border-radius: 4px;                 /* button rounding */
    cursor: pointer;
    display: inline-block;              /* allows width and padding */
    font-family: Arial, sans-serif;     /* button font family */
    font-size: 14px;                    /* button font size */
    font-weight: bold;                  /* button font weight */
    padding: 4px 12px;                 /* button padding (height x length) */
    text-align: center;                 /* center text */
    text-decoration: none;              /* remove underline */
    transition: background-color 0.3s;
    box-sizing: border-box;
    -webkit-appearance: none;           /* remove browser styling */
    -moz-appearance: none;
    appearance: none;
}

/* CONTROLS THE PAGE BUTTONS IN GUEST/BOOKING.PHP
   CONTROLS THE PAGE BUTTONS IN ADMIN/CANCEL_BOOKING.PHP
*/ 
.btn375-blue {
    width: 375px;
    background: #0056B3;
    color: white;
}

.btn375-blue:hover {
    background: #007BFF;
    color: black;
}

.btn300-blue {
    width: 300px;
    background: #0056B3;
    color: white;
}

.btn300-blue:hover {
    background: #007BFF;
    color: black;
}

.btn300-blue:disabled {
    width: 300px;
    background-color: #9FC5E8 !important;  /* #999 gray out  #c5d9f1 */
    color: #999 !important;
    cursor: default; 
    /* 
    opacity: 0.75; 
    border-radius: 12px;
    */
}


/* 
   CONTROLS THE PAGE BUTTONS IN ADMIN/BLOCKDATES.PHP
   CONTROLS THE PAGE BUTTONS IN ADMIN/BOOKINGS.PHP
   CONTROLS THE PAGE BUTTONS IN ADMIN/RATES.PHP 
*/
.btn250-blue {
    width: 250px;
    background: #0056B3;
    color: white;
}

.btn250-blue:hover {
    background: #007BFF;
    color: black;

}

/* CONTROLS THE 'LOGIN' BUTTON IN ADMIN/INDEX.PHP */
/* CONTROLS THE 'HOME PAGE' BUTTON IN GUEST/CONFIRMATION.PHP */
.btn250-green {
    width: 250px;
    background: GREEN;
    color: white;
}

.btn250-green:hover {
    background: #90EE90;
    color: black;
}

.btn250-red {
    background: red;
    color: white;
    width: 250px;
}

.btn250-red:hover {
    background: #EE4B2B;
    color: black;
}

/* CONTROLS THE PAGE BUTTON IN GUEST/CALENDAR.PHP */
.btn215-blue {
    width: 215px;
    background: #007BFF;
    color: white;
}

.btn215-blue:hover {
    background: #0056B3;
    color: black;
}

/* 
   CONTROLS THE ADMIN 'SET RATE' BUTTON IN ADMIN/RATES.PHP
   CONTROLS THE ADMIN 'SET RANGE' BUTTON IN ADMIN/RATES.PHP
   CONTROLS THE ADMIN 'ADD NEW DATES' BUTTON IN ADMIN/RATES.PHP 
*/
.btn150-green {
    background: #008000;
    color: white;
    width: 128px; 
}

.btn150-green:hover {
    background: #66FF00;
    color: black;
}

/* 
   CONTROLS THE ADMIN 'DELETE RANGE' BUTTON IN ADMIN/RATES.PHP
   CONTROLS THE ADMIN 'BLOCK DATES' BUTTON IN ADMIN/BLOCKDATES.PHP
*/
.btn150-red {
    background: red;
    color: white;
    width: 128px;
}

.btn150-red:hover {
    background: #EE4B2B;
    color: black;
}

/* 
   CONTROLS THE ADMIN 'DELETE' BUTTON IN ADMIN/RATES.PHP
   CONTROLS THE ADMIN 'DELETE' BUTTON IN ADMIN/BOOKINGS.PHP
*/
.btn75-red {
    background: red;
    color: white;
    width: 65px;
}

.btn75-red:hover {
    background: #EE4B2B;
    color: black;
}

/* 
   CONTROLS THE ADMIN 'REFUND' BUTTON IN ADMIN/VIEW_MODIFY_RECORD.PHP
*/
.btn-refund-blue {
    background: #0056B3;
    color: white;
    width: 75px;
}

.btn-refund-blue:hover {
    background: #007BFF;
    color: black;
}

/* 
   CONTROLS THE ADMIN 'PROCESS REFUND' BUTTON IN ADMIN/VIEW_MODIFY_RECORD.PHP
*/
.btn-process-refund-blue {
    background: #0056B3;
    color: white;
    width: 125px;
}

.btn-process-refund-blue:hover {
    background: #007BFF;
    color: black;
}

.btn-process-refund-all-blue {
    background: #0056B3;
    color: white;
    width: 175px;
}

.btn-process-refund-all-blue:hover {
    background: #007BFF;
    color: black;
}

/* CONTROLS THE ADMIN 'BOOKED' BUTTON IN ADMIN/RATES.PHP */
.btn75-gray {
    background: #AEB4B9; /* gray #6C757D -- light gray #AEB4B9 */
    border: none;
    color: white;
    cursor: default;
    width: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 4px 0;
    margin: 0 auto;
}

/*
==========================================================
    RESERVATION SUMMARY / FINANCIAL DISPLAY STYLES
==========================================================
*/
.summary-section-title {
    text-align: center;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    margin-bottom: 0;
    margin-top: 14px;
}

.summary-section-table {
    margin-top: 0;
}

.summary-section-table td {
    padding: 0 3px;
}

.money {
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-left: 4px;
}

/*
======================================================
    <TABLE><TR><TH><TD> CSS
======================================================
*/
td .btn-admin {
    display: inline-block;
    margin: 0 !important;
    padding-left: 0;
    padding-right: 0;
}

/* Table styling */
/* styles table element with the class="ExistingRates" */
table.ExistingRates {
    border-collapse: collapse;	/* keeps grid lines clean */
    /* width: 300px;  */
    color: black;
    margin: auto;
    margin-top: 20px;
    line-height: 1.5;
    width: auto;                 /* shrink table to fit contents */
    table-layout: auto;          /* allows columns to fit content */
}

.ExistingRates th {
    border: 1px solid #ccc;      /* standard grid lines */
    padding: 1px 8px;            /* compact height */
    text-align: center;          /* centers the header text */
}

.ExistingRates td {
    border: 1px solid #ccc;      /* standard grid lines */
    padding: 1px 8px;            /* compact height */
    text-align: center;          /* centers the header text */
    vertical-align: middle;
    white-space: nowrap;         /* prevents long content from wrapping */
}

.ExistingRates td form {
    margin: 0;
}

/* Styles all <table> within <div class="AllReservations"> */
.AllReservations table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 auto;
    border: 1px solid #000000;
    background-color: #f9f9f9;
    font-size: 15px;
    white-space: nowrap;
}

/* Styles all <th> within <div class="AllReservations"> */
.AllReservations th {
    background: #1e73be;
    color: white;
    border: 1px solid #000000;
    padding: 4px;
    font-size: 15px;
}

.AllReservations thead {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Styles all <td> within <div class="AllReservations"> */
.AllReservations td {
    border: 1px solid #000000;
    padding: 4px;
    font-size: 15px;   
}

/* 
=====================================
    ERROR & SUCCESS CSS
    styles elements with the class="success" 
    styles elements with the class="error" 
===================================== 
*/
/* Used In admin/index.php, admin/blockdates.php & guest/booking.php */
.error {
    color: #842029;		/* darker than red, easier to read */
    font-weight: bold;
    text-align: center;
    background-color: #f8d7da;	/* light red background */
    border: 2px solid #dc3545;	/* strong red border */
    padding: 10px;
    margin: 10px auto;
    width: fit-content;
    border-radius: 6px;

}

/* Used In admin/index.php, admin/blockdates.php & guest/booking.php */
.success {
    color: #155724;		/* darker green (easier to read) */            
    background-color: #d4edda;	/* light green background */ 
    border: 2px solid #28a745;	/* strong green border */
    padding: 10px;
    margin: 10px auto;
    width: fit-content;
    border-radius: 6px;
    font-weight: bold;
    text-align: center;
}

/* 
=====================================
    BOOKING FORM CSS 
    Style both name and email inputs 
    Booking Form – All 4 inputs same background & text color 
===================================== 
*/
.booking-form input[type="text"],
.booking-form input[type="email"] {
    background-color: #f2f2f2;   /* Your chosen background */
    color: black;                /* Typed text color */
    border: 1px solid #ccc;
    padding: 10px;
    width: 300px;
    font-size: 16px;
    box-sizing: border-box;   	 /* added to fix width mismatch */
}

/* Booking Form placeholder color only */
.booking-form input[type="text"]::placeholder,
.booking-form input[type="email"]::placeholder {
    color: black;   /* Placeholder color */
    opacity: 1;
}

/* 
=====================================
     OVERLAY WAIT MESSAGE CSS 
===================================== 
*/
#waitOverlay,
#cardWaitOverlay,
#confirmWaitOverlay,
#cancelWaitOverlay,
#refundWaitOverlay {
    background-color: rgba(0,0,0,0.5); /* semi-transparent black */
    display: none;  /* hidden initially */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

/* Overlay message box */
.overlay-message {
    background-color: #007bff;
    color: white;
    padding: 16px 20px;	  /* was 20px 30px; */
    border-radius: 6px;   /* was 10px; */
    font-size: 19px;      /* was 24px; */
    text-align: center;
    box-shadow: 0 4 12px rgba(0,0,0,0.2);      /* was 0 0 10px rgba(0,0,0,0.3); */
    max-width: 380px;	  /* was not here */
    line-height: 1.4;	  /* was not here */
}

/*
===================================================
    RATES DATES CSS
====================================================
*/
.rates-past-date {
    background-color: #f8d7da;   /* light red */
}

.rates-today-date {
    background-color: #fff3cd;   /* light yellow */
    font-weight: bold;
}

.rates-future-date {
    background-color: #d4edda;   /* light green */
}

/* 
=======================================
   ADMIN/RATES.PHP   BOLD CALENDAR DAYS
======================================= 
*/
.rates-page .flatpickr-day {
    font-weight: bold;
    color: #111;  
    height: 36px !important;
    width: 36px !important;
    line-height: 36px !important; /* centers the number vertically */
}

/* Past / disabled dates (before today) */
.rates-page .flatpickr-day.flatpickr-disabled,
.rates-page .flatpickr-day.disabled,
.rates-page .flatpickr-day.prevMonthDay,
.rates-page .flatpickr-day.nextMonthDay {
    color: #b5b5b5 !important;
    font-weight: normal !important;
    background: #f3f3f3 !important;
    cursor: not-allowed;
}

/*
=====================================================
    FLATPICKR
=====================================================
*/
/* Override flatpickr styling for input DATE fields with class ManageRatesInput */
input.flatpickr-input.ManageRatesInput {
    background-color: #D3D3D3 !important; /* Sets the background color of the 'date input' - #D3D3D3 = Light Gray */
    color: black !important;              /* Sets the text color typed into the 'date input' */
    border: 1px solid #0056b3 !important; /* Sets the border size and color of the 'date input' #0056b3= Dark Blue */
}

/* Override placeholder (hint text) styling inside the input DATE fields with class ManageRatesInput */
input.flatpickr-input.ManageRatesInput::placeholder {
    color: #000000 !important;            /* Sets the color of the text in the placeholder of the 'date input'#A9A9A9 = Dark Gray */
    opacity: 1 !important;                /* Ensures the placeholder is fully visible across browsers */
}

/* Override flatpickr styling for input RATE fields with class ManageRatesInput */
input.ManageRatesInput:not(.flatpickr-input) {
    background-color: #D3D3D3 !important; /* Sets the background color of the 'rate input' - #D3D3D3 = Light Gray */
    color: black !important;              /* Sets the text color typed into the 'rate input' */
    border: 1px solid #0056b3 !important; /* Sets the border size and color of the 'rate input' #0056b3= Dark Blue */
}

/* Override placeholder (hint text) styling inside the input RATE fields with class ManageRatesInput */
input.ManageRatesInput:not(.flatpickr-input)::placeholder {
    color: #000000 !important;            /* Sets the color of the text in the placeholder of the 'rate input'#A9A9A9 = Dark Gray */
    opacity: 1 !important;                /* Ensures the placeholder is fully visible across browsers */
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { visibility:hidden; }

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
    background:#eee!important;
    color:#999!important;
    cursor:not-allowed;
    opacity:0.5;
}

.flatpickr-current-month .numInputWrapper input.cur-year{
    color:black!important;
}

.flatpickr-day {
    position: relative;
    height: 68px;   
    width: 68px;    
    vertical-align: top;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #333 !important;   
    border-color: #333 !important;
}

.flatpickr-disabled .booking-day-price {
    display: none;
}

/* 
=====================================
    BOOKING CALENDAR DAILY CSS
===================================== 
*/
.booking-day-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;  
}

.booking-day-number {
    font-size: 18px;   
    font-weight: bold;
    line-height: 1;
}

.booking-day-price {
    font-size: 13px;   
    color: #2a7ae2;
    margin-top: -2px;   
}

/* 
=====================================
    BLOCKDATES FLATPICKR CSS
===================================== 
*/
.flatpickr-day.blockdates-available {
    color: #111 !important;
    font-weight: bold !important;
    background: #ffffff !important;
    opacity: 1 !important;
}

.flatpickr-day.blockdates-disabled,
.flatpickr-day.blockdates-disabled:hover,
.flatpickr-day.blockdates-disabled.flatpickr-disabled,
.flatpickr-day.blockdates-disabled.flatpickr-disabled:hover {
    background: #f3f3f3 !important;
    color: #b5b5b5 !important;
    font-weight: normal !important;
    cursor: not-allowed;
    opacity: 1 !important;
}

.flatpickr-day.blockdates-available:hover {
    background: #e9f2ff !important;
    color: #000 !important;
}

.flatpickr-day.blockdates-available.selected,
.flatpickr-day.blockdates-available.startRange,
.flatpickr-day.blockdates-available.endRange {
    background: #333 !important;
    border-color: #333 !important;
    color: #fff !important;
}

/* 
=====================================
    CALENDAR CSS
===================================== 
*/
.calendar-input {
    position: relative;
    display: inline-block;
    width: 300px;
}

.calendar-input input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 36px;
    display: block;
}

.calendar-input img {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    width: 20px;
    height: 20px;
    z-index: 2;
}

.calendar {
    max-width: 1000px;
    margin: auto;
    font-family: Arial, sans-serif;
}

.month {
    margin-bottom: 50px;
}

.month h3 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 28px;   /* <-- add this */
    font-weight: bold; /* optional, but looks better */
    letter-spacing: 1px;
}

.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: bold;
    margin-bottom: 5px;
}

.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.day {
    min-height: 90px;
    border: 1px solid #ddd;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.booked {
    background: #d9534f;
    color: white;
}

.available {
    background: #5cb85c;
    color: white;
}

.empty {
    background: #f9f9f9;   /* background: #e0e0e0; is stronger grey */
}

.calendar-day-number {
    /* font-weight: bold; */
    font-size: 20px;   /* was not here originally - increase this */
    text-align: left;  /* aligns the day number */
}

.rate {
    font-size: 17px;   /* was font-size: 13px; */
    text-align: left;  /* aligns the daily rate */
}

/* 
=====================================
   ESTIMATE BOX CSS
===================================== 
*/
.quote-box {
    width: 100%;
    max-width: 310px;
    margin: 10px auto 0 auto;
    padding: 12px 14px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    background: #f8f9fa;
    box-sizing: border-box;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.quote-title {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 12px;
}

.quote-table {
    width: 100%;
    border-collapse: collapse;
}

.quote-table td {
    padding: 4px 4px;
    vertical-align: top;
}

.quote-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

/* 
=====================================
    TRUST-LINE
===================================== 
*/
.trust-line {
    margin-top: 10px;
    font-size: 13px;
    color: #555;
    text-align: center;
    line-height: 1.4;
}

.trust-line span {
    color: #1a7f37;   /* green check */
    font-weight: bold;
}

/* 
=====================================
   ADMIN LOGIN CSS 
===================================== 
*/
/* Style both username and password inputs */
.AdminLogin input[type="text"],
.AdminLogin input[type="password"] {
    width: 250px;
    background-color: #D3D3D3;   /* Same  background, light grey=#D3D3D3 */
    color: BLACK;                /* Same text color when typing */
    border: 1px solid #444;
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;   /* ⭐ added for consistent sizing */
}

/* Placeholder (placard text) color */
.AdminLogin input[type="text"]::placeholder,
.AdminLogin input[type="password"]::placeholder {
    color: BLACK;              /* Same placeholder color */
    opacity: 1;                /* Makes color consistent across browsers */
}

/*
=========================================================
    BLOCKDATES CSS 
    Make date inputs and status dropdown the same size
=========================================================
*/
.blockdates-form input[type="text"],
.blockdates-form select[name="status"] {
    width: 120px;
    /* height: 26px; */
    padding: 5px;
    box-sizing: border-box;
    font-size: 14px;
    text-align: center;
    background-color: #D3D3D3;   /* MATCH date inputs */
    color: black;
    border: 1px solid #0056b3;   /* match your flatpickr border */
}

.blockdates-form .flatpickr-input {
    background-color: #D3D3D3 !important;
    color: black !important;
    border: 1px solid #0056b3 !important;
}

.blockdates-form .flatpickr-input::placeholder {
    color: #000000 !important;
    opacity: 1 !important;
}

/* 
======================================================================
   OTHER STUFF-form-buttons, form-buttons .btn
====================================================================== 
*/

/* 
*****************************************
 	CONTROL THE LARGE PAGES BUTTONS				   
*****************************************
*/

/* VERTICAL BUTTONS */
.form-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    margin-top: 10px;
}

.form-buttons .btn-Pages {
    width: 300px;
}

.form-buttons .btn {
    margin-bottom: 0;
}

/* HORIZONTAL BUTTONS */
.button-row {
    display: flex;
    justify-content: center;   /* centers horizontally */
    gap: 0px;                 /* space between buttons */
    margin-bottom: 0px;       /* space under buttons */
    flex-wrap: wrap;          /* prevents overflow on small screens */
}

.button-row .btn-Pages {
    display: inline-block;
    margin: 0px;		/* space between buttons */
}

/*
=========================================================
    PAYMENT OPTIONS CSS
=========================================================
*/    
.payment-selector-container {width:600px; margin:20px auto; text-align:center;}
.paymentChoices {display:flex; justify-content:center; gap:20px;}
.payment-option {width:200px; border:2px solid #cccccc; border-radius:10px; padding:12px; cursor:pointer; transition:0.2s; background:#F5F5F5;}
.payment-option:hover {border-color:#1b5fa7; background:#f5f9ff;}
.payment-option.expanded {
    width:310px;
    cursor:default;
    padding:18px 20px;
    border:1px solid #d9d9d9;
    border-radius:8px;
    background:#f8f9fa;
    box-sizing:border-box;
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.payment-option.expanded:hover {
    border-color:#d9d9d9;
    background:#f8f9fa;
}

.payment-logo {height:36px; margin:3px;}
.payment-box {margin-top:15px;}
.payment-hidden {display:none;}
.stripe-card-field {width:100%; box-sizing:border-box; padding:12px; margin:5px 0; border:1px solid #aaaaaa; border-radius:4px; background:#ffffff;}
.stripe-card-row {display:flex; gap:8px;}
.stripe-card-row .stripe-card-field {width:50%;}

#card-errors {
    color:#B00020;
    font-size:13px;
    margin-top:3px;
    min-height:3px;
}

#card-errors:not(:empty) {
    margin-top:8px;
    min-height:18px;
}

.payment-action {margin-top:0;}