/* ==========================================================================
Photon Integrated Program - Strict Brand Color Stylesheet
Brand Palette:
- Primary Accent: #ea3d0f (Photon Flame / Red-Orange)
- Secondary Accent: #008142 (Photon Forest Green)
- Dark Base / Typography: #231f20 (Photon Charcoal Black)
- Light Base: #ffffff (Pure White)
========================================================================== */

:root {
--photon-navy: #231f20;
--photon-blue: #008142;
--photon-dark-blue: #231f20;
--photon-gold: #ea3d0f;
--photon-amber: #ea3d0f;
--photon-light-bg: #ffffff;
--photon-card-bg: #ffffff;
--photon-text-dark: #231f20;
--photon-text-muted: #231f20;
--photon-border-color: #231f20;

/* Utility aliases for legacy card grids & components */
--navy: #231f20;
--gold: #ea3d0f;
--ace-blue: #008142;
--paper2: #ffffff;
--line: rgba(35, 31, 32, 0.15);
--shadow-sm: 0 4px 10px rgba(35, 31, 32, 0.06);
--shadow: 0 10px 25px rgba(35, 31, 32, 0.12);
}

/* Base Body & Global Typography /
body {
font-family: 'Inter', sans-serif;
color: var(--photon-text-dark);
background-color: var(--photon-light-bg);
line-height: 1.6;
padding-bottom: 70px; / Space for mobile sticky footer */
}

h1, h2, h3, h4, h5, h6, .brand-font {
font-family: 'Poppins', sans-serif;
color: #231f20;
}

/* Custom Theme Color & Accent Utility Classes */
.bg-photon-navy { background-color: #231f20 !important; }
.bg-photon-dark { background-color: #231f20 !important; }
.bg-photon-gold { background-color: #ea3d0f !important; }
.bg-photon-light-bg { background-color: #ffffff !important; }
.text-photon-gold { color: #ea3d0f !important; }
.text-photon-blue { color: #008142 !important; }
.border-photon-gold { border-color: #ea3d0f !important; }

/* Strict Brand Overrides for Bootstrap Utilities used in HTML */
.text-primary { color: #008142 !important; }
.border-primary { border-color: #008142 !important; }
.text-success { color: #008142 !important; }
.text-warning { color: #ea3d0f !important; }
.border-warning { border-color: #ea3d0f !important; }
.bg-warning { background-color: #ea3d0f !important; color: #ffffff !important; }
.btn-outline-light {
color: #ffffff !important;
border-color: #ffffff !important;
}
.btn-outline-light:hover {
background-color: #ffffff !important;
color: #231f20 !important;
}

/* Hero Section */
.hero-section {
background: linear-gradient(135deg, #231f20 0%, #231f20 70%, #008142 100%);
color: #ffffff;
padding: 3rem 0;
position: relative;
}

/* Enquiry Cards & Inputs */
.card-enquiry {
border: 1px solid rgba(35, 31, 32, 0.12);
border-radius: 1rem;
box-shadow: 0 15px 30px rgba(35, 31, 32, 0.12);
background: #ffffff;
color: var(--photon-text-dark);
}

.form-control:focus, .form-select:focus {
border-color: #ea3d0f;
box-shadow: 0 0 0 0.25rem rgba(234, 61, 15, 0.25);
}

/* Primary Call-to-Action Buttons & Badges */
.btn-photon-primary {
background: #ea3d0f;
color: #ffffff !important;
font-weight: 700;
border: 1px solid #ea3d0f;
border-radius: 0.5rem;
padding: 0.8rem 1.5rem;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.btn-photon-primary:hover {
background: #008142;
border-color: #008142;
color: #ffffff !important;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(35, 31, 32, 0.25);
}

.badge-gold {
background-color: #ea3d0f;
color: #ffffff !important;
font-weight: 700;
padding: 0.4rem 0.8rem;
border-radius: 20px;
}

/* FAQ Details Accordion */
details.faq-item {
background-color: #ffffff;
border: 1px solid rgba(35, 31, 32, 0.15);
border-radius: 0.75rem;
margin-bottom: 1rem;
overflow: hidden;
transition: all 0.2s ease;
}

details.faq-item summary {
padding: 1.25rem 1.5rem;
font-weight: 600;
font-size: 1.05rem;
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
color: #231f20;
}

details.faq-item summary::-webkit-details-marker {
display: none;
}

details.faq-item summary::after {
content: '\f078';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
transition: transform 0.3s ease;
color: #008142;
}

details.faq-item[open] summary::after {
transform: rotate(180deg);
color: #ea3d0f;
}

details.faq-item[open] {
box-shadow: 0 4px 12px rgba(35, 31, 32, 0.08);
border-color: #ea3d0f;
}

.faq-answer {
padding: 0 1.5rem 1.25rem 1.5rem;
color: #231f20;
border-top: 1px solid rgba(35, 31, 32, 0.08);
margin-top: 0.5rem;
padding-top: 1rem;
}

/* CSS Modal Overlay */
.css-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(35, 31, 32, 0.88);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 9999;
padding: 1rem;
}

.css-modal:target {
opacity: 1;
pointer-events: auto;
}

.css-modal-card {
background: #ffffff;
border-radius: 1rem;
max-width: 550px;
width: 100%;
padding: 2.5rem;
position: relative;
text-align: center;
box-shadow: 0 25px 50px rgba(35, 31, 32, 0.35);
border: 2px solid #231f20;
}

.css-modal-close {
position: absolute;
top: 15px;
right: 20px;
font-size: 1.5rem;
text-decoration: none;
color: #231f20;
font-weight: bold;
}

/* Floating Action Buttons */
.floating-whatsapp {
position: fixed;
bottom: 80px;
right: 20px;
width: 56px;
height: 56px;
background-color: #008142;
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
box-shadow: 0 4px 14px rgba(35, 31, 32, 0.3);
z-index: 1000;
text-decoration: none;
transition: transform 0.3s ease, background-color 0.3s ease;
}

.floating-call {
position: fixed;
bottom: 145px;
right: 20px;
width: 56px;
height: 56px;
background-color: #ea3d0f;
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: 0 4px 14px rgba(35, 31, 32, 0.3);
z-index: 1000;
text-decoration: none;
transition: transform 0.3s ease, background-color 0.3s ease;
}

.floating-whatsapp:hover, .floating-call:hover {
transform: scale(1.1);
color: #ffffff;
}

/* Sticky Bottom Mobile Bar */
.sticky-mobile-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #231f20;
padding: 0.75rem 1rem;
display: flex;
gap: 10px;
z-index: 999;
box-shadow: 0 -4px 15px rgba(35, 31, 32, 0.25);
border-top: 2px solid #ea3d0f;
}

@media (min-width: 992px) {
.sticky-mobile-bar {
display: none;
}
body {
padding-bottom: 0;
}
}

/* Feature Cards & Methodologies */
.feature-card {
border: 1px solid rgba(35, 31, 32, 0.12);
border-radius: 0.75rem;
padding: 1.75rem;
background: #ffffff;
height: 100%;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(35, 31, 32, 0.1);
border-color: #ea3d0f;
}

.icon-box {
width: 60px;
height: 60px;
border-radius: 0.75rem;
background: rgba(0, 129, 66, 0.1);
color: #008142;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1.25rem;
}

.step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background: #ea3d0f;
color: #ffffff;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}

.img-zoom-container {
overflow: hidden;
border-radius: 0.75rem;
}

.img-zoom-container img {
transition: transform 0.5s ease;
}

.img-zoom-container:hover img {
transform: scale(1.05);
}

/* Carousel Section */
.dps-css-carousel {
position: relative;
width: 100%;
height: 100%;
min-height: 440px;
max-width: 760px;
margin: 0 auto;
overflow: hidden;
border-radius: 16px;
background-color: #231f20;
box-shadow: 0 10px 25px -5px rgba(35, 31, 32, 0.3);
user-select: none;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.dps-carousel-track {
display: flex;
width: 500%;
height: 100%;
transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.dps-carousel-slide {
width: 20%;
height: 100%;
flex-shrink: 0;
position: relative;
}

.dps-carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.dps-radio-input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
margin: 0;
}

#opt-1:checked ~ .dps-carousel-track { transform: translateX(0%); }
#opt-2:checked ~ .dps-carousel-track { transform: translateX(-20%); }
#opt-3:checked ~ .dps-carousel-track { transform: translateX(-40%); }
#opt-4:checked ~ .dps-carousel-track { transform: translateX(-60%); }
#opt-5:checked ~ .dps-carousel-track { transform: translateX(-80%); }

#opt-1:checked ~ .dps-dots-box label[for="opt-1"] .dps-dot-pill,
#opt-2:checked ~ .dps-dots-box label[for="opt-2"] .dps-dot-pill,
#opt-3:checked ~ .dps-dots-box label[for="opt-3"] .dps-dot-pill,
#opt-4:checked ~ .dps-dots-box label[for="opt-4"] .dps-dot-pill,
#opt-5:checked ~ .dps-dots-box label[for="opt-5"] .dps-dot-pill {
background-color: #ea3d0f !important;
width: 28px !important;
border-radius: 9999px !important;
opacity: 1 !important;
}

.dps-arrow-btn {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 20;
width: 40px;
height: 40px;
border-radius: 50%;
background: #ffffff;
color: #231f20;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 16px;
font-weight: bold;
box-shadow: 0 4px 12px rgba(35, 31, 32, 0.3);
border: 1px solid rgba(35, 31, 32, 0.15);
transition: background 0.2s, transform 0.2s;
}

.dps-arrow-btn:hover {
background: #ffffff;
color: #ea3d0f;
transform: translateY(-50%) scale(1.08);
}

.dps-arrow-btn.prev { left: 14px; }
.dps-arrow-btn.next { right: 14px; }

#opt-1:checked ~ .dps-nav-arrows .arrow-1-prev,
#opt-1:checked ~ .dps-nav-arrows .arrow-1-next { display: flex; }
#opt-2:checked ~ .dps-nav-arrows .arrow-2-prev,
#opt-2:checked ~ .dps-nav-arrows .arrow-2-next { display: flex; }
#opt-3:checked ~ .dps-nav-arrows .arrow-3-prev,
#opt-3:checked ~ .dps-nav-arrows .arrow-3-next { display: flex; }
#opt-4:checked ~ .dps-nav-arrows .arrow-4-prev,
#opt-4:checked ~ .dps-nav-arrows .arrow-4-next { display: flex; }
#opt-5:checked ~ .dps-nav-arrows .arrow-5-prev,
#opt-5:checked ~ .dps-nav-arrows .arrow-5-next { display: flex; }

/* Icon Card Grids (Exams & Curriculum) */
.icon-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.icon-card {
background: #ffffff;
border-radius: 16px;
padding: 26px 22px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--line);
transition: all .25s ease;
}

.icon-card:hover {
box-shadow: var(--shadow);
transform: translateY(-4px);
border-color: #008142;
}

.icon-card .ic {
width: 48px;
height: 48px;
border-radius: 12px;
background: #ffffff;
border: 1px solid rgba(35, 31, 32, 0.12);
display: flex;
align-items: center;
justify-content: center;
color: #008142;
margin-bottom: 14px;
}

.icon-card h4 {
font-family: 'Poppins', sans-serif;
font-size: .98rem;
color: #231f20;
margin-bottom: 6px;
}

.icon-card p {
font-size: .86rem;
color: #231f20;
margin: 0;
}

@media(max-width: 900px) { .icon-card-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width: 600px) { .icon-card-grid { grid-template-columns: 1fr; } }

/* Exam Pill Cards */
.exam-pill-card {
background: #ffffff;
border-radius: 14px;
padding: 16px 18px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--line);
display: flex;
align-items: center;
gap: 12px;
transition: all .3s ease;
}

.exam-pill-card .ic {
width: 38px;
height: 38px;
border-radius: 10px;
background: #231f20;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all .3s ease;
}

.exam-pill-card b {
font-family: 'Poppins', sans-serif;
font-size: .86rem;
color: #231f20;
display: block;
}

.exam-pill-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
border-color: #ea3d0f;
}

.exam-pill-card:hover .ic {
background: #ea3d0f;
color: #ffffff;
transform: rotate(-6deg) scale(1.08);
}

.exam-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}

@media(max-width: 700px) { .exam-grid { grid-template-columns: 1fr; } }

.exam-grid-5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}

.exam-grid-5 .exam-pill-card {
padding: 14px 12px;
justify-content: center;
text-align: center;
flex-direction: column;
gap: 8px;
}

@media(max-width: 900px) { .exam-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media(max-width: 600px) { .exam-grid-5 { grid-template-columns: repeat(2, 1fr) !important; } }

/* Differentiator Ribbons */
.ribbon-list {
display: flex;
flex-direction: column;
gap: 12px;
}

.ribbon-item {
display: flex;
align-items: center;
gap: 16px;
background: #ffffff;
border-radius: 12px;
padding: 14px 18px;
box-shadow: var(--shadow-sm);
border-left: 4px solid #ea3d0f;
transition: all .3s ease;
}

.ribbon-item .num {
font-family: 'Poppins', sans-serif;
font-weight: 800;
font-size: 1.3rem;
color: #ea3d0f;
width: 34px;
flex-shrink: 0;
}

.ribbon-item .ic {
width: 36px;
height: 36px;
border-radius: 8px;
background: #ffffff;
color: #008142;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid rgba(35, 31, 32, 0.12);
transition: all .3s ease;
}

.ribbon-item b {
font-family: 'Poppins', sans-serif;
font-size: .9rem;
color: #231f20;
}

.ribbon-item:hover {
transform: translateX(6px);
box-shadow: var(--shadow);
border-left-color: #008142;
}

.ribbon-item:hover .ic {
background: #231f20;
color: #ffffff;
}

/* Animations & Transitions */
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity .6s ease, transform .6s ease;
}

.reveal.in {
opacity: 1;
transform: translateY(0);
}