/* ============================================================
   Legal modal — clone of components/legal-modal.tsx
   Tailwind equivalencies noted inline.
   ============================================================ */

.legal-modal {
	position: fixed;
	inset: 0;
	z-index: 100;                                     /* z-[100] */
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;                                  /* p-2 */
}

.legal-modal[hidden] {
	display: none !important;
}

.legal-modal.is-open {
	display: flex;
}

@media (min-width: 768px) {
	.legal-modal {
		padding: 1.5rem;                              /* md:p-6 */
	}
}

/* --- Backdrop (dark brand color + heavy blur) ------------- */
.legal-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(25, 13, 54, 0.8);          /* bg-[#190d36]/80 */
	backdrop-filter: blur(24px);                       /* backdrop-blur-xl */
	-webkit-backdrop-filter: blur(24px);
	opacity: 0;
	transition: opacity 0.3s ease-out;
	cursor: pointer;
}

.legal-modal.is-open .legal-modal__backdrop {
	opacity: 1;
}

/* --- Panel ------------------------------------------------ */
.legal-modal__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 80rem;                                  /* max-w-7xl */
	height: 100%;                                      /* h-full */
	background-color: var(--ciclic-cream);             /* bg-[#fcfbed] */
	border-radius: 1.5rem;                             /* rounded-[1.5rem] */
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
	display: flex;
	flex-direction: column;

	opacity: 0;
	transform: translateY(20%) scale(0.98);
	transition:
		opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
	.legal-modal__panel {
		height: 92vh;                                  /* md:h-[92vh] */
		border-radius: 2.5rem;                         /* md:rounded-[2.5rem] */
	}
}

.legal-modal.is-open .legal-modal__panel {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* --- Header ---------------------------------------------- */
.legal-modal__header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem;                                   /* px-6 py-6 */
	border-bottom: 1px solid rgba(108, 136, 255, 0.1); /* border-[#6c88ff]/10 */
	background-color: var(--ciclic-cream);
}

@media (min-width: 768px) {
	.legal-modal__header {
		padding: 3rem 4rem;                            /* md:px-16 md:py-12 */
	}
}

.legal-modal__title {
	font-weight: 300;                                  /* font-light */
	color: var(--ciclic-dark);                         /* text-[#190d36] */
	letter-spacing: -0.025em;                          /* tracking-tight */
	line-height: 1.25;                                 /* leading-tight */
	margin: 0;
	font-size: 1.5rem;                                 /* text-2xl */
}

@media (min-width: 768px) {
	.legal-modal__title {
		font-size: 3rem;                               /* md:text-5xl */
	}
}

/* Note: the original uses `lg:text-60` too, but that class is not defined
   anywhere in the Next project — it's a dead class, so the title stays at
   3rem on lg and above. Keeping parity with the rendered result. */

/* --- Close button ---------------------------------------- */
.legal-modal__close {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem;                                  /* p-3 */
	border: 0;
	border-radius: 9999px;
	background: transparent;
	color: var(--ciclic-dark);
	cursor: pointer;
	transition: background-color 0.2s ease-out;
}

@media (min-width: 768px) {
	.legal-modal__close {
		padding: 1rem;                                 /* md:p-4 */
	}
}

.legal-modal__close:hover {
	background-color: rgba(108, 136, 255, 0.1);        /* hover:bg-[#6c88ff]/10 */
}

.legal-modal__close svg {
	width: 1.5rem;                                     /* w-6 */
	height: 1.5rem;                                    /* h-6 */
	transition: transform 0.3s ease-out;               /* duration-300 */
}

@media (min-width: 768px) {
	.legal-modal__close svg {
		width: 2rem;                                   /* md:w-8 */
		height: 2rem;                                  /* md:h-8 */
	}
}

.legal-modal__close:hover svg {
	transform: rotate(90deg);                          /* group-hover:rotate-90 */
}

/* --- Body (scrolling) ------------------------------------ */
.legal-modal__body {
	flex: 1;
	overflow-y: auto;
	padding: 2rem 1.5rem;                              /* px-6 py-8 */
	-webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
	.legal-modal__body {
		padding: 4rem;                                 /* md:px-16 md:py-16 */
	}
}

.legal-modal__inner {
	max-width: 64rem;                                  /* max-w-5xl */
	margin: 0 auto;
}

/* --- Content styling -------------------------------------- */
/* Note: the original renders the actual content inside a nested <div>
   with `text-base font-light leading-relaxed`. That nested div sets
   font-size to 1rem at ALL viewports, overriding the outer wrapper's
   `md:text-[1.25rem]`. We collapse that into this single class. */
.legal-modal__content {
	color: var(--ciclic-dark);                         /* text-[#190d36] */
	font-weight: 300;                                  /* font-light */
	font-size: 1rem;                                   /* text-base */
	line-height: 1.625;                                /* leading-relaxed */
	padding-bottom: 2.5rem;                            /* pb-10 */
}

/* Reset user-agent default margins on block children. Uses :where() so
   the descendant selectors have zero specificity and don't override the
   `space-y-6` rule below. Without :where(), `p { margin: 0 }` would beat
   `> * + *` and the vertical rhythm would break. */
.legal-modal__content :where(p, ul, ol, li, hr) {
	margin: 0;
}

/* Vertical rhythm between direct children — `space-y-6` (1.5rem) used by
   the inner content wrapper of each legal section in the original. */
.legal-modal__content > * + * {
	margin-top: 1.5rem;                                /* space-y-6 */
}

/* The first element should never carry a top margin (matches the original,
   where the first h2 in cookies has no `mt-10`). Higher specificity (0,2,0)
   than `.legal-modal__content h2` (0,1,1) so it wins. */
.legal-modal__content > :first-child {
	margin-top: 0;
}

/* --- Headings --------------------------------------------
   Tailwind's text-xl / text-2xl / text-3xl utilities also set an absolute
   line-height (rem). Keep them explicit in rem so spacing matches the
   original to the pixel — not a multiplier of the own font-size. */
.legal-modal__content h2 {
	font-weight: 400;                                  /* font-normal */
	font-size: 1.5rem;                                 /* text-2xl */
	line-height: 2rem;                                 /* text-2xl default */
	letter-spacing: 0;
	margin-top: 2.5rem;                                /* mt-10 */
	margin-bottom: 0;
	color: var(--ciclic-dark);
}

/* h2 variant used once in privacy for "Política de privacidad (Detallada)". */
.legal-modal__content h2.legal-h2--large {
	font-weight: 300;                                  /* font-light */
	font-size: 1.875rem;                               /* text-3xl */
	line-height: 2.25rem;                              /* text-3xl default */
	margin-top: 3rem;                                  /* mt-12 */
	margin-bottom: 2rem;                               /* mb-8 */
}

/* Default h3 — matches h2's size. In the privacy section the original uses
   h3 with text-2xl font-normal mt-10, so h3 visually equals h2 by default. */
.legal-modal__content h3 {
	font-weight: 400;                                  /* font-normal */
	font-size: 1.5rem;                                 /* text-2xl */
	line-height: 2rem;                                 /* text-2xl default */
	letter-spacing: 0;
	margin-top: 2.5rem;                                /* mt-10 */
	margin-bottom: 0;
	color: var(--ciclic-dark);
}

/* h3 variant used in cookies section (4.1) — smaller and closer. */
.legal-modal__content h3.legal-h3--small {
	font-size: 1.25rem;                                /* text-xl */
	line-height: 1.75rem;                              /* text-xl default */
	margin-top: 2rem;                                  /* mt-8 */
}

/* --- Paragraphs and links -------------------------------- */
.legal-modal__content a {
	color: var(--ciclic-dark);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: opacity 0.2s ease-out;
}

.legal-modal__content a:hover {
	opacity: 0.7;
}

.legal-modal__content strong {
	font-weight: 500;
}

/* --- Lists ----------------------------------------------- */
/* Default list style: bullets, indented — list-disc pl-8 space-y-1 */
.legal-modal__content ul,
.legal-modal__content ol {
	padding-left: 2rem;                                /* pl-8 */
	list-style: disc;
}

.legal-modal__content ol {
	list-style: decimal;
}

/* space-y-1 on list items (0.25rem gap). li + li gives specificity 0,1,2
   to beat the :where() reset (0,1,0). */
.legal-modal__content li + li {
	margin-top: 0.25rem;                               /* space-y-1 */
}

/* Plain list variant — no bullets, no indent (space-y-1 list-none pl-0).
   Used in aviso-legal's "Domicilio / Email / CIF / DPO" list. */
.legal-modal__content ul.legal-list--plain,
.legal-modal__content ol.legal-list--plain {
	list-style: none;
	padding-left: 0;
}

/* --- Horizontal rule ------------------------------------- */
.legal-modal__content hr {
	border: 0;
	border-top: 1px solid rgba(108, 136, 255, 0.1);    /* border-[#6c88ff]/10 */
	margin: 2.5rem 0;                                  /* my-10 */
}

/* --- Bottom fade gradient -------------------------------- */
.legal-modal__fade {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2.5rem;                                    /* h-10 */
	background: linear-gradient(to top, var(--ciclic-cream), transparent);
	pointer-events: none;
}

/* --- Body scroll lock helper ------------------------------ */
body.has-legal-modal-open {
	overflow: hidden;
}