/* Mobile Responsive CSS for CaterServ
   Enhances mobile experience for profile_unified.php and checkout.php
   ------------------------------------------------------------------- */


 

/* General Mobile Responsiveness */
@media (max-width: 767px) {
    /* Reduce padding and margins */


    /* .py-6 {
        padding: 0rem !important;
    } */

    .my-6 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    /* Adjust font sizes */
    h1.display-1 {
        font-size: 2rem !important;
        margin-bottom: 0 !important;
    }

    .header-logo {
        width: 100%;
        max-width: 80px !important;
    }

    h2 {
        font-size: 1.8rem !important;
    }

    h3 {
        font-size: 1.5rem !important;
    }

    /* Improve button usability on mobile */
    .btn {

        font-size: 0.9rem !important;
    }

    .navbar-brand.mt-4{
        margin-top: 0 !important;
                margin-left: 0px !important;

    }

    /* Make tables responsive */
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Adjust card padding */
    .card-body {
        padding: 1rem !important;
    }

    /* Improve form elements */
    .form-control,
    .form-select {
        font-size: 0.9rem !important;
    }

   
    .menu-bg,
    .about-bg, .gallery-bg, .areas-bg, .contact-bg, .profile-bg {
        padding: 40px 0 !important;
    }

    .py-3 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .ptb-120 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .hero-slide {
        margin-top: -80px;
    }

    .carousel-control-next {
        right: -16px;
    }

    .carousel-control-prev {
        left: -16px;
    }

    .carousel-control-prev,
    .carousel-control-next {
        width: 30px;
        height: 30px;
        background: rgb(212 167 98);
    }




}

/* Profile Unified Page Specific Styles */
@media (max-width: 767px) {

    /* Profile sidebar */
    .profile-sidebar {
        margin-bottom: 1.5rem !important;
    }

    /* Make profile tabs scrollable horizontally */
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        display: flex !important;
    }

    .nav-tabs .nav-item {
        float: none !important;
        display: inline-block !important;
    }

    /* Adjust profile card layout */
    .profile-card {
        flex-direction: column !important;
    }

    .profile-card .profile-image {
        margin-right: 0 !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
    }

    /* Order cards in profile */
    .order-card {
        margin-bottom: 1rem !important;
    }

    /* Address cards in profile */
    .address-card {
        margin-bottom: 1rem !important;
    }

    /* Booking cards in profile */
    .booking-card {
        margin-bottom: 1rem !important;
    }

    /* Improve tab content spacing */
    .tab-content {
        padding: 1rem !important;
    }

    /* Make list group items more touch-friendly */
    /*.list-group-item {*/
    /*    padding: 0.75rem 0rem !important;*/
    /*}*/

    /* Adjust icon circles for better touch */
    .icon-circle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    /* Improve modal usability */
    .modal-body {
        padding: 1rem !important;
    }

    /* Adjust profile form layout */
    .profile-form .row>div {
        margin-bottom: 1rem !important;
    }
}

/* Checkout Page Specific Styles */
@media (max-width: 767px) {

    /* Checkout form */
    #checkoutForm {
        padding: 0 !important;
    }

    /* Event selection area */
    .event-selection {
        margin-bottom: 1.5rem !important;
    }

    /* Order summary */
    #orderSummary {
        padding: 1rem !important;
    }

    /* Event details */
    #eventDetails {
        padding: 0.75rem !important;
    }

    /* Improve form spacing */
    .form-group {
        margin-bottom: 1rem !important;
    }

    /* Make checkout button more prominent */
    #checkoutForm .btn-primary {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 1rem !important;
        margin-top: 1rem !important;
    }

    /* Adjust event modal */
    #eventModal .modal-body {
        padding: 1rem !important;
    }

    #eventModal .form-label {
        font-size: 0.9rem !important;
    }

    /* Improve select dropdown usability */
    #eventSelect {
        font-size: 0.9rem !important;
    }
}

/* Additional Responsive Improvements */
@media (max-width: 767px) {

    /* Improve table display on small screens */
    .table-sm th,
    .table-sm td {
        padding: 0.3rem !important;
        font-size: 0.8rem !important;
    }

    /* Make badges more visible */
    .badge {
        font-size: 0.7rem !important;
        padding: 0.35em 0.65em !important;
    }

    /* Adjust card headers */
    .card-header {
        padding: 0.75rem 1rem !important;
    }

    /* Adjust modal footer */
    .modal-footer {
        padding: 0.75rem !important;
    }

    /* Improve form validation messages */
    .invalid-feedback {
        font-size: 0.7rem !important;
    }

    /* Make alerts more compact */
    .alert {
        padding: 0.75rem 1rem !important;
        margin-bottom: 1rem !important;
    }
}

/* Specific fixes for profile_unified.php */
@media (max-width: 767px) {

    /* Fix profile sidebar on mobile */
    .profile-sidebar .list-group-item {
        display: flex !important;
        align-items: center !important;
    }

    /* Adjust profile tab content */
    .profile-tab-content {
        padding: 0 !important;
    }

    /* Fix order details modal */
    .order-details-modal .modal-dialog {
        margin: 0.5rem auto !important;
        max-width: 95% !important;
    }

    /* Improve address cards */
    .address-card .card-body {
        padding: 0.75rem !important;
    }

    /* Fix booking details */
    .booking-details {
        font-size: 0.85rem !important;
    }

    /* Adjust profile image size */
    .profile-image img {
        max-width: 100px !important;
        height: auto !important;
    }

    /* Enhance account navigation */
    #accountNav .list-group-item {
        padding: 0.75rem 1rem !important;
    }

    #accountNav .icon-circle {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    #accountNav .fw-medium {
        font-size: 0.9rem !important;
    }

    #accountNav .small {
        font-size: 0.75rem !important;
    }

    /* Improve profile form */
    #profileForm .form-label {
        font-size: 0.85rem !important;
        margin-bottom: 0.25rem !important;
    }

    #profileForm .form-control {
        font-size: 0.9rem !important;
        padding: 0.375rem 0.5rem !important;
    }

    /* Enhance order cards */
    .mobile-card {
        border-radius: 0.5rem !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
    }

    .mobile-card .card-header {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.9rem !important;
    }

    .mobile-card .card-body {
        padding: 0.75rem !important;
    }

    .mobile-card .badge {
        font-size: 0.7rem !important;
        padding: 0.25em 0.5em !important;
    }

    /* Improve order modals */
    .modal-order-details .modal-body {
        padding: 0.75rem !important;
    }

    .modal-order-details .modal-body p {
        margin-bottom: 0.5rem !important;
        font-size: 0.85rem !important;
    }

    /* Enhance tab navigation */
    .nav-tabs .nav-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.9rem !important;
    }
}

/* Specific fixes for checkout.php */
@media (max-width: 767px) {

    /* Fix checkout layout */
    .checkout-container .row {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }

    .checkout-container .col-md-3,
    .checkout-container .col-lg-9 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Improve event selection */
    #eventSelect {
        width: 100% !important;
        font-size: 0.9rem !important;
    }

    /* Fix order summary items */
    .order-item {
        padding: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Adjust event form in modal */
    #eventForm .row {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }

    #eventForm .col-md-6 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Improve checkout button */
    #checkoutForm button[type="submit"] {
        padding: 0.75rem !important;
        font-size: 1.1rem !important;
        margin-top: 1rem !important;
    }

    /* Enhance event details display */
    #eventDetailsContent {
        font-size: 0.85rem !important;
    }

    /* Make event modal more usable on mobile */
    #eventModal .modal-body {
        padding: 0.75rem !important;
    }

    #eventModal .form-label {
        font-size: 0.85rem !important;
        margin-bottom: 0.25rem !important;
    }

    #eventModal .form-control,
    #eventModal .form-select {
        font-size: 0.9rem !important;
        padding: 0.375rem 0.5rem !important;
    }

    /* Improve modal footer buttons */
    #eventModal .modal-footer {
        padding: 0.75rem !important;
    }

    #eventModal .modal-footer .btn {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.9rem !important;
    }

    /* Order summary styling */
    .order-summary-mobile .order-item-title {
        font-size: 0.9rem !important;
        font-weight: 500 !important;
    }

    .order-summary-mobile .order-item-price {
        font-size: 0.85rem !important;
    }

    .order-summary-mobile .order-total {
        font-size: 1rem !important;
        font-weight: 600 !important;
    }
}

  @media (max-width: 576px){
     .ptb-120 {
        padding-top: 30px;
        padding-bottom: 30px;
    }
   }