/* Base Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif; 
}

:root {
    --official-blue: #003595;
}

/* --- 2. Global Typography (The "Top" of your file) --- */
h1 {
    font-family: var(--heading-font);
    font-size: clamp(1.07rem, 8vw, 1.13rem); /* The Big Boss */
    line-height: 1.1;
    font-weight: 600;
    padding-bottom: 0.25rem;
}

h2 {
    font-size: clamp(0.96rem, 5vw, 1.03rem);
    font-weight: 500;
}

body {
    background: white;
    font-size: 0.93rem;
    color: #0F172A; /* slate 900 */

    margin: 0;
    display: flex;
    
    min-height: 100vh; /* Ensures the page is always full-screen height */
    
}

.official-blue {
    color: #003595;
}
    
.content-wrapper {
    margin-top: 0.025rem;
    margin-right: 1.5rem;
    margin-left: 1.5rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;

    flex: 1;
    display: flex;
    flex-direction: column;

}

.lang {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* Container for the switcher */
.lang-switcher {
    position: absolute;
    top: 10px;
    right: 15px;
    display: flex;
    align-items: center;
    gap: 5px; /* Spacing between icon and text */
    font-family: 'Inter', sans-serif; /* Clean, modern font */
    font-size: 14px;
    color: #000; /* Solid black */
}

/* The Globe Icon */
.globe-icon {
    filter: grayscale(100%) brightness(0.4); /* Ensures any emoji/icon stays B/W */
    font-size: 16px;
    margin-right: 4px;
}

/* The Links */
.lang-link {
    text-decoration: none;
    color: #888; /* Inactive is grey */
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.lang-link:hover {
    color: #000; /* Turns black on hover */
}

.lang-link.active {
    color: #000; /* Active language is solid black */
    font-weight: 700;
}

.divider {
    color: #ccc;
    user-select: none; /* Prevents selecting the | when copying text */
}

@media (min-width: 834px) {

        .content-wrapper { 
            max-width: 100vw; /* Hard limit to the Viewport Width */
            padding: 1.5rem 10rem 0 7.5rem;   /* Creates that empty space on the sides */
            overflow-x: hidden; /* Safety net to kill the scrollbar */
            position: relative;
           
        }

        .lang {
            top: 1.5rem;
            right: 10rem;
        }
    }


.tab-content { 
    display: none;
    flex: 1;
    flex-direction: column;
    border-top: 1px solid #CBD5E1; 
    margin-top: -1px; /* what makes the difference */
}

.tab-content.active { 
    display: flex;
    flex-direction: column; 
    z-index: 10;
}


.paste-box-area {padding-top: 2rem;
   
}

.active-tab-btn {
    margin-top: 2px;
    border-bottom: 3px solid #0F172A;
    color: #0F172A;
}
    @keyframes slideDownAttached {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
    }
    .animate-slide-down {
    animation: slideDownAttached 0.3s ease-out forwards;
    }

/* header start */

.logo-wrapper {
    margin-top: 2rem;
}

h1.logo {
    display: flex;
    align-items: baseline;     /* items-baseline */
    gap: 1rem;                 /* gap-4 → 16px */
    margin-bottom: 0.75rem;    /* mb-3 → 12px */
    margin-top: 2rem;
    font-family: "Plus Jakarta Sans", sans-serif; /* font-jakarta */
    font-size: clamp(3.5rem, 1vw + 0.4rem, 4rem);
    font-weight: 700;          /* font-bold */
    letter-spacing: -0.025em;  /* tracking-tighter */
    color: #003595;     /* text-ber-blue (custom color) */
}

.tagline-wrap {
    display: flex;              /* flex */
    flex-direction: column;     /* flex-col */
    justify-content: space-between; /* justify-between */
    gap: 1.5rem;                /* gap-6 → 24px */
    
}

.tagline-text, .libtag-wrap p {
    font-size: clamp(0.8rem, 1vw + 0.4rem, 0.8125rem);
}



/* md breakpoint (Tailwind default = 768px) */
@media (min-width: 640px) {

    h1.logo {
        font-size: clamp(3.5rem, 1vw + 0.4rem, 4rem);
    }

    .content-wrapper {
        padding-top: 1.5rem;    
    }


    .tagline-wrap {
        flex-direction: row;     /* ← change this */
        align-items: center;     /* optional, makes it cleaner */
    }

    .libtag-wrap {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    }
    

    }



.library-text, .skincare-text {
    font-size: clamp(0.8rem, 1vw + 0.4rem, 0.8125rem);
    font-weight: 900;          /* font-black */
}

.tagline-text {
    font-size: clamp(1.25rem, 1vw + 0.4rem, 1.5rem);
    line-height: 2rem;              /* Tailwind default for 2xl */
    font-weight: 300;               /* font-light */
    color: #475569;                 /* text-slate-600 */
    letter-spacing: -0.02em;       /* tracking-tight */

}
/* header end */

.libtag-wrap {
    display: flex;
    
    gap: 0.75rem;
}

.library-text {
    
    line-height: 1rem;           /* Tailwind default for xs */
    
    text-transform: uppercase;   /* uppercase */
    letter-spacing: 0.1em;       /* tracking-widest */
    color: #334155;             /* slate 700 */
}

.vertical-divider {
    height: 1rem;          /* h-4 → 16px */
    width: 1px;            /* w-[1px] → arbitrary value */
    background-color: #78716c; /* bg-stone-500 */
}

.skincare-text {
  
    line-height: 1rem;         /* Tailwind default for xs */
    
    text-transform: uppercase; /* uppercase */
    letter-spacing: 0.1em;     /* tracking-widest */
    color: var(--official-blue);;   
}

.content-wrapper-inner {
    max-width: 48rem;
}

.tab-btn {
    display: flex; 
    column-gap: 1.5rem; 
    margin-top: 1rem; 
    
    font-size: 1rem;
}

.search-btn-style {
    padding-left: 0;              /* px-0 */
    padding-right: 0;
    padding-top: 0.75rem;         /* py-3 → 12px */
    padding-bottom: 0.75rem;      /* py-3 */
    font-weight: 600;             /* font-semibold */
      
}

.paste-btn-style {
    padding-left: 0;               /* px-0 */
    padding-right: 0;
    padding-top: 0.75rem;          /* py-3 */
    padding-bottom: 0.75rem;
    font-weight: 600;              /* font-semibold */
    
    color: #94a3b8;      
}

.search-box {
    position: absolute;        /* absolute */
    top: 0;                    /* inset-y-0 */
    bottom: 0;
    left: 1.25rem;             /* left-5 → 20px */
    display: flex;             /* flex */
    align-items: center;       /* items-center */
    pointer-events: none;   
}

.search-input {
    width: 100%;                        /* w-full */
    padding-left: 3.5rem;               /* pl-14 → 56px */
    padding-right: 1.5rem;              /* pr-6 → 24px */
    padding-top: 1.25rem;               /* py-5 → 20px */
    padding-bottom: 1.25rem;
    background-color: #ffffff;          /* bg-white */
    border: 1px solid #e2e8f0;          /* border + border-slate-200 */
    border-radius: 1rem;                /* rounded-2xl → 16px */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    outline: none;  
}

.search-input:focus {
    outline: none;                      /* focus:outline-none */
    border-color: #cbd5e1;              /* focus:border-slate-300 */
}

.not-found {
    
    margin-top: 0.75rem;             /* mt-3 → 12px */
    border-radius: 0.375rem;         /* rounded-md → 6px */
    border: 1px solid #fecaca;       /* border + border-red-200 */
    background-color: #fef2f2;       /* bg-red-50 */
    padding: 0.5rem 1rem;            /* py-2 (8px) px-4 (16px) */
    color: #b91c1c;                  /* text-red-700 */
   
    line-height: 1.25rem;     
}

.notfound-x-btn {
    margin-left: 0.5rem;          /* ml-2 → 8px */
    color: #94a3b8;               /* text-slate-400 */
    font-size: 1.125rem;          /* text-lg → 18px */
    line-height: 1.75rem;         /* Tailwind default for lg */
    font-weight: 700;             /* font-bold */
    outline: none;  
}

/* Hover state */
.notfound-x-btn:hover {
    color: #475569;               /* hover:text-slate-600 */
}

/* Focus state */
.notfound-x-btn:focus {
    outline: none;                /* focus:outline-none */
}

.si-notice {
    position: relative;                 /* fixed */
    display: inline-flex;
    margin-top: 1.5rem;
    border-radius: 0.375rem;         /* rounded-md → 6px */
    border: 1px solid #e2e8f0;       /* border + border-slate-200 */
    background-color: #f8fafc;      /* bg-slate-50 */
    padding: 1rem;            /* py-2 (8px) px-4 (16px) */
    color: #475569;                  /* text-slate-600 */
    line-height: 1.25rem;
   
}
.si-notice span {
    padding-right: 0.75rem;
}
.si-x-btn {
    margin-left: 0.25rem;        /* ml-2 → 8px */
    color: #94a3b8;             /* text-slate-400 */
    font-size: 1.125rem;        /* text-lg → 18px */
    
    font-weight: 700;  
    
    top: 0.5rem;
    right: 0.5rem;         /* font-bold */
}


/* Hover state */
.si-x-btn:hover {
    color: #475569;             /* hover:text-slate-600 */
}

/* Focus state */
.si-x-btn:focus {
    outline: none;              /* focus:outline-none */
}

.analyze {
    border-radius: 0.75rem;              /* rounded-xl → 12px */
    border: 1px solid #e2e8f0;            /* border + border-slate-200 */
    background-color: #ffffff;            /* bg-white */
    padding: 1.25rem;                     /* p-5 → 20px */
    width: 100%;                          /* w-full */
    transition: all 0.2s ease;    
}

.textarea-style {
    width: 100%;                    /* w-full */
    background-color: transparent;  /* bg-transparent */
    resize: none;                   /* resize-none */
    font-size: 1rem;                /* text-base → 16px */
    line-height: 1.625;             /* leading-relaxed */
    padding-right: 1.25rem;         /* px-5 → 20px */
    padding-left: 0.75rem;          /* pl-3 overrides left side → 12px */
    outline: none;  
}

/* Placeholder styling */
.textarea-style::placeholder {
    color: #cbd5e1;                 /* placeholder:text-slate-300 */
}

/* Focus state */
.textarea-style:focus {
    outline: none;                  /* focus:outline-none */
}

.submitanalyze-container {
    display: flex;
    justify-content: flex-end; 
    margin-top: 0.75rem;
}

.submitanalyze {
    /* Layout */
    display: flex;                      /* flex */
    align-items: center;                /* items-center */
    justify-content: center;            /* justify-center */

    /* Size */
    width: 2.75rem;                     /* w-11 → 44px */
    height: 2.75rem;                    /* h-11 → 44px */

    /* Padding (mostly irrelevant because fixed size, but included) */
    padding: 0.625rem 1.25rem;          /* py-2.5 (10px) px-5 (20px) */

    /* Appearance */
    border-radius: 0.75rem;             /* rounded-xl → 12px */
    background-color: #94a3b8;          /* bg-slate-400 */
    color: #ffffff;                     /* text-white */
    transition: all 0.2s ease;          /* transition-all */
    outline: none;  
}

.submitanalyze:focus {
    outline: none;
    /* focus:ring-1 + focus:ring-slate-500/10 */
    box-shadow: 0 0 0 1px rgba(100, 116, 139, 0.1);
    /* focus-within:border-slate-500 (if it's an input wrapper use :focus-within instead) */
    border-color: #64748b;              /* slate-500 */
}


section.notice-container {    
    margin-bottom: auto;               /* mb-12 → 48px */
    padding-top: 2rem;                 /* pt-8 → 32px */
    border-top: 0;     /* border-t + border-slate-100 */
}

.notice-container > * + * {
    margin-top: 1rem;
}

.version-notice {
    display: flex;                          /* flex */
    align-items: center;                    /* items-center */
    gap: 1rem;                              /* gap-4 → 16px */
    background-color: rgba(239, 246, 255, 0.5); 
    /* bg-blue-50/50 → blue-50 at 50% opacity */
    padding: 1rem;                          /* p-4 → 16px */
    border-radius: 0.75rem;                 /* rounded-xl → 12px */
    border: 1px solid #dbeafe;              /* border + border-blue-100 */
}

.info-symbol {
    width: 2rem;                    /* w-8 → 32px */
    height: 2rem;                   /* h-8 → 32px */
    background-color: #dbeafe;    /* bg-blue-100 */
    color: #2563eb;               /* text-blue-600 */
    border-radius: 9999px;          /* rounded-full */
    display: flex;                  /* flex */
    align-items: center;            /* items-center */
    justify-content: center;        /* justify-center */
}

.version-text {
    font-size: clamp(0.8rem, 2vw + 0.5rem, 0.9rem);
   
    color: #475569;         /* text-slate-600 */
    line-height: clamp(1.5, 1.5vw + 0.5, 1.8);
}

.disclaimer-container {
    display: flex;            /* flex */
    align-items: flex-start;  /* items-start */
    gap: 1rem;                /* gap-4 → 16px */
    padding: 1rem;            /* p-4 → 16px */
}

.disclaimer-text {
    font-size: clamp(0.8rem, 2vw + 0.5rem, 0.9rem);
    font-style: italic;
}

/* style footer start */

footer {
    font-size: clamp(0.8rem, 1vw + 0.4rem, 0.8125rem);
    color: #475569;        /* text-slate-600 */
   
}

.footer-container {
    display: flex;             /* Change from inline-block to flex */
    flex-direction: row;      /* Items sit side-by-side */
    justify-content: space-between; /* Pushes Terms to left, Brand to right */
    align-items: center;  /* Aligns items to the top (better for wrapping text) */
  
    width: 100%;
    padding: 1rem 0;
    border-top: 1px solid rgba(22,163,74,0.3);
    gap: 2rem;                /* Space between text and brand box */
     /* Keeps everything pinned to the right edge */
    margin-top: auto;
}

@media (max-width: 834px) {
    .footer-container {
    display: block;
    margin-top: auto;
    
}

    .brand-name {
    row-gap: 2rem;
    }
}

.tn-text {
    /* 1. This allows the text to shrink as much as needed */
    flex: 1 1 auto; 
    /* 2. Standard comfortable reading width we discussed */
    max-width: 600px; 
    /* 3. Prevents text from disappearing entirely */
    min-width: 200px;
    
}

.tos {
    text-decoration: underline;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    
}

.tos:hover, .feedback:hover {
    color: #0f172a; /* hover:text-slate-900 */
}

.brand-footer-container {
    margin-top: 0.25rem;
    column-gap: 1.5rem;  
    align-items: flex-end; /* Keeps everything pinned to the right edge */
}

.feedback {
    transition-property: color;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    
}

.brand-name {
    white-space: nowrap; /* Forces everything to stay on one line */
    margin-top: 0.25rem;
}


/* style footer end */