/* Base styles - already in your CSS */

/* For tablets (768px and below) */
@media (max-width: 768px) {
    .login-container {
        width: 90%;
        padding: 30px 20px;
    }
    
    h2 {
        font-size: 28px;
        margin-bottom: 25px;
    }
    
    .inputs {
        flex-direction: column;
        gap: 15px;
    }
    
    .input1, .input2 {
        width: 100%;
        padding: 12px;
        font-size: 16px;
    }
    
    .h-captcha {
        margin: 20px 0;
    }
    
    #loginBtn {
        width: 100%;
        padding: 12px;
        font-size: 16px;
    }
    
    #or {
        font-size: 16px;
        margin: 20px 0;
        display: block;
        text-align: center;
    }
}

/* For mobile phones (480px and below) */
@media (max-width: 480px) {
    .login-body {
        padding: 20px 10px;
    }
    
    .login-container {
        width: 100%;
        padding: 25px 15px;
        border-radius: 10px;
    }
    
    h2 {
        font-size: 24px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .inputs {
        margin-bottom: 20px;
    }
    
    .input1, .input2 {
        padding: 15px;
        font-size: 16px;
        border-radius: 8px;
    }
    
    .h-captcha {
        margin: 15px 0;
        transform: scale(0.8);
        transform-origin: 0 0;
    }
    
    #loginBtn {
        width: 100%;
        padding: 15px;
        font-size: 16px;
        border-radius: 8px;
        margin: 20px 0;
    }
    
    #or {
        font-size: 14px;
        margin: 15px 0;
    }
    
    #msgBox {
        font-size: 14px;
        padding: 8px 12px;
    }
}

/* For very small screens (320px and below) */
@media (max-width: 320px) {
    .login-body {
        padding: 15px 5px;
    }
    
    .login-container {
        padding: 20px 10px;
    }
    
    h2 {
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    .input1, .input2 {
        padding: 12px;
        font-size: 14px;
    }
    
    .h-captcha {
        transform: scale(0.7);
    }
    
    #loginBtn {
        padding: 12px;
        font-size: 14px;
    }
    
    #or {
        font-size: 12px;
        margin: 10px 0;
    }
    
    #msgBox {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* For larger desktop screens (1200px and above) */
@media (min-width: 1200px) {
    .login-container {
        max-width: 400px;
        margin: 50px auto;
    }
    
    h2 {
        font-size: 32px;
    }
    
    .input1, .input2 {
        padding: 15px;
        font-size: 18px;
    }
    
    #loginBtn {
        padding: 15px 30px;
        font-size: 18px;
    }
    
    .h-captcha {
        margin: 25px 0;
    }
}

/* register */
@media (max-width: 600px) {
    .register-container {
        width: 90%;
        padding: 15px;
    }

    .register-container h2 {
        font-size: 1.5em;
    }

    .register-container input[type="text"],
    .register-container input[type="email"],
    .register-container input[type="password"] {
        font-size: 1em;
        padding: 8px;
    }

    .register-container button {
        font-size: 1em;
        padding: 10px;
    }
}
/* captcha */

/* surfing page */
@media (max-width: 600px) {
    #closeButton {
        top: 10px;
        right: 10px;
        font-size: 0.2rem;
        padding: 5px 10px;
    }
    .surf-title {
        font-size: 1.2em;
        margin-left: 10px;
        color: white;
        flex-grow: 1;
        text-align: center;
        margin-right: 30px; /* Adjust for the back button */
        margin: auto;
    }
      #captchaDiv {
    width: 95%;
    padding: 10px;
  }
  
  #captchaDiv label {
    font-size: 18px;
  }
  
  #captchaDiv input {
    height: 45px;
    font-size: 18px;
  }
  
  #captchaDiv button {
    height: 45px;
    font-size: 18px;
  }
}

/* Base styles - already in your CSS */

/* For tablets (768px and below) */
@media (max-width: 768px) {
    .dashboard-container {
        padding: 10px;
    }
    
    header {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
    }
    
    header h1 {
        margin-bottom: 15px;
        font-size: 24px;
    }
    
    .dashboard-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .add-btn, .surf-btn {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .banner-list {
        grid-template-columns: 1fr;
    }
    
    #addLinkModal .modal-content {
        width: 90%;
        margin: 0 5%;
    }
    
    #goToProfile, #goTonotification {
        margin-right: 5px;
    }
}

/* For mobile phones (480px and below) */
@media (max-width: 480px) {
    header {
        align-items: center;
        text-align: center;
    }
    
    header h1 {
        margin-bottom: 10px;
        font-size: 20px;
    }
    
    .dashboard-buttons button {
        font-size: 16px;
        padding: 12px;
    }
    
    #credits {
        font-size: 16px;
    }
    
    h3.p5 {
        font-size: 18px;
        margin: 15px 0;
    }
    
    .banner-list {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .banner-item {
        padding: 15px;
    }
    
    #addLinkModal .modal-content {
        width: 95%;
        margin: 0 2.5%;
        padding: 15px;
    }
    
    #addLinkModal input {
        width: 100%;
        margin-bottom: 15px;
    }
    
    #openSupportpage {
        width: 50px;
        height: 50px;
        font-size: 20px;
        bottom: 15px;
        right: 15px;
    }
}

/* For larger desktop screens (1200px and above) */
@media (min-width: 1200px) {
    .dashboard-container {
        max-width: 1400px;
        margin: 0 auto;
    }
    
    .banner-list {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    
    header {
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* For very small screens (320px and below) */
@media (max-width: 320px) {
    header h1 {
        font-size: 18px;
    }
    
    .dashboard-buttons button {
        font-size: 14px;
        padding: 10px;
    }
    
    #addLinkModal .modal-content {
        width: 100%;
        margin: 0;
        padding: 10px;
    }
    
    #addLinkModal h2 {
        font-size: 18px;
    }
    
    .modal-content input {
        font-size: 14px;
        padding: 8px;
    }
    
    #openSupportpage {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
}