/* modification to original */
.wc-pos-1{
  position: absolute;
}

/* add your css here */
body{
  margin-right:20px;
}

/* iPhone X and similar devices specific fixes */
@media screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .header {
    padding-top: calc(22.5vh + env(safe-area-inset-top));
  }
  
  #contact-and-call-whatsapp {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* General mobile improvements */
@media (max-width:512px) {
  
  body {
    margin-right:20px; 
    overflow-x: hidden;
  }

  #contact-and-call-whatsapp{
    display: inline;
    position: fixed;
    bottom: 20px;
    width: 100%;
    z-index: 1000;
  }
  
  #contact-and-call-whatsapp a.button{
    width: 100%;
    font-size: 18pt;
    padding: 12px;
    background-color: #707d0a;
    border: 0px solid transparent;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
  }
  
  #container{
    width: 100%;
    overflow: hidden;
    padding-bottom: 80px; /* Reduced from 200px */
  }

  .row{
    margin-right: 0;
  }

  .span12{
    width: 90%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .main .span12{
    width: 100%;
    margin-right: 2px;
  }
  
  .main .span6{
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }

  .header{
    background-image: url(/img/mobile-header-new-6.jpg); /*/img/background_mobile.jpg*/
    background-position: right top;
    background-size: cover; /*contain;*/
    padding-top: 22.5vh;
    min-height: 40vh;
  }
  
  .header > .span12 b{
    padding-top: 0!important;
    margin-top: 20px!important;
    padding-bottom: 0;
    margin-bottom: 0;
    line-height: 1.4;
    font-size: 14px;
  }
  
  .header > .span12{
    margin-right: 10px;
    margin-left: 10px;
    width: calc(100% - 20px);
  }
  
  img.step-btns{
    float: none;
    margin: 10px auto;
    text-align: center;
    width: 30%;
    max-width: 120px;
    margin-right: 7%;
    margin-bottom: 20px;
  }
  
  span[ng-show="notice == 'step-a'"] a{
    color: #000!important;
  }
  
  label{
    font-size: 14pt;
    margin-left: 5px;
  }
  
  .footer{
    padding-right: 20px!important;
    font-size: 12pt!important;
    font-weight: 100;
    margin-bottom: 80px; /* Space for fixed buttons */
  }
  
  .step-c .ui-datepicker{
    width: 100%;
    max-width: 93%;
  }

  h5.wc-heading{
    padding-right: 4px!important;
    margin-top: 24px;
    font-size: 16pt!important;
    font-weight: 700;
    margin-right: 10%;
    line-height: 1.3;
  }

  /* step B */
  .step-b .ui-datepicker{
    width: 100%;
    max-width: 93%;
  }

  /* step d */
  .notice-step-d{
    top: 0;
    position: relative;
    color: red;
    font-size: 14px;
    line-height: 1.4;
  }

  .step-c .main td:first-child{
    width: 65%;
  }
  
  .step-c .main td:nth-child(2){
    width: 35%;
  }
  
  .col-xs-11{
    width: 91.66666666666667%;
  }
  
  .col-sm-12{
    width: 100%;
  }
  
  .col-sm-6{
    width: 50%;
    float: left;
    display: inline-block;
  }
}

.wrapper{
  width: 95%;
  margin: 0 auto;
}

.page-top img.step-btns{
  display: none;
}

.page-top > .span12 img.step-btns{
  display: inline;
}

/* iPhone X Portrait */
@media (min-width: 375px) and (max-width: 375px) and (min-height: 812px) {
  .header{
    padding-top: calc(15vh + env(safe-area-inset-top));
    background-size: cover; /*contain;*/
  }
  
  .header > .span12 b {
    font-size: 13px;
    line-height: 1.3;
    margin-top: 15px!important;
  }
}

/* Standard mobile breakpoints */
@media (min-width: 424px) and (max-width:512px){
  .header{
    padding-top: 11vh;
    background-size: cover; /*contain;*/
  }
}

@media (min-width: 396px) and (max-width:424px){
  .header{
    background-size: cover; /*contain;*/
    padding-top: 7vh;
  }
  
  .header .span12{
    width: 99%;
  }
}

@media (max-width: 424px){
  .header{
    background-size: cover; /*contain;*/
    padding-top: 21.5vh;
  }
}

/* Tablet improvements */
@media (min-width: 513px) and (max-width: 1024px) {
  .span12 {
    width: 100% !important;
    padding: 15px;
    margin: 0;
    box-sizing: border-box;
  }
  
  .main .span6 {
    width: 48% !important;
    margin: 1% !important;
    display: inline-block;
    vertical-align: top;
  }
  
  .header {
    background-size: cover; /*contain;*/
    padding-top: 12vh;
  }
}

/* Desktop improvements */
@media (min-width: 1025px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .span12 {
    max-width: 920px;
  }
}

/* Enhanced mobile specific styles */
@media (max-width: 768px) {
  .main .span6 {
    width: 100% !important;
    margin: 0 auto 20px auto !important;
    display: block;
  }

  .step-title {
    font-size: 18px !important;
    padding: 10px !important;
    text-align: center;
  }

  .row .span12 {
    width: 100% !important;
    padding: 10px !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* Hide step buttons on mobile for cleaner look */
  .step-a .page-top img.step-btns,
  .step-b .page-top img.step-btns,
  .step-b .page-top span.step-btns,
  .step-c .page-top img.step-btns,
  .step-c .page-top span.step-btns,
  .step-d .page-top img.step-btns,
  .step-d .page-top span.step-btns
  ,.step-e .beforeMain img.step-btns,
  .step-e .beforeMain span.step-btns
  {
    display: none !important;
  }

  .step-b .ui-datepicker,
  .step-c .ui-datepicker {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  .step-b .page-help {
    font-size: 16px !important;
    text-align: center !important;
    padding: 10px;
  }

  /* Improved form elements */
  input[type="text"], 
  input[type="number"], 
  input[type="date"],
  /*input.date,*/
  select {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 12px;
    width: 134px;
    /*width: 100%;*/
    box-sizing: border-box;
  }


  /* Improved form elements */
  .step-e input[type="text"]
   {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 12px;
    width: 234px;
    /*width: 100%;*/
    box-sizing: border-box;
  }


  /* Button improvements */
  .step-c .ui-datepicker-calendar td button,
  .step-c .ui-datepicker-calendar td a.btn {
    width: 100% !important;
    font-size: 16px;
    padding: 12px 8px;
    box-sizing: border-box;
    min-height: 48px; /* Better touch targets */
  }

  .step-c .page-title {
    font-size: 16px !important;
    text-align: center !important;
    padding: 10px;
  }

  .step-btns {
    display: block !important;
    margin: 10px auto !important;
    float: none !important;
    text-align: center !important;
    max-width: 150px;
  }
}

/* Landscape orientation fixes */
@media (max-width: 812px) and (orientation: landscape) {
  .header {
    padding-top: 5vh;
    min-height: 25vh;
  }
  
  .header > .span12 b {
    font-size: 12px;
    margin-top: 10px!important;
  }
  
  #container {
    padding-bottom: 60px;
  }
}

/* iPhone specific safe area handling */
@supports (padding-top: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
  }
  
  #contact-and-call-whatsapp {
    padding-bottom: env(safe-area-inset-bottom);
  }
}