@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ==============================
   PURPLE × GOLD THEME VARIABLES
============================== */
:root {
    --primary-purple: #7C3AED;   /* Royal Purple */
    --deep-purple:    #4C1D95;   /* Dark Purple */
    --accent-gold:    #FACC15;   /* Rich Gold */
    --soft-bg:        #F5F3FF;   /* Lavender */
}

/* ==============================
   GLOBAL STYLES
============================== */
body {
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    position: relative;

    background:
        linear-gradient(rgba(245,243,255,0.78), rgba(245,243,255,0.78)),
        url("../images/color-install.jpg") center / cover no-repeat fixed;
}

/* Mobile background optimization */
@media (max-width: 768px) {
    body {
        background:
            linear-gradient(rgba(245,243,255,0.85), rgba(245,243,255,0.85)),
            url("../images/color-install.jpg") center top / cover no-repeat;
        background-attachment: scroll;
    }
}

/* ==============================
   ANIMATED GRADIENT OVERLAY
============================== */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
        120deg,
        rgba(124,58,237,0.18),
        rgba(250,204,21,0.22),
        rgba(76,29,149,0.18)
    );

    background-size: 300% 300%;
    animation: gradientMove 18s ease infinite;
}

@keyframes gradientMove {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ==============================
   TEXT COLORS
============================== */
.text-gold {
    color: var(--accent-gold);
}

.text-violet-900 {
    color: var(--deep-purple) !important;
}

.text-violet-700 {
    color: var(--primary-purple) !important;
}

/* ==============================
   BACKGROUNDS
============================== */
.bg-gold {
    background-color: var(--accent-gold);
}

.hover-bg-gold:hover {
    background-color: #EAB308;
}

.bg-violet-900 {
    background-color: var(--deep-purple) !important;
}

.bg-violet-800 {
    background-color: #5B21B6 !important;
}

.bg-violet-700 {
    background-color: var(--primary-purple) !important;
}

/* ==============================
   CARDS & SECTIONS
============================== */
section.bg-white,
.question-container,
#confirmation-section {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(6px);
    box-shadow: 0 20px 40px rgba(76,29,149,0.18);
}

/* ==============================
   BUTTONS
============================== */
button,
a.inline-block {
    background-image: linear-gradient(
        135deg,
        var(--primary-purple),
        var(--accent-gold)
    );
    color: #fff !important;
    box-shadow: 0 14px 32px rgba(124,58,237,0.45);
    transition: all 0.3s ease;
}

button:hover,
a.inline-block:hover {
    box-shadow: 0 20px 42px rgba(124,58,237,0.65);
    transform: translateY(-1px);
}

/* ==============================
   PHOTO UPLOAD
============================== */
.photo-upload-container {
    border: 2px dashed var(--primary-purple);
    background: rgba(245,243,255,0.6);
}

.photo-upload-container:hover {
    border-color: var(--accent-gold);
    background: rgba(245,243,255,0.9);
}

/* ==============================
   SERVICE CARDS
============================== */
.service-card {
    background: rgba(255,255,255,0.94);
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 34px rgba(76,29,149,0.25);
}

/* ==============================
   ANIMATIONS
============================== */
.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.progress-bar {
    transition: width 0.5s ease;
}