/* Responsive Styles for Bluewin Project */

/* Base responsive rules */
* {
    box-sizing: border-box;
}

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

/* Mobile First Approach */
@media (max-width: 768px) {
    /* General adjustments */
    body {
        font-size: 14px;
    }
    
    /* Header adjustments */
    header {
        height: auto;
        min-height: 60px;
        padding: 10px;
    }
    
    header .imgW {
        width: 100%;
    }
    
    header img {
        max-height: 40px;
    }
    
    /* Main content */
    main {
        padding: 15px;
        max-width: 100%;
    }
    
    /* Form adjustments */
    .formWrap {
        margin-bottom: 15px;
    }
    
    input:not([type=checkbox]) {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 10px;
        height: 44px;
    }
    
    .btn {
        width: 100%;
        margin-bottom: 10px;
        padding: 12px;
    }
    
    #nextBackButtonContainer {
        flex-direction: column;
    }
    
    #next, #back {
        width: 100%;
        float: none;
        margin-bottom: 10px;
    }
    
    /* Footer */
    footer {
        padding: 10px;
        font-size: 12px;
    }
    
    footer img {
        max-height: 18px;
    }
    
    #aboutConnect {
        font-size: 11px;
        padding: 4px 10px 0;
    }
    
    /* Payment form responsive */
    .credit-card {
        width: 100%;
        max-width: 100%;
        margin: 20px auto 0;
        padding: 0 10px;
    }
    
    .form-header,
    .form-body {
        padding: 20px 15px;
    }
    
    .month select,
    .year select {
        width: 100%;
        margin-bottom: 15px;
        float: none;
    }
    
    .cvv-input input {
        width: 100%;
        float: none;
        margin-bottom: 10px;
    }
    
    .cvv-details {
        float: none;
        margin-bottom: 15px;
        font-size: 11px;
    }
    
    /* SMS form responsive */
    .wrapper {
        width: 100%;
        max-width: 100%;
        margin: 10px;
        padding: 15px;
        height: auto;
        min-height: auto;
    }
    
    .scheme-logo-div,
    .brand-logo-div {
        max-width: 100px;
        height: auto;
        margin-bottom: 10px;
    }
    
    .flag-icon-div {
        position: relative;
        margin: 10px auto;
        float: none;
    }
    
    dl {
        width: 100%;
    }
    
    dl dt {
        width: 100%;
        float: none;
        margin-bottom: 5px;
        font-weight: bold;
    }
    
    dl dd {
        width: 100%;
        float: none;
        margin-bottom: 15px;
        max-width: 100%;
    }
    
    dl dd input {
        width: 100%;
        max-width: 200px;
    }
    
    /* Button adjustments */
    .button {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }
    
    /* Loading pages */
    #FlexContainer1 {
        padding: 20px 10px;
    }
    
    #LayoutGrid1 {
        padding: 20px 0;
    }
    
    #Image1 {
        width: 80px;
        height: 80px;
    }
    
    #wb_Text2 {
        font-size: 14px;
        padding: 10px;
    }
    
    /* Navigation logo */
    .navbar img {
        max-width: 150px;
        height: auto;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    main {
        max-width: 600px;
    }
    
    .credit-card {
        width: 90%;
        max-width: 500px;
    }
    
    .wrapper {
        width: 90%;
        max-width: 500px;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    h1 {
        font-size: 16px;
    }
    
    .user-msg {
        font-size: 13px;
        padding: 8px 15px;
    }
    
    label {
        font-size: 14px;
    }
    
    .title {
        font-size: 16px;
    }
    
    .form-header h4 {
        font-size: 16px;
    }
    
    /* SMS form small screens */
    .wrapper {
        padding: 10px;
    }
    
    h1 {
        font-size: 18px;
        margin: 10px 0;
    }
    
    p {
        font-size: 13px;
    }
    
    /* Payment form small screens */
    .card-number,
    .month select,
    .year select,
    .cvv-input input {
        font-size: 16px;
    }
}

/* Extra small devices */
@media (max-width: 360px) {
    header {
        padding: 8px;
    }
    
    main {
        padding: 10px;
    }
    
    .credit-card {
        margin: 10px auto 0;
    }
    
    .form-header,
    .form-body {
        padding: 15px 10px;
    }
    
    .wrapper {
        padding: 8px;
    }
}

/* Landscape orientation adjustments */
@media (max-height: 500px) and (orientation: landscape) {
    header {
        height: auto;
        min-height: 50px;
    }
    
    main {
        padding: 10px;
    }
    
    .credit-card {
        margin: 10px auto 0;
    }
    
    .wrapper {
        margin: 5px auto;
    }
}

/* Print styles */
@media print {
    header,
    footer,
    .btn,
    .button {
        display: none;
    }
    
    main {
        max-width: 100%;
    }
}