.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{padding-right:unset;padding-left:unset}.product__description{height:29px;overflow:hidden}.list-group-item{border:1px solid #ccc;border-radius:4px;color:#666;display:table-cell;text-decoration:none;word-break:break-word}.element-check-label,.list-group-item{font-size:14px;font-weight:700;text-align:center}.element-check-label{background-color:#c70719;border:1px solid red;color:#fff;height:52px;left:-1px;line-height:52px;position:absolute;top:-19px;transform:rotate(45deg) scaleX(-1);width:20px;z-index:5}.section{padding:15px 5px;position:relative}.circle{color:#333;font-size:15px;margin-bottom:8px;margin-top:-12px;padding-left:55px}.circle span{border:4px solid #39a883;border-radius:50%;color:#fcfcfc;font-size:18px;font-weight:700;height:36px;left:10px;line-height:30px;margin-right:5px;position:absolute;top:-10px;width:36px}.circle span,.ico-question{background-color:#39a883;text-align:center}.ico-question{border-radius:50%;color:#fff;cursor:pointer;display:inline-block;height:24px;line-height:24px;width:24px}.ease-in-out[data-v-4c1ace0e]{transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300[data-v-4c1ace0e]{transition-duration:.3s}.translate-x-full[data-v-4c1ace0e]{--tw-translate-x:100%}.translate-x-0[data-v-4c1ace0e]{--tw-translate-x:0px}.footer_nav a[data-v-4c1ace0e]{background:unset!important;color:#bbb8b8;font-family:"Bree Serif",serif!important;font-size:14px!important;font-weight:500!important;line-height:23px}.footer_nav .nuxt-link-active[data-v-4c1ace0e]{color:#fff!important}.footer-contact-icon1[data-v-4c1ace0e]{border:1px solid #9c9c9c}.pwa-toast{border:1px solid #8885;border-radius:4px;bottom:0;margin:16px;padding:12px;position:fixed;right:0;text-align:left;z-index:10001!important}.pwa-toast .message{margin-bottom:8px}.pwa-toast button{border:1px solid #8885;border-radius:2px;margin-right:5px;outline:0;padding:3px 10px}.carousel__track{display:flex;transition:transform 1s ease-in-out}.carousel__slide{min-width:100%;transition:opacity 1s ease-in-out}.current-slide{opacity:1}.carousel__slide:not(.current-slide){opacity:1}@media (max-width:767px){.carousel.my-4{margin-top:.5rem!important}}:root{--color-primary-50:253 242 248;--color-primary-100:252 231 243;--color-primary-200:251 207 232;--color-primary-300:249 168 212;--color-primary-400:255 159 56;--color-primary-500:255 64 81;--color-primary-600:219 39 119;--color-primary-700:190 24 93;--color-primary-800:157 23 77;--color-primary-900:131 24 67;--color-primary-950:80 7 36;--color-primary-DEFAULT:var(--color-primary-500);--color-gray-50:249 250 251;--color-gray-100:243 244 246;--color-gray-200:229 231 235;--color-gray-300:209 213 219;--color-gray-400:156 163 175;--color-gray-500:107 114 128;--color-gray-600:75 85 99;--color-gray-700:55 65 81;--color-gray-800:31 41 55;--color-gray-900:17 24 39;--color-gray-950:3 7 18;--primary-color:var(--theme-color);--secondary-color:#081149;--btn-secondary-color:#ee7f1a;--btn-primary-color:var(--theme-color)}.dark{--color-primary-DEFAULT:var(--color-primary-400)}.p-4{padding:1rem!important}@media (max-width:767px){body{padding-top:unset}}.selected_variation{font-size:11px;position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;height:50px;background:#fff7f2;outline:rgb(255,100,0) solid 1px!important;border:1px solid #ff6400}.ml-0{margin-left:0!important}.pt-5{padding:0!important}.mt-5{margin-top:40px!important}.footer-bg a{color:var(--primary-font-color)}.footer_description{background:unset!important;color:#adadad;font-family:"Bree Serif",serif!important;font-size:12px!important;font-weight:500!important;line-height:16px}.section-divider{opacity:1}@media (max-width:767.99px){.my-2{margin-bottom:.5rem;margin-top:.5rem}.p-5{padding:20px!important}.px-5{padding-right:20px!important;padding-left:20px!important}.py-3{padding-top:12px!important;padding-bottom:12px!important}.pt-5{padding-top:1.25rem!important}.pb-5{padding-bottom:1.25rem!important}}.px-4{padding-left:1rem!important;padding-right:1rem!important}.pb-4{padding-bottom:1rem!important}.py-2\.5{padding-bottom:.625rem!important;padding-top:.625rem!important}.px-2\.5{padding-left:.625rem!important;padding-right:.625rem!important}.my-2{margin-bottom:.5rem;margin-top:.5rem}@media (min-width:768px){.md\:p-4{padding:1rem!important}.md\:mt-10{margin-top:2.5rem!important}.p-5{padding:0!important}.px-5{padding-right:0!important;padding-left:0!important}.py-3{padding-top:20px!important;padding-bottom:20px!important}.pt-5{padding-top:0!important}.pb-5{padding-bottom:1.25rem!important}.md\:py-8{padding-bottom:2rem!important;padding-top:2rem!important}.md\:pb-10{padding-bottom:2.5rem!important}}h1.pt-3{padding-top:.75rem!important}.gap-1{gap:.25rem!important}.list-group-item{border-radius:4px!important}.list-group-item+.list-group-item{border-top-width:.906px!important}.quantity-container .my-2{margin-bottom:8px!important;margin-top:8px!important}.bg-transparent,.login .bg-transparent{background-color:transparent!important}.checkout_page .form-input,.checkout_page .form-multiselect,.checkout_page .form-select,.checkout_page .form-textarea{--tw-shadow:0 0 #0000!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;background-color:#fff!important;border:#6b7280!important}.checkout_page .ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color),0 0 #0000!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.checkout_page .shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05)!important;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)!important;box-shadow:0 0 #0000,0 0 #0000,0 1px 2px #0000000d!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.checkout_page .shadow-lg{box-shadow:unset!important}.checkout_page .pb-5{padding-left:12px!important;padding-right:12px!important}.checkout_page .buy_now_btn:active,.checkout_page .buy_now_btn:hover,.checkout_page .checkout_login:active,.checkout_page .checkout_login:hover{background-color:#db2777}.p-1,.p-2{padding:.5rem!important}.gap-2{gap:.5rem!important}a.text-primary-500{color:rgb(var(--color-primary-500) / 1)!important}.google-link{display:inline-flex;align-items:center}.google-link svg{margin-right:8px}.body-bg{background-color:var(--background-color)!important;background-image:var(--background-image);color:var(--primary-font-color)!important}._order_header_step_circle,.element-check-label{background-color:var(--theme-color)!important;border-color:var(--theme-color)!important;color:var(--background-color)!important}.top-profile{background-color:var(--theme-color)!important;color:var(--background-color)!important;background-image:none}.bg-pink-500{background-color:var(--theme-color)!important;color:var(--background-color)!important}.bg-pink-400{background-color:var(--theme-color)!important;color:var(--background-color)!important;opacity:.7!important}.header{background-color:var(--navigation-background-color)!important;color:var(--navigation-font-color)!important}.header a.link{color:var(--navigation-font-color)!important}a.text-gray-900:active,a.text-gray-900:hover{color:var(--theme-color)!important}.text-secondary-500{color:var(--primary-font-color)!important}.footer-bg{background-color:var(--footer-color)!important;color:var(--footer-font-color)!important}.footer-bg .number,.footer-bg p,.footer-title,.footer_description{color:var(--footer-font-color)!important}.btn-secondary{background-color:#6c757d!important}.footer-contact-icon1[data-v-4c1ace0e],.social_icon{border-color:var(--footer-font-color)!important}.footer-contact-icon1[data-v-4c1ace0e] svg,.social_icon svg{color:var(--footer-font-color)!important}.selected_variation{position:relative;border-color:var(--theme-color)!important;outline-color:var(--theme-color)!important;z-index:0}.selected_variation::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--theme-color);opacity:.05;z-index:-1}.bg-white{background-color:var(--content-box-color)!important;color:var(--primary-font-color)!important}hr{opacity:.1!important}hr.section-divider{opacity:1!important}.border-b-2{border-bottom-color:rgba(229,231,235,.5)!important}.deposits-list,.orders-list,.transactions-list{padding-bottom:5px}.deposits-list p,.deposits-list span,.orders-list p,.orders-list span,.transactions-list p,.transactions-list span{font-family:Roboto,sans-serif!important;font-size:16px!important}.copy-icon{all:unset;display:flex;margin:0 12px;background:#e0e0e0;border:2px solid #6d6d6d}.copy-icon .icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#284699;font-size:20px;font-weight:900;margin-right:6px}.code-btn{font-family:Roboto,sans-serif!important;font-size:14px!important;font-weight:100!important}.redem-btn{font-family:Roboto,sans-serif!important;font-size:14px!important;font-weight:600!important;padding:4px 16px!important;border-radius:.25rem!important;margin-bottom:.75rem!important;margin-top:.75rem!important;max-width:125px!important;max-height:50px!important}.deposit-status,.order-status{font-weight:700!important}.deposits .container,.orders .container,.transactions .container{padding-left:0!important;padding-right:0!important}.orders .m-4,.transactions .m-4{margin-top:1rem!important;margin-bottom:2rem!important}.deposits .m-4{margin-top:1rem!important;margin-bottom:3rem!important}.deposits .pxa-4,.orders .pxa-4,.transactions .pxa-4{padding-left:.5rem!important;padding-right:.5rem!important}@media (max-width:768px){.deposits .mxa-4,.orders .mxa-4,.transactions .mxa-4{margin-left:1rem!important;margin-right:1rem!important}}@media (max-width:768px){.deposits .pxa-4,.orders .pxa-4,.transactions .pxa-4{padding-left:1rem!important;padding-right:1rem!important}}.deposit-not-found,.order-not-found,.transactions-not-found{max-width:400px;margin:20px 0;padding:20px 15px!important;box-shadow:0 0 transparent,0 0 transparent,0 10px 15px -3px rgba(0,87,208,.1),0 4px 6px -4px rgba(0,87,208,.1);border:1px solid #edf2f7;border-radius:.5rem}.profile-top{min-height:80px}.user_style_profile{background-clip:content-box,border-box;background-image:linear-gradient(#fff,#fff),linear-gradient(180deg,#fff,var(--theme-color));background-origin:border-box;border:8px double transparent;border-radius:50%;height:110px}.statics-container .text-lg{margin:0;padding:0}.statics-container .statics{border-color:var(--theme-color)!important;padding:20px}.primary-font-color-text{color:var(--primary-font-color)!important}.theme-color-text{color:var(--theme-color)!important}.statics-container .statics .statics-heading{color:var(--theme-color)!important}.account-info-container{border-radius:.375rem;border-width:1px}.account-info-container label{margin:8px 0 5px 0!important;display:block!important}.font-16{font-size:16px!important}.font-bold{font-weight:600!important}@media (max-width:768px){.btn-right-mobile{float:right;top:-5px!important;position:relative}}label{display:unset}@media (min-width:768px){.md\:p-3{padding:.75rem!important}}.add_money_form input[type=number],.add_money_form input[type=text],.login input[type=email],.login input[type=password]{width:100%!important}.add_money_form .bg-white,.login .bg-white{background-color:#fff!important}.add_money_form .ring-1,.login .ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color),0 0 #0000!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.deposits div.my-4{margin-bottom:0!important}.w-auto{width:auto!important}@media (min-width:768px){.md\:px-3{padding-left:.75rem!important;padding-right:.75rem!important}}.login .pb-1{padding-bottom:.25rem!important}.login .pt-5{padding-top:1.25rem!important}.login .pb-1{padding-bottom:.25rem!important}.login .mb-5{margin-bottom:1.25rem!important}.login .alert-white{word-wrap:break-word!important;color:#f63232!important;font-size:12px!important;-webkit-hyphens:auto!important;hyphens:auto!important;line-height:12px!important;margin-top:10px!important;margin-bottom:0!important;overflow-wrap:break-word!important;word-break:break-word!important;display:inline-block;padding:0!important}.gap-4{gap:1rem!important}.gap-3{gap:.75rem!important}.gamename1{align-items:center;background-image:url('/assets/template/images/banner.png');background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:6px;color:#fff;cursor:pointer;display:flex;justify-content:center;margin-bottom:10px;margin-top:10px;padding:6px 10px;text-align:center;width:100%}.prose h1,.prose h2,.prose h3,.prose h4{font-weight:700!important;margin:1em 0 .5em!important;line-height:1.3!important}.prose h1{font-size:1.8em!important}.prose h2{font-size:1.5em!important}.prose h3{font-size:1.25em!important}.prose h4{font-size:1.1em!important}.prose p{margin-bottom:1em!important;line-height:1.6!important}.prose ol,.prose ul{margin:1em 0!important;padding-left:1.5em!important}.prose ul{list-style:disc!important}.prose ol{list-style:decimal!important}.prose li{margin-bottom:.4em!important}.prose table{border-collapse:collapse!important;width:100%!important;margin:1em 0!important}.prose table td,.prose table th{border:1px solid #ddd!important;padding:8px!important;text-align:left!important}.prose img{max-width:100%!important;height:auto!important;margin:1em 0!important;aspect-ratio:auto!important}.prose hr{margin:1.5em 0!important;border:none!important;border-top:1px solid #eee!important}.prose br{display:none!important}.checkout_page .mt-2.bg-white.border.rounded-md .prose{padding-left:1.5em!important;padding-right:1.5em!important}.pp-modal{display:none;position:fixed;inset:0;z-index:9999}.pp-modal-backdrop{position:absolute;inset:0;background:rgba(15,15,20,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.pp-modal-box{position:relative;max-width:460px;width:92%;margin:4vh auto;background:0 0;border-radius:0;overflow:hidden;box-shadow:none;animation:pp-modal-in .25s ease-out}@keyframes pp-modal-in{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.pp-modal-close{position:absolute;top:10px;right:12px;background:rgba(0,0,0,.06);border:none;border-radius:50%;width:32px;height:32px;font-size:20px;line-height:1;cursor:pointer;z-index:2}.pp-modal-iframe{width:100%;height:86vh;max-height:720px;border:none;display:block}body.pp-modal-open{overflow:hidden}@media (min-width:640px){.pp-modal-box{margin-top:3vh;margin-bottom:3vh}.pp-modal-iframe{height:94vh;max-height:900px}} /* ================================================================================ CHECKOUT PAGE CSS FIXES - Add to custom-styles.css (end of file) ================================================================================ */ /* ✅ FIX 1: Calendar Icon Visibility Bug */ .sub-card-icon { color: #333 !important; visibility: visible !important; opacity: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .variation_list.style-sub .sub-card-icon { color: #333 !important; visibility: visible !important; opacity: 1 !important; display: inline-flex !important; } .variation_list.style-sub .sub-card-icon svg { stroke: #fff !important; visibility: visible !important; } /* Override conflicting hover states */ .variation_list.style-sub:hover .sub-card-icon { visibility: visible !important; opacity: 1 !important; } .variation_list.style-sub.tmp-pos-active .sub-card-icon { visibility: visible !important; opacity: 1 !important; } /* ✅ FIX 2: Date Range Pill Visibility */ .sub-date-range { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; } .variation_list.style-sub .sub-date-range { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; } /* ✅ FIX 3: Spacing Between Steps (Mobile Only - Below 768px) */ @media (max-width: 767px) { .variation-carousel-3d { margin-bottom: 32px !important; padding-bottom: 16px !important; } .sub-step2-spacing { margin-top: 32px !important; } /* Ensure subscription section has breathing room */ .checkout_page .sub-step2-spacing section { margin-top: 12px !important; } } /* ✅ FIX 4: Ensure Subscription Cards Stay Visible */ .variation_list.style-sub { background: linear-gradient(150deg, #0f766e, #6d3fa0) !important; border: 1.5px solid rgba(255,255,255,.25) !important; } .variation_list.style-sub.tmp-pos-active { background: linear-gradient(135deg, #22d3ee 0%, #6d6bf5 55%, #b64fe0 100%) !important; border: 1.5px solid rgba(255,255,255,.4) !important; } /* ✅ FIX 5: Remove any accidental white background overrides */ .variation_list.style-sub:not(.tmp-pos-active) { background: linear-gradient(150deg, #0f766e, #6d3fa0) !important; } /* ==================================================== SUBSCRIPTION CARD POLISH Must come after all other rules — beats the .list-group-item { border-radius: 4px !important } at the top of this file. ==================================================== */ /* 1. Rounded corners — the main fix */ .variation_list.style-sub, .variation_list.style-sub.tmp-pos-active, .variation_list.style-sub.tmp-pos-prev, .variation_list.style-sub.tmp-pos-next { border-radius: 24px !important; overflow: hidden !important; } /* 2. Glassmorphism inner shine — gives depth */ .variation_list.style-sub::before { content: ''; position: absolute; inset: 0; border-radius: 24px; background: linear-gradient( 135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 60%, transparent 100% ); pointer-events: none; z-index: 1; } /* Make sure card content sits above the shine layer */ .variation_list.style-sub > * { position: relative; z-index: 2; } /* 3. Stronger active-card glow */ .variation_list.style-sub.tmp-pos-active { box-shadow: 0 20px 40px rgba(34, 211, 238, 0.25), 0 8px 16px rgba(109, 107, 245, 0.3), 0 0 0 1.5px rgba(255,255,255,0.35) inset !important; } /* 4. Font upgrade — Nunito for the card name (bold, rounded, game-friendly) */ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;900&display=swap'); .variation_list.style-sub .variation-name { font-family: 'Nunito', sans-serif !important; font-weight: 900 !important; letter-spacing: 0.5px !important; } /* 5. Price pill refinement */ .variation_list.style-sub .variation-price { font-family: 'Nunito', sans-serif !important; font-weight: 800 !important; font-size: 13px !important; background: rgba(255,255,255,0.28) !important; backdrop-filter: blur(4px) !important; border: 1px solid rgba(255,255,255,0.3) !important; border-radius: 999px !important; padding: 4px 14px !important; } /* 6. Date pill refinement */ .variation_list.style-sub .sub-date-range { font-family: 'Nunito', sans-serif !important; font-weight: 700 !important; background: rgba(255,255,255,0.14) !important; border: 1px solid rgba(255,255,255,0.22) !important; border-radius: 999px !important; } /* 7. Spacing fix — keep your existing value */ @media (max-width: 767px) { .sub-step2-spacing { margin-top: 8px !important; padding-top: 0 !important; } } /* ==================================================== SUBSCRIPTION CAROUSEL — DESKTOP CARD SIZE + TEXT FIX Targets min-width:481px (desktop/tablet) only so mobile carousel is completely untouched. ==================================================== */ @media (min-width: 481px) { /* Taller perspective box + wider active card */ .variation-carousel-3d .package-item-outer { height: 280px !important; } .variation_list.style-sub { height: 280px !important; width: 52% !important; border-radius: 28px !important; padding: 20px 16px !important; } /* Card name — smaller, no breaking */ .variation_list.style-sub .variation-name { font-size: 13px !important; font-weight: 900 !important; white-space: normal !important; word-break: keep-all !important; /* stops mid-word breaks */ overflow-wrap: normal !important; hyphens: none !important; line-height: 1.2 !important; letter-spacing: 0.8px !important; max-width: 120px !important; /* forces wrapping at word boundary */ text-align: center !important; } /* Bigger icon circle */ .variation_list.style-sub .sub-card-icon { width: 54px !important; height: 54px !important; margin-bottom: 6px !important; } .variation_list.style-sub .sub-card-icon svg { width: 26px !important; height: 26px !important; } /* Date pill — slightly bigger but compact */ .variation_list.style-sub .sub-date-range { font-size: 11px !important; padding: 5px 14px !important; } /* Price pill */ .variation_list.style-sub .variation-price { font-size: 14px !important; padding: 5px 18px !important; margin-top: 4px !important; } /* Side cards proportionally taller */ .variation_list.style-sub.tmp-pos-prev, .variation_list.style-sub.tmp-pos-next { height: 280px !important; } .variation_list.style-sub.tmp-pos-prev2, .variation_list.style-sub.tmp-pos-next2 { height: 280px !important; } } @media (min-width: 481px) { .variation-carousel-3d { max-width: 480px !important; } .variation_list.style-sub { width: 58% !important; } } @media (min-width: 481px) { /* ── Text: remove the ellipsis + width cap from desktop sub cards ── */ .variation_list.style-sub .variation-name { max-width: none !important; white-space: normal !important; text-overflow: clip !important; overflow: visible !important; word-break: break-word !important; hyphens: none !important; font-size: 12px !important; line-height: 1.25 !important; letter-spacing: 1px !important; } /* ── Icon: force it to show as a proper circle ── */ .variation_list.style-sub .sub-card-icon { display: flex !important; visibility: visible !important; opacity: 1 !important; width: 52px !important; height: 52px !important; min-width: 52px !important; border-radius: 50% !important; background: rgba(255,255,255,0.22) !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.35) inset !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .variation_list.style-sub .sub-card-icon svg { display: block !important; visibility: visible !important; opacity: 1 !important; width: 24px !important; height: 24px !important; stroke: #fff !important; fill: none !important; } /* ── Tick badge: pin to top-right corner of the card properly ── */ .variation_list.style-sub .variation-check { top: -10px !important; right: -10px !important; left: auto !important; transform: none !important; width: 24px !important; height: 24px !important; border-radius: 50% !important; background: #fff !important; color: #7C3AED !important; font-size: 13px !important; display: none; /* JS shows it via .selected — don't force show */ align-items: center !important; justify-content: center !important; box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important; z-index: 10 !important; } .variation_list.style-sub.selected .variation-check { display: flex !important; } } /* ==================================================== SUBSCRIPTION CARDS — CONSOLIDATED FINAL (replace all previous desktop media blocks from here to EOF) ==================================================== */ /* Base card — all screen sizes */ .variation_list.style-sub, .variation_list.style-sub.tmp-pos-active, .variation_list.style-sub.tmp-pos-prev, .variation_list.style-sub.tmp-pos-next { border-radius: 24px !important; overflow: visible !important; /* MUST be visible — overflow:hidden clips the tick badge AND the icon */ } /* Glassmorphism shine — z-index 0 so it never covers card children */ .variation_list.style-sub::before { content: ''; position: absolute; inset: 0; border-radius: 24px; background: linear-gradient( 135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 60%, transparent 100% ); pointer-events: none; z-index: 0; /* below card content, not above */ } /* Card children always above the shine */ .variation_list.style-sub > * { position: relative; z-index: 2; } /* Active card glow */ .variation_list.style-sub.tmp-pos-active { box-shadow: 0 20px 40px rgba(34,211,238,0.25), 0 8px 16px rgba(109,107,245,0.3), 0 0 0 1.5px rgba(255,255,255,0.35) inset !important; } /* ── Icon: always visible, never clipped ── */ .variation_list.style-sub .sub-card-icon { display: flex !important; visibility: visible !important; opacity: 1 !important; width: 48px !important; height: 48px !important; min-width: 48px !important; border-radius: 50% !important; background: rgba(255,255,255,0.22) !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.35) inset !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; position: relative !important; z-index: 3 !important; /* always on top of ::before */ } .variation_list.style-sub .sub-card-icon svg { display: block !important; visibility: visible !important; opacity: 1 !important; width: 22px !important; height: 22px !important; stroke: #fff !important; fill: none !important; stroke-width: 2 !important; } /* Keep icon visible on all states */ .variation_list.style-sub:hover .sub-card-icon, .variation_list.style-sub.selected .sub-card-icon, .variation_list.style-sub.tmp-pos-active .sub-card-icon, .variation_list.style-sub.tmp-pos-prev .sub-card-icon, .variation_list.style-sub.tmp-pos-next .sub-card-icon { display: flex !important; visibility: visible !important; opacity: 1 !important; } /* ── Tick badge — gradient fill, pinned corner ── */ .variation_list.style-sub .variation-check { position: absolute !important; top: -10px !important; right: -10px !important; left: auto !important; transform: none !important; width: 26px !important; height: 26px !important; min-width: 26px !important; border-radius: 50% !important; /* Gradient tick instead of plain white */ background: linear-gradient(135deg, #22d3ee, #7C3AED) !important; color: #fff !important; font-size: 13px !important; font-weight: 700 !important; display: none; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 10px rgba(124,58,237,0.45), 0 0 0 2px #fff !important; z-index: 20 !important; } .variation_list.style-sub.selected .variation-check { display: flex !important; } /* ── Text ── */ .variation_list.style-sub .variation-name { font-family: 'Nunito', sans-serif !important; font-weight: 900 !important; font-size: 12px !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: normal !important; hyphens: none !important; text-overflow: clip !important; overflow: visible !important; max-width: none !important; line-height: 1.25 !important; letter-spacing: 1px !important; text-align: center !important; position: relative !important; z-index: 3 !important; } /* ── Price pill ── */ .variation_list.style-sub .variation-price { font-family: 'Nunito', sans-serif !important; font-weight: 800 !important; font-size: 13px !important; background: rgba(255,255,255,0.28) !important; backdrop-filter: blur(4px) !important; border: 1px solid rgba(255,255,255,0.3) !important; border-radius: 999px !important; padding: 4px 14px !important; color: #fff !important; position: relative !important; z-index: 3 !important; } /* ── Date pill ── */ .variation_list.style-sub .sub-date-range { font-family: 'Nunito', sans-serif !important; font-weight: 700 !important; display: inline-flex !important; visibility: visible !important; opacity: 1 !important; background: rgba(255,255,255,0.14) !important; border: 1px solid rgba(255,255,255,0.22) !important; border-radius: 999px !important; position: relative !important; z-index: 3 !important; } /* ── Desktop sizing ── */ @media (min-width: 481px) { .variation-carousel-3d { max-width: 500px !important; } .variation-carousel-3d .package-item-outer { height: 290px !important; } .variation_list.style-sub { height: 290px !important; width: 58% !important; border-radius: 28px !important; padding: 22px 18px !important; } .variation_list.style-sub .sub-card-icon { width: 54px !important; height: 54px !important; min-width: 54px !important; margin-bottom: 4px !important; } .variation_list.style-sub .sub-card-icon svg { width: 26px !important; height: 26px !important; } .variation_list.style-sub .sub-date-range { font-size: 11px !important; padding: 5px 14px !important; } .variation_list.style-sub .variation-price { font-size: 14px !important; padding: 5px 18px !important; margin-top: 4px !important; } } /* ── Mobile spacing ── */ @media (max-width: 767px) { .sub-step2-spacing { margin-top: 8px !important; padding-top: 0 !important; } } /* ================================================================================ FIX: Calendar Icon + Date Range disappear after selecting a subscription package Applied after all previous rules — highest specificity wins. ================================================================================ */ /* ── 1. Force icon visible on ALL states, especially after selection ── */ .variation_list.style-sub .sub-card-icon, .variation_list.style-sub.selected .sub-card-icon, .variation_list.style-sub.tmp-pos-active .sub-card-icon, .variation_list.style-sub:hover .sub-card-icon, .variation_list.style-sub.tmp-pos-prev .sub-card-icon, .variation_list.style-sub.tmp-pos-next .sub-card-icon { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: none !important; /* Prevent click events from toggling it off */ } .variation_list.style-sub .sub-card-icon svg, .variation_list.style-sub.selected .sub-card-icon svg, .variation_list.style-sub.tmp-pos-active .sub-card-icon svg { display: block !important; visibility: visible !important; opacity: 1 !important; stroke: #fff !important; fill: none !important; } /* ── 2. Date range pill — visible on ALL states ── */ .variation_list.style-sub .sub-date-range, .variation_list.style-sub.selected .sub-date-range, .variation_list.style-sub.tmp-pos-active .sub-date-range, .variation_list.style-sub:hover .sub-date-range, .variation_list.style-sub.tmp-pos-prev .sub-date-range, .variation_list.style-sub.tmp-pos-next .sub-date-range { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; color: #fff !important; font-size: 11px !important; font-weight: 700 !important; white-space: nowrap !important; padding: 4px 12px !important; border-radius: 999px !important; background: rgba(255,255,255,0.18) !important; border: 1px solid rgba(255,255,255,0.28) !important; position: relative !important; z-index: 4 !important; margin-top: 4px !important; align-items: center !important; justify-content: center !important; gap: 4px !important; line-height: 1.4 !important; min-width: 0 !important; max-width: 100% !important; overflow: visible !important; } /* ── 3. Subscription validity text — ensure it renders ── */ .variation_list.style-sub .sub-date-range span, .variation_list.style-sub.selected .sub-date-range span, .variation_list.style-sub.tmp-pos-active .sub-date-range span { display: inline !important; visibility: visible !important; opacity: 1 !important; color: inherit !important; font-size: inherit !important; white-space: nowrap !important; } /* ── 4. Icon SVG inside the date range (calendar icon) ── */ .variation_list.style-sub .sub-date-range svg, .variation_list.style-sub.selected .sub-date-range svg, .variation_list.style-sub.tmp-pos-active .sub-date-range svg { display: inline-block !important; visibility: visible !important; opacity: 1 !important; width: 12px !important; height: 12px !important; stroke: #fff !important; fill: none !important; flex-shrink: 0 !important; } /* ── 5. Desktop sizing for date range pill ── */ @media (min-width: 481px) { .variation_list.style-sub .sub-date-range, .variation_list.style-sub.selected .sub-date-range { font-size: 11px !important; padding: 5px 14px !important; margin-top: 6px !important; } .variation_list.style-sub .sub-date-range svg, .variation_list.style-sub.selected .sub-date-range svg { width: 13px !important; height: 13px !important; } } /* ── 6. Mobile sizing for date range pill ── */ @media (max-width: 480px) { .variation_list.style-sub .sub-date-range, .variation_list.style-sub.selected .sub-date-range { font-size: 10px !important; padding: 3px 10px !important; margin-top: 3px !important; } } /* ── 7. Selected-state background gradient shift ── Nothing above targets .variation_list.style-sub.selected's OWN background — only child elements (icon/badge/date text) react to .selected. That's why clicking never changed the card color. IMPORTANT — DOES NOT TOUCH `transition` AT ALL ANYMORE. checkout.blade.php's inline