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

:root {
    --area-gradient-base: var(--color-primary-50);
    --illustration-contour: var(--color-muted-900);
}

.dark {
    --area-gradient-base: var(--color-muted-900);
    --illustration-contour: var(--color-muted-600);
}

.apexcharts-text,
.apexcharts-datalabel-value,
.apexcharts-xaxis-label,
.apexcharts-yaxis-label,
.apexcharts-legend-text {
    @apply font-sans font-semibold text-muted-500 dark:text-muted-400 uppercase fill-current;
}

.apexcharts-gridline {
    @apply text-muted-200 dark:text-muted-900 stroke-current;
}

.apexcharts-bar-area {
    @apply text-white dark:text-muted-900 stroke-current fill-current;
}

.apexcharts-xaxis line,
.apexcharts-yaxis line {
    @apply text-muted-300 dark:text-muted-700 stroke-current;
}

.apexcharts-xaxis-tick,
.apexcharts-yaxis-tick {
    @apply text-muted-300 dark:text-muted-600 stroke-current;
}

.apexcharts-series-markers .apexcharts-marker,
.apexcharts-series-bubble .apexcharts-marker {
    @apply text-white dark:text-muted-900 stroke-current;
}

.apexcharts-pie-area,
.apexcharts-pie-slice-0 {
    @apply text-white dark:text-muted-900 stroke-current;
}

.apexcharts-slices .apexcharts-pie-label {
    @apply text-muted-50 fill-current;
}

.apexcharts-radialbar-track .apexcharts-radialbar-area,
.apexcharts-track .apexcharts-radialbar-area {
    @apply text-white dark:text-muted-900 stroke-current;
}

.apexcharts-radar-series > polygon,
.apexcharts-plot-series > polygon,
.apexcharts-radar-series > line,
.apexcharts-plot-series > line {
    @apply fill-transparent text-white dark:text-muted-900 stroke-current;
}

.apexcharts-tooltip {
    @apply shadow-xl shadow-muted-400/10 dark:shadow-none;
}

.apexcharts-tooltip.apexcharts-theme-light {
    @apply border border-muted-200 dark:border-muted-700 bg-white dark:bg-muted-800 text-muted-700 dark:text-muted-100;
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    @apply border-b border-muted-200 dark:border-muted-700 bg-white dark:bg-muted-800 text-muted-700 dark:text-muted-100;
}

.dark .apexcharts-xaxistooltip {
    @apply border border-muted-700 bg-muted-800 text-muted-100;
}

.dark .apexcharts-xaxistooltip.apexcharts-xaxistooltip-bottom::before {
    border-bottom-color: var(--color-muted-700);
}

.dark .apexcharts-xaxistooltip.apexcharts-xaxistooltip-bottom::after {
    border-bottom-color: var(--color-muted-800);
}

.dark .apexcharts-xaxistooltip.apexcharts-xaxistooltip-top::before {
    border-top-color: var(--color-muted-700);
}

.dark .apexcharts-xaxistooltip.apexcharts-xaxistooltip-top::after {
    border-top-color: var(--color-muted-800);
}

.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
    @apply hidden;
}

.swiper-box { @apply py-10 px-2; }

.swiper-button-prev,
.swiper-button-next { @apply top-6 h-8 w-8 flex items-center justify-center; }

.swiper-button-prev { @apply right-11; left: initial; }

.swiper-button-prev::after,
.swiper-button-next::after { @apply hidden; }

.tippy-box[data-animation='fade'][data-state='hidden'] {
    opacity: 0;
}

[data-tippy-root] {
    max-width: calc(100vw - 10px);
}

.tippy-box {
    @apply relative rounded font-heading text-xs leading-4 whitespace-normal text-white bg-muted-800 dark:bg-muted-700 outline-none transition-all;
}

.tippy-arrow {
    @apply w-4 h-4 text-muted-800 dark:text-muted-700 before:content-[''] before:absolute before:border-transparent before:border-solid;
}

.tippy-box[data-placement^='top'] > .tippy-arrow {
    @apply bottom-0;
}

.tippy-box[data-placement^='top'] > .tippy-arrow::before {
    bottom: -7px;
    left: 0;
    border-width: 8px 8px 0;
    border-top-color: initial;
    transform-origin: center top;
}

.tippy-box[data-placement^='bottom'] > .tippy-arrow {
    @apply top-0;
}

.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
    top: -7px;
    left: 0;
    border-width: 0 8px 8px;
    border-bottom-color: initial;
    transform-origin: center bottom;
}

.tippy-box[data-placement^='left'] > .tippy-arrow {
    @apply right-0;
}

.tippy-box[data-placement^='left'] > .tippy-arrow::before {
    border-width: 8px 0 8px 8px;
    border-left-color: initial;
    right: -7px;
    transform-origin: center left;
}

.tippy-box[data-placement^='right'] > .tippy-arrow {
    @apply left-0;
}

.tippy-box[data-placement^='right'] > .tippy-arrow::before {
    left: -7px;
    border-width: 8px 8px 8px 0;
    border-right-color: initial;
    transform-origin: center right;
}

.tippy-box[data-inertia][data-state='visible'] {
    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}

.tippy-content {
    @apply relative py-1.5 px-2.5 z-[1];
}

.gauge {
    @apply relative w-full overflow-hidden bg-current;

    border-radius: 50%/100% 100% 0 0;
}

.gauge::before {
    @apply block content-[''];

    padding-top: 50%;
}

.gauge .chart {
    @apply overflow-hidden;
}

.gauge .mask {
    @apply absolute bg-white dark:bg-muted-900 bottom-0;

    left: 20%;
    right: 20%;
    top: 40%;
    border-radius: 50%/100% 100% 0 0;
}

.gauge .percentage {
    @apply absolute bg-muted-100 dark:bg-muted-800 bottom-0 top-[-1px] left-[-1px] right-[-1px] transition-all duration-300;

    transform: rotate(var(--rotation));
    transform-origin: bottom center;
}

.gauge:hover {
    --rotation: 100deg;
}

.gauge .value {
    @apply absolute bottom-0 left-0 w-full text-center font-sans font-medium text-sm text-muted-500 dark:text-muted-200;
}

.gauge .min {
    @apply absolute bottom-0 left-[5%];
}

.gauge .max {
    @apply absolute bottom-0 right-[5%];
}

@layer utilities {
    [x-cloak] {
        display: none !important;
    }

    .button-loading {
        @apply relative text-transparent after:absolute after:h-5 after:w-5 after:rounded-full after:border-[0.20rem] after:border-slate-300 after:border-t-gray-100 after:opacity-90 after:animate-spin;
    }

    .click-blur * {
        @apply pointer-events-none;
    }

    .tw-accessibility {
        @apply outline-none focus-visible:outline-none focus-visible:outline-dashed focus-visible:outline-muted-300 dark:focus-visible:outline-muted-700 focus-visible:outline-offset-2;
    }

    .tw-accessibility-static {
        @apply outline-dashed outline-muted-300 dark:outline-muted-700 outline-offset-2;
    }
}

@layer components {
    #logo {
        width: 4rem;
        margin-top: 0.5rem;
    }
}
/* === Video background === */
.hero-video { position: absolute; inset: 0; overflow: hidden; }
.hero-video video {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center; display: block;
}

/* === Rotating text animation === */
.ap-rotate { display:inline-block; position:relative; will-change:transform,opacity; }
.ap-rotate.ap-in { animation: apFadeUp 700ms cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes apFadeUp {
    0% { opacity:0; transform:translateY(16%); filter:blur(2px); }
    100%{ opacity:1; transform:translateY(0);   filter:blur(0); }
}

/* === Dynamic rails / frame === */
#apHero{
    --stroke: 2px;        /* line thickness */
    --gap: 0px;           /* space between blue & red rails at bottom */
    --box-left: 0px;
    --box-width: 0px;
    --box-height: 0px;    /* card height (measured) */
    --frame-bottom: 0px;  /* distance from hero bottom to card bottom (measured) */
    --radius-top: 1rem;   /* match rounded-2xl */
    --collapse-extra: 2.5rem; /* EXTRA collapse after 5s (2–3rem as requested) */
}

/* BLUE info rail (bottom) */
#apHero .blue-line{
    position:absolute; left:0; right:0; bottom:0;
    height:var(--stroke);
    background-color: rgb(14 165 233); /* sky-500 fallback */
    filter: blur(2px); will-change: filter;
}

/* RED primary rail (bottom) – sits just above the blue rail */
#apHero .red-bottom-left{
    position:absolute; left:0; bottom:calc(var(--stroke)+var(--gap));
    height:var(--stroke); width:var(--box-left);
    background-color: rgb(220 38 38); /* red-600 fallback */
    filter: blur(2px); will-change: filter;
}
#apHero .red-bottom-right{
    position:absolute; left:calc(var(--box-left) + var(--box-width)); right:0;
    bottom:calc(var(--stroke)+var(--gap));
    height:var(--stroke);
    background-color: rgb(220 38 38);
    filter: blur(2px); will-change: filter;
}

#apHero .red-frame{
    position:absolute;
    left:var(--box-left);
    bottom:var(--frame-bottom);
    width:var(--box-width);
    height:var(--box-height);
    border:var(--stroke) solid rgb(220 38 38);
    border-bottom:none;
    border-top-left-radius:var(--radius-top);
    border-top-right-radius:var(--radius-top);
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    pointer-events:none;

    /* hide until JS has proper values */
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease;
}

/* Smooth collapse of the body block */
#apHeroBody {
    overflow: hidden;
    transition: opacity .6s ease, max-height .6s ease, margin-top .6s ease;
}

@media (prefers-reduced-motion: reduce){
    .ap-rotate{ animation:none !important; filter:none !important; }
    #apHeroBody { transition: none !important; }
}
@import url("https://rsms.me/inter/inter.css");
@tailwind base;
@tailwind components;
@tailwind utilities;
/*
Placeholder manifest file.
the installer will append this file to the app vendored assets here: 'vendor/assets/stylesheets/spree/frontend/all.css'
*/

.solidus-stripe-payment {
  padding: 1em 0;
}

[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* TEMP styles for the success/failure pages */
:root {
    color-scheme: light;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    color: #111;
}

.container {
    max-width: 720px;
    margin: 3rem auto;
    padding: 0 1rem;
}

.card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    background: #fff;
}

h1 {
    font-size: 1.5rem;
    margin: 0 0 0.5rem;
}

p {
    margin: 0.25rem 0;
}

a.button {
    display: inline-block;
    text-decoration: none;
    border: 1px solid #111;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    margin-top: 0.75rem;
}