/*
==============================================
Content Planner Feature Styles
Scoped with .planner-feature-wrapper
==============================================
*/

/* --- Global Variables (Shared or Scoped) --- */
/* If these variables are used globally in your app, define them outside .planner-feature-wrapper. */
/* If they are ONLY for the planner, you can scope them or keep them at :root and let inheritance work. */
/* For this example, I'm assuming these can be defined at :root and planner elements will inherit. */
/* If you need planner-specific overrides, use .planner-feature-wrapper :root { ... } or target specific elements. */

:root { /* Or move these inside .planner-feature-wrapper if they are exclusive */
    --planner-primary-color: #ffc107;
    --planner-primary-color-rgb: 255, 193, 7;
    --planner-primary-color-darker: #e0a800;
    --planner-accent-color: #6f42c1;
    --planner-accent-color-rgb: 111, 66, 193;
    --planner-accent-color-light: #f3effc; /* For light backgrounds under accent elements */
    --planner-secondary-color-bg: #f8f9fa; /* Background for elements like tabs container wrapper */
    --planner-text-color: #212529;
    --planner-text-color-light: #495057;
    --planner-bg-color: #f0f2f5;         /* Main background of the planner feature area */
    --planner-card-bg-color: #ffffff;     /* Background of individual cards like day-card */
    --planner-border-color: #e0e0e0;
    --planner-card-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    --planner-border-radius-lg: 20px;
    --planner-border-radius-md: 12px;
    --planner-border-radius-sm: 8px;
    --planner-font-family: 'Alibaba';
    --planner-transition-speed: 0.4s;
    --planner-transition-easing: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Dark Mode Variables for Planner (Applied via .dark-mode on body or .planner-feature-wrapper) */
.dark-mode .planner-feature-wrapper, /* If body has .dark-mode */
.planner-feature-wrapper.dark-mode { /* If planner-feature-wrapper itself gets .dark-mode */
    --planner-primary-color: #ffca2c;
    --planner-primary-color-rgb: 255, 202, 44;
    --planner-primary-color-darker: #ffc107;
    --planner-accent-color: #a180e2;
    --planner-accent-color-rgb: 161, 128, 226;
    --planner-accent-color-light: #3a2c4e;
    --planner-secondary-color-bg: #2c2f36;
    --planner-text-color: #f0f0f0;
    --planner-text-color-light: #b0b0b0;
    --planner-bg-color: #181a1e;
    --planner-card-bg-color: #22252a; /* Darker card background */
    --planner-border-color: #3a3f4a;
    --planner-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}


/* --- Base Styles for Planner --- */
.planner-feature-wrapper {
    font-family: var(--planner-font-family);
    background-color: var(--planner-bg-color);
    color: var(--planner-text-color);
    line-height: 1.8;
    padding: 20px 15px 90px 15px; /* Adjust as needed for your app's layout */
    overflow-x: hidden;
    transition: background-color var(--planner-transition-speed) ease, color var(--planner-transition-speed) ease;
}

.planner-feature-wrapper * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.planner-feature-wrapper .container {
    max-width: 750px; /* Or your preferred max-width */
    margin: 0 auto;
}

/* --- Motivational Quote --- */
.planner-feature-wrapper .motivational-quote-container {
    text-align: center;
    padding: 18px 15px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, rgba(var(--planner-primary-color-rgb), 0.1), rgba(var(--planner-primary-color-rgb), 0.02));
    border-radius: var(--planner-border-radius-md);
    border: 1px solid rgba(var(--planner-primary-color-rgb), 0.2);
    min-height: 60px;
    animation: plannerSubtlePulse 5s infinite ease-in-out;
}
.planner-feature-wrapper.dark-mode .motivational-quote-container,
.dark-mode .planner-feature-wrapper .motivational-quote-container {
    background: linear-gradient(135deg, rgba(var(--planner-primary-color-rgb), 0.15), rgba(var(--planner-primary-color-rgb), 0.05));
    border: 1px solid rgba(var(--planner-primary-color-rgb), 0.3);
}
.planner-feature-wrapper .motivational-quote {
    font-size: 1em;
    color: var(--planner-text-color-light);
    font-style: italic;
    font-weight: 500;
    animation: plannerFadeInQuote 0.8s ease-out;
}
.planner-feature-wrapper .motivational-quote i {
    margin: 0 6px;
    color: var(--planner-primary-color);
    font-size: 1.1em;
}

@keyframes plannerFadeInQuote { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes plannerSubtlePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.01); } }

/* --- Tabs --- */
.planner-feature-wrapper .tabs-container-wrapper {
    position: relative;
    margin-bottom: 20px;
}
.planner-feature-wrapper .tabs {
    display: flex;
    overflow-x: auto;
    padding-bottom: 15px;
    margin-bottom: 5px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    position: relative;
}
.planner-feature-wrapper .tabs::-webkit-scrollbar { display: none; }

.planner-feature-wrapper .tab-button {
    background-color: transparent;
    border: none;
    padding: 14px 22px;
    font-family: var(--planner-font-family);
    font-size: 1em;
    font-weight: 600;
    color: var(--planner-text-color-light);
    cursor: pointer;
    transition: color var(--planner-transition-speed) ease, transform 0.2s ease;
    white-space: nowrap;
    margin-left: 5px; /* spacing between tabs */
    flex-shrink: 0;
    position: relative;
}
.planner-feature-wrapper .tab-button:hover {
    color: var(--planner-primary-color);
    transform: translateY(-2px);
}
.planner-feature-wrapper .tab-button.active {
    color: var(--planner-primary-color);
    font-weight: 800;
}
.planner-feature-wrapper .tab-button.active::after { /* Active underline */
    content: '';
    position: absolute;
    bottom: -1px;
    left: 15%;
    right: 15%; /* to achieve 70% width */
    height: 3px;
    background-color: var(--planner-primary-color);
    border-radius: 3px;
    animation: plannerUnderlineGrow 0.3s ease-out;
}
@keyframes plannerUnderlineGrow { from { width: 0; left: 50%; } to { width: 70%; left: 15%;} }

.planner-feature-wrapper .tab-progress-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}
.planner-feature-wrapper .progress-dot {
    width: 8px;
    height: 8px;
    background-color: var(--planner-border-color);
    border-radius: 50%;
    margin: 0 4px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.planner-feature-wrapper .progress-dot.active {
    background-color: var(--planner-primary-color);
    transform: scale(1.3);
}

/* --- Tab Content --- */
.planner-feature-wrapper .tab-content { /* This is the main content area for a day */
    display: none; /* Handled by ng-if/ng-show in Angular or JS logic */
    animation: plannerFadeInUpContent 0.6s var(--planner-transition-easing);
    padding: 5px; /* Outer padding for the content section of a day */
}
.planner-feature-wrapper .tab-content.active {
    display: block;
}
@keyframes plannerFadeInUpContent { from { opacity: 0; transform: translateY(25px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.planner-feature-wrapper .day-card {
    background-color: var(--planner-card-bg-color);
    padding: 25px 30px;
    border-radius: var(--planner-border-radius-lg);
    box-shadow: var(--planner-card-shadow);
    border: 1px solid var(--planner-border-color);
    transition: background-color var(--planner-transition-speed) ease, border-color var(--planner-transition-speed) ease;
}

.planner-feature-wrapper .day-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.planner-feature-wrapper .day-header i.day-icon-main {
    font-size: 2.5em;
    color: var(--planner-primary-color);
    margin-left: 15px;
    text-shadow: 0 2px 5px rgba(var(--planner-primary-color-rgb), 0.3);
    transition: transform 0.3s ease;
}
.planner-feature-wrapper .day-header:hover i.day-icon-main {
    transform: rotate(-5deg) scale(1.1);
}
.planner-feature-wrapper .day-title-container { flex-grow: 1; }
.planner-feature-wrapper .day-title {
    font-size: 2em;
    color: var(--planner-text-color);
    margin-bottom: 2px;
    font-weight: 800;
}
.planner-feature-wrapper.dark-mode .day-title,
.dark-mode .planner-feature-wrapper .day-title {
    color: var(--planner-primary-color); /* Or --planner-text-color if it looks better */
}
.planner-feature-wrapper .day-theme {
    font-size: 1.15em;
    color: var(--planner-text-color-light);
    margin-bottom: 25px;
    font-weight: 500;
}

/* --- Accordions --- */
.planner-feature-wrapper .accordion-item {
    margin-bottom: 18px;
    border: 1px solid var(--planner-border-color);
    border-radius: var(--planner-border-radius-md);
    overflow: hidden;
    background-color: var(--planner-card-bg-color); /* Or a slightly different shade */
    transition: box-shadow 0.3s ease, background-color var(--planner-transition-speed) ease;
}
.planner-feature-wrapper.dark-mode .accordion-item,
.dark-mode .planner-feature-wrapper .accordion-item {
    background-color: #272a30; /* If you want accordion slightly darker than day-card in dark mode */
}
.planner-feature-wrapper .accordion-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.planner-feature-wrapper.dark-mode .accordion-item:hover,
.dark-mode .planner-feature-wrapper .accordion-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.planner-feature-wrapper .accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 18px 22px;
    font-weight: 700;
    font-size: 1.2em;
    transition: background-color 0.2s ease;
    color: var(--planner-text-color);
}
.planner-feature-wrapper .accordion-header:hover {
    background-color: rgba(var(--planner-primary-color-rgb), 0.05);
}
.planner-feature-wrapper.dark-mode .accordion-header:hover,
.dark-mode .planner-feature-wrapper .accordion-header:hover {
    background-color: rgba(var(--planner-primary-color-rgb), 0.1);
}
.planner-feature-wrapper .accordion-header > span > i {
    margin-left: 12px;
    font-size: 1.4em;
    color: var(--planner-accent-color);
    vertical-align: middle;
}
.planner-feature-wrapper .accordion-header .indicator-icon {
    transition: transform 0.4s var(--planner-transition-easing);
    font-size: 1.5em;
    color: var(--planner-text-color-light);
}

.planner-feature-wrapper .accordion-content {
    max-height: 0; /* Controlled by .open class in JS/Angular */
    overflow: hidden;
    transition: max-height 0.5s var(--planner-transition-easing), padding 0.5s var(--planner-transition-easing);
    padding: 0 22px;
    font-size: 1.05em;
    color: var(--planner-text-color-light);
}
.planner-feature-wrapper .accordion-content ul { list-style: none; padding-right: 0; }
.planner-feature-wrapper .accordion-content ul li {
    padding: 12px 0;
    display: flex;
    align-items: flex-start;
    border-bottom: 1px dashed rgba(var(--planner-border-color),0.7);
}
.planner-feature-wrapper .accordion-content ul li:last-child { border-bottom: none; }
.planner-feature-wrapper .accordion-content ul li i.content-icon {
    margin-left: 15px;
    color: var(--planner-accent-color);
    font-size: 1.4em;
    margin-top: 4px; /* Align with first line of text */
}
.planner-feature-wrapper .accordion-content .timing-suggestion {
    font-size: 0.9em;
    color: var(--planner-primary-color-darker);
    font-weight: 600;
    display: block;
    margin-top: 5px;
}
.planner-feature-wrapper.dark-mode .accordion-content .timing-suggestion,
.dark-mode .planner-feature-wrapper .accordion-content .timing-suggestion {
    color: var(--planner-primary-color);
}
/* Styles for open accordion */
.planner-feature-wrapper .accordion-item.open .accordion-content {
    max-height: 1200px; /* Ensure enough height, adjust if needed */
    padding: 18px 22px;
}
.planner-feature-wrapper .accordion-item.open .accordion-header .indicator-icon {
    transform: rotate(180deg);
}
.planner-feature-wrapper .accordion-item.open .accordion-header {
    background-color: rgba(var(--planner-primary-color-rgb), 0.03);
}
.planner-feature-wrapper.dark-mode .accordion-item.open .accordion-header,
.dark-mode .planner-feature-wrapper .accordion-item.open .accordion-header {
    background-color: rgba(var(--planner-primary-color-rgb), 0.08);
}

/* --- Copy Button --- */
.planner-feature-wrapper .copy-button {
    background: linear-gradient(135deg, var(--planner-accent-color), color-mix(in srgb, var(--planner-accent-color) 80%, black));
    color: white;
    border: none;
    padding: 10px 18px;
    font-family: var(--planner-font-family);
    font-size: 0.95em;
    font-weight: 600;
    border-radius: var(--planner-border-radius-sm);
    cursor: pointer;
    margin-top: 12px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 3px 8px rgba(var(--planner-accent-color-rgb),0.3);
}
.planner-feature-wrapper .copy-button i { margin-left: 8px; font-size: 1.1em;}
.planner-feature-wrapper .copy-button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 5px 12px rgba(var(--planner-accent-color-rgb),0.4);
}
.planner-feature-wrapper .copy-button:active { transform: scale(0.98); }

/* --- Pro Tip --- */
.planner-feature-wrapper .pro-tip {
    background-color: var(--planner-accent-color-light);
    padding: 18px 22px;
    border-radius: var(--planner-border-radius-md);
    margin-top: 25px;
    font-size: 1em;
    border-right: 6px solid var(--planner-accent-color); /* For RTL */
    color: var(--planner-text-color); /* Or var(--planner-text-color-light) if preferred */
    box-shadow: 0 4px 10px rgba(var(--planner-accent-color-rgb), 0.1);
}
.planner-feature-wrapper.dark-mode .pro-tip,
.dark-mode .planner-feature-wrapper .pro-tip {
    background-color: var(--planner-accent-color-light); /* Dark mode Accent light */
    border-right-color: var(--planner-accent-color);
    color: var(--planner-text-color);
}
.planner-feature-wrapper .pro-tip strong {
    color: var(--planner-accent-color);
    font-weight: 700;
}
.planner-feature-wrapper .pro-tip strong i {
    vertical-align: middle;
    margin-left: 6px; /* For RTL */
    font-size: 1.2em;
}

/* --- Spark Idea Action Button (FAB) --- */
.planner-feature-wrapper .spark-action-button-container {
    position: fixed; /* Or absolute if planner-feature-wrapper is positioned */
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000; /* Ensure it's above other planner content but below global modals if any */
}
.planner-feature-wrapper .spark-action-button {
    background: linear-gradient(45deg, var(--planner-primary-color), var(--planner-primary-color-darker));
    color: #212529; /* Dark text on yellow for better contrast */
    border: none;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    font-size: 1.8em; /* Icon size */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(var(--planner-primary-color-rgb), 0.4);
    transition: transform 0.3s var(--planner-transition-easing), box-shadow 0.3s var(--planner-transition-easing);
    animation: plannerPulseButton 2s infinite;
}
.planner-feature-wrapper .spark-action-button:hover {
    transform: scale(1.1) translateX(-50%); /* Maintain centering on scale for translateX(-50%) */
    box-shadow: 0 8px 20px rgba(var(--planner-primary-color-rgb), 0.5);
    animation-play-state: paused;
}
.planner-feature-wrapper .spark-action-button-container .spark-action-button:hover {
    /* Specific hover for the button if it's inside a translated container */
    transform: scale(1.1);
}

.planner-feature-wrapper.dark-mode .spark-action-button,
.dark-mode .planner-feature-wrapper .spark-action-button {
    box-shadow: 0 5px 15px rgba(var(--planner-primary-color-rgb), 0.3);
    color: #333;
}
.planner-feature-wrapper.dark-mode .spark-action-button:hover,
.dark-mode .planner-feature-wrapper .spark-action-button:hover {
    box-shadow: 0 8px 20px rgba(var(--planner-primary-color-rgb), 0.4);
}

@keyframes plannerPulseButton { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }


/* --- Idea Spark Modal --- */
/* Modal overlay needs to be a direct child of body or a high-level app container for global overlay effect */
/* If modal-overlay is INSIDE .planner-feature-wrapper, it will be confined. */
/* For now, assuming modal-overlay is structured to be globally effective: */
.modal-overlay { /* Keep this less specific if modal is truly global, or scope if only for planner */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); /* Safari */
    display: flex; /* JS will toggle this with .visible */
    justify-content: center;
    align-items: center;
    z-index: 2000; /* High z-index */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--planner-transition-speed) ease, visibility 0s var(--planner-transition-speed) linear;
}
.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
.planner-feature-wrapper .idea-modal { /* Style the modal content that is part of the planner */
    background-color: var(--planner-card-bg-color); /* Use card bg for consistency or main bg */
    padding: 30px 35px;
    border-radius: var(--planner-border-radius-lg);
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    text-align: center;
    max-width: 90%;
    width: 450px;
    transform: scale(0.7) translateY(20px);
    opacity: 0;
    transition: transform var(--planner-transition-speed) var(--planner-transition-easing), opacity var(--planner-transition-speed) var(--planner-transition-easing);
}
.modal-overlay.visible .planner-feature-wrapper .idea-modal, /* if .planner-feature-wrapper is inside modal-overlay for some reason */
.modal-overlay.visible .idea-modal { /* If .idea-modal is a direct child of .modal-overlay as preferred */
    transform: scale(1) translateY(0);
    opacity: 1;
}

.planner-feature-wrapper .idea-modal h3 {
    font-size: 1.8em;
    color: var(--planner-accent-color);
    margin-bottom: 20px;
    font-weight: 800;
}
.planner-feature-wrapper .idea-modal h3 i { margin-left: 10px; }
.planner-feature-wrapper .idea-modal p#sparkedIdeaText_planner, /* If you use unique ID */
.planner-feature-wrapper .idea-modal p { /* General paragraph in modal */
    font-size: 1.15em;
    color: var(--planner-text-color);
    margin-bottom: 25px;
    min-height: 50px; /* Space for text, including loader */
    line-height: 1.7;
}
.planner-feature-wrapper .idea-modal p .ri-loader-4-line { /* Style for loader icon */
    font-size: 1.5em;
    color: var(--planner-primary-color);
    display: inline-block; /* Or block if it's on its own line */
    vertical-align: middle;
}


.planner-feature-wrapper .modal-actions { display: flex; justify-content: space-around; gap:15px; margin-top: 10px;}
.planner-feature-wrapper .modal-button {
    padding: 12px 25px;
    font-family: var(--planner-font-family);
    font-size: 1em;
    font-weight: 600;
    border-radius: var(--planner-border-radius-md);
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    flex-grow:1;
}
.planner-feature-wrapper .modal-button.primary {
    background: linear-gradient(45deg, var(--planner-primary-color), var(--planner-primary-color-darker));
    color: #212529; /* Dark text on yellow */
    box-shadow: 0 3px 8px rgba(var(--planner-primary-color-rgb), 0.3);
}
.planner-feature-wrapper .modal-button.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(var(--planner-primary-color-rgb), 0.4);
}

.planner-feature-wrapper .modal-button.secondary {
    background-color: var(--planner-border-color);
    color: var(--planner-text-color-light);
}
.planner-feature-wrapper.dark-mode .modal-button.secondary,
.dark-mode .planner-feature-wrapper .modal-button.secondary {
    background-color: #4a4f5a;
    color: var(--planner-text-color);
}
.planner-feature-wrapper .modal-button.secondary:hover {
    background-color: color-mix(in srgb, var(--planner-border-color) 90%, black);
}
.planner-feature-wrapper.dark-mode .modal-button.secondary:hover,
.dark-mode .planner-feature-wrapper .modal-button.secondary:hover {
    background-color: #5f6570;
}

/* Specific styling for spinner icon inside paragraph if used via ng-bind-html */
.planner-feature-wrapper .idea-modal p#sparkedIdeaText_planner .ri-loader-4-line.ri-spin {
    color: var(--planner-primary-color); /* Ensure color matches */
    font-size: 1.5em; /* Ensure size is appropriate */
    margin: 0 5px;
    vertical-align: middle;
}