/* === FONT IMPORTS (Can be enqueued in WordPress) === */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@300;400;600;700&display=swap');

/* === MAIN CONTAINER (FOR WORDPRESS COMPATIBILITY) === */
.tokyo-time-tool-container {
    /* --- CSS Variables --- */
    --primary-font: 'Poppins', sans-serif;
    --secondary-font: 'Lato', sans-serif;
    --bg-gradient: linear-gradient(135deg, #1f005c, #5b0060, #870160, #ac255e);
    --card-bg: rgba(0, 0, 0, 0.25);
    --text-color: #F0F0F0;
    --heading-color: #FFFFFF;
    --accent-color: #00FFFF; /* Neon Cyan */
    --accent-glow: 0 0 5px #00FFFF, 0 0 10px #00FFFF, 0 0 15px #00FFFF;
    --pink-accent: #FF00C1;

    font-family: var(--secondary-font);
    background: var(--bg-gradient);
    color: var(--text-color);
    /* FLUID PADDING: Scales from 1rem (mobile) to 2rem (desktop) */
    padding: clamp(1rem, 5vw, 2rem);
    border-radius: 20px;
    max-width: auto;
    margin: 2rem auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    overflow: hidden;
}

/* === GENERAL STYLING & HEADINGS === */
.tokyo-time-tool-container h1, 
.tokyo-time-tool-container h2, 
.tokyo-time-tool-container h3 {
    font-family: var(--primary-font);
    color: var(--heading-color);
    margin-top: 0;
    font-weight: 600;
    line-height: 1.2;
}
.tokyo-time-tool-container h1 {
    /* FLUID FONT SIZE: Scales from 2rem to 2.5rem */
    font-size: clamp(2rem, 6vw, 2.5rem);
    text-align: center;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.tokyo-time-tool-container .tokyo-tool-header p {
    text-align: center;
    /* FLUID FONT SIZE: Scales from 1rem to 1.1rem */
    font-size: clamp(1rem, 2.5vw, 1.1rem);
    margin: -0.5rem 0 2rem 0;
    opacity: 0.9;
}
.tokyo-time-tool-container h3 {
    /* FLUID FONT SIZE: Scales from 1.2rem to 1.4rem */
    font-size: clamp(1.2rem, 4vw, 1.4rem);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.tokyo-time-tool-container h3 i {
    color: var(--accent-color);
}

/* === CARD & CONTENT STYLING === */
.tokyo-time-tool-container .tokyo-card {
    background: var(--card-bg);
    /* FLUID PADDING: Scales from 1.2rem to 2rem */
    padding: clamp(1.2rem, 4vw, 2rem);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    margin-bottom: 1.5rem;
}
.tokyo-time-tool-container p, .tokyo-time-tool-container li {
    line-height: 1.7;
    font-size: clamp(0.95rem, 2vw, 1rem); /* Subtle fluid scaling */
}
.tokyo-time-tool-container .content-list {
    list-style: none;
    padding-left: 0;
}
.tokyo-time-tool-container .content-list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.5rem;
}
.tokyo-time-tool-container .content-list li::before {
    content: '»';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-color);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
}

/* === LAYOUT GRIDS === */
.tokyo-time-tool-container .main-display-grid,
.tokyo-time-tool-container .info-grid {
    display: grid;
    /* FLUID GAP: Scales from 1rem to 1.5rem */
    gap: clamp(1rem, 4vw, 1.5rem);
    margin-bottom: 0;
}
/* Default to 2 columns for wider screens */
.tokyo-time-tool-container .main-display-grid {
    grid-template-columns: 2fr 1fr;
}
.tokyo-time-tool-container .info-grid {
    grid-template-columns: 1fr 1fr;
}

/* === CLOCK & DATE SECTION === */
.tokyo-time-tool-container .clock-card {
    transition: background 0.5s ease;
}
.tokyo-time-tool-container .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.tokyo-time-tool-container #day-night-icon { font-size: 2rem; color: #FFD700; transition: all 0.5s ease; }
.tokyo-time-tool-container .digital-clock {
    font-family: var(--primary-font);
    font-weight: 700;
    /* FLUID FONT SIZE: A dramatic scaling for the main feature */
    font-size: clamp(2.5rem, 10vw, 4rem);
    line-height: 1;
    text-align: center;
    color: var(--heading-color);
    text-shadow: var(--accent-glow);
}
.tokyo-time-tool-container #tokyo-ampm { 
    font-size: clamp(1rem, 4vw, 1.5rem);
    margin-left: 0.5rem; 
    opacity: 0.8;
}
.tokyo-time-tool-container .date-display { 
    text-align: center;
    font-size: clamp(1rem, 3vw, 1.2rem);
    margin-top: 0.5rem; 
    opacity: 0.9;
}
.tokyo-time-tool-container .holiday-alert-hidden { display: none !important; }
.tokyo-time-tool-container #holiday-alert { background: rgba(255, 0, 193, 0.15); border: 1px solid var(--pink-accent); color: #fff; padding: 0.75rem; border-radius: 8px; text-align: center; margin-top: 1rem; font-weight: 600; }
.tokyo-time-tool-container #holiday-alert i { color: var(--pink-accent); }
.tokyo-time-tool-container .tokyo-card.is-day { background: rgba(102, 126, 234, 0.2); }
.tokyo-time-tool-container .tokyo-card.is-night { background: rgba(0, 0, 0, 0.3); }
.tokyo-time-tool-container .is-night #day-night-icon { color: #f0f0f0; }

/* === ANALOG CLOCK === */
.tokyo-time-tool-container .analog-clock-card { display: flex; justify-content: center; align-items: center; }
.tokyo-time-tool-container .analog-clock { width: clamp(120px, 100%, 150px); aspect-ratio: 1 / 1; border-radius: 50%; border: 3px solid var(--accent-color); position: relative; background: rgba(0,0,0,0.2); box-shadow: inset 0 0 15px rgba(0,0,0,0.5), 0 0 10px rgba(0, 255, 255, 0.3); }
.tokyo-time-tool-container .hand { position: absolute; width: 50%; height: 3px; background: var(--heading-color); top: 50%; transform-origin: 100%; transform: rotate(90deg); transition: transform 0.05s cubic-bezier(0.4, 2.3, 0.6, 1); border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.tokyo-time-tool-container .hour-hand { width: 35%; left: 15%; height: 4px; background: var(--heading-color); }
.tokyo-time-tool-container .min-hand { width: 45%; left: 5%; background: var(--heading-color); }
.tokyo-time-tool-container .second-hand { height: 2px; background: var(--pink-accent); }
.tokyo-time-tool-container .center-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background: var(--pink-accent); border: 2px solid var(--heading-color); border-radius: 50%; z-index: 10; }

/* === INFO SECTIONS & TOOLS === */
.tokyo-time-tool-container .time-comparison-display { display: flex; justify-content: space-around; text-align: center; margin-top: 1rem; }
.tokyo-time-tool-container .time-small { font-family: var(--primary-font); font-size: clamp(1.2rem, 4vw, 1.5rem); font-weight: 600; color: var(--heading-color); display: block; }
.tokyo-time-tool-container .fun-fact { font-style: italic; opacity: 0.9; text-align: center; font-size: clamp(1rem, 3vw, 1.1rem); }
.tokyo-time-tool-container .meeting-scheduler { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; }
.tokyo-time-tool-container .time-input { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2); color: var(--text-color); padding: 0.5rem; border-radius: 8px; font-family: var(--primary-font); }
.tokyo-time-tool-container .tool-button { background: var(--accent-color); color: #1f005c; border: none; padding: 0.6rem 1.2rem; border-radius: 8px; font-family: var(--primary-font); font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
.tokyo-time-tool-container .tool-button:hover { background: var(--heading-color); box-shadow: var(--accent-glow); }
.tokyo-time-tool-container .meeting-result-hidden { display: none; }
.tokyo-time-tool-container #meeting-result { margin-top: 1rem; padding: 1rem; background: rgba(0, 255, 255, 0.1); border: 1px solid var(--accent-color); border-radius: 8px; text-align: center; }

/* === FOOTER === */
.tokyo-time-tool-container .tokyo-tool-footer { text-align: center; margin-top: 2rem; opacity: 0.7; }
.tokyo-time-tool-container .tokyo-tool-footer .fa-heart { color: var(--pink-accent); }

/* ============================ */
/* === RESPONSIVENESS BREAKPOINTS === */
/* ============================ */

/* For Tablets and smaller devices (iPad portrait, etc.) */
@media (max-width: 800px) {
    .tokyo-time-tool-container .main-display-grid,
    .tokyo-time-tool-container .info-grid {
        grid-template-columns: 1fr; /* Stack grids into a single column */
    }
    
    .tokyo-time-tool-container .analog-clock-card {
        display: none; /* Hide analog clock on tablets and smaller to save valuable space */
    }
}

/* For small mobile phones */
@media (max-width: 480px) {
    .tokyo-time-tool-container {
        /* Reduce margin on the smallest screens */
        margin: 1rem;
    }

    .tokyo-time-tool-container .meeting-scheduler {
        flex-direction: column; /* Stack meeting planner */
        align-items: stretch;
    }
    .tokyo-time-tool-container .meeting-scheduler .tool-button {
        width: 100%; /* Make button full-width */
        text-align: center;
    }
}