/*************************
    General
*************************/
/*Template Google font*/

body {
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 14px;
	line-height: 1.5;
	color: #626262;
	background-color: #f9f3e0;
}
a, .btn  { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s;  transition: all 0.3s ease-out 0s; text-decoration: none;}
a:focus { text-decoration: none !important; }
a:focus, a:hover { color: #3570FC; text-decoration: none; }


*::-moz-selection { background: #3952d0; color: #fff; text-shadow: none; }
::-moz-selection { background: #3952d0; color: #fff; text-shadow: none; }
::selection { background: #3952d0; color: #fff; text-shadow: none; }


/***********************
       Button
***********************/

.btn {
    padding:12px 40px;
    font-weight: 600;
    color:#fff;
    border: 1px solid #000000;
    font-size: 18px;
    border-radius: 5px;
    text-decoration: none;
    background: linear-gradient(to bottom, #040404 0%, #2d2d2d 100%);
    display: inline-block;
    text-align: center;
}

.btn:hover,
.btn:focus{
    color: #ffffff;
    background: linear-gradient(to bottom, #2d2d2d 0%, #040404 100%);
    outline: none;
}


/**
.header{
  padding-top: 20px;
}
**/
.header .logo{
  width: 70px;
  height: auto;
}


.medidationpayment-form{
  padding-bottom: 50px;
}


.medidationpayment-form .nav{
  justify-content: center;
}
.medidationpayment-form .nav.nav-pills .nav-item{


}
.medidationpayment-form .nav.nav-pills .nav-link {
  color: #323232;
  position: relative;
  font-size: 26px;
   border: 1px solid #333333;
  padding: 10px 50px;
  margin: 0 15px;
  border-radius: 5px;
}
.medidationpayment-form .nav.nav-pills .nav-link:before{
  content: "";
  color: #fff;
  border-color: #007bff;
  background-color: #007bff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 25px;
  display: block;
  width: 16px;
  height: 16px;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border:1px solid #adb5bd;
  border-radius: 50%;
  transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.medidationpayment-form .nav.nav-pills .nav-link:after{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 25px;
  display: block;
  width: 16px;
  height: 16px;
  content: "";
  border-radius: 100%;

}

.medidationpayment-form .nav-pills .nav-link.active:before{
  color: #fff;
  border-color: #007bff;
  background-color: #007bff;
}

.medidationpayment-form .nav-pills .nav-link.active:after{
  background-color: #ffffff;
  border:5px solid #007bff;
}


.medidationpayment-form .nav-pills .nav-link.active,
.medidationpayment-form .nav-pills .show>.nav-link {
    color: #323232;
    background-color: inherit;
}

.medidationpayment-form form{
  width: 100%;
  border-radius: 5px;
  background-color:#ffffff;

}

.medidationpayment-form  form {
    background: #f9f3e0;
}

.medidationpayment-form form .amount-box {
    background: #f9f3e0;
}

.medidationpayment-form-body .precessing_fees,
.medidationpayment-form-body .pay_as_anonymous {
    display: flex;
    align-items: baseline;
}

.medidationpayment-form-body input[type=checkbox] {
    margin-right: 5px;
}


.medidationpayment-form .medidationpayment-form-body{
  padding: 30px;
}

.medidationpayment-form .title{
  font-size: 18px;
  font-weight: 600;
  color: #323232;

}
.medidationpayment-form .sub-title{
  font-size: 16px;
  font-weight: 600;
  color: #323232;

}

.medidationpayment-form sup{
  color: #f23a3c;
  margin-left: 3px;
  font-size: 16px;
  font-weight: 600;
  top:-.2em;

}

.medidationpayment-form  .form-group label{
  margin-bottom: 0;
  margin-top: 10px;
  color: #56647e;
  font-size:15px;
  font-weight: 500;
}

.form-control{
  height: 50px;
  border-radius: 5px;
  border: 1px solid #d1d2d6;
  padding: 10px 20px;
}

.amout-details {
    padding-bottom: 20px;
}

.amount-gruop{
  position: relative;
  width: 100%;
}

.amount-gruop span{
  position: absolute;
  font-size: 16px;
  font-weight: 600;
  color:#323232;
  top: 14px;
  right: 40px;
}

.amount-gruop02{
  width: 100%;
}
.page-template-payment-razorpay .amout-details {
    padding-bottom: 0;
    border: none;
    margin-bottom: 0;
}

.amount-gruop02 .each-input{
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.amount-gruop02 .each-input span{
  margin-left: 7px;
  font-size: 16px;
  font-weight: 600;
  color:#323232;
}

.medidationpayment-form .amount-gruop02 .form-group .custom-control .custom-control-label{
  font-size: 16px;
  font-weight: 600;
  color:#323232;
}

.card-details{
  margin-bottom:20px;
}

.medidationpayment-form .medidationpayment-form-footer{
  padding: 30px;
  text-align: center;
  padding-top: 0;
}


.amount-box{
  border-radius: 3px;
  background-color:#ffffff;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.10);
  -moz-box-shadow:  0px 2px 12px rgba(0, 0, 0, 0.10);
  -webkit-box-shadow:  0px 2px 12px rgba(0, 0, 0, 0.10);
  -ms-box-shadow:  0px 2px 12px rgba(0, 0, 0, 0.10);
  padding: 10px 15px;
  border:1px solid #d8d8d8;
}

/** OS 5-Jul **/
.ajax {
	background-color: #f9f3e0 !important;
}

/** OS End **/


/* os-edits 12-Jan */
.os-choice {
	display: none;
}

.mb-3 {
	display: none;
}
/* edits end */


@media(max-width:767px) {

  .medidationpayment-form {
    padding-bottom: 60px;
  }
  .medidationpayment-form .nav.nav-pills .nav-link{
    padding: 10px 30px;
    margin: 0 5px;
  }

  .medidationpayment-form .nav.nav-pills .nav-link:before{
    left: 10px;
  }

  .medidationpayment-form .nav.nav-pills .nav-link:after{
    left: 10px;
  }


}


@media(max-width:479px) {
  .medidationpayment-form .nav.nav-pills .nav-link{
    margin-bottom: 15px;
    font-size: 20px;
  }

  .medidationpayment-form .medidationpayment-form-body {
	  padding: 20px 20px 15px 20px;
  }
  .medidationpayment-form .medidationpayment-form-footer {
	  padding: 10px;
  }
  .btn + .btn{
    margin-top: 15px;
  }
}

@media (max-width: 375px){

  .medidationpayment-form .nav.nav-pills .nav-link {
      font-size: 16px;
      padding: 10px 15px 10px 30px;
  }

}


/* all fixes for rotation below */

/* Also ensure html/body can scroll */
html, body {
    height: auto !important;
    min-height: 100dvh;
    overflow-y: auto !important;
    overflow-x: hidden;
}

section.bg:has(.cart-container) {
    padding-bottom: 135px !important;
}
section.bg-remove:has(.cart-container) {
    padding-bottom: 135px !important;
}

#modal-summary{
	top:0;bottom:0;height:100%;overflow-y:auto;
}
#myModal-otp{
	top:20%;bottom:0;height:100%;overflow-y:auto;	
}

@media screen and (orientation: landscape) and (max-height: 500px) {
    .image-deity-temple {max-width: 225px !important; width: 225px;}	
    .mt-3 { margin-top: 0.4rem !important; }
    .mt-4 { margin-top: 0.6rem !important; }
    .mt-5 { margin-top: 0.8rem !important; }
    .py-2 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
}

@media screen and (orientation: landscape) and (max-height: 500px) {
    .cart-container {
        height: 100px !important;
        padding: 6px 10px !important;
    }
    .cart-div, .cart-div-sponsor {
        height: 90px !important;
    }
    .qty-text, .price-text {
        font-size: 11px !important;
        line-height: 14px !important;
        margin-bottom: 4px !important;
    }
    .qty-number, .price-number {
        font-size: 16px !important;
        line-height: 18px !important;
    }
    .cart-btn {
        height: 34px !important;
        padding: 5px 20px !important;
        font-size: 16px !important;
    }
    .cart-minus, .cart-plus {
        top: 4px !important;
    }
    /* Reduce content padding in landscape too */
    section.bg:has(.cart-container) {
        padding-bottom: 110px !important;
    }
	section.bg-remove:has(.cart-container) {
        padding-bottom: 0px !important;
    }
    /* Shrink the prasad image in landscape */
    .image-deity-temple img[style*="max-height:120px"] {
        max-height: 150px !important;
    }
    .mt-1 { margin-top: 0.2rem !important; }
}



/* =============================================
   Landscape Two-Column Layout
   Add these rules to your existing stylesheet
   ============================================= */

/* Default (portrait): single column, stacked */
.hide-header{display:none !important;}
.landscape-form-wrapper {
    display: flex;
    flex-direction: column;	
}
.landscape-left,
.landscape-right,
.landscape-left-50,
.landscape-right-50,
 {
    width: 100%;
}

.landscape-div{ display: none !important; }
.portrait-div { display: flex !important; }
.portrait-block-div { display: block !important; }

#onetime-landscape { display: none; }
#monthly-landscape { display: none; }

/* ── Landscape on mobile/tablet (991px and below) ── */
@media screen and (max-width: 1367px) and (min-width: 320px) and (orientation: landscape) {

    .landscape-div { display: flex !important; justify-content: center;}
    .portrait-div  { display: none !important; }	
    .portrait-block-div { display: none !important;}	
	.gap-up-20{margin-top: -20px !important;}
	.gap-up-10{margin-top: -10px !important;}
	.special-height{height: calc(100vh - 100px) !important;}
	.left-start-img{ align-items: start !important; }
	
	/* Override the page-level rotation that was rotating the whole <html> */
    html {
        -webkit-transform: none !important;
        -moz-transform:    none !important;
        transform:         none !important;
        width:             100% !important;
        height:            auto !important;
        overflow-x:        hidden !important;
        position:          static !important;
        top:               auto !important;
        left:              auto !important;
    }

    /* Tighten the outer container so both columns fit */
    .container[style*="max-width:500px"] {
        max-width: 100% !important;
        padding-left:  0px !important;      
	    padding-right: 0px !important;
    }	

    /* Two-column flex row */
    .landscape-form-wrapper {
        flex-direction: row;
        align-items:    flex-start;
        gap:            0px;
		padding-top:    0px;
    }	
	
	  /* LEFT: image + honour text  ~40% width */
    .landscape-left {
        width:           40%;
        flex-shrink:     0;
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        padding-top:     10px;
    }
	
	.landscape-left  { width: 40% !important; padding: 5px 0px;}
    .landscape-right { width: 60% !important; padding: 5px 0px;}	
	
	.landscape-left-50  { width: 50% !important; padding: 10px 15px;}
    .landscape-right-50 { width: 50% !important; padding: 10px 15px;}	
	
	.landscape-left-border-  { 	   
		border-right: 3px solid transparent;		
        border-image: linear-gradient(to bottom, #330005, rgba(51,0,5,0.4)) 1;		
	}
	
	.landscape-left-border {
		position: relative;
	}

	.landscape-left-border::after {
		content: "";
		position: absolute;		
		right: 0;
		width: 6px; /* adjust to image width */
		height: 70%;
		background-image: url("https://launch.sadhana.app/wp-content/uploads/2026/05/Vector-1.png");
		background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
		top: 50%;
        transform: translateY(-50%);
	}

    /* Keep the deity image a bit smaller in landscape */
    .landscape-left .image-deity-temple {max-width: 225px;width: 225px;}	

    /* Reduce top margin on the image block inside left col */
    .landscape-left .mt-3 {
        margin-top: 0.5rem !important;
    }

    /* RIGHT: everything else ~60% width */
    .landscape-right {
        width:  60%;
        flex:   1;
    }

    /* Shrink the top margin on the input block inside right col */
    .landscape-right .mt-4:first-child {
        margin-top: 0.75rem !important;
    }

    /* Slightly reduce button top margin */
    .landscape-right .mt-4 {
        margin-top: 0.75rem !important;
    }

    /* Keep 80G note margin modest */
    .landscape-right .mt-4:last-child {
        margin-top: 0.5rem !important;
    }
	
	.notification_anim {
		transition: 0.5s;
		transform: translateY(80%) !important;
	}

    /* Nav link adjustments (carried over from original rules) */
    .nav-tabs .nav-link {
        white-space: nowrap;   
		line-height: 20px !important;
		min-width: 165px;
		text-align: center !important;
    }
	.nav-tab-active-one{		
		background-size:cover !important;	
	}
	.nav-tab-active-monthly{		
		background-size:cover !important;	
	}  
	
	/* input + span + btn */
	.landscape-right .form-control,.landscape-right-50 .form-control {
		height: 45px;
		font-size: 16px !important;
		padding: 8px 14px;
	}	
	.landscape-right .amount-gruop span, .landscape-right-50 .amount-gruop span {
		font-size: 17px;
		line-height: 19px;
		font-weight: 600;
		color: #5C4436 !important;
		top: 12px;
		right: 15px;
	}		
	.landscape-right .donate-btn, 
	.landscape-right .generate-btn, 
	.landscape-right .skip-btn,
    .landscape-right-50 .donate-btn, 
	.landscape-right-50 .generate-btn, 
	.landscape-right-50 .skip-btn
	{
		margin-top: 10px;
		margin-bottom: 5px;
		min-width: 177px;
		font-size: 18px;
	}	
}

@media screen and (max-width: 1367px) and (min-width: 320px) and (orientation: landscape) {
    .start-item{
		align-items: start !important;
	}
	section:has(.landscape-form-wrapper) {
        height: 100dvh;
        display: flex;
        justify-content: center;
        padding: 0px !important;
        align-items: center;
    }

    section:has(.landscape-form-wrapper) .container {
        max-width: 100% !important;
        width: 100%;
        max-height: 450px;
        height: 100dvh;
		max-width: 920px !important;
    }

    section:has(.landscape-form-wrapper) .landscape-form-wrapper {
        height: 100%;
        align-items: center;
        justify-content: center;
        max-height: 450px;
    }

    section:has(.landscape-form-wrapper) .landscape-left,
    section:has(.landscape-form-wrapper) .landscape-right {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 100dvh;
        max-height: 450px;
    }
	section:has(.landscape-form-wrapper) .landscape-left-50,
    section:has(.landscape-form-wrapper) .landscape-right-50 {
       display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 100dvh;
        max-height: 450px;
    }
	section:has(.cart-container) .landscape-left-50,
    section:has(.cart-container) .landscape-right-50 {             
        height: calc(100dvh - 0px);
    }
	section:has(.landscape-form-wrapper) .amount-gruop, section:has(.landscape-form-wrapper) .container-checkbox,
	.inner-width
	{       
		min-width: 300px !important;
        width: 100% !important;
        max-width: 350px;
        margin: 0px auto;
    }
	section:has(.landscape-form-wrapper) .container-checkbox{min-width: unset !important;width: unset !important;}
	section:has(.landscape-form-wrapper) .amount-gruop-next,.inner-width-next{margin: 0px auto;max-width: 84% !important;}
	section:has(.landscape-form-wrapper) .amount-gruop-next-100,.inner-width-next-100{margin: 0px auto;max-width: 95% !important;}    
}

@media screen and (max-width: 1367px) and (min-width: 320px) and (orientation: landscape) and (min-height: 375px) {
	.image-deity-temple-next{max-width: 275px !important;width: 100% !important;}
}

@media screen and (min-width: 1001px) and (orientation: landscape) {
    
}


/* razorpay and stripe thankyou form changes only */
@media screen and (max-width: 1336px) and (min-width: 320px) and (orientation: landscape) {
    .spceial-height{
		height:100vh;
		justify-content: start !important;
		padding: 0px;
	}
	.sadhana-thankyou-page {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sadhana-thankyou-page .container {
        max-width: 100% !important;
        width: 100%;
		max-height: 100vh !important;
    }
    .sadhana-thankyou-page .landscape-form-wrapper {
        width: 100%;
        min-height: unset;
        flex-direction: column;
        align-items: center;
        justify-content: center !important;
		padding-top: 0px;
		justify-content: space-evenly !important;
		
    }
    .sadhana-thankyou-page .landscape-left,
    .sadhana-thankyou-page .landscape-right {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
		height: 100vh !important;
    }
}