/* ============================================================
   UPDATED STYLES — Deatextile Donasi
   Lengkap: termasuk modal, tombol WhatsApp, form, dan responsif
============================================================ */

/* ---------- AURORA BACKGROUND (sama seperti sebelumnya) ---------- */
.aurora-wrapper {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: -2;
    pointer-events: none;
}

.aurora {
    position: absolute;
    width: 120%;
    height: 120%;
    filter: blur(90px);
    opacity: 0.55;
    mix-blend-mode: screen;
    animation: auroraFloat 18s ease-in-out infinite alternate;
}

.aurora-1 {
    background: radial-gradient(circle at 30% 70%,
        rgb(188, 160, 107) 0%,
        transparent 65%);
    animation-duration: 22s;
}

.aurora-2 {
    background: radial-gradient(circle at 70% 30%,
        rgba(0, 132, 255, 0.5) 0%,
        transparent 70%);
    animation-duration: 27s;
}

.aurora-3 {
    background: radial-gradient(circle at 50% 50%,
        rgb(245, 242, 90) 0%,
        transparent 75%);
    animation-duration: 30s;
}

@keyframes auroraFloat {
    0%   { transform: translate(-10%, -10%) scale(1); }
    50%  { transform: translate(10%, 5%)   scale(1.2); }
    100% { transform: translate(-5%, 10%)  scale(1); }
}

/* ============================================================
   GLOBAL BASE
============================================================ */
:root{
  --primary:#bca06b;
  --primary-dark:#a98d5f;
  --accent:#5d4c32;
  --glass-bg: rgba(255,255,255,0.35);
}

body {
    background: #f6f2eb;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color:#333;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5 { color:#443c2f; }

/* small helper styles */
.fade-up { opacity:0; transform:translateY(20px); animation:fadeUp .7s forwards ease-out; }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
.logo-deatextile { width:88px; height:88px; object-fit:contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12)); }
@media (max-width:768px){ .logo-deatextile{ width:72px; height:72px; } }
@media (max-width:576px){ .logo-deatextile{ width:56px; height:56px; } }

/* ============================================================
   CENTER GLASS CARD
============================================================ */
.col-lg-8 { margin-left:auto; margin-right:auto; }

/* ============================================================
   GLASS EFFECTS
============================================================ */
.glass-card {
    background: rgba(255,255,255,0.22);
    backdrop-filter: blur(18px);
    border:1px solid rgba(255,255,255,0.35);
    border-radius:20px;
    box-shadow:0 10px 28px rgba(0,0,0,0.08);
}

.glass-inner {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.3);
}

/* ============================================================
   PRESSET BUTTONS
============================================================ */
.preset {
    background:rgba(255,255,255,0.35);
    border-radius:14px;
    border:1px solid rgba(188,160,107,0.35);
    padding:8px 20px;
    color:var(--accent);
    transition:0.25s ease;
    font-weight:500;
    cursor:pointer;
}
.preset:hover { transform:translateY(-2px); }
.preset.active { background:var(--primary) !important; border-color:var(--primary) !important; color:#fff !important; box-shadow:0 6px 18px rgba(188,160,107,0.45); transform:scale(1.03); }

/* Primary button styles (overrides Bootstrap defaults slightly) */
.btn-primary {
    background:var(--primary) !important;
    border-color:var(--primary) !important;
    color:#fff !important;
    box-shadow:0 6px 18px rgba(188,160,107,0.35);
}
.btn-primary:hover { background:var(--primary-dark) !important; }

/* WhatsApp button (in modal) */
.btn-whatsapp {
    background: #25D366; color:#fff; border-color: #1DA851; box-shadow: 0 6px 18px rgba(37,211,102,0.18);
}
.btn-whatsapp:hover{ filter:brightness(.96); }

/* ============================================================
   INPUTS & FORM
============================================================ */
.form-control, .form-select {
    border-radius:10px;
    border:1px solid rgba(188,160,107,0.4);
}
.form-control:focus, .form-select:focus {
    border-color:var(--primary);
    box-shadow:0 0 0 .1rem rgba(188,160,107,0.35);
}

/* small form labels */
.form-label.small{ font-size:.85rem; color:#5a5244; }

/* ============================================================
   PROGRESS BAR
============================================================ */
.progress { background:rgba(188,160,107,0.15); height:12px !important; }
.progress-bar { background:var(--primary); }

/* ============================================================
   MODAL
============================================================ */
.modal-content { border-radius:20px; background:rgba(255,255,255,0.55); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.3); }
.modal-header .modal-title { color:var(--accent); font-weight:600; }

/* modal body spacing */
.modal-body { padding:1.25rem 1.5rem; }

/* ============================================================
   SMALL HELPERS
============================================================ */
.small-muted { color:#6b6356; font-size:.9rem; }
.text-muted { color:#7a7365; }

.alert-premium { background:rgba(188,160,107,0.18); border-left:4px solid var(--primary); color:var(--accent); border-radius:10px; padding:12px; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:768px){ .preset { width:48%; } }
@media (max-width:576px){ .glass-card { padding:1.4rem !important; } .preset { width:100%; } .btn-lg { padding:10px 14px; font-size:.92rem; } }

/* ============================================================
   ACCESSIBILITY & TOUCH
============================================================ */
.preset, .btn { touch-action: manipulation; }

/* ============================================================
   PRINT / MINOR UTILITY
============================================================ */
@media print{
  .aurora-wrapper, .btn, .modal { display:none !important; }
}