/*
Theme Name: Gebyok Prada Bali
Theme URI: https://www.gebyokpradabali.com
Description: Custom WordPress child theme for Gebyok Prada Bali with Elementor support. Black & Gold Balinese ornamental design.
Author: Gebyok Prada Bali
Author URI: https://www.gebyokpradabali.com
Template: hello-elementor
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gebyok-prada-bali
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
*/

/* ===================================================
   GEBYOK PRADA BALI - WordPress Elementor Theme
   Theme: Hitam Emas (Black & Gold) Bali
   =================================================== */

/* ===== CSS VARIABLES ===== */
:root {
  --gold: #D4AF37;
  --gold-light: #F5D77A;
  --gold-dark: #B8960C;
  --black: #0A0A0A;
  --black-light: #1A1A1A;
  --black-card: #141414;
  --white: #F5F0E1;
  --gray: #888;
  --transition: .35s cubic-bezier(.4,0,.2,1);
}

/* ===== GLOBAL RESET FOR ELEMENTOR ===== */
html { scroll-behavior: smooth; }

body,
.elementor-page,
.elementor {
  font-family: 'Poppins', sans-serif !important;
  background: var(--black) !important;
  color: var(--white) !important;
  overflow-x: hidden;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: 'Playfair Display', serif !important;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 10px; }

/* ===== ELEMENTOR SECTION OVERRIDES ===== */
.elementor-section {
  position: relative;
  overflow: hidden;
}

/* Dark sections */
.e-section-dark,
.elementor-section.gpb-dark {
  background-color: var(--black) !important;
}

.e-section-dark-alt,
.elementor-section.gpb-dark-alt {
  background-color: var(--black-light) !important;
}

/* Gold text color class */
.gpb-gold,
.gpb-gold .elementor-heading-title,
.gpb-gold .elementor-widget-text-editor {
  color: var(--gold) !important;
}

.gpb-white,
.gpb-white .elementor-heading-title {
  color: var(--white) !important;
}

.gpb-muted,
.gpb-muted p {
  color: rgba(245,240,225,.7) !important;
}

.gpb-muted-light,
.gpb-muted-light p {
  color: rgba(245,240,225,.55) !important;
}

/* ===== ELEMENTOR BUTTONS ===== */
.elementor-button.gpb-btn-primary,
.gpb-btn-primary .elementor-button {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important;
  color: var(--black) !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 14px 36px !important;
  font-weight: 600 !important;
  font-size: .9rem !important;
  letter-spacing: .5px;
  transition: var(--transition) !important;
}
.elementor-button.gpb-btn-primary:hover,
.gpb-btn-primary .elementor-button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 35px rgba(212,175,55,.35) !important;
}

.elementor-button.gpb-btn-outline,
.gpb-btn-outline .elementor-button {
  background: transparent !important;
  border: 2px solid var(--gold) !important;
  color: var(--gold) !important;
  border-radius: 50px !important;
  padding: 14px 36px !important;
  font-weight: 600 !important;
  transition: var(--transition) !important;
}
.elementor-button.gpb-btn-outline:hover,
.gpb-btn-outline .elementor-button:hover {
  background: var(--gold) !important;
  color: var(--black) !important;
  transform: translateY(-3px) !important;
}

/* ===== TAG / BADGE ===== */
.gpb-tag {
  display: inline-block !important;
  padding: 6px 20px !important;
  border: 1px solid rgba(212,175,55,.3) !important;
  border-radius: 50px !important;
  font-size: .7rem !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  background: transparent !important;
}

.gpb-hero-badge {
  display: inline-block !important;
  padding: 8px 24px !important;
  border: 1px solid var(--gold) !important;
  border-radius: 50px !important;
  font-size: .75rem !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
}

/* ===== ELEMENTOR IMAGE STYLING ===== */
.gpb-img-main .elementor-image img {
  border-radius: 20px !important;
  box-shadow: 0 25px 60px rgba(0,0,0,.5) !important;
  border: 2px solid rgba(212,175,55,.15) !important;
  height: 400px !important;
  object-fit: cover !important;
}

.gpb-img-float .elementor-image img {
  border-radius: 16px !important;
  border: 3px solid var(--gold) !important;
  box-shadow: 0 15px 40px rgba(0,0,0,.6) !important;
  width: 180px !important;
  height: 180px !important;
  object-fit: cover !important;
}

/* ===== PACKAGE CARDS ===== */
.gpb-package-card {
  background: var(--black-card) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1px solid rgba(212,175,55,.1) !important;
  transition: var(--transition) !important;
  position: relative !important;
}
.gpb-package-card:hover {
  transform: translateY(-10px) !important;
  border-color: rgba(212,175,55,.4) !important;
  box-shadow: 0 25px 60px rgba(212,175,55,.1) !important;
}
.gpb-package-card.gpb-featured {
  border-color: var(--gold) !important;
  box-shadow: 0 0 40px rgba(212,175,55,.12) !important;
}
.gpb-package-card .elementor-image img {
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  transition: var(--transition) !important;
}
.gpb-package-card:hover .elementor-image img {
  transform: scale(1.08) !important;
}
.gpb-package-card .elementor-widget-heading .elementor-heading-title {
  color: var(--gold) !important;
  font-size: 1.4rem !important;
}
.gpb-package-card .elementor-widget-text-editor {
  color: rgba(245,240,225,.6) !important;
  font-size: .85rem !important;
}

/* ===== GALLERY GRID ===== */
.gpb-gallery .elementor-image {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(212,175,55,.08) !important;
  cursor: pointer;
  transition: var(--transition) !important;
}
.gpb-gallery .elementor-image img {
  transition: var(--transition) !important;
}
.gpb-gallery .elementor-image:hover img {
  transform: scale(1.1) !important;
}

/* ===== AREA TAGS ===== */
.gpb-area-tag,
.gpb-area-tag .elementor-button {
  padding: 10px 24px !important;
  border-radius: 50px !important;
  background: var(--black-card) !important;
  border: 1px solid rgba(212,175,55,.15) !important;
  font-size: .85rem !important;
  color: rgba(245,240,225,.75) !important;
  transition: var(--transition) !important;
  cursor: default !important;
  display: inline-block !important;
  margin: 4px !important;
}
.gpb-area-tag:hover,
.gpb-area-tag .elementor-button:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  box-shadow: 0 4px 20px rgba(212,175,55,.12) !important;
  background: var(--black-card) !important;
}

/* ===== CONTACT CARDS ===== */
.gpb-contact-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 18px !important;
  padding: 24px !important;
  background: var(--black-card) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(212,175,55,.1) !important;
  transition: var(--transition) !important;
  margin-bottom: 20px !important;
}
.gpb-contact-card:hover {
  border-color: rgba(212,175,55,.35) !important;
  transform: translateX(6px) !important;
}

.gpb-icon-box {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(212,175,55,.15), rgba(212,175,55,.05)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.gpb-icon-box i {
  color: var(--gold) !important;
  font-size: 1.2rem !important;
}

/* ===== CONTACT FORM (Elementor Form / WPForms / CF7) ===== */
.gpb-contact-form,
.gpb-contact-form .elementor-widget-container {
  background: var(--black-card) !important;
  padding: 36px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(212,175,55,.1) !important;
}

.gpb-contact-form input,
.gpb-contact-form textarea,
.gpb-contact-form .elementor-field,
.gpb-contact-form .wpcf7-form-control {
  width: 100% !important;
  padding: 14px 18px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(212,175,55,.12) !important;
  border-radius: 12px !important;
  color: var(--white) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: .9rem !important;
  transition: var(--transition) !important;
  outline: none !important;
}
.gpb-contact-form input:focus,
.gpb-contact-form textarea:focus,
.gpb-contact-form .elementor-field:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,.1) !important;
}
.gpb-contact-form label,
.gpb-contact-form .elementor-field-label {
  font-size: .8rem !important;
  color: rgba(245,240,225,.5) !important;
  letter-spacing: .5px !important;
}

/* ===== SOCIAL ICONS ===== */
.gpb-socials .elementor-social-icon {
  width: 50px !important;
  height: 50px !important;
  border-radius: 14px !important;
  background: var(--black-card) !important;
  border: 1px solid rgba(212,175,55,.15) !important;
  color: var(--gold) !important;
  transition: var(--transition) !important;
}
.gpb-socials .elementor-social-icon:hover {
  background: var(--gold) !important;
  color: var(--black) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 25px rgba(212,175,55,.3) !important;
}

/* ===== FOOTER ===== */
.gpb-footer {
  background: var(--black-light) !important;
  border-top: 1px solid rgba(212,175,55,.1) !important;
}
.gpb-footer h4, .gpb-footer .elementor-heading-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}
.gpb-footer a,
.gpb-footer .elementor-widget-text-editor a {
  color: rgba(245,240,225,.5) !important;
  transition: var(--transition) !important;
}
.gpb-footer a:hover {
  color: var(--gold) !important;
  padding-left: 6px !important;
}
.gpb-footer-bottom {
  text-align: center !important;
  color: rgba(245,240,225,.35) !important;
  font-size: .8rem !important;
}
.gpb-footer-bottom span { color: var(--gold) !important; }

/* ===== WHATSAPP FAB ===== */
.gpb-wa-fab {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  z-index: 999 !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  color: #fff !important;
  font-size: 1.7rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 25px rgba(37,211,102,.4) !important;
  transition: var(--transition) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
.gpb-wa-fab:hover {
  transform: scale(1.1) translateY(-4px) !important;
  box-shadow: 0 10px 35px rgba(37,211,102,.5) !important;
  color: #fff !important;
}

/* ===== LIGHTBOX OVERRIDE ===== */
.elementor-lightbox .dialog-lightbox-widget-content {
  background: rgba(0,0,0,.92) !important;
  backdrop-filter: blur(10px);
}

/* ===== SECTION ORNAMENT BORDERS (Elementor) ===== */
.gpb-ornament-border::before,
.gpb-ornament-border::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 90% !important;
  max-width: 1000px !important;
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent 0%, rgba(212,175,55,.05) 10%, rgba(212,175,55,.3) 30%,
    var(--gold) 50%,
    rgba(212,175,55,.3) 70%, rgba(212,175,55,.05) 90%, transparent 100%) !important;
  z-index: 1 !important;
}
.gpb-ornament-border::before { top: 0 !important; }
.gpb-ornament-border::after { bottom: 0 !important; }

/* ===== ORNAMENTAL DIVIDER ===== */
.gpb-divider-ornate {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 20px auto 0 !important;
}
.gpb-divider-ornate .gpb-line {
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.gpb-divider-ornate .gpb-line:last-child {
  background: linear-gradient(90deg, var(--gold), transparent);
}
.gpb-divider-ornate svg {
  width: 28px; height: 28px; opacity: .8;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}
@keyframes sparkleAnim {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: .5; transform: scale(1); }
}
@keyframes omPulse {
  0%, 100% { opacity: .03; }
  50% { opacity: .06; }
}

.gpb-fade-up {
  animation: fadeUp .8s ease-out both;
}
.gpb-fade-down {
  animation: fadeDown .8s ease-out both;
}
.gpb-float {
  animation: floatSlow 8s ease-in-out infinite;
}

/* ===== ELEMENTOR-SPECIFIC OVERRIDES ===== */
/* Remove default Elementor section padding if needed */
.elementor-section.gpb-no-padding > .elementor-container {
  padding: 0 !important;
}

/* About features grid */
.gpb-feature-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  background: var(--black-card) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(212,175,55,.1) !important;
}
.gpb-feature-item i {
  color: var(--gold) !important;
  font-size: 1.1rem !important;
}
.gpb-feature-item span {
  font-size: .85rem !important;
  font-weight: 500 !important;
  color: var(--white) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .gpb-package-card .elementor-image img {
    height: 200px !important;
  }
}
@media (max-width: 768px) {
  .gpb-img-float .elementor-image img {
    width: 140px !important;
    height: 140px !important;
  }
}
