<?php
$this->assign('title', 'Book Shipment');

$shipperNameError      = $booking->getError('shipper_name');
$shipperEmailError     = $booking->getError('shipper_email');
$shipperPhoneError     = $booking->getError('shipper_phone');
$shipperAddressError   = $booking->getError('shipper_address');

$receiverNameError     = $booking->getError('receiver_name');
$receiverEmailError    = $booking->getError('receiver_email');
$receiverPhoneError    = $booking->getError('receiver_phone');
$deliveryAddressError  = $booking->getError('delivery_address');

$typeOfGoodsError      = $booking->getError('type_of_goods');
$packageTypeError      = $booking->getError('package_type');
$numberPackagesError   = $booking->getError('number_of_packages');
$weightError           = $booking->getError('weight');
$valueError            = $booking->getError('value_of_goods');

$modeTransportError    = $booking->getError('mode_of_transport');
$deliverySpeedError    = $booking->getError('delivery_speed');
$pickupDateError       = $booking->getError('pickup_date');
$pickupTimeError       = $booking->getError('pickup_time');
$deadlineError         = $booking->getError('delivery_deadline');
$termsError            = $booking->getError('terms_accepted');

$selectedSpecialHandling = [];
if (!empty($booking->special_handling)) {
    $decoded = json_decode((string)$booking->special_handling, true);
    if (is_array($decoded)) {
        $selectedSpecialHandling = $decoded;
    }
}
?>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<div class="booking-page">
    <section class="booking-hero-section">
        <div class="booking-hero-overlay"></div>

        <nav class="navbar navbar-expand-lg hero-navbar">
            <div class="container-fluid hero-nav-container">
                <a class="navbar-brand brand-link" href="<?= $this->Url->build('/') ?>">
                    <?= $this->Html->image('impeccable-logo.png', [
                        'alt' => 'Impeccable Courier',
                        'class' => 'brand-logo'
                    ]) ?>
                </a>

                <button class="navbar-toggler custom-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#heroNavbar" aria-controls="heroNavbar" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse justify-content-end" id="heroNavbar">
                    <ul class="navbar-nav align-items-lg-center hero-menu">
                        <li class="nav-item">
                            <a class="nav-link" href="<?= $this->Url->build('/') ?>">Home</a>
                        </li>

                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle active-nav-link" href="#" id="servicesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Services
                            </a>
                            <ul class="dropdown-menu custom-dropdown" aria-labelledby="servicesDropdown">
                                <li><a class="dropdown-item" href="<?= $this->Url->build('/booking') ?>">Book a Shipment</a></li>
                                <li><a class="dropdown-item" href="#">Track a Shipment</a></li>
                                <li><a class="dropdown-item" href="<?= $this->Url->build('/') ?>#volumetricSection">Volumetric Weight Calculator</a></li>
                            </ul>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="<?= $this->Url->build('/contact') ?>">Contact Us</a>
                        </li>

                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="helpDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Help
                            </a>
                            <ul class="dropdown-menu custom-dropdown" aria-labelledby="helpDropdown">
                                <li><a class="dropdown-item" href="<?= $this->Url->build('/terms') ?>">Terms and Conditions</a></li>
                                <li><a class="dropdown-item" href="<?= $this->Url->build('/restricted-cargos') ?>">Restricted Cargos</a></li>
                            </ul>
                        </li>

                        <li class="nav-item nav-login-item">
                            <?php
                            if (!$this->Identity->isLoggedIn()) {
                                echo $this->Html->link('Log in', ['controller' => 'Auth', 'action' => 'login'], ['class' => 'btn login-btn']);
                            }
                            ?>
                        </li>

                        <li class="nav-item nav-login-item">
                            <?php
                            if ($this->Identity->isLoggedIn()) {
                                echo $this->Html->link('Logout', ['controller' => 'Auth', 'action' => 'logout'], ['class' => 'btn login-btn']);
                            }
                            ?>
                        </li>

                        <li class="nav-item nav-login-item">
                            <?php
                            if ($this->Identity->isLoggedIn()) {
                                echo $this->Html->link('Dashboard', ['prefix' => 'Admin', 'controller' => 'Dashboard', 'action' => 'index'], ['class' => 'btn login-btn']);
                            }
                            ?>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="booking-hero-center">
            <h1>Book Shipment</h1>
            <p><a href="<?= $this->Url->build('/') ?>">Home</a> / Book Shipment</p>
        </div>
    </section>

    <section class="booking-main-section">
        <div class="booking-main-container">
            <div class="booking-heading-wrap">
                <h2>Book your shipment in minutes</h2>
                <p>
                    Fill in the booking form below and our team will review your request as soon as possible.
                </p>
            </div>

            <div class="booking-form-card">
                <?= $this->Form->create($booking, [
                    'url' => ['controller' => 'Booking', 'action' => 'index'],
                    'id' => 'bookingForm',
                    'novalidate' => false
                ]) ?>

                <div class="booking-section-title">Shipper Information</div>

                <div class="booking-grid two-col">
                    <div class="booking-field">
                        <label>Full Name / Company <span>*</span></label>
                        <input type="text" name="shipper_name" maxlength="120" required
                               value="<?= h((string)$booking->shipper_name) ?>"
                               placeholder="Shipper Name">
                        <?php if (!empty($shipperNameError)) : ?>
                            <div class="field-error"><?= h(reset($shipperNameError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field">
                        <label>Email <span>*</span></label>
                        <input type="email" name="shipper_email" maxlength="120" required
                               value="<?= h((string)$booking->shipper_email) ?>"
                               placeholder="Email">
                        <?php if (!empty($shipperEmailError)) : ?>
                            <div class="field-error"><?= h(reset($shipperEmailError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field">
                        <label>Phone <span>*</span></label>
                        <input type="text" name="shipper_phone" maxlength="20" required
                               value="<?= h((string)$booking->shipper_phone) ?>"
                               placeholder="Phone">
                        <?php if (!empty($shipperPhoneError)) : ?>
                            <div class="field-error"><?= h(reset($shipperPhoneError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field">
                        <label>Address <span>*</span></label>
                        <input type="text" name="shipper_address" maxlength="255" required
                               value="<?= h((string)$booking->shipper_address) ?>"
                               placeholder="Shipper Address">
                        <?php if (!empty($shipperAddressError)) : ?>
                            <div class="field-error"><?= h(reset($shipperAddressError)) ?></div>
                        <?php endif; ?>
                    </div>
                </div>

                <div class="booking-section-title">Receiver Information</div>

                <div class="booking-grid two-col">
                    <div class="booking-field">
                        <label>Full Name / Company <span>*</span></label>
                        <input type="text" name="receiver_name" maxlength="120" required
                               value="<?= h((string)$booking->receiver_name) ?>"
                               placeholder="Receiver Name">
                        <?php if (!empty($receiverNameError)) : ?>
                            <div class="field-error"><?= h(reset($receiverNameError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field">
                        <label>Email <span>*</span></label>
                        <input type="email" name="receiver_email" maxlength="120" required
                               value="<?= h((string)$booking->receiver_email) ?>"
                               placeholder="Email">
                        <?php if (!empty($receiverEmailError)) : ?>
                            <div class="field-error"><?= h(reset($receiverEmailError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field">
                        <label>Phone <span>*</span></label>
                        <input type="text" name="receiver_phone" maxlength="20" required
                               value="<?= h((string)$booking->receiver_phone) ?>"
                               placeholder="Phone">
                        <?php if (!empty($receiverPhoneError)) : ?>
                            <div class="field-error"><?= h(reset($receiverPhoneError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field">
                        <label>Delivery Address <span>*</span></label>
                        <input type="text" name="delivery_address" maxlength="255" required
                               value="<?= h((string)$booking->delivery_address) ?>"
                               placeholder="Delivery Address">
                        <?php if (!empty($deliveryAddressError)) : ?>
                            <div class="field-error"><?= h(reset($deliveryAddressError)) ?></div>
                        <?php endif; ?>
                    </div>
                </div>

                <div class="booking-section-title">Shipment Details</div>

                <div class="booking-grid two-col">
                    <div class="booking-field">
                        <label>Type of Goods <span>*</span></label>
                        <input type="text" name="type_of_goods" maxlength="150" required
                               value="<?= h((string)$booking->type_of_goods) ?>"
                               placeholder="e.g. Electronics, Furniture">
                        <?php if (!empty($typeOfGoodsError)) : ?>
                            <div class="field-error"><?= h(reset($typeOfGoodsError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field">
                        <label>Package Type <span>*</span></label>
                        <select name="package_type" required>
                            <option value="">Select package type</option>
                            <option value="Box" <?= ((string)$booking->package_type === 'Box') ? 'selected' : '' ?>>Box</option>
                            <option value="Carton" <?= ((string)$booking->package_type === 'Carton') ? 'selected' : '' ?>>Carton</option>
                            <option value="Pallet" <?= ((string)$booking->package_type === 'Pallet') ? 'selected' : '' ?>>Pallet</option>
                            <option value="Crate" <?= ((string)$booking->package_type === 'Crate') ? 'selected' : '' ?>>Crate</option>
                            <option value="Envelope" <?= ((string)$booking->package_type === 'Envelope') ? 'selected' : '' ?>>Envelope</option>
                        </select>
                        <?php if (!empty($packageTypeError)) : ?>
                            <div class="field-error"><?= h(reset($packageTypeError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field">
                        <label>Number of Packages <span>*</span></label>
                        <input type="number" name="number_of_packages" min="1" step="1" required
                               value="<?= h((string)$booking->number_of_packages) ?>"
                               placeholder="0">
                        <?php if (!empty($numberPackagesError)) : ?>
                            <div class="field-error"><?= h(reset($numberPackagesError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field">
                        <label>Weight (kg) <span>*</span></label>
                        <input type="number" name="weight" min="0.01" step="any" required
                               value="<?= h((string)$booking->weight) ?>"
                               placeholder="Weight">
                        <?php if (!empty($weightError)) : ?>
                            <div class="field-error"><?= h(reset($weightError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field full-width">
                        <label>Value of Goods (AUD) <span>*</span></label>
                        <input type="number" name="value_of_goods" min="0" step="any" required
                               value="<?= h((string)$booking->value_of_goods) ?>"
                               placeholder="e.g. 5000">
                        <?php if (!empty($valueError)) : ?>
                            <div class="field-error"><?= h(reset($valueError)) ?></div>
                        <?php endif; ?>
                    </div>
                </div>

                <div class="booking-section-title">Logistics Options</div>

                <div class="booking-grid two-col">
                    <div class="booking-field">
                        <label>Mode of Transport <span>*</span></label>
                        <select name="mode_of_transport" required>
                            <option value="">Select mode</option>
                            <option value="Truck" <?= ((string)$booking->mode_of_transport === 'Truck') ? 'selected' : '' ?>>Truck</option>
                            <option value="Air Freight" <?= ((string)$booking->mode_of_transport === 'Air Freight') ? 'selected' : '' ?>>Air Freight</option>
                            <option value="Sea Freight" <?= ((string)$booking->mode_of_transport === 'Sea Freight') ? 'selected' : '' ?>>Sea Freight</option>
                            <option value="Rail Freight" <?= ((string)$booking->mode_of_transport === 'Rail Freight') ? 'selected' : '' ?>>Rail Freight</option>
                        </select>
                        <?php if (!empty($modeTransportError)) : ?>
                            <div class="field-error"><?= h(reset($modeTransportError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field">
                        <label>Delivery Speed <span>*</span></label>
                        <select name="delivery_speed" required>
                            <option value="">Select speed</option>
                            <option value="Standard" <?= ((string)$booking->delivery_speed === 'Standard') ? 'selected' : '' ?>>Standard</option>
                            <option value="Express" <?= ((string)$booking->delivery_speed === 'Express') ? 'selected' : '' ?>>Express</option>
                            <option value="Priority" <?= ((string)$booking->delivery_speed === 'Priority') ? 'selected' : '' ?>>Priority</option>
                        </select>
                        <?php if (!empty($deliverySpeedError)) : ?>
                            <div class="field-error"><?= h(reset($deliverySpeedError)) ?></div>
                        <?php endif; ?>
                    </div>
                </div>

                <div class="booking-field special-handling-wrap">
                    <label>Special Handling</label>
                    <div class="special-options">
                        <label class="check-wrap">
                            <input type="checkbox" name="special_handling[]" value="Fragile" <?= in_array('Fragile', $selectedSpecialHandling, true) ? 'checked' : '' ?>>
                            <span>Fragile</span>
                        </label>
                        <label class="check-wrap">
                            <input type="checkbox" name="special_handling[]" value="Perishable" <?= in_array('Perishable', $selectedSpecialHandling, true) ? 'checked' : '' ?>>
                            <span>Perishable</span>
                        </label>
                        <label class="check-wrap">
                            <input type="checkbox" name="special_handling[]" value="Hazardous" <?= in_array('Hazardous', $selectedSpecialHandling, true) ? 'checked' : '' ?>>
                            <span>Hazardous</span>
                        </label>
                        <label class="check-wrap">
                            <input type="checkbox" name="special_handling[]" value="Oversized" <?= in_array('Oversized', $selectedSpecialHandling, true) ? 'checked' : '' ?>>
                            <span>Oversized</span>
                        </label>
                    </div>
                </div>

                <div class="booking-section-title">Schedule</div>

                <div class="booking-grid two-col">
                    <div class="booking-field">
                        <label>Pickup Date <span>*</span></label>
                        <input type="text" id="pickup_date_picker" name="pickup_date" required
                               value="<?= !empty($booking->pickup_date) ? h($booking->pickup_date instanceof \Cake\I18n\Date ? $booking->pickup_date->format('Y-m-d') : (string)$booking->pickup_date) : '' ?>"
                               placeholder="dd/mm/yyyy" autocomplete="off">
                        <?php if (!empty($pickupDateError)) : ?>
                            <div class="field-error"><?= h(reset($pickupDateError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field">
                        <label>Pickup Time <span>*</span></label>
                        <input type="text" id="pickup_time_picker" name="pickup_time" required
                               value="<?= !empty($booking->pickup_time) ? h($booking->pickup_time instanceof \Cake\I18n\Time ? $booking->pickup_time->format('H:i:s') : (string)$booking->pickup_time) : '' ?>"
                               placeholder="--:--" autocomplete="off">
                        <?php if (!empty($pickupTimeError)) : ?>
                            <div class="field-error"><?= h(reset($pickupTimeError)) ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="booking-field full-width">
                        <label>Delivery Deadline <span>*</span></label>
                        <input type="text" id="delivery_deadline_picker" name="delivery_deadline" required
                               value="<?= !empty($booking->delivery_deadline) ? h($booking->delivery_deadline instanceof \Cake\I18n\Date ? $booking->delivery_deadline->format('Y-m-d') : (string)$booking->delivery_deadline) : '' ?>"
                               placeholder="dd/mm/yyyy" autocomplete="off">
                        <?php if (!empty($deadlineError)) : ?>
                            <div class="field-error"><?= h(reset($deadlineError)) ?></div>
                        <?php endif; ?>
                    </div>
                </div>

                <div class="booking-field notes-field">
                    <label>Additional Notes</label>
                    <textarea name="additional_notes" rows="5" placeholder="Enter any special instructions..."><?= h((string)$booking->additional_notes) ?></textarea>
                </div>

                <div class="booking-terms-wrap">
                    <label class="check-wrap terms-check">
                        <input type="checkbox" name="terms_accepted" value="1" required <?= !empty($booking->terms_accepted) ? 'checked' : '' ?>>
                        <span>I agree to the Terms &amp; Conditions</span>
                    </label>
                    <?php if (!empty($termsError)) : ?>
                        <div class="field-error"><?= h(reset($termsError)) ?></div>
                    <?php endif; ?>
                </div>

                <div class="booking-submit-wrap">
                    <button type="submit" id="bookingSubmitBtn" class="booking-submit-btn">
                        Book Shipment
                    </button>
                </div>

                <?php if (!empty($saveErrorMessage)) : ?>
                    <div class="booking-error-message">
                        <?= h($saveErrorMessage) ?>
                    </div>
                <?php endif; ?>

                <?= $this->Form->end() ?>
            </div>
        </div>
    </section>

    <footer style="
    background:#ffffff;
    border-top:1px solid #ffffff;
    padding:70px 40px 50px 40px;
">
    <div style="
        max-width:1480px;
        margin:0 auto;
    ">
        <div style="
            display:flex;
            justify-content:flex-start;
            align-items:flex-start;
            gap:150px;
            flex-wrap:wrap;
            padding-bottom:26px;
            border-bottom:1px solid #d9dde5;
        ">
            <!-- LEFT -->
            <div style="
                flex:1 1 420px;
                min-width:300px;
            ">
                <div style="margin-bottom:16px;">
                    <?= $this->Html->image('footer-logo.png', [
                        'alt' => 'Impeccable Courier',
                        'style' => 'max-width:640px; width:100%; height:auto; display:block;'
                    ]) ?>
                </div>

                <p style="
                    margin:0 0 0 27px;
                    color:#475467;
                    font-size:18px;
                    line-height:1.8;
                    font-weight:400;
                    font-family:var(--font-main);
                    max-width:560px;
                ">
                    Trusted international courier services with affordable rates, secure delivery, and reliable support across Australia, Pakistan, the UK, USA and Canada.
                </p>
            </div>

            <!-- RIGHT -->
            <div style="
                flex:1 1 760px;
                min-width:320px;
                display:flex;
                justify-content:space-between;
                gap:70px;
                flex-wrap:wrap;
                align-items:flex-start;
            ">
                <!-- CONTACT + QUICK LINKS -->
                <div style="
                    min-width:260px;
                    display:flex;
                    flex-direction:column;
                    gap:34px;
                ">
                    <!-- contact -->
                    <div>
                        <h4 style="
                            margin:0 0 16px 0;
                            color:#c91c1c;
                            font-size:20px;
                            font-weight:700;
                            font-family:var(--font-main);
                            text-transform:uppercase;
                            letter-spacing:0.6px;
                        ">
                            Contact
                        </h4>

                        <p style="
                            margin:0 0 12px 0;
                            color:#101828;
                            font-size:18px;
                            line-height:1.8;
                            font-family:var(--font-main);
                        ">
                            <?php 
                            $phone = $this->ContentBlock->text('contact-phone');
                            $phoneClean = preg_replace('/\s+/', '', $phone); // removes spaces
                            ?>
                            <strong>Phone:</strong>
                            <a href="tel:<?= h($phoneClean) ?>">
                                <?= h($phone) ?>
                            </a>
                        </p>

                        <p style="
                            margin:0;
                            color:#101828;
                            font-size:18px;
                            line-height:1.8;
                            font-family:var(--font-main);
                        ">
                            <?php $email = $this->ContentBlock->text('contact-email'); ?>
                        <strong>Email:</strong>
                        <a href="mailto:<?= h($email) ?>">
                            <?= h($email) ?>
                        </a>
                        </p>
                    </div>

                    <!-- quick links -->
                    <div>
                        <h4 style="
                            margin:0 0 16px 0;
                            color:#c91c1c;
                            font-size:20px;
                            font-weight:700;
                            font-family:var(--font-main);
                            text-transform:uppercase;
                            letter-spacing:0.6px;
                        ">
                            Quick Links
                        </h4>

                        <div style="
                            display:flex;
                            gap:50px;
                            flex-wrap:wrap;
                        ">
                            <!-- left half -->
                            <div style="
                                display:flex;
                                flex-direction:column;
                                gap:12px;
                                min-width:140px;
                            ">
                                <a href="#"
                                   style="color:#101828; text-decoration:none; font-size:18px; font-family:var(--font-main); transition:color 0.25s ease;"
                                   onmouseover="this.style.color='#c91c1c'"
                                   onmouseout="this.style.color='#101828'">
                                   Home
                                </a>

                                <a href="#"
                                   style="color:#101828; text-decoration:none; font-size:18px; font-family:var(--font-main); transition:color 0.25s ease;"
                                   onmouseover="this.style.color='#c91c1c'"
                                   onmouseout="this.style.color='#101828'">
                                   Booking
                                </a>

                                <a href="#"
                                   style="color:#101828; text-decoration:none; font-size:18px; font-family:var(--font-main); transition:color 0.25s ease;"
                                   onmouseover="this.style.color='#c91c1c'"
                                   onmouseout="this.style.color='#101828'">
                                   About Us
                                </a>
                            </div>

                            <!-- right half -->
                            <div style="
                                display:flex;
                                flex-direction:column;
                                gap:12px;
                                min-width:180px;
                            ">
                                <a href="#"
                                   style="color:#101828; text-decoration:none; font-size:18px; font-family:var(--font-main); transition:color 0.25s ease;"
                                   onmouseover="this.style.color='#c91c1c'"
                                   onmouseout="this.style.color='#101828'">
                                   Contact Us
                                </a>

                                <a href="#"
                                   style="color:#101828; text-decoration:none; font-size:18px; font-family:var(--font-main); transition:color 0.25s ease;"
                                   onmouseover="this.style.color='#c91c1c'"
                                   onmouseout="this.style.color='#101828'">
                                   Terms &amp; Condition
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- WAREHOUSE -->
                <div style="min-width:260px; margin-left:10px;">
                    <h4 style="
                        margin:0 0 16px 0;
                        color:#c91c1c;
                        font-size:20px;
                        font-weight:700;
                        font-family:var(--font-main);
                        text-transform:uppercase;
                        letter-spacing:0.6px;
                    ">
                        Warehouse
                    </h4>

                    <p style="
                        margin:0;
                        color:#101828;
                        font-size:18px;
                        line-height:1.8;
                        font-family:var(--font-main);
                        max-width:340px;
                    ">
                         <a href="https://www.google.com/maps?q=1011+Sydney+Road,+Coburg+North,+Victoria+3047" target="_blank">
                            1011 Sydney Road, Coburg North,<br>
                            Victoria 3047
                        </a>
                    </p>
                </div>
            </div>
        </div>

        <div style="
            padding-top:18px;
            text-align:center;
        ">
            <p style="
                margin:0;
                color:#c91c1c;
                font-size:18px;
                line-height:1.7;
                font-weight:500;
                font-family:var(--font-main);
            ">
                © All Rights Reserved by Webspire 2026
            </p>
        </div>
    </div>
</footer>
</div>

<style>
:root {
    --font-main: 'Inter', Arial, sans-serif;
    --white: #ffffff;
    --black: #161616;
    --soft-black: #2c2c2c;
    --text-gray: #5d5d5d;
    --accent-red: #c62828;
    --bg-soft: #f7f8fa;
    --border-soft: #d0d5dd;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    font-family: var(--font-main);
    background: #ffffff;
    color: var(--black);
    scroll-behavior: smooth;
}

body { min-width: 320px; font-weight: 300; }

.hero-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 10px 50px;
    background: rgba(8, 8, 8, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-nav-container { align-items: center; }
.brand-link { margin: 0; padding: 0; }
.brand-logo { width: 280px; max-width: 100%; height: auto; display: block; }
.hero-menu { gap: 10px; }
.hero-menu .nav-link {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    padding: 10px 12px !important;
}
.hero-menu .nav-link:hover { color: var(--accent-red) !important; }
.active-nav-link { color: #fff !important; }

.custom-dropdown {
    border: none;
    border-radius: 14px;
    padding: 10px 0;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
    min-width: 270px;
}
.custom-dropdown .dropdown-item {
    font-size: 15px;
    padding: 12px 18px;
    font-weight: 400;
    font-family: var(--font-main);
}
.custom-dropdown .dropdown-item:hover { background: #eef0f4; }

.nav-login-item { margin-left: 10px; }
.login-btn {
    background: #fff;
    color: #161616;
    border-radius: 999px;
    padding: 12px 28px;
    font-size: 17px;
    font-weight: 400;
    min-width: 118px;
    border: none;
}
.login-btn:hover { background: var(--accent-red); color: #fff; }

.custom-toggler {
    border-color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.08);
}
.custom-toggler .navbar-toggler-icon { filter: invert(1); }

.booking-hero-section {
    position: relative;
    min-height: 420px;
    background-image: url('/img/plane3.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.booking-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(44, 44, 44, 0.55);
    z-index: 1;
}
.booking-hero-center {
    position: relative;
    z-index: 2;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120px 20px 60px;
    text-align: center;
}
.booking-hero-center h1 {
    margin: 0 0 12px 0;
    color: #fff;
    font-size: 64px;
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -1px;
}
.booking-hero-center p,
.booking-hero-center a {
    margin: 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 400;
    text-decoration: none;
}

.booking-main-section {
    background: linear-gradient(180deg, #f7f8fa 0%, #eef2f7 100%);
    padding: 70px 36px 100px;
}
.booking-main-container {
    max-width: 1280px;
    margin: 0 auto;
}
.booking-heading-wrap {
    text-align: center;
    margin-bottom: 42px;
}
.booking-heading-wrap h2 {
    margin: 0 0 16px 0;
    color: #101828;
    font-size: 54px;
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -1px;
}
.booking-heading-wrap p {
    max-width: 760px;
    margin: 0 auto;
    color: #667085;
    font-size: 18px;
    line-height: 1.8;
    font-weight: 400;
}

.booking-form-card {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 24px;
    padding: 30px 40px;
    box-shadow: 0 20px 60px rgba(16,24,40,0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.booking-section-title {
    font-size: 42px;
    line-height: 1.12;
    font-weight: 600;
    color: #101828;
    margin: 0 0 32px 0;
}
.booking-section-title:not(:first-child) {
    margin-top: 46px;
}

.booking-grid {
    display: grid;
    gap: 22px 28px;
}
.booking-grid.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-field label {
    display: block;
    margin-bottom: 10px;
    color: #101828;
    font-size: 16px;
    font-weight: 600;
}
.booking-field label span { color: var(--accent-red); }

.booking-field input,
.booking-field select,
.booking-field textarea {
    width: 100%;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: #fff;
    color: #101828;
    font-size: 17px;
    font-family: var(--font-main);
    outline: none;
    box-shadow: none;
    transition: all 0.25s ease;
}
.booking-field input,
.booking-field select {
    height: 60px;
    padding: 0 18px;
}
.booking-field textarea {
    min-height: 140px;
    padding: 16px 18px;
    resize: vertical;
}
.booking-field input:focus,
.booking-field select:focus,
.booking-field textarea:focus,
.booking-field input:hover,
.booking-field select:hover,
.booking-field textarea:hover {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 0.12rem rgba(201, 28, 28, 0.08);
}
.full-width { grid-column: 1 / -1; }

.special-handling-wrap {
    margin-top: 24px;
}
.special-options {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 34px;
    margin-top: 14px;
    align-items: center;
}

.check-wrap {
   display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 12px;
    margin: 0;
    padding: 0;
    line-height: normal !important;
    vertical-align: middle;
    cursor: pointer;
}

.check-wrap input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    flex: 0 0 18px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: 0;
    accent-color: var(--accent-red);
}

.check-wrap span {
    display: inline-block !important;
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px !important;
    color: #c91c1c;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.notes-field {
    margin-top: 28px;
}

.booking-terms-wrap {
    margin-top: 30px;
}
.terms-check {
    font-size: 18px;
    color: #475467;
}

.booking-submit-wrap {
    margin-top: 28px;
}
.booking-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 230px;
    height: 60px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #d11f1f 0%, #a90f0f 100%);
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    font-family: var(--font-main);
    cursor: pointer;
    box-shadow: 0 18px 36px rgba(201,28,28,0.22);
    transition: all 0.25s ease;
}
.booking-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 40px rgba(201,28,28,0.26);
}
.booking-submit-btn:disabled {
    cursor: not-allowed;
    opacity: 1;
}

.field-error {
    margin-top: 8px;
    color: #c62828;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;
}
.booking-error-message {
    margin-top: 24px;
    padding: 18px 22px;
    border: 1px solid #ef4444;
    background: #fff1f2;
    color: #c81e1e;
    border-radius: 12px;
    font-size: 16px;
}

.site-footer {
    background: #ffffff;
    padding: 70px 40px 50px;
}
.site-footer-inner {
    max-width: 1480px;
    margin: 0 auto;
}
.site-footer-top {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 150px;
    flex-wrap: wrap;
    padding-bottom: 26px;
    border-bottom: 1px solid #d9dde5;
}
.footer-left {
    flex: 1 1 420px;
    min-width: 300px;
}
.footer-logo-wrap { margin-bottom: 16px; }
.footer-logo {
    max-width: 640px;
    width: 100%;
    height: auto;
    display: block;
}
.footer-desc {
    margin: 0 0 0 27px;
    color: #475467;
    font-size: 18px;
    line-height: 1.8;
    font-weight: 400;
    max-width: 560px;
}
.footer-right {
    flex: 1 1 760px;
    min-width: 320px;
    display: flex;
    justify-content: space-between;
    gap: 70px;
    flex-wrap: wrap;
}
.footer-col h4 {
    margin: 0 0 16px 0;
    color: #c91c1c;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.footer-col p,
.footer-col a {
    display: block;
    margin: 0 0 12px 0;
    color: #101828;
    font-size: 18px;
    line-height: 1.8;
    text-decoration: none;
}
.footer-col a:hover { color: #c91c1c; }
.site-footer-bottom {
    padding-top: 18px;
    text-align: center;
}
.site-footer-bottom p {
    margin: 0;
    color: #c91c1c;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 500;
}

.flatpickr-calendar {
    border: none !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
    padding: 10px !important;
    font-family: var(--font-main) !important;
}
.flatpickr-day,
.flatpickr-weekday,
.flatpickr-current-month,
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
    font-size: 16px !important;
}
.flatpickr-day {
    width: 42px !important;
    height: 42px !important;
    line-height: 42px !important;
    border-radius: 10px !important;
}
.flatpickr-months .flatpickr-month {
    height: 52px !important;
}
.flatpickr-current-month {
    padding-top: 10px !important;
}
.flatpickr-time {
    height: 52px !important;
    border-top: 1px solid #eee !important;
}
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
    height: 52px !important;
    line-height: 52px !important;
}
.booking-field .flatpickr-input[readonly] {
    background: #fff;
    cursor: pointer;
}

@media (max-width: 1100px) {
    .hero-navbar { padding: 22px 22px 0 22px; }
    .booking-heading-wrap h2 { font-size: 42px; }
    .booking-section-title { font-size: 34px; }
    .booking-main-section { padding: 60px 24px 80px; }
}

@media (max-width: 991px) {
    .hero-menu {
        gap: 0;
        margin-top: 16px;
        padding: 18px;
        border-radius: 16px;
        background: rgba(8, 10, 18, 0.82);
        backdrop-filter: blur(8px);
    }
    .nav-login-item {
        margin-left: 0;
        margin-top: 10px;
    }
    .booking-grid.two-col {
        grid-template-columns: 1fr;
    }
    .booking-form-card {
        padding: 30px 22px;
    }
}

@media (max-width: 767px) {
    .brand-logo { width: 220px; }
    .booking-hero-section { min-height: 340px; }
    .booking-hero-center {
        min-height: 340px;
        padding: 120px 20px 50px;
    }
    .booking-hero-center h1 { font-size: 40px; }
    .booking-heading-wrap h2 { font-size: 32px; }
    .booking-section-title { font-size: 28px; }
    .booking-submit-btn { width: 100%; }
    .special-options {
        gap: 16px 24px;
    }
}
</style>

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('bookingForm');
    const submitBtn = document.getElementById('bookingSubmitBtn');

    if (document.getElementById('pickup_date_picker')) {
        flatpickr("#pickup_date_picker", {
            dateFormat: "Y-m-d",
            altInput: true,
            altFormat: "d/m/Y",
            minDate: "today",
            disableMobile: true
        });
    }

    if (document.getElementById('delivery_deadline_picker')) {
        flatpickr("#delivery_deadline_picker", {
            dateFormat: "Y-m-d",
            altInput: true,
            altFormat: "d/m/Y",
            minDate: "today",
            disableMobile: true
        });
    }

    if (document.getElementById('pickup_time_picker')) {
        flatpickr("#pickup_time_picker", {
            enableTime: true,
            noCalendar: true,
            dateFormat: "H:i:00",
            altInput: true,
            altFormat: "h:i K",
            time_24hr: false,
            minuteIncrement: 5,
            disableMobile: true
        });
    }

    if (form && submitBtn) {
        form.addEventListener('submit', function (e) {
            const weightInput = form.querySelector('input[name="weight"]');
            const valueInput = form.querySelector('input[name="value_of_goods"]');
            const pickupDate = form.querySelector('input[name="pickup_date"]');
            const pickupTime = form.querySelector('input[name="pickup_time"]');
            const deliveryDeadline = form.querySelector('input[name="delivery_deadline"]');

            if (!form.checkValidity()) {
                return;
            }

            if (!weightInput.value || parseFloat(weightInput.value) <= 0) {
                e.preventDefault();
                weightInput.focus();
                return;
            }

            if (valueInput.value === '' || parseFloat(valueInput.value) < 0) {
                e.preventDefault();
                valueInput.focus();
                return;
            }

            if (!pickupDate.value || !pickupTime.value || !deliveryDeadline.value) {
                e.preventDefault();
                return;
            }

            submitBtn.disabled = true;
            submitBtn.textContent = 'Sending...';
        });
    }
});
</script>