main{
    margin: 50px 0;
    min-height: 550px;
}
.pickup_address .alert,
.delivery_address .alert{
    font-size: 14px;
}
.form-sticky{
    position: sticky;
    top: 15px;
}
.form-wrap .bottom{
    margin: -1rem !important;
    margin-top: 15px !important;
    font-size: 14px;
}
.fs-5 {
    font-size: 1.25rem !important;
    line-height: 1.25rem !important;
}
.line-dotted{
    border-bottom: var(--hairline);
    margin: 15px 0;
}
.form-control:focus {
    border-color: var(--primary-800);
    box-shadow: none;
}
.form-group label{
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
}
.offer{
    position: relative;
    overflow: hidden;
}
.offer > div{
    position: relative;
}
.offer .bg-success{
    position: absolute;
    left: -20px;
    top: 15px;
    width: 100px;
    border-radius: 0;
    transform: rotate(-45deg);
    z-index: 1;
}
.offer-footer > div{
    width: 100px;
}
.offer-footer > button{
    width: calc(100% - 110px);
}

/* Offer logo/image responsive */
.offer .d-flex.align-items-center > img,
.offer .d-flex.align-items-center > div[style*="width: 100px"] {
    width: 80px !important;
    height: 48px !important;
    flex-shrink: 0;
}

/* Better offer content spacing */
.offer .w-100 {
    min-width: 0; /* Allows flex items to shrink below content size */
}
.offer-info{
    cursor: pointer;
    border-bottom: 1px dashed;
}
.package-summary{
    /*
    border-top: 1px dashed var(--primary-200);
    padding-top: 20px;
    margin-top: 20px;
    font-size: 14px;
    line-height: 24px;
    */
    margin-top: 15px;
}
.hide,
.hidden{
    display: none;
}
.package-container{
    padding: 15px 0;
    border-bottom: 1px dashed var(--primary-200);
}
.package-container .alert{
    font-size: 12px;
    line-height: 14px;
}
#your_package-block .form-wrap .package-container:last-child{
    border: 0;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: #eee;
    opacity: 1;
}
.order-total .list-parcels i{
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
#accordionFromTo{
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}
.accordion-button:focus {
    box-shadow: none;
}
.offer.selected:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 3px solid red;
}
.cabinet-documents i{
    font-size: 68px;
}
.details-list{
    list-style: none;
    padding: 0;
}
.details-list li{
    display: flex;
    justify-content: space-between;
}


.tracking-step{
    font-size: 18px;
}

.tracking-step .tracking-step-dot{
    padding: 0 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}
.tracking-step .tracking-step-dot:after,
.tracking-step .tracking-step-dot:before{
    content: '';
    position: absolute;
}
.tracking-step .tracking-step-dot:before{
    width: 1px;
    height: 100%;
    background-color: #dee2e6;
}
.tracking-step .tracking-step-dot:after{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgb(0 207 111);
}

/* Mobile-first responsive design - Bootstrap 5 breakpoints */
@media (max-width: 575.98px) {
    /* Extra small devices (phones) */
    main {
        margin: 20px 0;
        min-height: 400px;
    }

    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .form-wrap {
        padding: 15px !important;
        margin-bottom: 20px !important;
    }

    .h3, h3, .h4, h4, .h5, h5, .h6, h6 {
        font-size: 1.2rem !important;
        margin-bottom: 1rem !important;
    }

    .btn {
        padding: 8px 16px;
        font-size: 14px;
        margin-bottom: 5px;
    }

    .btn-sm {
        padding: 6px 12px;
        font-size: 12px;
    }

    .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 8px 12px;
    }

    .input-group-text {
        font-size: 14px;
        padding: 8px 10px;
    }

    /* Package form mobile fixes */
    .package-container {
        padding: 15px 10px;
        border-bottom: 1px dashed var(--primary-200);
        margin-bottom: 20px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 8px;
    }

    .package-container .form-group {
        margin-bottom: 20px;
    }

    .package-container .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px 15px;
        border-radius: 6px;
        min-height: 48px; /* Better touch target */
    }

    .package-container .input-group-text {
        font-size: 14px;
        padding: 12px 12px;
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    /* Better form field spacing on mobile */
    .package-container .row {
        margin: 0 -8px;
    }

    .package-container [class*="col-"] {
        padding: 0 8px;
        margin-bottom: 15px;
    }

    /* Form labels mobile optimization */
    .package-container label {
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 8px;
        color: #333;
        display: block;
    }

    /* Remove package button mobile */
    .remove-package {
        width: 100%;
        margin-top: 10px;
        padding: 12px;
        font-size: 14px;
        border-radius: 6px;
    }

    /* Order Cards Mobile Layout */
    .order-single {
        display: flex !important;
        flex-direction: column !important;
        padding: 12px !important;
        gap: 12px !important;
    }

    .order-single .d-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* Remove fixed widths on mobile */
    .order-single [style*="min-width"] {
        min-width: auto !important;
        width: 100% !important;
    }

    /* Mobile tracking numbers layout */
    .order-single .text-center {
        text-align: left !important;
    }

    /* Action buttons mobile layout */
    .order-single .d-flex[style*="min-width: 180px"] {
        min-width: auto !important;
        width: 100% !important;
        justify-content: space-around !important;
        gap: 8px !important;
        margin-top: 15px;
        padding: 10px 0;
        border-top: 1px dashed var(--primary-200);
    }

    .order-single .action-btn {
        min-width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    /* Better action button colors and styles for mobile */
    .order-single .refresh-status-btn {
        background: var(--info) !important;
        color: white !important;
        border: none !important;
    }

    .order-single .cancel-btn {
        background: var(--action-destructive) !important;
        color: white !important;
        border: none !important;
    }

    .order-single .repeat-btn {
        background: var(--action-brand) !important;
        color: white !important;
        border: none !important;
    }

    .order-single .details-btn {
        background: var(--neutral-600) !important;
        color: white !important;
        border: none !important;
        text-decoration: none !important;
    }

    /* Offers mobile layout */
    .offer {
        margin-bottom: 15px;
    }

    .offer-footer {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        align-items: stretch !important;
    }

    .offer-footer .price-info {
        width: 100% !important;
        text-align: center;
        margin-bottom: 10px;
        margin-right: 0 !important;
    }

    .offer-footer .select-btn {
        width: 100% !important;
        font-size: 14px;
        padding: 12px 16px !important;
    }

    /* Tracking status text wrapping fix */
    .tracking-status {
        align-items: flex-start !important;
        line-height: 1.4;
    }

    .tracking-text {
        word-break: break-word;
        hyphens: auto;
        line-height: 1.3;
        margin-top: 1px;
    }

    /* Service name responsiveness */
    .offer h6 {
        font-size: 16px;
        line-height: 1.3;
        word-break: break-word;
    }

    /* Step 2 mobile layout fixes */
    .col-lg-8, .col-xxl-9 {
        margin-bottom: 20px;
    }

    .form-sticky {
        position: static !important;
        margin-bottom: 20px;
    }

    /* Header and navigation mobile */
    .navbar-nav {
        text-align: center;
    }

    .navbar-nav .nav-link {
        padding: 10px 0 !important;
        border-bottom: 1px solid #eee;
    }

    /* Table responsive mobile */
    .table-responsive {
        border: none;
        margin-bottom: 0;
    }

    /* Modal mobile fixes */
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }

    /* Toast notifications mobile */
    .toast-container {
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
        z-index: 9999 !important;
    }

    .toast {
        width: 100% !important;
        max-width: none !important;
    }

    /* General mobile typography improvements */
    body {
        font-size: 16px;
        line-height: 1.5;
    }

    h1, h2, h3, h4, h5, h6 {
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    .h3, .h4, .h5, .h6 {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    /* Better mobile spacing for content */
    .container {
        padding: 0 15px;
    }

    main {
        padding: 10px 0;
    }

    /* Card improvements */
    .shadow-sm {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    .rounded, .rounded-2 {
        border-radius: 8px !important;
    }

    /* Form improvements */
    .form-control {
        border-radius: 6px;
        border: 1px solid #ddd;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .form-control:focus {
        border-color: var(--primary-800);
        box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
    }
}

@media (max-width: 767.98px) {
    /* Small devices (landscape phones) */
    .tracking-step {
        font-size: 14px;
    }
    .tracking-step .tracking-step-dot{
        min-height: 110px;
        padding: 0 25px;
    }
    .tracking-step .tracking-step-dot:after {
        width: 17px;
        height: 17px;
    }

    /* Address forms stacked */
    .pickup_address,
    .delivery_address {
        margin-bottom: 20px;
    }
}

@media (max-width: 991.98px) {
    /* Medium devices (tablets) */
    .form-sticky {
        position: static !important;
    }
}
/* Admin Panel Mobile Responsiveness */
@media (max-width: 991.98px) {
    /* Admin header mobile fixes */
    .app-header .d-flex.align-items-center {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px;
    }

    .app-header .card-title {
        width: 100% !important;
        margin-bottom: 15px;
    }

    .app-header .card-toolbar {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    /* Admin search form mobile */
    .app-header form.d-flex {
        flex-direction: column !important;
        gap: 10px;
        width: 100% !important;
    }

    .app-header form .position-relative,
    .app-header form .form-select,
    .app-header form .form-control {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* Admin table mobile responsiveness */
    .table-responsive {
        border: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table th,
    .table td {
        white-space: nowrap;
        min-width: 120px;
    }

    .table th:first-child,
    .table td:first-child {
        min-width: 50px;
    }

    /* Admin tracking numbers mobile */
    .badge {
        display: inline-block;
        font-size: 10px;
        padding: 2px 6px;
        margin-bottom: 2px;
    }

    /* Admin actions dropdown mobile */
    .btn-sm {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* Header Mobile Responsiveness */
@media (max-width: 767.98px) {
    /* Header top section mobile */
    .header-top .d-flex {
        flex-direction: column !important;
        gap: 15px;
        text-align: center;
    }

    .header-top .languages-block {
        order: 3;
        width: 100%;
    }

    .header-top .main-logo {
        order: 1;
        width: 100%;
    }

    .header-top .btn-group {
        order: 2;
        width: 100%;
        display: flex !important;
        justify-content: center;
        gap: 10px;
    }

    .header-top .btn-group .btn {
        flex: 1;
        max-width: 150px;
    }

    /* Navbar mobile fixes */
    .navbar-nav .dropdown-menu {
        position: static !important;
        transform: none !important;
        border: none;
        box-shadow: none;
        padding: 0;
        margin-top: 10px;
    }

    .navbar-nav .dropdown-item {
        padding: 12px 20px;
        border-bottom: 1px solid #eee;
    }

    .navbar-nav .dropdown-item:last-child {
        border-bottom: none;
    }
}

/* Home Page Mobile Responsiveness */
@media (max-width: 575.98px) {
    /* Home page form mobile layout */
    .home .row {
        margin: 0;
    }

    .home .col-lg-4,
    .home .col-lg-8 {
        padding: 0 5px;
        margin-bottom: 20px;
    }

    /* Home form fields mobile */
    .home .form-group .row {
        margin: 0 -5px;
    }

    .home .form-group [class*="col-"] {
        padding: 0 5px;
        margin-bottom: 15px;
    }

    /* Dimension inputs mobile layout */
    .home .input-group.flex-nowrap {
        flex-direction: column !important;
    }

    .home .input-group.flex-nowrap > div {
        width: 100% !important;
        margin-bottom: 10px;
    }

    .home .input-group.flex-nowrap > div:last-child {
        margin-bottom: 0;
    }

    .home .input-group.flex-nowrap input {
        border-radius: 6px !important;
    }

    /* Delivery illustration mobile */
    .delivery-illustration-section {
        text-align: center;
        padding: 20px 0;
    }

    .delivery-illustration-section img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
    }

    /* Promotional section mobile */
    .promo-text-section {
        padding: 30px 0;
        margin-top: 30px;
        background: #f8f9fa;
    }

    .promo-text-section h3 {
        font-size: 1.3rem;
        margin-bottom: 15px;
    }

    .promo-text-section p {
        font-size: 14px;
        line-height: 1.5;
    }
}

/* Contact and Info Pages Mobile */
@media (max-width: 575.98px) {
    /* Contact form mobile */
    .contact-form .form-group {
        margin-bottom: 20px;
    }

    .contact-form .form-control {
        padding: 12px 15px;
        border-radius: 6px;
        font-size: 16px;
    }

    .contact-form textarea.form-control {
        min-height: 120px;
        resize: vertical;
    }

    /* Info pages content mobile */
    .info-content {
        padding: 0 5px;
    }

    .info-content h1,
    .info-content h2,
    .info-content h3 {
        font-size: 1.3rem;
        line-height: 1.4;
        margin-bottom: 15px;
    }

    .info-content p {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .info-content ul,
    .info-content ol {
        padding-left: 20px;
    }
}

/* Tracking Page Mobile */
@media (max-width: 575.98px) {
    .tracking-container {
        padding: 15px;
    }

    .tracking-form {
        margin-bottom: 30px;
    }

    .tracking-form .form-control {
        padding: 12px 15px;
        font-size: 16px;
        border-radius: 6px;
        margin-bottom: 15px;
    }

    .tracking-form .btn {
        width: 100%;
        padding: 12px;
        font-size: 16px;
    }

    /* Tracking results mobile */
    .tracking-results {
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
        margin-top: 20px;
    }

    .tracking-step-mobile {
        padding: 15px;
        border-bottom: 1px dashed #dee2e6;
        margin-bottom: 15px;
    }

    .tracking-step-mobile:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }
}

@media (min-width: 1200px) {
    .order-single > div:nth-child(1){
        width: 400px;
        max-width: 100%;
    }
    .order-single > div:nth-child(2){
        width: 200px;
        max-width: 100%;
    }
    .order-single > div:nth-child(3){
        width: 200px;
        max-width: 100%;
    }
    .order-single > div:nth-child(4){
        width: 300px;
        max-width: 100%;
    }
    .order-single > div:last-child{
        width: 200px;
        max-width: 100%;
    }
}

/* Enhanced placeholder styling */
.form-control::placeholder,
.form-select::placeholder {
    color: #8a8a8a;
    font-style: italic;
    opacity: 0.8;
}

.form-control:focus::placeholder {
    color: #a0a0a0;
    opacity: 0.6;
}

/* Form label enhanced styling */
.form-label-enhanced {
    font-weight: 500;
    color: var(--primary-800);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* Input group placeholder styling */
.input-group .form-control::placeholder {
    color: #999;
    font-size: 0.9em;
}

/* Required field indicator styling */
.required-field::after {
    content: " *";
    color: var(--error);
}

/* Better focus states for accessibility */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-800);
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.15);
}

/* Readonly field styling */
.form-control[readonly] {
    background-color: #f8f9fa;
    cursor: not-allowed;
    opacity: 0.85;
}