/* ========================= */
/* PREMIUM HERO REDESIGN */
/* ========================= */

.hero {
  padding: 48px 0 32px;
  overflow: hidden;
  position: relative;
}

.hero-container {
  display: grid;
  gap: 48px;
  align-items: center;
}

.hero-content {
  max-width: 620px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(42px, 7vw, 72px);
  line-height: .98;
  letter-spacing: -2px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 20px;
}

.hero-title span {
  color: var(--purple);
  display: block;
}

.hero-sub {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 560px;
  margin-bottom: 28px;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.hero-stat strong {
  display: block;
  font-size: 24px;
  font-family: var(--font-display);
  color: var(--text);
}

.hero-stat span {
  font-size: 13px;
  color: var(--text-3);
}

/* HERO IMAGE BUNDLE */
/* ========================= */

.hero-visual {
  position: relative;
}

/* MAIN IMAGE */

.bundle-main {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.12);
}

.bundle-main-img {
  width: 100%;
  height: clamp(320px, 38vw, 460px);
  object-fit: cover;
  display: block;
}


/* DARK OVERLAY */

.bundle-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.75),
      rgba(0,0,0,.15),
      transparent
    );

  padding: 32px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.bundle-badge {
  width: fit-content;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15);
  color: white;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 16px;
}

.bundle-title {
  font-size: 36px;
  line-height: 1.05;
  color: white;
  font-weight: 800;
  margin-bottom: 12px;
  font-family: var(--font-display);
}

.bundle-meta {
  color: rgba(255,255,255,.75);
  margin-bottom: 20px;
  font-size: 14px;
}

.bundle-price {
  font-size: 42px;
  color: white;
  font-weight: 800;
  font-family: var(--font-display);
}

/* PREVIEW IMAGES */

.bundle-previews {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
  margin-top: 18px;
}

.bundle-preview-card {
  border-radius: 20px;
  overflow: hidden;
  background: white;
  box-shadow:
    0 10px 30px rgba(0,0,0,.08);
  transition: .25s ease;
}

.bundle-preview-card:hover {
  transform: translateY(-4px);
}

.bundle-preview-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}

/* DESKTOP */

@media (min-width: 992px) {

  .hero-container {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
  }

}

/* MOBILE */

@media (max-width: 991px) {

  .bundle-main-img {
    height: 420px;
  }

  .bundle-title {
    font-size: 28px;
  }

  .bundle-price {
    font-size: 34px;
  }

}

/* SMALL MOBILE */

@media (max-width: 576px) {

  .bundle-previews {
    grid-template-columns: repeat(2,1fr);
  }

  .bundle-main-img {
    height: 360px;
  }

  .bundle-overlay {
    padding: 22px;
  }

}


.ti-icon {
  position: relative;

  width: 62px;
  height: 62px;

  border-radius: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(135deg,
      rgba(124,58,237,.12),
      rgba(236,72,153,.08));

  border: 1px solid rgba(255,255,255,.5);

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.6),
    0 12px 28px rgba(124,58,237,.08);

  overflow: hidden;
}

.ti-icon::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(135deg,
      rgba(255,255,255,.35),
      transparent 60%);
}

.ti-icon i {
  position: relative;
  z-index: 2;

  font-size: 28px;
  line-height: 1;

  color: var(--text);
}

.trust-item:hover .ti-icon {
  transform: translateY(-2px);
  transition: all .25s ease;

  box-shadow:
    0 16px 32px rgba(124,58,237,.12);
}

/* =========================================
   ICON POLISH
========================================= */

.fc-category,
.fc-badge,
.fc-creator-sub,
.fc-inline-meta span,
.fc-thumb-rating,
.fc-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fc-category i,
.fc-badge i,
.fc-inline-meta i,
.fc-creator-sub i,
.fc-btn-primary i,
.fc-thumb-rating i {
  line-height: 1;
}

.fc-btn-primary i {
  font-size: 18px;
}

.fc-thumb-rating i {
  color: #F59E0B;
}

.verified i {
  color: #7C3AED;
  font-size: 16px;
}

/* cleaner badge appearance */

.fc-badge {
  padding: 8px 12px;
}

.fc-category {
  padding: 8px 14px;
}

/* subtle premium polish */

.fc-inline-meta span {
  opacity: .9;
}

.fc-inline-meta i {
  font-size: 15px;
}

/* =========================================
   REELS SHOWCASE
========================================= */

.reels-section {
  position: relative;
  padding: 72px 0;
  overflow: hidden;
}

/* ambient glow */

.reels-bg {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  pointer-events: none;
  opacity: .4;
}

.reels-bg-1 {
  width: 260px;
  height: 260px;
  background: rgba(124,58,237,.08);
  top: -80px;
  left: -80px;
}

.reels-bg-2 {
  width: 220px;
  height: 220px;
  background: rgba(236,72,153,.06);
  right: -50px;
  bottom: -50px;
}

/* =========================================
   HEADER
========================================= */

.reels-header {
  margin-bottom: 28px;
  align-items: flex-end;
}

.reels-sub {
  margin-top: 8px;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.7;
}

/* =========================================
   SCROLL
========================================= */

.reels-scroll {
  display: flex;
  gap: 22px;

  overflow-x: auto;
  overflow-y: visible;

  padding: 10px 16px 20px;

  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
}

.reels-scroll::-webkit-scrollbar {
  display: none;
}

/* =========================================
   CARD
========================================= */

.reel-card {
  width: 340px;
  flex-shrink: 0;

  scroll-snap-align: start;
}

.reel-video-wrap {
  position: relative;

  height: 620px;

  border-radius: 34px;

  overflow: hidden;

  background: #111827;

  box-shadow:
    0 24px 70px rgba(15,23,42,.12);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.reel-card:hover .reel-video-wrap {
  transform: translateY(-8px);

  box-shadow:
    0 34px 90px rgba(15,23,42,.16),
    0 10px 30px rgba(124,58,237,.10);
}

/* =========================================
   VIDEO
========================================= */

.reel-video {
  width: 100%;
  height: 100%;

  object-fit: cover;
  display: block;
}

/* overlay */

.reel-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(to top,
      rgba(0,0,0,.82) 0%,
      rgba(0,0,0,.25) 38%,
      rgba(0,0,0,.08) 100%);
}

/* =========================================
   PROGRESS
========================================= */

.reel-progress {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;

  height: 4px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.18);

  overflow: hidden;

  z-index: 3;
}

.reel-progress span {
  display: block;

  width: 35%;
  height: 100%;

  border-radius: inherit;

  background: #fff;
}

/* =========================================
   TOP
========================================= */

.reel-top {
  position: absolute;
  top: 28px;
  left: 18px;
  right: 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  z-index: 4;
}

.reel-views {
  height: 34px;
  padding: 0 14px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.14);

  backdrop-filter: blur(14px);

  color: #fff;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  font-size: 12px;
  font-weight: 700;
}

.reel-sound-btn {
  width: 38px;
  height: 38px;

  border-radius: 50%;

  border: none;

  background:
    rgba(255,255,255,.14);

  backdrop-filter: blur(14px);

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;

  cursor: pointer;
}

/* =========================================
   PLAY BUTTON
========================================= */

.reel-play-btn {
  position: absolute;
  inset: 50% auto auto 50%;

  transform: translate(-50%,-50%);

  width: 74px;
  height: 74px;

  border-radius: 50%;

  border: none;

  background:
    rgba(255,255,255,.16);

  backdrop-filter: blur(18px);

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 34px;

  z-index: 5;

  cursor: pointer;

  transition:
    transform .25s ease,
    background .25s ease;
}

.reel-play-btn:hover {
  transform:
    translate(-50%,-50%)
    scale(1.05);
}

/* =========================================
   CONTENT
========================================= */

.reel-content {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;

  z-index: 4;
}

/* creator */

.reel-creator {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 16px;
}

.reel-avatar {
  width: 54px;
  height: 54px;

  border-radius: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
  font-weight: 800;
  color: #fff;

  box-shadow:
    0 12px 26px rgba(0,0,0,.18);
}

.reel-name-row {
  display: flex;
  align-items: center;
  gap: 5px;

  margin-bottom: 3px;
}

.reel-name {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.reel-verified {
  color: #8B5CF6;
  font-size: 15px;
}

.reel-role {
  color: rgba(255,255,255,.72);
  font-size: 12px;
}

/* title */

.reel-product-title {
  color: #fff;

  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;

  letter-spacing: -.8px;

  margin-bottom: 10px;
}

/* caption */

.reel-caption {
  color: rgba(255,255,255,.82);

  font-size: 14px;
  line-height: 1.7;

  margin-bottom: 20px;
}

/* bottom */

.reel-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

/* price */

.reel-price {
  color: #fff;

  font-size: 28px;
  font-weight: 900;

  margin-bottom: 4px;
}

.reel-rating {
  display: flex;
  align-items: center;
  gap: 6px;

  color: rgba(255,255,255,.78);

  font-size: 13px;
}

.reel-rating i {
  color: #F59E0B;
}

/* CTA */

.reel-cta {
  height: 48px;
  padding: 0 18px;

  border-radius: 16px;

  border: none;

  background:
    linear-gradient(135deg,#7C3AED,#8B5CF6);

  color: #fff;

  font-size: 14px;
  font-weight: 700;

  cursor: pointer;

  box-shadow:
    0 12px 28px rgba(124,58,237,.24);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.reel-cta:hover {
  transform: translateY(-2px);
}

/* =========================================
   DESKTOP
========================================= */

@media (min-width: 1400px) {

  .reels-scroll {
    justify-content: center;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

  .reels-section {
    padding: 52px 0;
  }

  .reels-sub {
    font-size: 14px;
  }

  .reels-scroll {
    gap: 16px;
  }

  .reel-card {
    width: 280px;
  }

  .reel-video-wrap {
    height: 520px;
    border-radius: 28px;
  }

  .reel-product-title {
    font-size: 21px;
  }

  .reel-price {
    font-size: 24px;
  }

  .reel-cta {
    height: 44px;
    padding: 0 16px;
  }
}

/* =========================================
   OVERLAY
========================================= */

.modal-overlay {
  position: fixed;
  inset: 0;

  background:
    rgba(15,23,42,.42);

  backdrop-filter: blur(10px);

  z-index: 9999;

  display: none;
  align-items: flex-end;
  justify-content: center;

  padding: 0;
}

/* =========================================
   MODAL
========================================= */

.checkout-modal {
  width: 100%;
  max-width: 520px;

  background:
    linear-gradient(to bottom right,
      rgba(255,255,255,.98),
      rgba(255,255,255,.94));

  border-radius: 32px 32px 0 0;

  box-shadow:
    0 -10px 50px rgba(15,23,42,.14);

  padding: 14px 18px 22px;

  animation:
    cartUp .28s ease;

  max-height: 82vh;
  overflow-y: auto;
}

@keyframes cartUp {

  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }

}

/* =========================================
   HANDLE
========================================= */

.modal-handle {
  width: 60px;
  height: 5px;

  border-radius: 999px;

  background:
    rgba(124,58,237,.22);

  margin: 0 auto 18px;
}

/* =========================================
   HEADER
========================================= */

.modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 18px;
}

.modal-title {
  font-size: 20px;
  font-weight: 800;

  letter-spacing: -.4px;

  color: var(--text);
}

.cart-count {
  font-size: 12px;
  color: var(--text-3);

  margin-top: 4px;
}

/* =========================================
   CART ITEM
.cart-item{
  display:flex;
  gap:12px;

  padding:12px;

  border-radius:20px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.015)
    );

  border:
    1px solid rgba(255,255,255,.06);

  margin-bottom:12px;

  transition:.25s ease;
}

.cart-item:hover{
  transform:translateY(-2px);

  border-color:
    rgba(255,255,255,.1);
}

/* =========================================
   THUMB
========================================= */

.cart-thumb{
  width:72px;
  height:72px;

  border-radius:16px;

  overflow:hidden;

  flex-shrink:0;

  background:#1b1b1d;
}

.cart-thumb img{
  width:100%;
  height:100%;

  object-fit:cover;
}

/* =========================================
   CONTENT
========================================= */

.cart-content{
  flex:1;

  display:flex;
  flex-direction:column;

  justify-content:space-between;

  gap:10px;

  min-width:0;
}

/* =========================================
   TOP
========================================= */

.cart-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  gap:10px;
}

.cart-item-title{
  color:#fff;

  font-size:14px;
  font-weight:700;

  line-height:1.35;

  margin-bottom:4px;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;

  overflow:hidden;
}

.cart-item-creator{
  display:flex;
  align-items:center;
  gap:5px;

  color:#8b8b95;

  font-size:12px;
  font-weight:500;
}

.cart-item-creator i{
  color:#22c55e;
}

/* =========================================
   REMOVE BUTTON
========================================= */

.cart-remove{
  width:32px;
  height:32px;

  border:none;
  border-radius:10px;

  background:#1b1b1d;

  color:#a1a1aa;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  font-size:16px;

  transition:.2s ease;

  flex-shrink:0;
}

.cart-remove:hover{
  background:#ff3b30;
  color:#fff;
}

/* =========================================
   BOTTOM
========================================= */

.cart-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;
}

/* =========================================
   QUANTITY
========================================= */

.qty-box{
  display:flex;
  align-items:center;

  gap:6px;

  padding:4px;

  background:#18181b;

  border-radius:12px;
}

.qty-btn{
  width:28px;
  height:28px;

  border:none;
  border-radius:8px;

  background:#27272a;

  color:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  font-size:14px;

  transition:.2s ease;
}

.qty-btn:hover{
  background:#323238;
}

.qty-value{
  min-width:20px;

  text-align:center;

  color:#fff;

  font-size:13px;
  font-weight:700;
}

/* =========================================
   PRICE
========================================= */

.cart-price-wrap{
  text-align:right;
}

.cart-old-price{
  color:#6b7280;

  font-size:11px;

  text-decoration:line-through;

  margin-bottom:2px;
}

.cart-item-price{
  color:#fff;

  font-size:17px;
  font-weight:800;
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:600px){

  .cart-item{
    padding:10px;
    border-radius:18px;
  }

  .cart-thumb{
    width:64px;
    height:64px;
  }

  .cart-item-title{
    font-size:13px;
  }

  .cart-item-price{
    font-size:16px;
  }

}

/* =========================================
   SUMMARY
========================================= */

.checkout-summary {
  margin-top: 18px;

  padding-top: 16px;

  border-top:
    1px solid rgba(15,23,42,.06);
}

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

  margin-bottom: 10px;

  font-size: 14px;
  color: var(--text-2);
}

.summary-row.total {
  margin-top: 14px;

  font-size: 18px;
  font-weight: 800;

  color: var(--text);
}

/* =========================================
   CTA
========================================= */

.checkout-footer {
  position: sticky;
  bottom: -22px;

  background:
    linear-gradient(to top,
      rgba(255,255,255,.98),
      rgba(255,255,255,.88));

  padding-top: 16px;
}

.btn-checkout {
  width: 100%;
  height: 56px;

  border: none;

  border-radius: 18px;

  background:
    linear-gradient(135deg,#7C3AED,#8B5CF6);

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 20px;

  font-size: 15px;
  font-weight: 800;

  cursor: pointer;

  box-shadow:
    0 14px 34px rgba(124,58,237,.22);

  transition:
    transform .2s ease;
}

.btn-checkout:hover {
  transform: translateY(-2px);
}

.checkout-note {
  margin-top: 10px;

  text-align: center;

  font-size: 11px;
  color: var(--text-3);
}

#cartEmptyState{
  display:none;
  flex-direction:column;
}

/* =========================================
   CHECKOUT HEADER
========================================= */

.checkout-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-bottom:18px;
  margin-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* =========================================
   TITLE
========================================= */

.modal-title{
  color:#000;
  font-size:28px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-0.5px;
  margin-bottom:6px;
}

/* =========================================
   SUBTITLE
========================================= */

.checkout-sub{
  color:#9ca3af;
  font-size:14px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.2px;
}

/* =========================================
   CLOSE BUTTON
========================================= */

.checkout-close{
  width:42px;
  height:42px;
  border:none;
  border-radius:14px;
  background:#171717;
  color:#bdbdbd;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  transition:.25s ease;
  flex-shrink:0;
}

.checkout-close:hover{
  background:#ff3b30;
  color:#ffffff;
  transform:rotate(90deg);
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:600px){

  .modal-title{
    font-size:24px;
  }

  .checkout-sub{
    font-size:13px;
  }

  .checkout-close{
    width:38px;
    height:38px;
    border-radius:12px;
  }

}

/* =========================================
   CHECKOUT FOOTER
========================================= */

.checkout-footer{
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.06);
}

/* =========================================
   CHECKOUT BUTTON
========================================= */

.btn-checkout{
  width:100%;
  border:none;
  outline:none;
  cursor:pointer;
  position:relative;
  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:18px 22px;
  border-radius:20px;

  background:linear-gradient(
    135deg,
    #7c3aed,
    #5b21b6
  );

  color:#fff;

  transition:.25s ease;

  box-shadow:
    0 10px 30px rgba(124,58,237,.35);

  isolation:isolate;
}

/* hover */

.btn-checkout:hover{
  transform:translateY(-2px);
  box-shadow:
    0 16px 40px rgba(124,58,237,.45);
}

/* click */

.btn-checkout:active{
  transform:scale(.97);
}

/* shine animation */

.btn-checkout::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:70%;
  height:100%;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.22),
    transparent
  );

  transform:skewX(-20deg);

  transition:.7s ease;
}

.btn-checkout:hover::before{
  left:150%;
}

/* ripple effect */

.btn-checkout::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;

  background:rgba(255,255,255,.12);

  opacity:0;
  transform:scale(.6);

  transition:
    transform .35s ease,
    opacity .35s ease;
}

.btn-checkout:active::after{
  opacity:1;
  transform:scale(1.2);
}

/* =========================================
   LEFT CONTENT
========================================= */

.btn-left{
  display:flex;
  align-items:center;
  gap:10px;

  font-size:15px;
  font-weight:700;
  letter-spacing:.2px;
}

.btn-left i{
  font-size:18px;
}

/* =========================================
   PRICE
========================================= */

#checkoutBtnPrice{
  font-size:18px;
  font-weight:800;
  letter-spacing:-.3px;
}

/* =========================================
   LOADING STATE
========================================= */

.btn-checkout.loading{
  pointer-events:none;
  opacity:.9;
}

.btn-checkout.loading .btn-left i{
  animation:spin .8s linear infinite;
}

@keyframes spin{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:600px){

  .btn-checkout{
    padding:16px 18px;
    border-radius:18px;
  }

  .btn-left{
    font-size:14px;
  }

  #checkoutBtnPrice{
    font-size:17px;
  }

}
/* =========================================
   INLINE FIELDS
========================================= */

.checkout-inline-fields{
  display:flex;
  flex-direction:column;

  gap:12px;

  margin-bottom:20px;
}

/* =========================================
   COMPACT INPUT
========================================= */

.compact-input{
  height:52px;

  display:flex;
  align-items:center;
  gap:12px;

  padding:0 16px;

  border-radius:16px;

  background:#18181b;

  border:
    1px solid rgba(255,255,255,.06);

  transition:.25s ease;
}

.compact-input:focus-within{
  border-color:#7c3aed;

  box-shadow:
    0 0 0 4px rgba(124,58,237,.12);
}

/* icon */

.compact-input i{
  color:#8b8b95;

  font-size:18px;
}

/* input */

.compact-input input{
  flex:1;

  background:none;
  border:none;
  outline:none;

  color:#fff;

  font-size:14px;
  font-weight:500;
}

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

/* =========================================
   MINIMAL TOTAL
========================================= */

.checkout-total{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding-top:18px;
  margin-top:10px;

  border-top:
    1px solid rgba(255,255,255,.06);

  color:#fff;
}

.checkout-total span{
  font-size:14px;

  color:#a1a1aa;
}

.checkout-total strong{
  font-size:24px;
  font-weight:800;

  letter-spacing:-.5px;
}

.ri-spin{
  animation:spin 1s linear infinite;
}

@keyframes spin{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}