@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-size: 10px;
    -webkit-text-size-adjust: 100%;
  }

  :root {
    /* Set root font-size to 10px so 1rem = 10px */
    font-size: 10px;

    /* ===== COLOR SYSTEM ===== */
    /* Brand Colors */
    --color-brand-primary: 144.6 94.4% 49.2%;
    /* #07F468 */
    --color-brand-dark: 221 40.7% 8%;
    /* #0C111D */

    /* Neutral Colors */
    --color-white: 0 0% 100%;
    /* #FFFFFF */
    --color-gray-50: 210 40% 98%;
    /* #F9FAFB */
    --color-gray-200: 214 32% 91%;
    /* #EAECF0 */
    --color-gray-600: 215 25% 27%;
    /* #475467 */
    --color-gray-950: 221 40.7% 8%;
    /* #0C111D */
    --color-black: 0 0% 0%;
    /* #000000 */

    /* ===== TYPOGRAPHY SYSTEM ===== */
    /* Font Families */
    --font-primary: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Font Sizes */
    --font-size-xs: 1.2rem;
    /* 12px */
    --font-size-sm: 1.4rem;
    /* 14px */
    --font-size-base: 1.6rem;
    /* 16px */
    --font-size-lg: 1.8rem;
    /* 18px */
    --font-size-xl: 2rem;
    /* 20px */
    --font-size-2xl: 2.4rem;
    /* 24px */

    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.625;

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ===== SPACING SYSTEM ===== */
    --space-0: 0;
    --space-1: 0.4rem;
    /* 4px */
    --space-2: 0.8rem;
    /* 8px */
    --space-3: 1.2rem;
    /* 12px */
    --space-4: 1.6rem;
    /* 16px */
    --space-5: 2rem;
    /* 20px */
    --space-6: 2.4rem;
    /* 24px */
    --space-7: 2.8rem;
    /* 28px */
    --space-8: 3.2rem;
    /* 32px */
    --space-10: 4rem;
    /* 40px */
    --space-12: 4.8rem;
    /* 48px */
    --space-14: 5.6rem;
    /* 56px */
    --space-16: 6.4rem;
    /* 64px */
    --space-18: 7.2rem;
    /* 72px */
    --space-20: 8rem;
    /* 80px */
    --space-24: 9.6rem;
    /* 96px */

    /* ===== COMPONENT TOKENS ===== */
    /* Buttons */
    --btn-padding-x: var(--space-4);
    --btn-padding-y: var(--space-2);
    --btn-padding-x-lg: var(--space-6);
    --btn-padding-y-lg: var(--space-3);
    --btn-radius: 5rem;
    /* 50px - pill shape */
    --btn-font-size: var(--font-size-base);
    --btn-font-weight: var(--font-weight-semibold);

    /* Cards & Panels */
    --card-radius: 1rem;
    /* 10px */
    --card-radius-sm: 0.6rem;
    /* 6px */
    --card-radius-xs: 0.4rem;
    /* 4px */
    --card-padding: var(--space-4);
    --card-padding-lg: var(--space-6);

    /* Icons */
    --icon-size-sm: 1.8rem;
    /* 18px */
    --icon-size-base: 2rem;
    /* 20px */
    --icon-size-md: 2.4rem;
    /* 24px */
    --icon-size-lg: 3.2rem;
    /* 32px */
    --icon-size-xl: 4rem;
    /* 40px */
    --icon-size-2xl: 6.8rem;
    /* 68px */

    /* Control Buttons */
    --control-size: 6.8rem;
    /* 68px */
    --control-radius: 50%;
    --control-padding: 0.4rem;
    /* 4px */

    /* Backdrop Effects */
    --backdrop-blur-sm: 1rem;
    /* 10px */
    --backdrop-blur-lg: 5rem;
    /* 50px */

    /* Shadows */
    --shadow-control: 0 0 0.8rem rgba(0, 0, 0, 0.25);
    --shadow-button: 0 0 1.5rem rgba(255, 255, 255, 0.05);
    --shadow-icon: 0 0 0.8rem rgba(0, 0, 0, 0.5);

    /* ===== RESPONSIVE BREAKPOINTS ===== */
    --breakpoint-sm: 30rem;
    /* 480px */
    --breakpoint-md: 48rem;
    /* 768px */
    --breakpoint-lg: 64rem;
    /* 1024px */
    --breakpoint-xl: 80rem;
    /* 1280px */
    --breakpoint-2xl: 96rem;
    /* 1536px */

    /* ===== LAYOUT TOKENS ===== */
    --container-max-width: 144rem;
    /* 1440px */
    --sidebar-width: 40rem;
    /* 400px */

    /* Legacy tokens for existing components */
    --background: var(--color-white);
    --foreground: var(--color-gray-950);
    --primary: var(--color-gray-950);
    --primary-foreground: var(--color-white);
    --border: var(--color-gray-200);
    --radius: var(--card-radius-sm);
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
  }

  button {
    font-family: var(--font-primary);
  }
}

/* put in your stylesheet once */
/* Smooth downfall: single animation handles both translate and rotate */
/* Fall (translate only) */
@keyframes giftFall {
  0% {
    transform: translate3d(0, -120%, 0);
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  100% {
    transform: translate3d(0, 120vh, 0);
    opacity: 0.92;
  }
}

/* Continuous rotation on the inner img */
@keyframes giftRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* wrapper gets the fall transform */
.gift-wrap {
  position: absolute;
  top: 0;
  pointer-events: none;
  will-change: transform, opacity;
  left: 0;
  /* we'll set left via JS */
}

/* inner img does the rotation only */
.gift-img {
  display: block;
  width: 80px;
  height: 80px;
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

[data-upsell-cards-count='1'] [data-sub-card-id] {
  width: 32.5rem;
}

#chat-messages [data-media-card-id],
#chat-messages [data-merch-card-id],
#chat-messages [data-sub-card-id] {
  display: none !important;
}

.payment-popup-open .bg--gd--payment-open {
  background: linear-gradient(180deg, rgba(16, 24, 40, 0.00) 35%, rgba(16, 24, 40, 0.85) 90%), linear-gradient(180deg, rgba(16, 24, 40, 0.00) 80.29%, rgba(16, 24, 40, 0.50) 100%) !important;
}

body.payment-popup-open #giftPanel {
  display: none !important;
}

@media screen and (max-width: 1365px) {
  .payment-popup-open .upsell--panel--block {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .tablet-upsell-bg {
    background:
      linear-gradient(0deg, rgba(24, 34, 48, 0.20) 0%, rgba(24, 34, 48, 0.20) 100%),
      rgba(255, 0, 102, 0.75);
  }

  [data-upsell-cards-count='1'] [data-creator-shared-media-tag-tablet-portrait] {
    display: flex;
    max-width: 20rem;
  }

  [data-upsell-cards-count='1'] [data-creator-shared-media-title] {
    max-width: 200px;
  }

  [data-upsell-cards-count='1'] [data-creator-shared-media-tag] {
    display: none;
  }

  [data-upsell-cards-count='1'] [data-creator-shared-media-wrapper] {
    flex-direction: column;
  }

  [data-upsell-cards-count='1'] [data-creator-shared-media-tag-container] {
    border: none;
    max-width: 20rem;
  }

  [data-upsell-cards-count="1"] [data-shared-media-icon] {
    align-items: flex-start;
  }

  [data-upsell-cards-count="1"] [data-shared-media-icon] span:nth-child(1) img {
    padding-top: .25rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {

  .mobile-info-popup-open .chat-option-popover {
    display: none;
  }

  /* #chat-messages [data-media-card-id],
  #chat-messages [data-merch-card-id],
  #chat-messages [data-sub-card-id] {
    display: none !important;
  } */

  .chat-sidebar-tablet-panel #chat-messages {
    max-height: calc(50vh - 150px) !important;
    max-height: calc(50dvh - 150px) !important;
    overflow-y: auto !important;
  }

  .chat-sidebar-tablet-panel {
    min-height: 280px !important;
    height: auto !important;
    max-height: 50vh !important;
    max-height: 50dvh !important;
    overflow: hidden !important;
  }
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
  .chat-sidebar-tablet-panel {
    min-height: 280px !important;
    height: auto !important;
    max-height: 100 !important;
    overflow: hidden !important;
  }

  [data-slide-in-panel-landscape] {
    animation: slideInFromRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }
}



@media screen and (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {
  .phone-device [data-collapse-mobile-landscape-style] {
    transition: max-width 0.3s ease-in-out;
  }

  .phone-device .mobile-info-popup-open [data-collapse-mobile-landscape-style],
  .phone-device.mobile-info-popup-open [data-collapse-mobile-landscape-style] {
    max-width: calc(100% - 300px);
  }

  .phone-device .add-settings-btn.mobile-info-popup-open [data-collapse-mobile-landscape-style],
  .phone-device.add-settings-btn.mobile-info-popup-open [data-collapse-mobile-landscape-style] {
    max-width: 100%;
  }

  .phone-device .mobile-info-popup-open .chat-option-popover,
  .phone-device.mobile-info-popup-open .chat-option-popover {
    display: none;
  }

  /* .phone-device #chat-messages [data-media-card-id],
  .phone-device #chat-messages [data-merch-card-id],
  .phone-device #chat-messages [data-sub-card-id] {
    display: none !important;
  } */

}

@media screen and (max-width: 767px) and (max-height: 500px) and (orientation: landscape) {
  [data-upsell-cards-count='1'] [data-creator-shared-media-tag] {
    display: flex;
  }

  .mobile-info-popup-open .chat-option-popover {
    display: none;
  }
}

@media (max-width: 489px) {
  [data-upsell-cards-count='1'] [data-creator-shared-media-tag] {
    display: flex;
  }

  [data-upsell-cards-count='1'] [data-sub-card-id] {
    width: 100%;
  }

  .mobile-info-popup-open .chat-option-popover {
    display: none;
  }
}

@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@media screen and (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {
  .phone-device [data-slide-in-panel] {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 300px !important;
    border-radius: 0 !important;
    border: none !important;
    z-index: 99999 !important;
    animation: slideInFromRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }
}