/* Enhanced Responsive CSS for SamTrans GmbH Website */
/* Optimized for Desktop, Tablet, and Mobile devices */

/* ===== CORE RESPONSIVE RESET & BASE STYLES ===== */
* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 320px;
}

/* Prevent horizontal scrolling in all containers */
section, .container, #teamContainer, #teamContainer .container {
    max-width: 100%;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* ===== MODERN BREAKPOINT SYSTEM ===== */
:root {
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-large: 1300px;
    --breakpoint-xlarge: 1440px;
}

/* ===== FLUID TYPOGRAPHY ===== */
@media (max-width: 1300px) {
    html {
        font-size: 95%;
    }
}

@media (max-width: 930px) {
    html {
        font-size: 90%;
    }
}

@media (max-width: 730px) {
    html {
        font-size: 85%;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 80%;
    }
}

/* ===== ENHANCED NAVIGATION ===== */
/* Hide mobile menu toggle and float menu on desktop/tablet - show only on mobile */
@media (min-width: 931px) {
    header a.menu {
        display: none !important;
    }
    
    .floatmenu {
        display: none !important;
    }
}

@media (max-width: 930px) {
    header nav {
        display: none;
    }
    
    .floatmenu {
        display: block !important;
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        background-color: rgba(255, 255, 255, 0.97) !important;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease;
        z-index: 1000;
        padding: 20px;
        overflow-y: auto;
    }
    
    .floatmenu.active {
        right: 0;
    }
    
    .floatmenu a.mobile {
        display: block;
        padding: 15px 0;
        border-bottom: 1px solid rgba(18, 61, 103, 0.1);
        font-size: 18px;
        text-align: left;
    }
    
    .floatmenu a.close {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 24px;
        color: var(--dark-blue);
    }
    
    header a.menu {
        display: block;
        position: relative;
        z-index: 1001;
    }
    
    header a.menu img {
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 730px) {
    .floatmenu {
        width: 85%;
    }
    
    header .logo {
        width: 70px;
        height: 70px;
    }
    
    .flag {
        width: 24px;
        height: 24px;
    }
}

/* ===== IMPROVED SECTION LAYOUTS ===== */
@media (max-width: 1300px) {
    section {
        width: 90%;
        max-width: 900px;
        padding: 0 20px;
    }
    
    .top {
        flex-direction: column;
        gap: 30px;
    }
    
    .top .topContacts {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 930px) {
    section {
        width: 95%;
        max-width: none;
        padding: 0 15px;
    }
    
    .mainVideo {
        flex-direction: column;
        gap: 30px;
    }
    
    .mainVideo > div {
        width: 100%;
    }
    
    .delieveryTypes .items {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
    
    .delieveryTypes .items .item {
        width: calc(50% - 10px);
        margin: 0;
    }
}

@media (max-width: 730px) {
    section {
        width: 100%;
        padding: 0 16px;
    }
    
    .delieveryTypes .items .item {
        width: 100%;
        max-width: 350px;
        margin: 0 auto 20px;
    }
    
    .logistConsult {
        flex-direction: column;
        gap: 30px;
    }
    
    .logistConsult .photo,
    .logistConsult .desc,
    .logistConsult .form {
        width: 100%;
    }
    
    .packs {
        flex-direction: column;
        gap: 20px;
    }
    
    .packs > div {
        width: 100%;
        padding-right: 0;
    }
}

/* ===== ENHANCED FORM RESPONSIVENESS ===== */
@media (max-width: 930px) {
    .inputBlue input,
    .inputYellow input {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 15px;
    }
    
    .logistConsult .form,
    .calcOnline .form {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 730px) {
    .inputBlue input,
    .inputYellow input {
        padding: 18px 15px;
        font-size: 16px;
    }
    
    .pay .form .fields {
        flex-direction: column;
    }
    
    .pay .form .fields .inputYellow {
        width: 100%;
        margin-bottom: 15px;
    }
    
    .contacts2 .fields {
        flex-direction: column;
        align-items: stretch;
    }
    
    .contacts2 .fields .inputBlue {
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
    }
    
    .contacts2 .fields input[type="submit"] {
        width: 100%;
        margin: 20px 0 0 0;
    }
}

/* ===== IMPROVED DELIVERY TYPES ===== */
@media (max-width: 930px) {
    .delieveryTypes .items .item {
        padding: 70px 15px 15px;
    }
    
    .delieveryTypes .items .item img {
        width: 150px;
        margin-top: -50px;
    }
}

@media (max-width: 730px) {
    .delieveryTypes .items .item {
        padding: 60px 20px 20px;
        min-height: 280px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .delieveryTypes .items .item img {
        width: 120px;
        margin-top: -40px;
        align-self: center;
    }
    
    .delieveryTypes .items .item .period {
        font-size: 28px;
    }
    
    .delieveryTypes .items .item .title {
        font-size: 18px;
        margin-top: 10px;
    }
}

/* ===== TEAM SECTION ENHANCEMENTS ===== */
@media (max-width: 930px) {
    #teamContainer .container {
        margin-top: 60px;
        width: auto;
        min-width: 100%;
    }
    
    #teamContainer {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .team .logo span {
        font-size: 48px;
    }
}

@media (max-width: 730px) {
    #teamContainer .container {
        margin-top: 40px;
        width: auto;
        min-width: 100%;
    }
    
    #teamContainer {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .team .logo span {
        font-size: 36px;
        line-height: 1.2;
    }
    
    #teamContainer:after {
        display: block;
        content: "↔ Swipe to navigate";
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
        color: var(--dark-blue);
        opacity: 0.7;
    }
}

/* ===== CALCULATOR SECTION ===== */
@media (max-width: 930px) {
    .calcOnline section {
        flex-direction: column;
        gap: 30px;
    }
    
    .calcOnline .photo,
    .calcOnline .desc,
    .calcOnline .form {
        width: 100%;
    }
    
    .calcOnline .form {
        padding: 30px;
        border-radius: 20px;
    }
}

@media (max-width: 730px) {
    .calcOnline {
        background-image: none;
        background-color: var(--light-blue);
        padding: 40px 0;
    }
    
    .calcOnline .photo img {
        position: relative;
        margin: 0 auto;
        width: 250px;
        height: auto;
    }
    
    .calcOnline .form {
        padding: 25px 20px;
    }
    
    .calcOnline .form .title {
        font-size: 20px;
    }
}

/* ===== MAP CONTAINER ===== */
@media (max-width: 930px) {
    .mapContainer section {
        flex-direction: column;
        gap: 30px;
    }
    
    .mapContainer .text,
    .mapContainer .map {
        width: 100%;
    }
    
    .mapContainer .map img {
        margin: 0;
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 730px) {
    .mapContainer .text .title {
        font-size: 24px;
        line-height: 1.3;
    }
    
    .mapContainer .text .columns {
        flex-direction: column;
        gap: 20px;
    }
    
    .mapContainer .text .columns ul {
        padding-right: 0;
    }
}

/* ===== STATISTICS SECTION ===== */
@media (max-width: 930px) {
    .statistic .digits {
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }
    
    .statistic .digits div {
        width: calc(50% - 15px);
        margin-bottom: 20px;
    }
}

@media (max-width: 730px) {
    .statistic .digits {
        gap: 20px;
    }
    
    .statistic .digits div {
        width: 100%;
        max-width: 300px;
        text-align: center;
        flex-direction: column;
        justify-content: center;
    }
    
    .statistic .digits div img {
        margin-bottom: 10px;
    }
}

/* ===== CONTACTS SECTION ===== */
@media (max-width: 930px) {
    .contacts .content,
    .contacts .note {
        width: 100%;
        padding-left: 0;
    }
    
    .contacts .note {
        margin-top: 20px;
        padding-left: 40px;
    }
    
    .cities {
        flex-wrap: wrap;
    }
    
    .cities .city {
        width: 50%;
        margin-bottom: 30px;
    }
}

@media (max-width: 730px) {
    .cities .city {
        width: 100%;
    }
    
    .contacts2 .phones a {
        font-size: 32px;
        text-align: center;
        justify-content: center;
    }
    
    .contacts2 .phones img {
        max-width: 60px;
        margin-right: 15px;
    }
}

/* ===== FOOTER ===== */
@media (max-width: 730px) {
    footer section {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    footer section div {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

/* ===== ENHANCED TOUCH TARGETS ===== */
@media (max-width: 730px) {
    .mainVideo > div.button a,
    .logistConsult .form input[type="submit"],
    .calcOnline .form input[type="submit"],
    .pay .form input[type="submit"],
    .contacts2 .fields input[type="submit"] {
        min-height: 48px;
        padding: 12px 20px;
        font-size: 16px;
    }
    
    .delieveryTypes .items .item {
        margin-bottom: 15px;
        transition: transform 0.2s ease;
    }
    
    .delieveryTypes .items .item:active {
        transform: scale(0.98);
    }
    
    .floatmenu a.mobile {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ===== IMPROVED VISIBILITY ===== */
@media (max-width: 730px) {
    .top .topContacts {
        position: static;
        width: 100%;
        margin: 20px 0;
        padding: 20px;
        background-image: url(../img/top_contacts_bg_small.png);
        visibility: hidden;
    }
    
    .buh .reqv.desktop {
        display: none;
    }
    
    .buh .reqv.mobile {
        display: flex;
        margin: 20px 0;
    }
    
    .mapContainer .map img.desktop {
        display: none;
    }
    
    .mapContainer .map img.mob {
        display: block;
        width: 100%;
        height: auto;
    }
    
    /* Hide mobile map image on mobile devices */
    img.mob-china {
        display: none !important;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .floatmenu,
    .menu,
    .mask,
    .fw,
    .mainVideo > div.button a {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1 {
        font-size: 24pt;
        margin-bottom: 20pt;
    }
    
    section {
        width: 100%;
        max-width: none;
        padding: 0;
        margin-bottom: 20pt;
    }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
    :root {
        --yellow: #ffff00;
        --light-yellow: #ffff99;
        --dark-blue: #000080;
        --light-blue: #e6f2ff;
    }
    
    a {
        text-decoration: underline;
    }
    
    .mainVideo > div.button a {
        border: 3px solid var(--dark-blue);
    }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: #ffffff;
    }
    
    .floatmenu {
        background-color: rgba(26, 26, 26, 0.97) !important;
        color: #ffffff;
    }
    
    .inputBlue input,
    .inputYellow input {
        background-color: #333333;
        color: #ffffff;
        border: 1px solid #555555;
    }
}