/* Explain: Styles for radar animations, recipient pills, tool panels, and content formatting. */
@keyframes radar-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.animate-radar-spin {
    animation: radar-spin 4s linear infinite;
}

.radar-scanner {
    background: conic-gradient(
        from 0deg at 50% 50%, 
        rgba(110, 231, 183, 0) 0deg, 
        rgba(110, 231, 183, 0) 280deg, 
        rgba(110, 231, 183, 0.15) 340deg, 
        rgba(110, 231, 183, 0.75) 359deg, 
        rgba(110, 231, 183, 0) 360deg
    );
}

@keyframes radar-bip {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    3% { opacity: 1; transform: scale(1.2); }
    15% { opacity: 0; transform: scale(1); }
}

@keyframes radar-ring {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    3% { opacity: 0.8; transform: scale(1); }
    25% { opacity: 0; transform: scale(2.5); }
}

.animate-radar-bip {
    animation: radar-bip 4s infinite both;
}

/* Pulserende radar-blip: prikkerne i baggrunden holdes vedvarende synlige og
   "ånder" blødt, så de er tydelige hele tiden i stedet for kun et kort glimt. */
@keyframes radar-blip-pulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.25); }
}

.animate-radar-blip {
    animation: radar-blip-pulse 2.6s ease-in-out infinite both;
}

.animate-radar-ring {
    animation: radar-ring 4s infinite both;
}

.share-btn-copied {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

/* Modtager-valg i gaveberegneren */
.recipient-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.5rem;
    padding: 0.5rem 1.1rem;
    border-radius: 9999px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-color);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.recipient-pill:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.recipient-pill:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.recipient-pill.is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.28);
}

.recipient-pill .recipient-pill-check {
    display: none;
}

.recipient-pill.is-active .recipient-pill-check {
    display: inline-flex;
}

/* Valg mellem AI Gaveassistent og Budgetberegner. Kunden markerer den metode,
   de vil bruge med et flueben. Den valgte metode fremhæves tydeligt, og den
   anden lukkes automatisk, så der altid kun er ét åbent værktøj ad gangen. */
.tool-panel {
    transition: box-shadow .3s ease, border-color .3s ease;
}

.tool-panel-selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22), 0 22px 45px -26px rgba(16, 185, 129, 0.6);
}

.tool-panel-selected .tool-pick {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.02));
}

.tool-panel-selected .tool-pick-title {
    color: var(--primary-color);
}

.tool-panel-selected .tool-chevron {
    color: var(--primary-color);
}

/* "Valgt"-mærket vises kun på den aktive metode. */
.tool-selected-badge {
    display: none;
    align-items: center;
    gap: 0.25rem;
}

.tool-panel-selected .tool-selected-badge {
    display: inline-flex;
}

.tool-checkbox {
    --chkbg: var(--primary-color);
    --chkfg: #ffffff;
}

/* Renser indklistret indhold i produktbeskrivelser. Når man kopierer tekst
   ind fra en webshop, følger der ofte faste bredder og egne layouts med, som
   sprænger kortene. Her tvinges alt indhold ind i kortets bredde og stakkes
   lodret, så det flugter med resten af designet. */
.rich-content {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.rich-content *,
.rich-content *::before,
.rich-content *::after {
    box-sizing: border-box;
    max-width: 100% !important;
    width: auto !important;
    min-width: 0 !important;
    position: static !important;
    float: none !important;
    transform: none !important;
    font-family: inherit !important;
    background: transparent !important;
    background-image: none !important;
}

.rich-content img,
.rich-content video,
.rich-content iframe {
    max-width: 100% !important;
    height: auto !important;
}

.rich-content div,
.rich-content section,
.rich-content article,
.rich-content table,
.rich-content tbody,
.rich-content tr,
.rich-content td,
.rich-content th {
    display: block !important;
}

.rich-content table {
    width: 100% !important;
    table-layout: fixed;
}

.rich-content p,
.rich-content ul,
.rich-content ol {
    margin: 0 0 0.5rem;
}

.rich-content a {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Læsevenlig produktbeskrivelse på produktsiden: afsnit, lister og
   mellemrum får god luft, så selv lange beskrivelser er nemme at læse.
   Klassen bruges sammen med .rich-content, der renser indklistret indhold. */
.product-detail-description {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--text-muted);
}

.product-detail-description > *:first-child {
    margin-top: 0;
}

.product-detail-description p {
    margin: 0 0 1rem;
}

.product-detail-description p:last-child,
.product-detail-description ul:last-child,
.product-detail-description ol:last-child {
    margin-bottom: 0;
}

.product-detail-description h2,
.product-detail-description h3,
.product-detail-description h4 {
    margin: 1.5rem 0 0.75rem;
    color: var(--text-color);
    font-weight: 700;
    line-height: 1.3;
}

.product-detail-description h2 { font-size: 1.35rem; }
.product-detail-description h3 { font-size: 1.15rem; }
.product-detail-description h4 { font-size: 1.05rem; }

.product-detail-description ul,
.product-detail-description ol {
    margin: 0 0 1rem;
    padding-left: 1.35rem;
}

.product-detail-description ul { list-style: disc; }
.product-detail-description ol { list-style: decimal; }

.product-detail-description li {
    margin-bottom: 0.4rem;
}

.product-detail-description strong,
.product-detail-description b {
    color: var(--text-color);
    font-weight: 700;
}

.product-detail-description a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.product-detail-description img {
    margin: 0.75rem 0;
    border-radius: 0.75rem;
}

/* Klip beskrivelsen til ca. tre linjer i produktkortene, så kortene
   forbliver lige høje. */
.rich-content-clamp {
    display: block;
    max-height: 4.5rem;
    overflow: hidden;
}

/* Produktkort – delt, blød hover og et tydeligt tastaturfokus, så kortene
   føles levende og ens på forsiden, i shoppen, på kategorisiderne og i
   søgeresultaterne. */
.product-card {
    transition: box-shadow .3s ease, border-color .3s ease;
}

.product-card:hover,
.product-card:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 22px 45px -26px rgba(16, 185, 129, 0.55), 0 10px 24px -16px rgba(30, 41, 59, 0.22);
}

.product-card-media {
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.product-card:hover .product-card-media,
.product-card:focus-within .product-card-media {
    transform: scale(1.06);
}

.product-card-cta {
    transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
    box-shadow: 0 8px 18px -12px rgba(16, 185, 129, 0.55);
}

.product-card-cta:hover,
.product-card-cta:focus-visible {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 16px 28px -14px rgba(16, 185, 129, 0.75);
}

/* Tydeligt tastaturfokus på alle klikbare elementer i kortet. */
.product-card :is(a, button, input):focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 0.75rem;
}

/* Billedlinket fylder hele billedrammen – derfor et indvendigt fokusfelt,
   så ringen altid er synlig og ikke klippes af rammen. */
.product-card .product-card-media-link:focus-visible {
    outline: none;
    outline-offset: 0;
    box-shadow: inset 0 0 0 3px var(--primary-color);
}

@media (prefers-reduced-motion: reduce) {
    .product-card-media,
    .product-card-cta {
        transition: none;
    }

    .product-card:hover .product-card-media,
    .product-card:focus-within .product-card-media,
    .product-card-cta:hover,
    .product-card-cta:focus-visible {
        transform: none;
    }
}

/* Mærkedagskort på forsiden: rolige, bløde animationer. Kortene toner blødt
   ind, løfter sig let ved hover, og den næste begivenhed markeres tydeligt
   med en vedvarende grøn glød i stedet for et hårdt ring-lag. */
@keyframes occasion-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.occasion-card {
    animation: occasion-fade-in .5s ease both;
}

.occasion-card:hover {
    transform: translateY(-3px);
}

.occasion-card:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Næste begivenhed fremhæves roligt og tydeligt. */
.occasion-card.is-next {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color), 0 20px 38px -24px rgba(16, 185, 129, 0.7);
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0));
}

.occasion-card.is-next .card-date-label {
    background: var(--primary-color);
    color: #ffffff;
}

.occasion-card.is-next .card-date-label i {
    color: #ffffff;
}

@keyframes next-badge-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.12); opacity: 0.9; }
}

.next-badge {
    animation: next-badge-pulse 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .occasion-card,
    .next-badge {
        animation: none;
    }

    .occasion-card:hover {
        transform: none;
    }
}

/* Jule-stemning i hero-sektionen (vises kun, når jule-temaet er aktivt).
   En rolig lysguirlande langs toppen og snefnug, der daler stille ned –
   afdæmpet nok til, at det skaber julestemning uden at det bliver for meget. */
.ga-xmas-light {
    display: inline-flex;
    font-size: 0.8rem;
    line-height: 1;
    animation: ga-xmas-twinkle 2.2s ease-in-out infinite;
    filter: drop-shadow(0 0 6px currentColor);
}

@keyframes ga-xmas-twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.ga-snowflake {
    position: absolute;
    top: -5vh;
    color: #ffffff;
    line-height: 1;
    pointer-events: none;
    animation-name: ga-snow-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

@keyframes ga-snow-fall {
    0% { transform: translate3d(0, -5vh, 0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translate3d(var(--ga-snow-drift, 0), 110vh, 0) rotate(360deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ga-xmas-light,
    .ga-snowflake {
        animation: none;
    }

    .ga-snowflake {
        display: none;
    }
}

/* Radar: tydelige signallys, der lyser op i takt med det roterende sweep.
   Hvert punkt placeres ud fra sin vinkel omkring radarens midte, og dets blink
   forskydes med samme vinkel, så det tænder præcis når radarstrålen (som bruger
   4 sekunder på en hel omgang) rammer netop den position. */
.radar-blip {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    transform: rotate(calc(var(--blip-angle, 0) * 1deg)) translateY(calc(var(--blip-radius, 300px) * -1));
}

.radar-blip-dot {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: var(--blip-size, 12px);
    height: var(--blip-size, 12px);
    border-radius: 9999px;
    background: var(--blip-color, #ffffff);
    box-shadow: 0 0 10px 3px var(--blip-color, #ffffff), 0 0 26px 8px rgba(255, 255, 255, 0.55);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    animation: radar-blip-sync 4s linear infinite both;
    animation-delay: calc(var(--blip-angle, 0) * 1s / 90);
    will-change: opacity, transform;
}

/* Jule-varianten: i stedet for en prik vises et ikon med en lysende gløde. */
.radar-blip-dot.is-icon {
    width: auto;
    height: auto;
    background: transparent;
    box-shadow: none;
    color: #ffffff;
    font-size: var(--blip-size, 24px);
    line-height: 1;
    filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 16px rgba(110, 231, 183, 0.75));
}

@keyframes radar-blip-sync {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    5%   { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
    26%  { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
    .radar-blip-dot {
        animation: none;
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(1);
    }
}