/**
 * Mobile Responsiveness Fixes for AdComparator
 * This file should be loaded AFTER all other stylesheets
 * to override mobile-specific issues without modifying existing code.
 */

@media (max-width: 767px) {

  /* ==========================================================================
     HEADER - Reduce height to save viewport space
     ========================================================================== */

  .page_test {
    height: 60px;
  }

  .mobile_menu {
    height: 60px;
  }

  .steps {
    margin-top: 60px;
  }

  .mobile_menu .logo_mobile img {
    max-height: 40px;
    width: auto;
  }

  /* ==========================================================================
     STEP PROGRESS INDICATOR - Better alignment and visibility
     ========================================================================== */

  .block_step {
    text-align: center;
    flex: 1;
  }

  .block_step h2 {
    justify-content: center;
    width: 100%;
    font-size: 16px;
    min-width: auto;
  }

  /* Make timeline thicker and more visible */
  .time_line {
    height: 6px;
    margin-top: 8px;
  }

  .time_line .block_iner {
    height: 6px;
  }

  /* ==========================================================================
     RESULTS PAGE - Fix excessive spacing and improve card layout
     ========================================================================== */

  /* Card-style results on mobile - override row_space */
  .test_results_main {
    background: #f8f8f8;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    border-bottom: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    justify-content: flex-start !important; /* Override row_space */
    align-content: flex-start !important;
  }

  /* Compact spacing between result items */
  .test_results_main div,
  .test_results_main .block_number,
  .test_results_main .block_el {
    margin-bottom: 4px !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .test_results_main div:last-child {
    margin-bottom: 0 !important;
  }

  /* Fix line-height and font sizing - override 33px line-height */
  .test_results_main div p,
  .test_results_main .block_number p,
  .test_results_main .block_el p {
    line-height: 1.3 !important;
    font-size: 15px !important;
    margin: 0 !important;
    padding: 2px 0 !important;
  }

  .test_results_main .block_number p {
    font-size: 14px !important;
    color: #666;
  }

  /* Ensure labels stay visible and inline */
  .test_results_main div p span {
    display: inline;
    margin-right: 6px;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.3 !important;
  }

  /* Results page title */
  .curent_step.second_step_page h2.mob_mar {
    font-size: 28px;
    margin-bottom: 24px;
  }

  /* ==========================================================================
     TYPOGRAPHY - Responsive scaling
     ========================================================================== */

  /* Scale down the closing message */
  .wish {
    font-size: 22px;
    line-height: 1.3;
    margin: 30px auto 0;
    padding: 0 10px;
  }

  .wish span {
    font-size: 16px;
    line-height: 1.4;
    margin-top: 20px;
  }

  /* Section headings */
  .curent_step h2 {
    font-size: 26px;
    line-height: 1.2;
  }

  /* Help section heading */
  .block_text_help h2 {
    font-size: 20px;
    text-align: center;
  }

  /* ==========================================================================
     FORM ELEMENTS - Better touch targets and usability
     ========================================================================== */

  /* Prevent iOS zoom on input focus (requires 16px minimum) */
  .input_Elements,
  input[type="text"] {
    font-size: 16px;
    padding: 12px 14px;
    width: 100%;
    max-width: 100%;
  }

  /* Response rate inputs on step 5 */
  .last_result {
    font-size: 16px;
    width: 80px;
    text-align: center;
  }

  /* Full-width continue buttons */
  .btn {
    text-align: center;
  }

  .btn input[type="submit"] {
    width: 100%;
    max-width: 280px;
    padding: 14px 24px;
    font-size: 16px;
  }

  /* ==========================================================================
     RADIO BUTTONS - Larger touch targets and compact spacing
     ========================================================================== */

  /* Remove extra spacing from br tags in radio button list */
  .form_steps blockquote {
    margin: 0;
    padding: 0;
  }

  .form_steps blockquote p.style2 {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .form_steps blockquote p.style2 br {
    display: none;
  }

  .radio:not(checked) + label {
    min-height: 48px;
    padding: 12px 0 12px 48px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }

  .radio:not(checked) + label:before {
    width: 24px;
    height: 24px;
    background-size: contain;
  }

  .radio:checked + label:before {
    width: 24px;
    height: 24px;
    background-size: contain;
  }

  /* ==========================================================================
     STEP 2 - Element naming form
     ========================================================================== */

  .curent_step .row.row_space.row_wrap.row_align_center {
    flex-direction: column;
    align-items: flex-start;
  }

  .name_elements {
    margin-bottom: 8px;
    font-size: 14px;
  }

  /* ==========================================================================
     STEP 3 - Control/Test variant inputs
     ========================================================================== */

  .main_block_step_3 {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
  }

  .main_block_step_3 .text_title {
    width: 100%;
    margin-bottom: 10px;
    font-weight: 600;
  }

  .main_block_step_3 .mar_input {
    width: 100%;
    margin-bottom: 8px;
  }

  .main_block_step_3 .block_Control {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
  }

  /* ==========================================================================
     STEP 4 - Ad combinations display
     ========================================================================== */

  .title_step-4 {
    font-size: 18px;
    margin-top: 24px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #eac70a;
  }

  .step_line {
    font-size: 13px;
    min-width: 100px;
  }

  .text_step4 {
    font-size: 14px;
  }

  /* ==========================================================================
     STEP 5 - Response rate inputs
     ========================================================================== */

  .five_step .row.clearfick {
    padding: 8px 0;
  }

  .text_step5 {
    font-size: 14px;
    flex: 1;
  }

  /* ==========================================================================
     FOOTER - Better mobile layout
     ========================================================================== */

  .footer_bg {
    padding: 24px 0;
  }

  .foot_logo h2 {
    font-size: 18px;
    margin: 12px 0 8px;
  }

  .foot_logo p {
    font-size: 13px;
    line-height: 1.5;
  }

  .foot_copy p {
    font-size: 12px;
    text-align: center;
    width: 100%;
  }

  /* ==========================================================================
     HELP SECTION ICONS - Better grid on mobile
     ========================================================================== */

  .block_icons_help .row {
    justify-content: space-around;
  }

  .block_icon_text {
    width: 45%;
    margin-bottom: 16px;
    text-align: center;
  }

  .block_icon_text p {
    font-size: 13px;
  }

  .img_block_bag {
    width: 50px;
    height: 50px;
    margin: 0 auto 8px;
  }

  .img_block_bag img {
    max-width: 30px;
  }

  /* ==========================================================================
     GENERAL SPACING ADJUSTMENTS
     ========================================================================== */

  .wrap {
    padding: 0 12px;
  }

  .curent_step.second_step_page {
    padding: 20px 0;
  }

  section.Help {
    padding: 24px 0;
  }

  /* Note text on step 4 */
  .note {
    font-size: 13px;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 8px;
    line-height: 1.5;
  }

}

/* ==========================================================================
   SMALL MOBILE FIXES (320px - 374px)
   ========================================================================== */

@media (max-width: 374px) {

  .block_step h2 {
    font-size: 14px;
  }

  .wish {
    font-size: 20px;
  }

  .test_results_main div p {
    font-size: 14px;
  }

  .curent_step h2 {
    font-size: 22px;
  }

}