/* --- Main Wrapper for WordPress Compatibility --- */
#advanced-months-calculator-wrapper {
    --amc-bg-dark: #12141d;
    --amc-bg-light: #1f2335;
    --amc-primary-color: #0f3460;
    --amc-accent-color: #00aaff; /* Changed to a vibrant blue */
    --amc-accent-hover: #0088cc;
    --amc-text-color: #e0e0e0;
    --amc-text-muted: #a0a0c0;
    --amc-card-bg: #1a1d2e;
    --amc-border-color: #3a476f;
    --amc-success-color: #4CAF50;
    --amc-error-color: #f44336;
    --amc-font-family: 'Poppins', sans-serif;

    font-family: var(--amc-font-family);
    background: var(--amc-bg-dark) url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%231a1d2e" fill-opacity="0.4"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
    color: var(--amc-text-color);
    line-height: 1.6;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

#advanced-months-calculator-wrapper * {
    box-sizing: border-box;
}

#advanced-months-calculator-wrapper .amc-container {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* --- Typography (using classes) --- */
#advanced-months-calculator-wrapper .amc-h1,
#advanced-months-calculator-wrapper .amc-h2,
#advanced-months-calculator-wrapper .amc-h3,
#advanced-months-calculator-wrapper .amc-h4 {
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.5rem 0; padding: 0;
}
#advanced-months-calculator-wrapper .amc-h1 { font-size: 2.5rem; text-align: center; }
#advanced-months-calculator-wrapper .amc-h2 { font-size: 1.8rem; border-bottom: 2px solid var(--amc-accent-color); padding-bottom: 0.5rem; margin-bottom: 1rem; }
#advanced-months-calculator-wrapper .amc-h3 { font-size: 1.2rem; margin-bottom: 1rem; color: var(--amc-text-muted); }
#advanced-months-calculator-wrapper .amc-p { margin: 0; padding: 0; color: var(--amc-text-color); }
#advanced-months-calculator-wrapper .amc-header .amc-p { text-align: center; color: var(--amc-text-muted); font-size: 1.1rem; }

/* --- Main Calculator Card --- */
#advanced-months-calculator-wrapper .amc-calculator-card {
    background: var(--amc-card-bg);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--amc-border-color);
}

/* --- Operation Radio Buttons --- */
#advanced-months-calculator-wrapper .amc-operation-group .amc-h3 i { color: var(--amc-accent-color); margin-right: 0.5rem; }
#advanced-months-calculator-wrapper .amc-radio-container {
    display: flex; flex-wrap: wrap; gap: 1rem; background: var(--amc-bg-light); padding: 0.5rem; border-radius: 10px;
}
#advanced-months-calculator-wrapper .amc-radio-container input[type="radio"] { display: none; }
#advanced-months-calculator-wrapper .amc-radio-label {
    flex-grow: 1; text-align: center; padding: 0.75rem 1rem; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; font-weight: 600;
}
#advanced-months-calculator-wrapper .amc-radio-label i { margin-right: 0.5rem; }
#advanced-months-calculator-wrapper .amc-radio-container input[type="radio"]:checked + .amc-radio-label {
    background: var(--amc-accent-color); color: #fff; box-shadow: 0 4px 15px rgba(0, 170, 255, 0.4);
}
#advanced-months-calculator-wrapper .amc-radio-label:hover { background: var(--amc-primary-color); }

/* --- Input Sections --- */
#advanced-months-calculator-wrapper .amc-input-section { margin-top: 1.5rem; transition: opacity 0.3s ease; }
#advanced-months-calculator-wrapper .amc-date-inputs { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
#advanced-months-calculator-wrapper .amc-field { flex: 1; min-width: 200px; }
#advanced-months-calculator-wrapper .amc-label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--amc-text-muted); }
#advanced-months-calculator-wrapper .amc-input-wrapper { position: relative; }
#advanced-months-calculator-wrapper .amc-input,
#advanced-months-calculator-wrapper .amc-input-number {
    width: 100%; padding: 0.75rem; background: var(--amc-bg-light); border: 1px solid var(--amc-border-color); border-radius: 8px; color: var(--amc-text-color); font-family: var(--amc-font-family); font-size: 1rem;
}
#advanced-months-calculator-wrapper .amc-input::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
#advanced-months-calculator-wrapper .amc-input.amc-invalid,
#advanced-months-calculator-wrapper .amc-input-number.amc-invalid { border-color: var(--amc-error-color); }

#advanced-months-calculator-wrapper .amc-today-btn {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--amc-text-muted); font-size: 1.2rem; cursor: pointer; transition: color 0.2s; padding: 0;
}
#advanced-months-calculator-wrapper .amc-today-btn:hover { color: var(--amc-accent-color); }

#advanced-months-calculator-wrapper .amc-arrow-icon { font-size: 1.5rem; color: var(--amc-text-muted); margin-top: 2rem; }
#advanced-months-calculator-wrapper .amc-options { margin-top: 1rem; display: flex; align-items: center; gap: 0.5rem; }
#advanced-months-calculator-wrapper .amc-options .amc-label { cursor: pointer; color: var(--amc-text-muted); margin: 0; }
#advanced-months-calculator-wrapper .amc-checkbox { accent-color: var(--amc-accent-color); width: 16px; height: 16px; cursor: pointer; }

/* --- Buttons --- */
#advanced-months-calculator-wrapper .amc-action-buttons { display: flex; gap: 1rem; margin-top: 2rem; }
#advanced-months-calculator-wrapper .amc-btn {
    flex-grow: 1; padding: 0.8rem 1rem; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; font-family: var(--amc-font-family); cursor: pointer; transition: all 0.3s ease;
}
#advanced-months-calculator-wrapper .amc-btn i { margin-right: 0.5rem; }
#advanced-months-calculator-wrapper .amc-btn-primary { background: var(--amc-accent-color); color: #fff; }
#advanced-months-calculator-wrapper .amc-btn-primary:hover { background: var(--amc-accent-hover); box-shadow: 0 4px 20px rgba(0, 170, 255, 0.5); transform: translateY(-2px); }
#advanced-months-calculator-wrapper .amc-btn-secondary { background: var(--amc-primary-color); color: var(--amc-text-color); }
#advanced-months-calculator-wrapper .amc-btn-secondary:hover { background: #1b4a8b; transform: translateY(-2px); }

/* --- Result Area --- */
#advanced-months-calculator-wrapper .amc-result-container { margin-top: 2rem; background: var(--amc-bg-light); padding: 1.5rem; border-radius: 12px; }
#advanced-months-calculator-wrapper .amc-result-box { display: flex; align-items: center; justify-content: space-between; background: var(--amc-bg-dark); padding: 1.5rem; border-radius: 8px; border-left: 5px solid var(--amc-accent-color); }
#advanced-months-calculator-wrapper #amc-result-text { font-size: 1.5rem; font-weight: 700; color: #fff; }
#advanced-months-calculator-wrapper #amc-result-text span { color: var(--amc-accent-color); }
#advanced-months-calculator-wrapper .amc-copy-btn { background: none; border: 1px solid var(--amc-border-color); color: var(--amc-text-muted); font-size: 1.2rem; padding: 0.5rem 0.8rem; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
#advanced-months-calculator-wrapper .amc-copy-btn:hover { background: var(--amc-primary-color); color: #fff; }
#advanced-months-calculator-wrapper .amc-copy-btn.amc-copied { border-color: var(--amc-success-color); color: var(--amc-success-color); }
#advanced-months-calculator-wrapper .amc-result-breakdown { text-align: center; margin-top: 1rem; font-style: italic; color: var(--amc-text-muted); }

/* --- Timeline --- */
#advanced-months-calculator-wrapper .amc-timeline-container { margin-bottom: 1.5rem; }
#advanced-months-calculator-wrapper .amc-timeline-bar { width: 100%; height: 10px; background: var(--amc-primary-color); border-radius: 5px; overflow: hidden; }
#advanced-months-calculator-wrapper .amc-timeline-progress { height: 100%; background: var(--amc-accent-color); border-radius: 5px; width: 0; transition: width 0.5s ease-out; }
#advanced-months-calculator-wrapper .amc-timeline-labels { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.8rem; color: var(--amc-text-muted); }

/* --- General Content Section Styling --- */
#advanced-months-calculator-wrapper .amc-content-section { background: var(--amc-card-bg); padding: 2rem; border-radius: 16px; border: 1px solid var(--amc-border-color); }
#advanced-months-calculator-wrapper .amc-content-section.amc-alternate-bg { background: var(--amc-bg-light); }

/* --- Specific Section Styles --- */
#advanced-months-calculator-wrapper .amc-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
#advanced-months-calculator-wrapper .amc-step { display: flex; align-items: center; gap: 1rem; background: var(--amc-bg-light); padding: 1rem; border-radius: 10px; }
#advanced-months-calculator-wrapper .amc-step-number { font-size: 2rem; font-weight: 700; color: var(--amc-accent-color); background: var(--amc-primary-color); width: 50px; height: 50px; min-width: 50px; border-radius: 50%; display: grid; place-items: center; }
#advanced-months-calculator-wrapper .amc-step .amc-h4 { margin-bottom: 0.2rem; }
#advanced-months-calculator-wrapper .amc-step .amc-p { color: var(--amc-text-muted); }

#advanced-months-calculator-wrapper .amc-list { list-style: none; margin-top: 1rem; padding: 0; }
#advanced-months-calculator-wrapper .amc-list-item { padding: 0.5rem 0; }
#advanced-months-calculator-wrapper .amc-list-item i { color: var(--amc-success-color); margin-right: 0.75rem; }

#advanced-months-calculator-wrapper .amc-facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
#advanced-months-calculator-wrapper .amc-fact-card { background: var(--amc-primary-color); padding: 1.5rem; border-radius: 12px; border-left: 4px solid var(--amc-accent-color); }
#advanced-months-calculator-wrapper .amc-fact-card .amc-h4 { margin-bottom: 0.5rem; }
#advanced-months-calculator-wrapper .amc-fact-card .amc-h4 i { margin-right: 0.5rem; color: var(--amc-accent-color); }

#advanced-months-calculator-wrapper .amc-app-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
#advanced-months-calculator-wrapper .amc-app-item { display: flex; align-items: center; gap: 1rem; background: var(--amc-card-bg); padding: 1rem; border-radius: 8px; }
#advanced-months-calculator-wrapper .amc-app-item i { font-size: 1.5rem; color: var(--amc-accent-color); }

/* --- FAQ Section --- */
#advanced-months-calculator-wrapper .amc-faq-item { border-bottom: 1px solid var(--amc-border-color); }
#advanced-months-calculator-wrapper .amc-faq-question { width: 100%; background: none; border: none; color: #fff; padding: 1rem 0; text-align: left; font-size: 1.1rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
#advanced-months-calculator-wrapper .amc-faq-question i { transition: transform 0.3s ease; }
#advanced-months-calculator-wrapper .amc-faq-question.amc-active i { transform: rotate(180deg); }
#advanced-months-calculator-wrapper .amc-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; }
#advanced-months-calculator-wrapper .amc-faq-answer .amc-p { padding-bottom: 1rem; color: var(--amc-text-muted); }

/* --- Related Calculators --- */
#advanced-months-calculator-wrapper .amc-related-calculators { text-align: center; }
#advanced-months-calculator-wrapper .amc-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
#advanced-months-calculator-wrapper .amc-related-link { background: var(--amc-card-bg); color: var(--amc-text-color); text-decoration: none; padding: 1rem; border-radius: 8px; border: 1px solid var(--amc-border-color); transition: all 0.3s ease; display: block; }
#advanced-months-calculator-wrapper .amc-related-link:hover { background: var(--amc-primary-color); border-color: var(--amc-accent-color); transform: translateY(-5px); }
#advanced-months-calculator-wrapper .amc-related-link i { display: block; font-size: 2rem; margin-bottom: 0.5rem; color: var(--amc-accent-color); }

/* --- Footer --- */
#advanced-months-calculator-wrapper .amc-footer { text-align: center; margin-top: 2rem; }
#advanced-months-calculator-wrapper .amc-footer .amc-p { color: var(--amc-text-muted); }
#advanced-months-calculator-wrapper .amc-hidden { display: none !important; }

/* --- Responsive Design --- */
@media (max-width: 768px) {
    #advanced-months-calculator-wrapper { padding: 1rem; }
    #advanced-months-calculator-wrapper .amc-h1 { font-size: 2rem; }
    #advanced-months-calculator-wrapper .amc-date-inputs { flex-direction: column; align-items: stretch; }
    #advanced-months-calculator-wrapper .amc-arrow-icon { transform: rotate(90deg); margin: 0; }
    #advanced-months-calculator-wrapper .amc-app-list { grid-template-columns: 1fr; }
}

/* --- Responsive Design --- */

/* Medium Devices: Tablets & Small Laptops (e.g., <= 992px) */
@media (max-width: 992px) {
    #advanced-months-calculator-wrapper .amc-h1 {
        font-size: 2.2rem;
    }

    #advanced-months-calculator-wrapper .amc-container {
        gap: 1.5rem;
    }

    #advanced-months-calculator-wrapper .amc-date-inputs {
        gap: 1rem;
    }
	#advanced-months-calculator-wrapper .amc-steps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
	margin-top: 1rem;
}
	#advanced-months-calculator-wrapper .amc-facts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
	gap: 1.5rem;
	margin-top: 1rem;
}
}

/* Small Devices: Tablets (e.g., <= 768px) */
@media (max-width: 768px) {
    #advanced-months-calculator-wrapper {
        padding: 1.5rem;
    }

    #advanced-months-calculator-wrapper .amc-h1 {
        font-size: 2rem;
    }

    #advanced-months-calculator-wrapper .amc-h2 {
        font-size: 1.6rem;
    }
    
    #advanced-months-calculator-wrapper .amc-calculator-card,
    #advanced-months-calculator-wrapper .amc-content-section {
        padding: 1.5rem;
    }

    /* Stack date inputs vertically for better mobile layout */
    #advanced-months-calculator-wrapper .amc-date-inputs {
        flex-direction: column;
        align-items: stretch; /* Make inputs full width */
        gap: 1rem;
    }

    /* Rotate and center the arrow between stacked inputs */
    #advanced-months-calculator-wrapper .amc-arrow-icon {
        margin: 0.5rem auto;
        transform: rotate(90deg);
    }
    
    /* Stack action buttons */
    #advanced-months-calculator-wrapper .amc-action-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Stack result text and copy button */
    #advanced-months-calculator-wrapper .amc-result-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    #advanced-months-calculator-wrapper #amc-result-text {
        font-size: 1.3rem;
    }
    
    #advanced-months-calculator-wrapper .amc-copy-btn {
        align-self: flex-end; /* Move copy button to the right */
    }

    /* Change application list to a single column */
    #advanced-months-calculator-wrapper .amc-app-list {
        grid-template-columns: 1fr;
    }
	#advanced-months-calculator-wrapper .amc-steps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
	margin-top: 1rem;
}
	#advanced-months-calculator-wrapper .amc-facts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
	gap: 1.5rem;
	margin-top: 1rem;
}
}

/* Extra Small Devices: Mobile Phones (e.g., <= 600px) */
@media (max-width: 600px) {
    #advanced-months-calculator-wrapper {
        padding: 1rem;
    }

    #advanced-months-calculator-wrapper .amc-container {
        gap: 1rem;
    }

    #advanced-months-calculator-wrapper .amc-header .amc-p {
        font-size: 1rem;
    }
    
    #advanced-months-calculator-wrapper .amc-radio-label {
        padding: 0.75rem 0.5rem;
        font-size: 0.9rem;
    }

    /* Stack "How to Use" steps vertically */
    #advanced-months-calculator-wrapper .amc-step {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 0.5rem;
    }
    
    #advanced-months-calculator-wrapper .amc-step-number {
        margin-bottom: 0.5rem;
    }
	#advanced-months-calculator-wrapper .amc-steps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
	margin-top: 1rem;
}
	#advanced-months-calculator-wrapper .amc-facts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
	gap: 1.5rem;
	margin-top: 1rem;
}
}

/* Very Small Devices: Small Mobile Phones (e.g., <= 420px) */
@media (max-width: 420px) {
    #advanced-months-calculator-wrapper {
        padding: 1rem 0.5rem;
    }

    #advanced-months-calculator-wrapper .amc-h1 {
        font-size: 1.8rem;
    }
    
    #advanced-months-calculator-wrapper .amc-h2 {
        font-size: 1.4rem;
    }

    #advanced-months-calculator-wrapper .amc-calculator-card,
    #advanced-months-calculator-wrapper .amc-content-section {
        padding: 1.25rem 1rem;
        border-radius: 12px;
    }

    #advanced-months-calculator-wrapper .amc-btn {
        font-size: 1rem;
        padding: 0.75rem;
    }

    #advanced-months-calculator-wrapper #amc-result-text {
        font-size: 1.1rem;
        word-break: break-word; /* Prevent overflow on very long results */
    }

    #advanced-months-calculator-wrapper .amc-faq-question {
        font-size: 1rem;
        padding: 0.8rem 0;
    }

    /* Ensure related calculator links don't get too squished */
    #advanced-months-calculator-wrapper .amc-related-grid {
        grid-template-columns: 1fr;
    }
	#advanced-months-calculator-wrapper .amc-steps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
	margin-top: 1rem;
}
	#advanced-months-calculator-wrapper .amc-facts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
	gap: 1.5rem;
	margin-top: 1rem;
}
}