:root {
       --brand-bg: #ffde92;
       --brand-text: #000000;
       --brand-hover: #f8d789;
       --accent-border: #eab308;
       --accent-bg: #FFFDF0;
       --bump-border: #FBBF24;
       --bump-border-active: #f59e0b;
       --text-xs: 0.75rem;
       --text-sm: 0.875rem;
       --text-base: 1rem;
       --text-lg: 1.125rem;
       --text-xl: 1.25rem;
       --text-2xl: 1.5rem;
   }

   * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }

   body {
       font-family: 'Inter', sans-serif;
       background-color: #F5F5F7;
       color: #18181b;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       min-height: 100vh;
       width: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
       overflow-x: hidden;
       background-image: url('assets/blurback.png');
       background-size: cover;
       background-position: top;
       background-repeat: no-repeat;
       zoom: 89%;
   }

   ::selection {
       background: var(--brand-bg);
       color: var(--brand-text);
   }

   ::-webkit-scrollbar {
       width: 0.25rem;
       height: 0.25rem;
   }

   ::-webkit-scrollbar-track {
       background: transparent;
   }

   ::-webkit-scrollbar-thumb {
       background-color: #d4d4d8;
       border-radius: 0.25rem;
   }

   ::-webkit-scrollbar-thumb:hover {
       background-color: #a1a1aa;
   }

   iconify-icon {
       display: inline-flex;
       align-items: center;
       justify-content: center;
   }

   .hidden {
       display: none !important;
   }

   .container {
       max-width: 53.75rem;
       margin: 0 auto;
       padding: 2.5rem 1rem;
       width: 100%;
       transform-origin: top;
       transform: scale(1);
   }

   @media (min-width: 768px) {
       .container {
           transform: scale(0.9);
       }
   }

   .form-wrapper {
       max-width: 25rem;
       margin: 0 auto;
       width: 100%;
       display: grid;
       gap: 1rem;
       align-items: start;
       justify-content: center;
   }

   .step-card {
       background: #ffffff;
       border: 1px solid rgba(0, 0, 0, 0.08);
       overflow: hidden;
       box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
       transition: all 0.3s;
       position: relative;
   }

   .step-card.s1 {
       border-radius: 1rem;
   }

   .step-card.s2 {
       border-radius: 1rem;
   }

   .step-header {
       padding: 1.5rem;
       border-bottom: 1px solid rgba(0, 0, 0, 0.08);
       background: rgba(0, 0, 0, 0.02);
   }

   .header-content {
       display: flex;
       align-items: center;
       gap: 1rem;
       padding-bottom: 0.5rem;
   }

   .s2-header-content {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       padding-bottom: 0.5rem;
   }

   .product-image {
       width: 4.375rem;
       height: 4.375rem;
       border-radius: 0.75rem;
       border: 2px solid #ffffff;
       flex-shrink: 0;
       object-fit: cover;
       box-shadow: 0 1px 1.75px 0 rgba(0, 0, 0, .12), 0 -.5px 1.5px 0 rgba(0, 0, 0, .09), 0 3px 4px 0 rgba(0, 0, 0, .03);
   }

   .header-text-col {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       width: 100%;
       padding-right: 0.25rem;
   }

   .title-text {
       font-size: var(--text-base);
       font-weight: 500;
       margin: 0;
       text-align: left;
       letter-spacing: -0.025em;
   }

   .sub-text {
       font-size: var(--text-sm);
       color: #6b7280;
       margin-top: 0.25rem;
       max-width: 13.75rem;
       text-align: left;
       line-height: 1.4;
   }

   .progress-wrap {
       display: flex;
       gap: 0.25rem;
       padding-top: 0.5rem;
   }

   .progress-bar {
       width: 1.5rem;
       height: 3px;
       border-radius: 2px;
       transition: background-color 0.3s;
   }

   .progress-active {
       background: #000000;
   }

   .progress-inactive {
       background: rgba(0, 0, 0, 0.08);
   }

   .progress-clickable {
       cursor: pointer;
   }

   .progress-clickable:hover {
       background: rgba(0, 0, 0, 0.2);
   }

   .card-body {
       padding: 1.5rem;
   }

   .section-title {
       font-size: var(--text-sm);
       font-weight: 500;
       margin-bottom: 0.75rem;
       color: #000000;
       display: block;
   }

   .mb-6 {
       margin-bottom: 1.5rem;
   }

   .mb-4 {
       margin-bottom: 1rem;
   }

   .input-group {
       display: flex;
       flex-direction: column;
       overflow: hidden;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 0.5rem;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   }

   .input-row {
       display: flex;
   }

   .input-field {
       position: relative;
       z-index: 0;
       height: 2.5rem;
       width: 100%;
       background: #fcfcfc;
       padding: 0 0.75rem;
       font-size: var(--text-sm);
       color: #000000;
       border: none;
       outline: none;
       transition: all 0.2s;
       font-family: 'Inter', sans-serif;
       font-weight: 400;
   }

   .input-field::placeholder {
       color: #6b7280;
   }

   .input-field:focus {
       z-index: 10;
       box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
       background: #ffffff;
   }

   .border-b {
       border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   }

   .border-r {
       border-right: 1px solid rgba(0, 0, 0, 0.1);
   }

   .btn-wrapper {
       margin-top: 1.25rem;
       display: grid;
       grid-template-columns: 1fr;
   }

   .dynamic-btn {
       background-color: var(--brand-bg);
       color: var(--brand-text);
       cursor: pointer;
       display: inline-flex;
       border: none;
       width: 100%;
       border-radius: 0.75rem;
       position: relative;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.54), 0 0 0 1px rgba(0, 0, 0, 0.08);
       align-items: center;
       justify-content: center;
       transition: all 0.2s;
       font-family: 'Inter', sans-serif;
       text-decoration: none;
   }

   .dynamic-btn:hover {
       background-color: var(--brand-hover);
   }

   .dynamic-btn:active {
       transform: scale(0.98);
   }

   .dynamic-btn.h-11 {
       height: 2.75rem;
       font-size: var(--text-sm);
       font-weight: 500;
   }

   .dynamic-btn.h-12 {
       height: 3rem;
       font-size: var(--text-sm);
       font-weight: 600;
       letter-spacing: -0.025em;
   }

   .footer-text {
       margin-top: 1rem;
       font-size: var(--text-xs);
       text-align: center;
       color: #6b7280;
       line-height: 1.625;
       padding: 0 0.5rem;
   }

   .footer-text a {
       color: #6b7280;
       text-decoration: underline;
       text-decoration-color: #d1d5db;
       text-underline-offset: 2px;
       transition: all 0.2s;
   }

   .footer-text a:hover {
       color: #374151;
   }

   .back-btn {
       cursor: pointer;
       color: #6b7280;
       background: transparent;
       border: none;
       padding: 0.375rem;
       margin-left: -0.5rem;
       border-radius: 0.5rem;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       transition: all 0.2s;
   }

   .back-btn:hover {
       color: #000000;
       background: rgba(0, 0, 0, 0.05);
   }

   .back-btn iconify-icon {
       font-size: var(--text-xl);
   }

   .product-group {
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
       margin-bottom: 0.5rem;
   }

   .product-label {
       position: relative;
       display: block;
       margin-bottom: 0.5rem;
       cursor: pointer;
       margin-top: 0.25rem;
   }

   .product-radio {
       position: absolute;
       width: 1px;
       height: 1px;
       padding: 0;
       margin: -1px;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
       white-space: nowrap;
       border-width: 0;
   }

   .product-item {
       border: 2px solid #ffffff;
       background: #ffffff;
       padding: 0.625rem;
       padding-left: 2.375rem;
       border-radius: 0.75rem;
       box-shadow: 0 1px 1.75px 0 rgba(0, 0, 0, .12), 0 -.5px 1.5px 0 rgba(0, 0, 0, .09), 0 3px 4px 0 rgba(0, 0, 0, .03);
       transition: all 0.3s;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .product-item:hover {
       background: rgba(0, 0, 0, 0.02);
   }

   .dynamic-badge {
       position: absolute;
       top: -0.875rem;
       right: 0.625rem;
       font-size: var(--text-xs);
       padding: 0.125rem 0.5rem;
       border-radius: 0.25rem;
       font-weight: 500;
       border: 1px dashed #cc9f37;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
       letter-spacing: -0.025em;
       z-index: 10;
       transform: scale(0.9);
       transform-origin: top right;
       background-color: var(--brand-bg);
       color: var(--brand-text);
   }

   .prod-info {
       display: flex;
       flex-direction: column;
   }

   .prod-title {
       font-size: var(--text-sm);
       color: #000000;
       font-weight: 500;
   }

   .prod-desc {
       font-size: var(--text-sm);
       color: #6b7280;
   }

   .prod-price-col {
       display: flex;
       flex-direction: column;
       text-align: right;
       padding-right: 0.25rem;
   }

   .prod-price {
       font-size: var(--text-sm);
       font-weight: 500;
       color: #000000;
   }

   .prod-old-price {
       font-size: var(--text-sm);
       color: #6b7280;
       text-decoration: line-through;
       text-decoration-color: #ef4444;
   }

   .product-radio:checked+.product-item {
       background-color: var(--accent-bg);
       border-color: rgba(255, 255, 255, 0.3);
   }

   .product-checkbox {
       position: absolute;
       left: 0.75rem;
       top: 50%;
       transform: translateY(-50%);
       width: 1.25rem;
       height: 1.25rem;
       background: #ffffff;
       border: 1px solid #d1d5db;
       border-radius: 0.375rem;
       transition: all 0.3s;
       display: flex;
       align-items: center;
       justify-content: center;
       pointer-events: none;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   }

   .product-radio:checked~.product-checkbox {
       border-color: var(--accent-border);
       background-color: var(--accent-border);
   }

   .product-checkbox iconify-icon {
       color: #ffffff;
       font-size: var(--text-lg);
       opacity: 0;
       transition: opacity 0.3s;
   }

   .product-radio:checked~.product-checkbox iconify-icon {
       opacity: 1;
   }

   /* Lista pogodnosti za odabrani plan */
   .features-box {
       background: #fafafa;
       border: 1px solid rgba(0, 0, 0, 0.05);
       border-radius: 0.75rem;
       padding: 1rem;
       margin-bottom: 1.5rem;
       animation: fadeIn 0.3s ease-in-out;
       box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.02);
   }

   .features-title {
       font-size: var(--text-sm);
       font-weight: 500;
       color: #000000;
       margin-bottom: 0.75rem;
   }

   .features-list {
       display: flex;
       flex-direction: column;
       gap: 0.625rem;
   }

   .feature-item {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       font-size: var(--text-sm);
       color: #4b5563;
   }

   .feature-icon {
       color: var(--accent-border);
       width: 0.98rem;
       height: 0.98rem;
       stroke-width: 1.8;
       flex-shrink: 0;
   }

   .feature-icon iconify-icon {
       width: 0.98rem;
       height: 0.98rem;
       font-size: 0.98rem;
   }

   .feature-check-icon {
       color: #eab308;
   }

   .feature-icon-badge {
       width: 1.05rem;
       height: 1.05rem;
       min-width: 1.05rem;
       border-radius: 999px;
       background: #fef3c7;
       border: 1px solid #fbbf24;
       display: inline-flex;
       align-items: center;
       justify-content: center;
   }

   .feature-highlight-icon {
       width: 0.78rem;
       height: 0.78rem;
       color: #a16207;
       stroke-width: 2;
   }

   .feature-highlight-icon iconify-icon {
       width: 0.78rem;
       height: 0.78rem;
       font-size: 0.78rem;
   }

   .feature-item.align-items-start .feature-icon {
       margin-top: 0.125rem;
   }

   .mt-6 {
       margin-top: 1.5rem;
   }

   .mb-2 {
       margin-bottom: 0.5rem;
   }

   .payment-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 0.75rem;
       flex-direction: column;
       gap: 0.6rem;
   }

   .payment-tabs {
       background: #fcfcfc;
       border: 1px solid rgba(0, 0, 0, 0.1);
       padding: 0.25rem;
       border-radius: 0.5rem;
       display: flex;
       gap: 0.25rem;
       width: 100%;
       justify-content: center;
   }

   .payment-label {
       position: relative;
       cursor: pointer;
       flex: 1;
   }

   .payment-radio {
       position: absolute;
       opacity: 0;
       width: 0;
       height: 0;
   }

   .payment-tab {
       height: 2.25rem;
       padding: 0 0.5rem;
       border-radius: 0.375rem;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.375rem;
       color: #6b7280;
       transition: all 0.3s;
       border: 1px solid transparent;
       font-size: var(--text-xs);
       font-weight: 500;
   }

   .payment-radio:checked+.payment-tab {
       background: #ffffff;
       color: #000000;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
       border-color: rgba(0, 0, 0, 0.1);
   }

   .payment-tab iconify-icon {
       font-size: var(--text-sm);
   }

   .card-inputs-wrap {
       background: #fcfcfc;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 0.75rem;
       padding: 0.75rem;
       transition: all 0.3s;
   }

   .card-input-row {
       display: flex;
       align-items: center;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 0.5rem;
       background: #ffffff;
       overflow: hidden;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
       height: 2.5rem;
       padding: 0 0.5rem;
       gap: 0.5rem;
       transition: all 0.3s;
   }

   .card-input-row:focus-within {
       border-color: rgba(0, 0, 0, 0.3);
       box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
   }

   .card-icon {
       color: #9ca3af;
       font-size: var(--text-xl);
       flex-shrink: 0;
       margin-left: 0.25rem;
   }

   .card-field {
       flex: 1;
       min-width: 0;
       background: transparent;
       border: none;
       outline: none;
       padding: 0 0.25rem;
       font-size: var(--text-sm);
       color: #000000;
       font-family: 'Inter', sans-serif;
       font-weight: 400;
   }

   .card-field::placeholder {
       color: #6b7280;
   }

   .card-field.short {
       width: 3.4375rem;
       text-align: center;
       flex: none;
   }

   .card-field.cvv {
       width: 2.8125rem;
       text-align: center;
       flex: none;
   }

   .divider {
       width: 1px;
       height: 1.25rem;
       background: #e5e7eb;
       flex-shrink: 0;
   }

   .powered-by {
       display: flex;
       justify-content: flex-end;
       align-items: center;
       margin-top: 0.5rem;
       padding-right: 0.25rem;
       gap: 0.25rem;
   }

   .powered-text {
       font-size: var(--text-xs);
       color: #9ca3af;
       font-weight: 400;
   }

   .powered-brand {
       font-size: var(--text-xs);
       color: #000000;
       font-weight: 600;
       letter-spacing: -0.025em;
   }

   .cod-inputs-wrap {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       padding: 0.75rem;
       background: #fcfcfc;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 0.5rem;
       margin-top: 0.5rem;
   }

   .cod-icon-wrap {
       width: 2rem;
       height: 2rem;
       border-radius: 50%;
       background: rgba(0, 0, 0, 0.05);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
   }

   .cod-icon-wrap iconify-icon {
       color: #000000;
       font-size: var(--text-lg);
   }

   .cod-text {
       font-size: var(--text-sm);
       color: #4b5563;
       line-height: 1.25;
   }

   .mt-3 {
       margin-top: 0.75rem;
   }

   .coupon-form {
       display: flex;
       gap: 0.5rem;
   }

   .coupon-input {
       flex: 1;
       height: 2.25rem;
       background: #fcfcfc;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 0.5rem;
       padding: 0 0.75rem;
       font-size: var(--text-sm);
       color: #000000;
       outline: none;
       transition: all 0.3s;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
       font-family: 'Inter', sans-serif;
       font-weight: 400;
   }

   .coupon-input::placeholder {
       color: #9ca3af;
   }

   .coupon-input:focus {
       background: #ffffff;
       border-color: rgba(0, 0, 0, 0.3);
   }

   .coupon-btn {
       height: 2.25rem;
       padding: 0 1rem;
       background: #ffffff;
       border: 1px solid rgba(0, 0, 0, 0.12);
       color: #4b5563;
       border-radius: 0.5rem;
       font-size: var(--text-sm);
       font-weight: 500;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
       cursor: pointer;
       transition: all 0.2s;
       font-family: 'Inter', sans-serif;
   }

   .coupon-btn:hover {
       background: rgba(0, 0, 0, 0.02);
       color: #000000;
   }

   .coupon-success {
       display: flex;
       align-items: center;
       justify-content: space-between;
       background: rgba(0, 0, 0, 0.03);
       border: 1px solid rgba(0, 0, 0, 0.05);
       border-radius: 0.5rem;
       padding: 0 0.75rem;
       height: 2.25rem;
   }

   .coupon-success-left {
       display: flex;
       align-items: center;
       gap: 0.375rem;
       color: #000000;
       font-size: var(--text-sm);
   }

   .coupon-success-left iconify-icon {
       color: #6b7280;
       font-size: var(--text-sm);
   }

   .coupon-code {
       font-weight: 500;
   }

   .coupon-remove {
       color: #9ca3af;
       cursor: pointer;
       display: flex;
       align-items: center;
       background: transparent;
       border: none;
       transition: color 0.2s;
   }

   .coupon-remove:hover {
       color: #ef4444;
   }

   .coupon-remove iconify-icon {
       font-size: var(--text-base);
   }

   .mt-4 {
       margin-top: 1rem;
   }

   .summary-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: 0.5rem;
       padding: 0 0.25rem;
       cursor: pointer;
   }

   .summary-header h3 {
       font-size: var(--text-sm);
       font-weight: 500;
       color: #000000;
       margin: 0;
   }

   .summary-header-right {
       display: flex;
       align-items: center;
       gap: 0.25rem;
       padding: 0.25rem 0.5rem;
       margin-right: -0.5rem;
       border-radius: 0.5rem;
       transition: background 0.2s;
       color: #000000;
       font-weight: 500;
   }

   .summary-header:hover .summary-header-right {
       background: rgba(0, 0, 0, 0.05);
   }

   .summary-total-preview {
       font-size: var(--text-sm);
   }

   .summary-arrow {
       font-size: var(--text-base);
       transition: transform 0.3s;
   }

   .rotate-180 {
       transform: rotate(180deg);
   }

   .summary-details {
       background: #fcfcfc;
       border: 1px solid rgba(0, 0, 0, 0.08);
       border-radius: 0.75rem;
       padding: 1rem;
       font-size: var(--text-sm);
       color: #6b7280;
       display: flex;
       flex-direction: column;
       gap: 0.625rem;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
       transition: all 0.3s;
   }

   .summary-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .summary-row.subtotal {
       margin-top: 0.25rem;
       margin-bottom: 0.25rem;
   }

   .summary-has-adjustments .summary-row.subtotal {
       padding-bottom: 0.5rem;
       border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
   }

   .summary-row.total {
       margin-top: 0.25rem;
       color: #000000;
   }

   .summary-has-adjustments .summary-row.total {
       padding-top: 0.75rem;
       border-top: 1px dashed rgba(0, 0, 0, 0.1);
   }

   .summary-row.coupon {
       color: #059669;
   }

   .summary-product-left {
       display: flex;
       align-items: center;
       gap: 0.75rem;
   }

   .summary-product-name {
       color: #000000;
       font-weight: 500;
       font-size: var(--text-sm);
   }

   .text-black {
       color: #000000;
   }

   .font-normal {
       font-weight: 400;
   }

   .font-medium {
       font-weight: 500;
   }

   .font-semibold {
       font-weight: 600;
   }

   .tracking-tight {
       letter-spacing: -0.025em;
   }

   .trust-seals {
       width: 70%;
       margin: 1.5rem auto 0;
       display: block;
       mix-blend-mode: multiply;
       opacity: 0.8;
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(-4px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .fade-in {
       animation: fadeIn 0.2s ease-in;
   }

   .step-header {
       padding: 1rem 1.25rem !important;
   }

   .product-image {
       width: 3rem !important;
       height: 3rem !important;
       border-radius: 0.5rem !important;
   }

   .header-content,
   .s2-header-content {
       padding-bottom: 0 !important;
   }

   .title-text {
       font-size: var(--text-sm) !important;
       font-weight: 600 !important;
       margin-bottom: 0.125rem !important;
   }

   .sub-text {
       font-size: 0.75rem !important;
       margin-top: 0 !important;
   }

   .progress-wrap {
       padding-top: 0.25rem !important;
   }


   .features-box .grid .font-medium {
       font-size: 0.8rem;
   }

   .features-box .grid .text-[0.7rem] {
       font-size: 0.65rem;
   }


   details>summary {
       list-style: none;
   }

   details>summary::-webkit-details-marker {
       display: none;
   }

   .tiny-text-75 {
       font-size: 0.75rem;
   }

   .tiny-text-70 {
       font-size: 0.7rem;
   }

   .text-hover-dark:hover {
       color: #000000 !important;
   }

   .benefits-details[open] .benefits-arrow {
       transform: rotate(180deg);
   }

   .benefits-arrow {
       transition: transform 150ms ease;
   }

   /* Mobile responsiveness and slightly smaller typography */
   @media (max-width: 480px) {
       :root {
           --text-xs: 0.68rem;
           --text-sm: 0.8rem;
           --text-base: 0.92rem;
           --text-lg: 1rem;
           --text-xl: 1.1rem;
           --text-2xl: 1.3rem;
       }

       .container {
           padding: 1rem 0.75rem;
           max-width: 100%;
       }

       .form-wrapper {
           max-width: 100%;
           gap: 0.75rem;
       }

       .step-header {
           padding: 0.875rem 1rem !important;
       }

       .card-body {
           padding: 1rem;
       }

       .header-content,
       .s2-header-content {
           gap: 0.75rem;
       }

       .product-image {
           width: 2.75rem !important;
           height: 2.75rem !important;
       }

       .product-item {
           padding: 0.55rem;
           padding-left: 2.15rem;
           border-radius: 0.65rem;
       }

       .prod-title,
       .prod-desc,
       .prod-price,
       .prod-old-price,
       .feature-item,
       .input-field,
       .card-field,
       .coupon-input,
       .coupon-btn,
       .summary-details {
           font-size: var(--text-sm);
       }

       .input-field,
       .card-input-row {
           height: 2.35rem;
       }

       .dynamic-btn.h-11 {
           height: 2.6rem;
       }

       .dynamic-btn.h-12 {
           height: 2.75rem;
       }

       .features-box {
           padding: 0.875rem;
           margin-bottom: 1.25rem;
       }

       .card-inputs-wrap {
           padding: 0.65rem;
       }

       .card-input-row {
           gap: 0.35rem;
           padding: 0 0.4rem;
       }

       .card-field.short {
           width: 3rem;
       }

       .card-field.cvv {
           width: 2.5rem;
       }

       .payment-tab {
           height: 2.15rem;
           padding: 0 0.35rem;
           gap: 0.25rem;
           font-size: var(--text-xs);
       }

       .footer-text {
           font-size: var(--text-xs);
           line-height: 1.5;
       }
   }

   /* Auth compatibility layer (maps existing blade classes to checkout design) */
   .text-label {
       font-size: var(--text-sm);
       font-weight: 500;
       margin-bottom: 0.75rem;
       color: #000000;
       display: block;
   }

   .input-modern {
       position: relative;
       z-index: 0;
       height: 2.5rem;
       width: 100%;
       background: #fcfcfc;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 0.5rem;
       padding: 0 0.75rem;
       font-size: var(--text-sm);
       color: #000000;
       outline: none;
       transition: all 0.2s;
       font-family: 'Inter', sans-serif;
       font-weight: 400;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   }

   .input-modern::placeholder {
       color: #6b7280;
   }

   .input-modern:focus {
       z-index: 10;
       box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
       background: #ffffff;
       border-color: rgba(0, 0, 0, 0.2);
   }

   .w-full {
       width: 100%;
   }

   .btn.btn-primary,
   .btn-primary {
       background-color: var(--brand-bg);
       color: var(--brand-text);
       cursor: pointer;
       display: inline-flex;
       border: none;
       width: 100%;
       height: 3rem;
       border-radius: 0.75rem;
       position: relative;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.54), 0 0 0 1px rgba(0, 0, 0, 0.08);
       align-items: center;
       justify-content: center;
       transition: all 0.2s;
       font-family: 'Inter', sans-serif;
       text-decoration: none;
       font-size: var(--text-sm);
       font-weight: 600;
       letter-spacing: -0.025em;
       padding: 0 1rem;
   }

   .btn.btn-primary:hover,
   .btn-primary:hover {
       background-color: var(--brand-hover);
       color: var(--brand-text);
   }

   .btn.btn-primary:active,
   .btn-primary:active {
       transform: scale(0.98);
   }

   .btn-link,
   .link-soft {
       color: #6b7280;
       text-decoration: underline;
       text-decoration-color: #d1d5db;
       text-underline-offset: 2px;
       transition: all 0.2s;
       font-size: var(--text-xs);
       font-weight: 500;
   }

   .btn-link:hover,
   .link-soft:hover {
       color: #374151;
   }

   .code-row {
       display: grid;
       grid-template-columns: repeat(6, 1fr);
       gap: 0.5rem;
       margin-top: 0.625rem;
   }

   .code-input {
       height: 2.75rem;
       text-align: center;
       font-size: 0.95rem;
       font-weight: 600;
       letter-spacing: 0.02em;
       border-radius: 0.625rem;
       padding: 0;
   }

   .hint {
       display: flex;
       gap: 0.375rem;
       align-items: flex-start;
       padding: 0.625rem 0.75rem;
       border: 1px dashed rgba(0, 0, 0, 0.12);
       background: rgba(0, 0, 0, 0.02);
       border-radius: 0.75rem;
       margin-top: 0.75rem;
   }

   .hint p {
       margin: 0;
   }

   .divider-soft {
       height: 1px;
       background: rgba(0, 0, 0, 0.12);
       margin: 0.875rem 0;
       opacity: .7;
   }

   .bottom-actions {
       display: flex;
       justify-content: center;
       align-items: center;
       margin-top: 0.625rem;
   }

   .summary-header.summary-static {
       cursor: default;
   }

   .summary-header.summary-static:hover .summary-header-right {
       background: transparent;
   }

   .input-hint {
       margin: 0;
       font-size: var(--text-xs);
       line-height: 1.6;
       color: #6b7280;
   }

   /* Checkout mockup class alignment */
   .card-body-pad {
       padding: 1.5rem;
   }

   .input-group-box {
       display: flex;
       flex-direction: column;
       overflow: hidden;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 0.5rem;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   }

   .benefits-toggle {
       width: 100%;
       margin-top: 0.5rem;
       cursor: pointer;
   }

   .benefits-toggle>summary {
       display: flex;
       align-items: center;
       gap: 0.25rem;
       color: #374151;
       font-size: var(--text-xs);
       font-weight: 500;
       outline: none;
       transition: color 0.15s;
   }

   .benefits-toggle>summary:hover {
       color: #000000;
   }

   .benefits-extra {
       display: flex;
       flex-direction: column;
       gap: 0.75rem;
       margin-top: 0.75rem;
       padding-bottom: 0.5rem;
   }

   .benefit-more {
       width: 100%;
       margin-top: 0.75rem;
       color: #6b7280;
       font-size: var(--text-xs);
       font-style: italic;
       text-align: left;
   }

   .summary-original-total-preview,
   .summary-original-total {
       color: #dc2626;
       font-size: var(--text-xs);
       font-weight: 500;
       text-decoration: line-through;
       white-space: nowrap;
   }

   .summary-original-total {
       margin-left: auto;
       margin-right: 0.5rem;
       font-size: var(--text-sm);
   }

   @media (max-width: 480px) {
       .card-body-pad {
           padding: 1rem;
       }
   }

   /* New checkout design for plan and register pages */
   body.checkout-auth-body {
       background-color: #f3f3f3;
       background-image: url('https://media.istockphoto.com/id/2154997143/vector/white-color-studio-neutral-background-vector-illustration.jpg?s=612x612&w=0&k=20&c=DpGe5mvX5qBHhh3ex-6DsZGgCm2Q_0ne-Fd_mJrkslI=');
       background-size: cover;
       background-position: top;
       background-repeat: no-repeat;
       zoom: 1;
   }

   body.checkout-auth-body .wrap {
       max-width: 30rem;
       width: 100%;
       margin: 0 auto;
       padding: 2.5rem 1rem;
       display: block;
       min-height: auto;
   }

   .checkout-design.step-card {
       max-width: 28rem;
       width: 100%;
       margin: 0 auto;
       overflow: hidden;
       border: 0;
       border-radius: 0;
       background: transparent;
       box-shadow: none;
       transition: all 0.3s;
       position: relative;
   }

   .checkout-design .step-header {
       padding: 1rem 1.25rem 0 !important;
       border: 0;
       background: transparent;
   }

   .checkout-design .header-content,
   .checkout-design .s2-header-content {
       display: flex;
       flex-direction: row-reverse;
       justify-content: flex-end;
       align-items: center;
       gap: 1rem;
       text-align: left;
       padding-bottom: 0.5rem !important;
   }

   .checkout-design .s2-header-content {
       flex-direction: row;
       justify-content: space-between;
       gap: 0.75rem;
   }

   .checkout-design .product-image {
       width: 6.25rem !important;
       height: auto !important;
       max-height: 6.25rem;
       border: 0 !important;
       border-radius: 0 !important;
       box-shadow: none !important;
       object-fit: contain;
   }

   .checkout-design .header-text-col {
       text-align: left;
   }

   .checkout-design .title-text {
       font-size: var(--text-base) !important;
       font-weight: 500 !important;
       letter-spacing: 0;
   }

   .checkout-design .sub-text {
       font-size: var(--text-sm) !important;
       color: #6b7280;
       max-width: 13.75rem;
       line-height: 1.4;
   }

   .checkout-design .card-body-pad {
       padding: 1.5rem;
   }

   .checkout-design .dynamic-btn {
       border-radius: 0.625rem;
       box-shadow: none;
   }

   .checkout-design .dynamic-btn.h-11 {
       height: 2.35rem;
       font-weight: 500;
   }

   .checkout-design .dynamic-btn.h-12 {
       height: 2.4rem;
       font-weight: 500;
       letter-spacing: 0;
   }

   .checkout-design .product-group {
       gap: 0.4rem;
   }

   .checkout-design .product-item {
       background: #ffffff;
       border-color: #ffffff;
       box-shadow:
           0 1px 1.75px 0 rgba(0, 0, 0, .12),
           0 -.5px 1.5px 0 rgba(0, 0, 0, .09),
           0 3px 4px 0 rgba(0, 0, 0, .03);
   }

   .checkout-design .product-radio:checked+.product-item {
       background-color: #ffffff;
       border-color: rgba(255, 255, 255, 0.3);
   }

   .checkout-design .product-radio:checked~.product-checkbox {
       background-color: var(--brand-bg);
       border: 0;
   }

   .checkout-design .product-checkbox iconify-icon {
       color: #000000;
   }

   .checkout-design .dynamic-badge {
       top: -0.575rem;
       border-color: #868585;
       background-color: #ffffff;
   }

   .checkout-design .prod-info {
       gap: 0.1rem;
   }

   .checkout-design .prod-desc {
       font-size: var(--text-xs);
   }

   .checkout-design .prod-price {
       font-size: var(--text-base);
       font-weight: 500;
   }

   .checkout-design .features-box,
   .checkout-design .plan-features-box {
       background: transparent;
       border: 0;
       box-shadow: none;
       border-radius: 0.75rem;
       padding: 0.1rem 0;
       margin-bottom: 1.5rem;
   }

   .checkout-design .features-title {
       font-weight: 700;
   }

   .checkout-design .input-field {
       background: #ffffff;
   }

   .checkout-design .payment-tabs {
       background: rgba(252, 252, 252, 0.4);
       padding: 0;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   }

   .checkout-design .payment-radio:checked+.payment-tab {
       border-left: 1px solid rgba(128, 128, 128, 0.16);
       border-right: 1px solid rgba(128, 128, 128, 0.16);
       background: #ffffff;
       box-shadow: none;
   }

   .checkout-design .footer-text {
       max-width: 18.75rem;
       margin: 1rem auto;
   }

   .checkout-design .back-btn {
       background: #e5e5e5;
       margin-left: 0;
   }

   @media (max-width: 480px) {
       body.checkout-auth-body .wrap {
           padding: 1rem 0.75rem;
       }

       .checkout-design.step-card {
           max-width: 100%;
       }

       .checkout-design .step-header {
           padding: 0.875rem 1rem 0 !important;
       }

       .checkout-design .card-body-pad {
           padding: 1rem;
       }

       .checkout-design .product-image {
           width: 5.5rem !important;
           max-height: 5.5rem;
       }
   }

   /* Same-to-same checkout clone overrides */
   body.checkout-auth-body {
       background-color: #f3f3f3 !important;
       background-image: url('https://media.istockphoto.com/id/2154997143/vector/white-color-studio-neutral-background-vector-illustration.jpg?s=612x612&w=0&k=20&c=DpGe5mvX5qBHhh3ex-6DsZGgCm2Q_0ne-Fd_mJrkslI=') !important;
       background-size: cover !important;
       background-position: top !important;
       background-repeat: no-repeat !important;
       display: flex;
       flex-direction: column;
       align-items: center;
       zoom: 1 !important;
   }

   body.checkout-auth-body .wrap {
       max-width: 30rem !important;
       width: 100% !important;
       min-height: auto !important;
       display: block !important;
       margin: 0 auto !important;
       padding: 2.5rem 1rem !important;
   }

   .card.step-card.checkout-design,
   .checkout-design.step-card {
       width: 100% !important;
       max-width: 28rem !important;
       margin: 0 auto !important;
       background: transparent !important;
       border: 0 !important;
       border-radius: 0 !important;
       box-shadow: none !important;
       overflow: hidden !important;
       transition: all 0.3s !important;
       position: relative !important;
   }

   .checkout-design .step-header,
   .checkout-design .hdr.step-header {
       padding: 1rem 1.25rem 0 !important;
       border: 0 !important;
       background: transparent !important;
   }

   .checkout-design .header-content,
   .checkout-design .s2-header-content {
       display: flex !important;
       flex-direction: row-reverse !important;
       justify-content: flex-end !important;
       align-items: center !important;
       gap: 1rem !important;
       text-align: left !important;
       padding-bottom: 0.5rem !important;
   }

   .checkout-design .s2-header-content {
       flex-direction: row !important;
       justify-content: space-between !important;
       gap: 0.75rem !important;
   }

   .checkout-design .product-image {
       width: 100px !important;
       height: 100% !important;
       max-height: none !important;
       flex-shrink: 0 !important;
       object-fit: cover !important;
       border: 0 !important;
       border-radius: 0 !important;
       box-shadow: none !important;
   }

   .checkout-design .card-body,
   .checkout-design .card-body-pad {
       padding: 1.5rem !important;
   }

   .checkout-design .section-title {
       font-size: var(--text-sm) !important;
       font-weight: 500 !important;
       margin-bottom: 0.75rem !important;
       color: #000000 !important;
       display: block !important;
       width: 100% !important;
   }

   .checkout-design .spots-text.error:empty {
       display: none !important;
       padding: 0 !important;
   }

   .checkout-design .register-payment-section {
       margin-top: 1rem !important;
       margin-bottom: 0.5rem !important;
   }

   .checkout-design .product-group {
       display: flex !important;
       flex-direction: column !important;
       gap: 0.4rem !important;
       margin-bottom: 0.5rem !important;
   }

   .checkout-design .product-label {
       position: relative !important;
       display: block !important;
       margin: 0.25rem 0 0.5rem !important;
       cursor: pointer !important;
   }

   .checkout-design .product-item {
       border: 2px solid #ffffff !important;
       background: #ffffff !important;
       padding: 0.625rem 0.625rem 0.625rem 2.375rem !important;
       border-radius: 0.75rem !important;
       box-shadow:
           0 1px 1.75px 0 rgba(0, 0, 0, .12),
           0 -.5px 1.5px 0 rgba(0, 0, 0, .09),
           0 3px 4px 0 rgba(0, 0, 0, .03) !important;
       transition: all 0.3s !important;
       display: flex !important;
       justify-content: space-between !important;
       align-items: center !important;
   }

   .checkout-design .product-item:hover {
       background: rgba(0, 0, 0, 0.02) !important;
   }

   .checkout-design .dynamic-badge {
       top: -0.575rem !important;
       right: 0.625rem !important;
       font-size: var(--text-xs) !important;
       padding: 0.125rem 0.5rem !important;
       border-radius: 0.25rem !important;
       font-weight: 500 !important;
       border: 1px dashed #868585 !important;
       background-color: #ffffff !important;
       color: var(--brand-text) !important;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
       letter-spacing: 0 !important;
       z-index: 10 !important;
       transform: scale(0.9) !important;
       transform-origin: top right !important;
   }

   .checkout-design .prod-info {
       display: flex !important;
       flex-direction: column !important;
       gap: 0.1rem !important;
   }

   .checkout-design .prod-title {
       font-size: var(--text-sm) !important;
       color: #000000 !important;
       font-weight: 500 !important;
   }

   .checkout-design .prod-desc {
       font-size: var(--text-xs) !important;
       color: #6b7280 !important;
   }

   .checkout-design .prod-price {
       font-size: var(--text-base) !important;
       font-weight: 500 !important;
       color: #000000 !important;
   }

   .checkout-design .product-radio:checked+.product-item {
       background-color: var(--accent-bg) !important;
       border-color: rgba(255, 255, 255, 0.3) !important;
   }

   .checkout-design .product-radio:checked~.product-checkbox {
       background-color: var(--brand-bg) !important;
       border: none !important;
   }

   .checkout-design .product-checkbox iconify-icon {
       color: #000000 !important;
       font-size: var(--text-lg) !important;
   }

   .checkout-design .plan-features-box,
   .checkout-design .features-box {
       background: transparent !important;
       border: 0 !important;
       box-shadow: none !important;
       padding: 0 !important;
       margin: 0.875rem 0 1.5rem !important;
   }

   .checkout-design .plan-features-header,
   .checkout-design .features-title {
       font-size: var(--text-sm) !important;
       font-weight: 600 !important;
       color: #000000 !important;
       margin: 0 0 0.75rem !important;
       letter-spacing: 0 !important;
   }

   .checkout-design .plan-features-grid,
   .checkout-design .features-list {
       display: grid !important;
       grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
       column-gap: 0.875rem !important;
       row-gap: 0.5rem !important;
   }

   .checkout-design .plan-feature-item,
   .checkout-design .feature-item {
       display: flex !important;
       align-items: center !important;
       gap: 0.375rem !important;
       background: transparent !important;
       border: 0 !important;
       box-shadow: none !important;
       padding: 0 !important;
       border-radius: 0 !important;
       color: #71717a !important;
       font-size: 0.68rem !important;
       line-height: 1.25 !important;
       font-weight: 500 !important;
   }

   .checkout-design .plan-feature-item iconify-icon,
   .checkout-design .feature-item iconify-icon,
   .checkout-design .feature-icon {
       color: #a1a1aa !important;
       font-size: 0.76rem !important;
       width: 0.76rem !important;
       min-width: 0.76rem !important;
       height: 0.76rem !important;
       margin: 0 !important;
   }

   .checkout-design .plan-feature-item span,
   .checkout-design .feature-item span {
       color: #71717a !important;
       font-size: 0.68rem !important;
       font-weight: 500 !important;
   }

   .checkout-design .plan-features-note {
       margin-top: 0.7rem !important;
       color: #a1a1aa !important;
       font-size: 0.62rem !important;
       line-height: 1.35 !important;
       letter-spacing: 0 !important;
   }

   .checkout-design .input-group,
   .checkout-design .input-group-box {
       display: flex !important;
       flex-direction: column !important;
       overflow: hidden !important;
       border: 1px solid rgba(0, 0, 0, 0.1) !important;
       border-radius: 0.5rem !important;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
   }

   .checkout-design .input-field {
       height: 2.5rem !important;
       background: #ffffff !important;
       font-size: var(--text-sm) !important;
   }

   .checkout-design .payment-header {
       display: flex !important;
       justify-content: space-between !important;
       margin-bottom: 0.75rem !important;
       flex-direction: column !important;
       gap: 0.75rem !important;
       align-content: center !important;
       align-items: center !important;
   }

   .checkout-design .payment-header .section-title {
       margin-bottom: 0 !important;
   }

   .checkout-design .payment-tabs {
       background: #fcfcfc66 !important;
       border-radius: 0.5rem !important;
       display: flex !important;
       gap: 0.25rem !important;
       width: 100% !important;
       justify-content: center !important;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
       border: 1px solid rgba(0, 0, 0, 0.1) !important;
       padding: 0 !important;
   }

   .checkout-design .payment-radio:checked+.payment-tab {
       border-right: 1px solid #80808029 !important;
       border-left: 1px solid #80808029 !important;
       background: #ffffff !important;
       color: #000000 !important;
       box-shadow: none !important;
   }

   .checkout-design .gateway-card-shell {
       min-height:100% !important;
       border-radius: 0.5rem !important;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
   }

   .checkout-design .dynamic-btn {
       border-radius: 10px !important;
       box-shadow: none !important;
       letter-spacing: 0 !important;
   }

   .checkout-design .dynamic-btn.h-11 {
       height: 2.35rem !important;
       font-size: var(--text-sm) !important;
       font-weight: 500 !important;
   }

   .checkout-design .dynamic-btn.h-12 {
       height: 2.4rem !important;
       font-size: var(--text-sm) !important;
       font-weight: 500 !important;
   }

   .checkout-design .footer-text {
       margin: 1rem auto !important;
       max-width: 300px !important;
       font-size: var(--text-xs) !important;
       line-height: 1.625 !important;
   }

   .checkout-design .text-micro,
   .checkout-design .input-hint,
   .checkout-design .trust-seals,
   .checkout-design .text-center.mt-2 {
       display: none !important;
   }

   @media (max-width: 480px) {
       body.checkout-auth-body .wrap {
           padding: 0 !important;
           max-width: 100% !important;
       }

       .card.step-card.checkout-design,
       .checkout-design.step-card {
           max-width: 100% !important;
           width: 100% !important;
       }

       .checkout-design .card-body,
       .checkout-design .card-body-pad {
           padding: 1.5rem !important;
       }

       .checkout-design .product-image {
           width: 100px !important;
           height: 100% !important;
       }

       .checkout-design .product-item {
           padding: 0.55rem 0.55rem 0.55rem 2.15rem !important;
           border-radius: 0.65rem !important;
       }

       .checkout-design .dynamic-btn.h-11 {
           height: 2.4rem !important;
       }

       .checkout-design .dynamic-btn.h-12 {
           height: 2.75rem !important;
       }
   }