/* Existing CSS (from original code) */
:root {
    --e-global-color-primary: #1C8EB8;
    --e-global-color-secondary: #FFA048;
    --e-global-color-text: #82828A;
    --e-global-color-accent: #1C231F;
}

body {
    font-family: "Kumbh Sans", sans-serif;
    color: var(--e-global-color-accent);
    background-color: #f5f7f9; /* Lighter background for the entire page */
    line-height: 1.6;
}

.custom-container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 40px 20px;
}


/* Hero Section */
.hero-section {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 100px 20px;
    text-align: center;
    color: #fff;
    position: relative;
    margin-bottom: 50px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.hero-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 0;
}
.hero-section h1,
.hero-section nav {
    position: relative;
    z-index: 1;
    color: #fff;
}
.hero-section h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 10px;
}
.breadcrumb-custom {
    background: transparent;
    padding: 0;
    margin: 0;
    display: flex; /* Use flex for centering */
    justify-content: center;
    align-items: center;
}
.breadcrumb-custom a,
.breadcrumb-custom span {
    color: white;
    text-decoration: none;
    margin: 0 8px;
    font-size: 15px;
}
.breadcrumb-custom span:last-child {
    font-weight: 600;
}


/* General Section Styling */
.order-section,
.contact-section {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow for depth */
    margin-bottom: 30px;
}

.page-title, .order-number, .section-heading {
    font-size: 24px;
    font-weight: 700;
    color: var(--e-global-color-accent);
    margin-bottom: 30px;
}

/* Order Summary */
.order-number {
    font-size: 20px;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.tour-item-wrapper {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    gap: 20px;
    padding-bottom: 25px;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 30px;
}
.tour-image {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0; /* Prevent image from shrinking */
}
.tour-details {
    flex: 1;
}
.tour-title {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--e-global-color-accent);
}
.tour-info {
    font-size: 14px;
    color: var(--e-global-color-text);
    margin-bottom: 4px;
}
.tour-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--e-global-color-secondary);
    text-align: right;
    flex-shrink: 0; /* Prevent price from shrinking */
}

.summary-table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse; /* For cleaner borders */
}
.summary-table td {
    padding: 12px 0;
    font-size: 15px;
    border-bottom: 1px solid #f0f0f0;
}
.summary-table tr:last-child td {
    border-bottom: none;
}
.summary-table tr td:first-child {
    font-weight: 500;
    color: var(--e-global-color-accent);
}
.summary-table tr td:last-child {
    text-align: right;
    color: var(--e-global-color-text);
}
.summary-table tr.total-row td {
    font-weight: 600;
    color: var(--e-global-color-accent);
    border-top: 2px solid #eee;
    padding-top: 15px;
}
.summary-table tr.due-row td:last-child {
    color: #1C8EB8; /* Changed to primary color for emphasis */
    font-weight: 700;
    font-size: 22px;
}


/* Contact and Payment Form */
/* Hide labels visually but keep them for accessibility (SCREEN READERS) */
.form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus {
    border-color: var(--e-global-color-primary);
    box-shadow: 0 0 0 0.2rem rgba(28, 142, 184, 0.15);
    outline: none;
}

/* Flexbox for two-column inputs */
.form-row {
    display: flex;
    gap: 20px; /* Space between columns */
}
.form-col {
    flex: 1; /* Each column takes equal space */
}
.form-row .mb-3 {
    margin-bottom: 0; /* Remove default mb-3 from inner divs */
}


.amount-box {
    background: #eaf6fa; /* Light blue background for amount */
    border: 1px solid #cee8f2;
    border-radius: 6px;
    padding: 10px 25px;
    margin: 30px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.amount-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--e-global-color-accent);
}
.amount-value {
    font-size: 24px;
    font-weight: 700;
    color: #1C8EB8;
}

.payment-method-box,
.terms-box {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 25px;
    margin-bottom: 20px;
}
.payment-method-box .section-heading {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 20px;
}


.form-check {
    display: flex;
    align-items: flex-start; /* Align checkbox and text to the top */
    gap: 10px; /* Space between checkbox and label */
    margin-bottom: 0; /* Remove default margin */
}
.form-check-input {
    width: 18px;
    height: 18px;
    flex-shrink: 0; /* Prevent checkbox from shrinking */
    margin-top: 3px; /* Adjust vertical alignment */
}
.form-check-label {
    font-size: 15px;
    color: var(--e-global-color-text);
    line-height: 1.5;
}


.btn-complete {
    background: #1C8EB8;
    color: white !important; /* !important to override potential theme styles */
    font-size: 18px;
    font-weight: 600;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    width: 100%;
    transition: all 0.3s ease;
    cursor: pointer;
    display: block; /* Ensure it takes full width */
    text-align: center;
    text-decoration: none;
}
.btn-complete:hover {
    background: #166d8f; /* Slightly darker primary color */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(28, 142, 184, 0.3);
}

/* Error Banner */
.payment-error-banner {
    background: #fcebeb; /* Light red */
    color: #cc0000; /* Darker red */
    padding: 15px 25px;
    border-radius: 6px;
    margin-bottom: 30px;
    border: 1px solid #fbc9c9;
    font-size: 15px;
}
.payment-error-banner strong {
    font-weight: 700;
}


/* Utility for Bootstrap-like rows/cols */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px; /* Compensate for column padding */
}
.col-lg-7, .col-lg-5, .col-md-12 {
    padding: 0 15px;
    box-sizing: border-box; /* Include padding in width calculation */
}
.col-lg-7 {
    width: 58.33%;
}
.col-lg-5 {
    width: 41.67%;
}
@media (max-width: 991px) {
    .col-lg-7, .col-lg-5 {
        width: 100%;
        margin-bottom: 30px; /* Space between stacked columns */
    }
    .order-section, .contact-section {
        margin-bottom: 0; /* Remove extra margin */
    }
    .form-row {
        flex-direction: column; /* Stack name/email fields on smaller screens */
        gap: 0; /* Remove gap when stacked */
    }
    .form-row .mb-3 {
        margin-bottom: 20px; /* Re-introduce margin for stacked fields */
    }
}
@media (max-width: 768px) {
    .hero-section h1 { font-size: 38px; }
    .hero-section { padding: 70px 20px; }
    .tour-item-wrapper { flex-direction: row; align-items: center; text-align: left;align-items: flex-start; }
    .tour-image { width: 100%; max-width: 250px; height: auto; margin-bottom: 15px; }
    .tour-price { text-align: center; margin-top: 10px; }
    .btn-complete { font-size: 16px; padding: 12px 20px; }
    .custom-container { padding: 30px 15px; }
    .order-section, .contact-section { padding: 20px; }
    .page-title, .order-number, .section-heading { font-size: 20px; margin-bottom: 20px; }
    .amount-box { flex-direction: row; align-items: center; text-align: center; padding: 15px; }
    .amount-value { margin-top: 10px; }
}

/* PlugnPay specific styling, assuming it's injected HTML */
.plugnpay-payment-form input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 10px; /* Added spacing between PnP fields */
}

/* Ensure these are not overridden */
.return-btn, a.btn.btn-primary, .btn-primary {
    background: #1C8EB8 !important;
    color: #fff !important;
    padding: 15px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background 0.2s !important;
    border: none !important;
    cursor: pointer !important;
    text-align: center;
    display: inline-block; /* For the return button if not full width */
}
.btn-primary:hover {
    background: #0056b3 !important;
}

/* NEW DESIGN ENHANCEMENTS & PLACEHOLDER STYLES */
.custom-container {
    padding-top: 60px;
    padding-bottom: 60px;
}

.order-section, .contact-section {
    border: 1px solid #e0e0e0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08); /* More prominent shadow */
}

/* Input field enhancements for a modern look */
.form-control {
    background-color: #fcfcfc;
    border: 1px solid #e0e0e0;
    padding: 14px 18px; /* Slightly larger padding */
    font-size: 16px;
    color: var(--e-global-color-accent);
}

.form-control::placeholder {
    color: #a0a0a0; /* Lighter color for placeholders */
    opacity: 1; /* Ensure placeholder is visible */
}

.form-control:focus {
    border-color: var(--e-global-color-primary);
    box-shadow: 0 0 0 0.25rem rgba(28, 142, 184, 0.2); /* Stronger focus shadow */
}

/* Button hover effects for better user feedback */
.btn-complete:hover {
    background: #166d8f; /* Slightly darker primary color */
    transform: translateY(-3px); /* More pronounced lift effect */
    box-shadow: 0 8px 18px rgba(28, 142, 184, 0.4); /* Stronger shadow on hover */
}

/* Payment Method Box subtle improvements */
.payment-method-box {
    border: 1px solid #dcdcdc;
    background-color: #fefefe; /* Very light background for payment area */
}

/* Terms and Conditions checkbox styling */
.form-check-input {
    border-color: #ccc;
    cursor: pointer;
}
.form-check-input:checked {
    background-color: var(--e-global-color-primary);
    border-color: var(--e-global-color-primary);
}
.form-check-label a {
    color: var(--e-global-color-primary);
    text-decoration: none;
    font-weight: 600;
}
.form-check-label a:hover {
    text-decoration: underline;
}

label.form-check-label a {
    text-transform: capitalize;
}

/* Responsive adjustments for a cleaner look */
@media (max-width: 768px) {
    .order-section, .contact-section {
        padding: 25px;
    }
    .page-title, .order-number, .section-heading {
        font-size: 22px;
    }
    .amount-box {
        padding: 15px 20px;
    }
    .amount-value {
        font-size: 20px;
    }
    .form-control {
        padding: 10px 12px;
        font-size: 14px;
    }
}

@media (max-width: 425px){
    .tour-item-wrapper { flex-direction: column; align-items: center; text-align: center; }
}
.payment-method-box input[name="pnp_cardexp"],
.payment-method-box input[name="pnp_cardcvv"] {
    /* Adjust margin-bottom if they are side-by-side */
    margin-bottom: 0; 
}
/* If they are not natively grouped, this structure might be needed */
.payment-method-box .pnp-field-group { /* A hypothetical div to wrap them */
    display: flex;
    gap: 20px;
    margin-bottom: 15px; /* Spacing below the group */
}
.payment-method-box .pnp-field-group > div {
    flex: 1;
}

/* Additional styling for the "Payment Information" section heading if needed */
.payment-method-box h3.section-heading { /* Assuming a similar heading structure */
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 22px;
    color: var(--e-global-color-accent);
}

/* Ensure the PlugnPay form itself fits well */
.plugnpay-payment-form { /* If PnP injects a specific form wrapper */
    margin-top: 15px; /* Adjust spacing if needed */
}

/* Ensure the PlugnPay form inputs also get the placeholder treatment if possible,
   though typically this requires modifying the injected HTML or using JavaScript.
   For now, applying styles based on common PnP input attributes for consistency. */
.payment-method-box input[type="text"],
.payment-method-box input[type="tel"],
.payment-method-box input[type="email"], /* if used for card fields */
.payment-method-box input.form-control, /* if it happens to use this class */
.payment-method-box input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]) {
    width: 100%;
    padding: 5px 10px; /* Consistent with your other form-control */
    border: 1px solid #e0e0e0; /* Consistent border */
    border-radius: 6px; /* Consistent border-radius */
    font-size: 16px; /* Consistent font size */
    background-color: #fcfcfc; /* Consistent background */
    color: var(--e-global-color-accent); /* Consistent text color */
    margin-bottom: 15px; /* Add some spacing between these fields */
    box-sizing: border-box; /* Ensures padding doesn't expand width */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* If PlugnPay adds its own labels, you might need to hide them like this: */
.payment-method-box label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Style for exp and cvv to appear side by side */
.payment-method-box input[name="pnp_cardexp"],
.payment-method-box input[name="pnp_cardcvv"] {
    width: 48%;
    display: inline-block;
}
.payment-method-box input[name="pnp_cardexp"] {
    margin-right: 4%;
}

/* Similar for gift card fields if needed */
.payment-method-box input[name="pnp_mpgiftcard"],
.payment-method-box input[name="pnp_mpcvv"] {
    width: 48%;
    display: inline-block;
}
.payment-method-box input[name="pnp_mpgiftcard"] {
    margin-right: 4%;
}