*
{
box-sizing:border-box;
}

BODY#pg-checkout
{
background-color: #f8f9fa;
font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
background: #FFF url(../img/bg-wavy.png) -6vw -72px no-repeat;
background-size: contain;
font-size-adjust:0.5;
}

#sending {
    display: none;                /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: #51c4ff;
    z-index: 9999;                /* Ensure it's on top */
}

/* Class for the stepped animation: starts at 10% → jumps to 20%, 30%, ..., 90% */
.sending-anim {
    width: 10%;                   /* Starting width */
    animation: sendingSteps 3s steps(8) forwards;  /* 8 steps to reach 90% */
}

/* Class to instantly complete to 100% */
.sending-complete {
    width: 100% !important;
    transition: width 0.3s ease;  /* Optional smooth transition when completing */
}

@keyframes sendingSteps {
    from {
        width: 10%;
    }
    to {
        width: 90%;
    }
}

#img-preloader
{
position:absolute;
top:-9000px;
left:-9000px;
}

#pg-checkout .popover
{
top:-150px !important;
left:-270px !important;
pointer-events: none !important;
max-width:500px !important;
border:1px solid rgba(0,0,0,0.5);
box-shadow:1px 1px 5px 5px rgba(0,0,0,0.1);
}

#pg-checkout .popover .arrow
{
display:none !important;
}

#pg-checkout ARTICLE
{
min-height:1166px;
}

#pg-checkout ION-ICON[stroke="thick"]
{
--ionicon-stroke-width:75px;
}

#pg-checkout ION-ICON[stroke="thicker"]
{
--ionicon-stroke-width:90px;
}

#pg-checkout .progress-bar
{
background-color:#126bbc;
}

#pg-checkout .form-control::placeholder
{
opacity: 0.5;
}

#pg-checkout .toast
{
position: fixed;
top: 3rem;
right: 2rem;
z-index: 2000;
background:#ffc107;
color:#000;
}

#pg-checkout .form-group
{
margin-bottom:0px;
margin-top:-5px;
}

#pg-checkout .form-control
{
color:#096;
font-family:system-ui,Arial,sans-serif;
font-weight:500;
box-shadow:none !important;
padding-bottom:0px;
}

#pg-checkout .flex-layout
{
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 1000px;
gap: 7px;
}

#pg-checkout .flex-leftcol
{
width:48%;
}

#pg-checkout .flex-rightcol
{
flex-basis:66%;
width:50%;
}

#pg-checkout .sans
{
font-family:Arial, sans-serif;
}

#pg-checkout .mono
{
font-family: Inconsolata, Menlo, monospace, mono;
letter-spacing: -0.6px;
}

#pg-checkout .bg-dark
{
background-color:#001748 !important;
}

#pg-checkout .bg-light
{
background-color:#EEE !important;
}

#pg-checkout .circled
{
font-family:Arial,sans-serif;
display: inline-flex;         /* Change to inline-flex (or flex if you want block-level) */
align-items: center;          /* Vertically centers the content */
justify-content: center;      /* Horizontally centers the content */
width: 30px;
height: 30px;
background-color: #002a85;
color: white;
border-radius: 50%;
font-weight: bold;
margin-right: 10px;
font-size: 0.9em;
}

#pg-checkout SECTION.interior
{
display: block;
background: white;
border-radius: 15px;
padding: 20px;
border: 1px solid rgba(0,0,0,0.3);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

#pg-checkout .field-icon
{
position: absolute;
left: 15px;
top: 40px;
color: #aaa;
font-size: 1.2em;
z-index: 10;
}

#pg-checkout .tab-content
{
padding: 10px;
padding-top:0px;
border: 1px solid #dee2e6;
min-height: 770px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}

#pg-checkout .nav-tabs .nav-link
{
font-weight: bold;
}

#pg-checkout .btn-light
{
background-color:#eaedf0;
transform: scale(0.96);
transition:transform 0.2s;
}

#pg-checkout .btn-light:hover
{
transform:scale(1);
}


#pg-checkout .btn-success
{
background-color: #07c174;
border-color: #07c174;
font-size:16px;
opacity:0.9;
transform: scale(0.96);
transition:transform 0.2s;
}

#pg-checkout .btn-success:hover
{
transform:scale(1);
opacity:1;
}

#pg-checkout .btn-primary
{
background-color: #1AA1EA;
border-color: #1AA1EA;
font-size:16px;
opacity:0.9;
transform: scale(0.96);
transition:transform 0.2s;
}

#pg-checkout .btn-primary:hover
{
transform:scale(1);
opacity:1;
}

#pg-checkout .btn-warning
{
background-color: #ffc107;
border-color: #ffc107;
color: #0d679b;
font-size:16px;
opacity:0.9;
transform: scale(0.96);
transition:transform 0.2s;
}

#pg-checkout .btn-warning:hover
{
transform:scale(1);
opacity:1;
}

#pg-checkout .btn-warning I
{
font-family:Arial,sans-serif;
font-style: normal;
font-size: 13px;
position: relative;
top: -2px;
right: -2px;
}

#pg-checkout HEADER #logo
{
display: inline-block;
margin-top: 10px;
}

#pg-checkout HEADER #phonetext 
{
font-size:18px;
position:relative;
top:-10px;
}

#pg-checkout HEADER #phonetext ION-ICON
{
position:relative;
top:5px;
}

#pg-checkout HEADER #phonetext I
{
font-style:normal;
}

#pg-checkout HEADER #sbtab
{
background: #FFF;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
color: #000;
text-align: center;
position: relative;
top: 5px;
padding:10px;
padding-top:5px;
margin-top:5px;
font-size:20px;
}

#pg-checkout HEADER #sbtab .toptext
{
color:#002a85;
}

#pg-checkout HEADER #sbtab .toptext ION-ICON,
#pg-checkout HEADER #sbtab .toptext I
{
color:#75ba0d;
font-style:normal;
}

#pg-checkout HEADER #sbtab .toptext ION-ICON
{
position:relative;
top:2px;
right:-2px;
}

#pg-checkout HEADER #sbtab .btmtext
{
font-size:13px;
}


#pg-checkout #lead H1
{
font-size:25px;
}

#pg-checkout #lead H2
{
font-size:37px;
}

#pg-checkout #lead H3
{
font-size:23px;
font-weight:normal;
}

#pg-checkout #choose LABEL INPUT[type=radio]
{ 
transform: scale(1.3); 
}


#pg-checkout #choose LABEL
{
display:block;
cursor:pointer;
border:1px solid #BBB;
overflow:hidden;
width:100%;
margin-bottom:3px;
border-radius:4px;
padding:10px;
user-select:none;
}

#pg-checkout #choose LABEL *
{
cursor:pointer !important;
user-select:none;
}

#pg-checkout #choose LABEL.radio
{
}

#pg-checkout #choose LABEL.radio INPUT
{
display:inline-block;
}

#pg-checkout #choose LABEL.radio I
{
display:inline-block;
font-style:normal;
width:60px;
font-weight:bold;
color:#007bff;
margin-left:3px;
}

#pg-checkout #choose LABEL.radio SPAN
{
display:inline-block;
width:68%;
font-weight:bold;
}

#pg-checkout #choose LABEL.radio:hover,
#pg-checkout #choose LABEL.radio:focus
{
background:#f8f8f8;
}

#pg-checkout #choose LABEL.radio SPAN EM
{
display:inline-block;
padding:4px;
background:yellow;
font-style:normal;
}

#pg-checkout #choose LABEL.radio:has(INPUT[type="radio"]:checked)
{
background: #f2f6fc !important;
border: 1px solid #7ba5e5 !important;
}

#pg-checkout #choose #bonus
{
margin-top: 15px;
border: 6px solid var(--season-bg-color);
padding: 0;
padding-left: 18px;
}

#pg-checkout #choose #bonus #season
{
font-style:normal;
}

#pg-checkout #choose #bonus INPUT
{
transform: scale(1.5); 
}

#pg-checkout #choose #bonus I
{
font-style: normal;
margin-left: 4px;
display: inline-block;
height: 58px;
line-height: 58px;
font-weight:bold;
font-size: clamp(14px, 1.05vw, 16px);
}

#pg-checkout #choose #bonus SPAN
{
display: inline-block;
float: right;
text-align: center;
background:var(--season-bg-color);
color:var(--season-fg-color);
padding:5px;
padding-left: 10px;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

#pg-checkout #choose #bonus:has(INPUT[type="checkbox"]:checked)
{
background:#EEE;
}

#pg-checkout #payment
{
}

#pg-checkout #payment .nav-item
{
width:50%;
text-align:center;
}

#pg-checkout #payment A.nav-link
{
background:#FFF;
border-color: #dee2e6 #dee2e6 #fff !important;
position: relative;
top: 1px;
}

#pg-checkout #payment A.nav-link:not(.active)
{
background:#F8F8F8;
border-color: #e9ecef #e9ecef #dee2e6 !important;
box-shadow: inset 0 -2px 2px -2px rgba(0, 0, 0, 0.3);
}

#pg-checkout #payment .form-group LABEL
{
font-weight: normal;
background: #FFF;
display: inline-block;
padding: 4px;
border-radius: 5px;
font-size: 14px;
width: auto;
position: relative;
left: 10px;
bottom: -17px;
z-index: 999;
padding-top: 0px;
padding-bottom: 0px;
color: #656565;
}

#pg-checkout #payment .border-dotted
{
border-bottom: 1px dotted #6c757d;
float: right;
text-decoration: none;
padding-bottom: 0px !important;
line-height: 13px;
margin-top: 13px;
font-size: 13px;
margin-right: 5px;
}

#pg-checkout #payment .total
{
font-size:19px;
}

#pg-checkout #payment .total I
{
font-size:14px;
color:#777;
font-style:normal;
position:relative;
top:-1px;
}

#pg-checkout #payment .flresident
{
display:none;
margin-left: 2px;
color: #00a0ff;
}

#pg-checkout DIALOG
{
position: fixed;
top:30px;
background: #FFF;
z-index: 999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radiu: 20px;
border-radius: 8px;
text-align: center;
box-shadow: 1px 1px 1000px 1000px rgb(0 0 0 / 40%);
padding-bottom:0;
}

#pg-checkout DIALOG .div-close
{
margin-top: -16px;
margin-right: -10px;
font-family: Arial, sans-serif;
font-weight: 900;
font-size: 27px;
line-height: 28px;
}

#pg-checkout DIALOG .div-close SPAN
{
display:inline-block;
cursor:pointer;
opacity:0.5;
transform: scale(0.8);
transition:transform 0.2s;
}

#pg-checkout DIALOG .div-close SPAN:hover
{
opacity:1;
transform:scale(1);
}

#pg-checkout DIALOG#exit H2
{
font-weight: bold;
font-size: 32px;
text-transform: uppercase;
}

#pg-checkout DIALOG#exit H3
{
background: transparent center center url(../img/ribbon.png) no-repeat;
height: 90px;
margin-top: 12px;
font-weight: bold;
font-size: 22px;
padding-top: 12px;
color:#FFF;
}

#pg-checkout DIALOG#exit H3 S
{
color: #BBB;
}

#pg-checkout DIALOG#exit H4
{
font-weight: bold;
font-size: 40px;
color: #5B5;
margin-top: -36px;
}

#pg-checkout DIALOG#exit H5
{
font-size: 14px;
margin-top: -10px;
}

#pg-checkout DIALOG#exit H6
{
font-size: 18px;
padding-left: 35px;
padding-right: 35px;
}

#pg-checkout DIALOG#exit .form-group
{
margin-top:20px;
}

#pg-checkout DIALOG#exit P
{
font-weight: bold;
font-size: 16px;
}

#pg-checkout DIALOG#exit UL
{
text-align: left;
list-style-image: url(../img/blue-check-sm.png);
font-size: 16px;
margin-left: 19%;
color: #555;
}

#pg-checkout DIALOG#exit UL LI
{
}

/* **************** .pg-alt ************* */

BODY#pg-checkout.pg-alt
{
background:#FFF; /* get rid of wavy cloud background */
}

/* **************** .pg-rcpt ************* */

#pg-checkout.pg-rcpt HEADER #sbtab
{
background:#eef1f3;
}

.pg-rcpt #rcpt
{
background:#eef1f3;
}

.pg-rcpt #rcpt .container
{
background:#FFF;
border-top:4px solid #78bdef;
border-bottom:4px solid #78bdef;
}

.pg-rcpt .nobold
{
font-weight:normal !important;
}

.pg-rcpt HR
{
border-top:1px solid #000;
}

.pg-rcpt #rcpt .leftcol
{
}

.pg-rcpt #rcpt .leftcol ION-ICON[name="checkmark-outline"]
{
position:relative;
top:4px;
}

.pg-rcpt #rcpt .leftcol ION-ICON[name="call"]
{
font-size: 36px;
position: relative;
top: 3px;
transform: rotate(15deg);
left: 7px;
}



.pg-rcpt #rcpt .leftcol H1
{
color:#2AAB75;
font-weight:bold;
font-size:31px;
}

.pg-rcpt #rcpt .leftcol H2
{
color: #001748;
font-size: 45px;
font-weight: bold;
line-height: 39px;
margin-top: 20px;
margin-bottom: 20px;
}

.pg-rcpt #rcpt .leftcol H3
{
font-size:46px;
font-weight:bold;
color:#1AA1EA;
margin-bottom:20px;
}

.pg-rcpt #rcpt .leftcol H4
{
font-size:16px;
font-weight:bold;
color:#001748;
}

.pg-rcpt #rcpt .rightcol
{
}
 
.pg-rcpt #rcpt .rightcol .card
{
background:#F8F9FA;
}

.pg-rcpt #rcpt .rightcol .card TABLE
{
border-collapse:collapse;
width:100%;
}

.pg-rcpt #rcpt .rightcol .card TABLE TR
{
}

.pg-rcpt #rcpt .rightcol .card TABLE TR TD
{
}

.pg-rcpt #rcpt .rightcol .card TABLE TR TD:nth-child(1)
{
font-weight:bold;
text-align:left;
vertical-align:top;
}

.pg-rcpt #rcpt .rightcol .card TABLE TR TD:nth-child(2)
{
text-align:right;
vertical-align:top;
}

.pg-rcpt #rcpt .rightcol .card TABLE TR TD SMALL
{
font-size:12px;
color:#AAA;
}

.pg-rcpt #activation H1
{
font-weight:bold;
font-size:32px;
}

.pg-rcpt #activation .leftcol
{
}

.pg-rcpt #activation .rightcol
{
}

.pg-rcpt DIALOG#overlay .alert
{
font-weight: bold;
font-size: 20px;
color: #444;
}

.pg-rcpt DIALOG#overlay .alert ION-ICON
{
font-size: 36px;
position: relative;
top: 10px;
margin-top: -12px;
color: #f2ce5a;
}

.pg-rcpt DIALOG#overlay .card DIV
{
height:77px;
}

.pg-rcpt DIALOG#overlay H2
{
font-weight:bold;
}

.pg-rcpt DIALOG#overlay H3
{
font-size: 19px;
font-weight: bold;
display: inline-block;
margin: auto;
margin-top: 10px;
width: 17em;
margin-bottom:9px;
}

.pg-rcpt DIALOG#overlay .leftcol .card
{
position:relative;
top:0;
}

.pg-rcpt DIALOG#overlay .leftcol H4
{
font-size:17px;
}

.pg-rcpt DIALOG#overlay .rightcol H4
{
color: #1aa1ea;
font-weight: bold;
font-size: 40px;
}

.pg-rcpt DIALOG#overlay .rightcol H5
{
font-size:17px;
}

.pg-rcpt DIALOG#overlay .rightcol H6
{
margin-top:20px;
margin-bottom:0;
}

.pg-rcpt DIALOG#overlay .btn
{
position:absolute;
bottom:5px;
left:0;
right:0;
margin:auto;
width:10em;
}

.StripeElement {
height: 38px;
padding: 0 12px;
font-family: monospace;
font-size: 15px;
display: flex;
flex-direction: column;
justify-content: center;
}

.StripeElement--focus {
box-shadow: none;
}

.StripeElement--invalid {
border-color: #dc3545;
}

.card-brand {
position: absolute;
right: 12px;
top: 38px;
}