/* ============================================
   GRAPESJS PREMIUM iOS DESIGN
   Best-in-class page builder styling
   ============================================ */

:root {
  --gjs-primary: hsl(var(--primary));
  --gjs-primary-fg: hsl(var(--primary-foreground));
  --gjs-primary-light: hsl(var(--primary) / 0.1);
  --gjs-bg: hsl(0, 0%, 100%);
  --gjs-bg-muted: hsl(0, 0%, 98%);
  --gjs-border: hsl(0, 0%, 90%);
  --gjs-text: hsl(0, 0%, 10%);
  --gjs-text-muted: hsl(0, 0%, 45%);
  --gjs-radius: 1rem;
  --gjs-radius-sm: 0.75rem;
  --gjs-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  --gjs-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --gjs-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --gjs-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark :root {
  --gjs-bg: hsl(0, 0%, 12%);
  --gjs-bg-muted: hsl(0, 0%, 16%);
  --gjs-border: hsl(0, 0%, 25%);
  --gjs-text: hsl(0, 0%, 95%);
  --gjs-text-muted: hsl(0, 0%, 65%);
}

/* ============================================
   BLOCKS PANEL - Premium Grid Design
   ============================================ */

#blocks,
#desktop-blocks-view,
#mobile-blocks-view {
  padding: 1rem;
  background: transparent;
}

/* Block Categories */
.gjs-block-category {
  margin-bottom: 2rem !important;
  border: none !important;
}

.gjs-block-category .gjs-title {
  padding: 0.875rem 1rem !important;
  margin: 0 0 1rem 0 !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--gjs-text-muted) !important;
  background: var(--gjs-bg-muted) !important;
  border: none !important;
  border-radius: var(--gjs-radius-sm) !important;
  cursor: pointer !important;
  transition: var(--gjs-transition) !important;
  user-select: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.gjs-block-category .gjs-title:hover {
  background: var(--gjs-primary-light) !important;
  color: var(--gjs-primary) !important;
  transform: translateX(2px) !important;
}

.gjs-block-category .gjs-title::after {
  content: '▼' !important;
  font-size: 0.625rem !important;
  transition: transform 0.2s ease !important;
}

.gjs-block-category.gjs-open .gjs-title::after {
  transform: rotate(-180deg) !important;
}

/* Blocks Grid Container */
.gjs-blocks-c {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.875rem !important;
  padding: 0 !important;
  margin: 0 0 1.5rem 0 !important;
  background: none !important;
}

/* Premium Block Card */
.gjs-block {
  position: relative !important;
  min-height: 110px !important;
  padding: 1.125rem !important;
  background: var(--gjs-bg) !important;
  border: 1.5px solid var(--gjs-border) !important;
  border-radius: var(--gjs-radius) !important;
  box-shadow: var(--gjs-shadow) !important;
  cursor: grab !important;
  transition: var(--gjs-transition) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  overflow: hidden !important;
}

.gjs-block::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--gjs-primary), var(--gjs-primary) / 0.5) !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

.gjs-block:hover {
  border-color: var(--gjs-primary) !important;
  background: var(--gjs-bg-muted) !important;
  box-shadow: var(--gjs-shadow-md) !important;
  transform: translateY(-4px) scale(1.02) !important;
}

.gjs-block:hover::before {
  opacity: 1 !important;
}

.gjs-block:active {
  cursor: grabbing !important;
  transform: translateY(-1px) scale(0.98) !important;
  box-shadow: var(--gjs-shadow) !important;
}

/* Block Icon Container */
.gjs-block__media {
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--gjs-bg-muted) !important;
  border-radius: var(--gjs-radius-sm) !important;
  transition: var(--gjs-transition) !important;
  position: relative !important;
  z-index: 1 !important;
}

.gjs-block:hover .gjs-block__media {
  background: var(--gjs-primary) !important;
  transform: scale(1.05) !important;
}

/* Block Icons */
.gjs-block svg,
.gjs-block .gjs-block__media svg,
.gjs-block-svg {
  width: 28px !important;
  height: 28px !important;
  stroke-width: 1.75 !important;
  fill: var(--gjs-text) !important;
  color: var(--gjs-text) !important;
  transition: var(--gjs-transition) !important;
}

.gjs-block:hover svg,
.gjs-block:hover .gjs-block__media svg,
.gjs-block:hover .gjs-block-svg {
  fill: var(--gjs-primary-fg) !important;
  color: var(--gjs-primary-fg) !important;
  transform: scale(1.15) !important;
}

/* Block Label */
.gjs-block-label,
.gjs-block .gjs-block-label {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  color: var(--gjs-text) !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
  transition: var(--gjs-transition) !important;
  position: relative !important;
  z-index: 1 !important;
}

.gjs-block:hover .gjs-block-label {
  color: var(--gjs-primary) !important;
}

/* ============================================
   LAYERS PANEL - Tree Structure
   ============================================ */

#layers-container,
#desktop-layers-view,
#mobile-layers-view {
  padding: 1rem;
  background: transparent;
}

.gjs-layer {
  background: var(--gjs-bg) !important;
  border: 1.5px solid var(--gjs-border) !important;
  border-radius: var(--gjs-radius-sm) !important;
  margin-bottom: 0.625rem !important;
  transition: var(--gjs-transition) !important;
  overflow: hidden !important;
}

.gjs-layer:hover {
  background: var(--gjs-bg-muted) !important;
  border-color: var(--gjs-primary) !important;
  transform: translateX(3px) !important;
  box-shadow: var(--gjs-shadow) !important;
}

.gjs-layer.gjs-selected {
  background: var(--gjs-primary-light) !important;
  border-color: var(--gjs-primary) !important;
  box-shadow: 0 0 0 3px var(--gjs-primary-light) !important;
}

/* Layer Title */
.gjs-layer-title {
  padding: 0.875rem 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--gjs-text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.gjs-layer.gjs-selected .gjs-layer-title {
  font-weight: 700 !important;
  color: var(--gjs-primary) !important;
}

/* Layer Icons */
.gjs-layer-icon {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  fill: var(--gjs-text-muted) !important;
  transition: var(--gjs-transition) !important;
}

.gjs-layer:hover .gjs-layer-icon,
.gjs-layer.gjs-selected .gjs-layer-icon {
  fill: var(--gjs-primary) !important;
}

/* Layer Caret */
.gjs-layer-caret {
  width: 16px !important;
  height: 16px !important;
  fill: var(--gjs-text-muted) !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  flex-shrink: 0 !important;
}

.gjs-layer.gjs-open > .gjs-layer-title .gjs-layer-caret {
  transform: rotate(90deg) !important;
  fill: var(--gjs-primary) !important;
}

/* Nested Layers */
.gjs-layer-children {
  padding-left: 1.5rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* ============================================
   STYLES PANEL - Property Editor
   ============================================ */

#styles-container,
#desktop-styles-view,
#mobile-styles-view {
  padding: 1rem;
  background: transparent;
}

/* Style Sectors */
.gjs-sm-sector {
  margin-bottom: 1.25rem !important;
  border: 1.5px solid var(--gjs-border) !important;
  border-radius: var(--gjs-radius) !important;
  background: var(--gjs-bg) !important;
  overflow: hidden !important;
  transition: var(--gjs-transition) !important;
  box-shadow: var(--gjs-shadow) !important;
}

.gjs-sm-sector:hover {
  border-color: var(--gjs-primary) !important;
  box-shadow: var(--gjs-shadow-md) !important;
}

/* Sector Title */
.gjs-sm-sector-title {
  padding: 1rem 1.125rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--gjs-text) !important;
  background: var(--gjs-bg-muted) !important;
  border-bottom: 1.5px solid var(--gjs-border) !important;
  cursor: pointer !important;
  transition: var(--gjs-transition) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.gjs-sm-sector-title:hover {
  background: var(--gjs-primary-light) !important;
  color: var(--gjs-primary) !important;
  padding-left: 1.25rem !important;
}

.gjs-sm-sector.gjs-sm-open .gjs-sm-sector-title {
  background: var(--gjs-primary-light) !important;
  color: var(--gjs-primary) !important;
  border-bottom-color: var(--gjs-primary) !important;
  font-weight: 700 !important;
}

/* Sector Caret */
.gjs-sm-sector-caret {
  width: 14px !important;
  height: 14px !important;
  fill: currentColor !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.gjs-sm-sector.gjs-sm-open .gjs-sm-sector-caret {
  transform: rotate(180deg) !important;
}

/* Properties Container */
.gjs-sm-properties {
  padding: 1.125rem !important;
  background: var(--gjs-bg) !important;
}

/* Individual Property */
.gjs-sm-property {
  margin-bottom: 1.25rem !important;
}

.gjs-sm-property:last-child {
  margin-bottom: 0 !important;
}

/* Property Label */
.gjs-sm-label {
  display: block !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--gjs-text-muted) !important;
  margin-bottom: 0.625rem !important;
  text-transform: capitalize !important;
}

/* ============================================
   INPUT FIELDS
   ============================================ */

.gjs-input,
.gjs-field,
.gjs-sm-property input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.gjs-sm-property select,
.gjs-sm-property textarea {
  width: 100% !important;
  min-height: 44px !important;
  padding: 0.75rem 1rem !important;
  background: var(--gjs-bg) !important;
  border: 1.5px solid var(--gjs-border) !important;
  border-radius: var(--gjs-radius-sm) !important;
  font-size: 0.875rem !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: var(--gjs-text) !important;
  transition: var(--gjs-transition) !important;
  box-shadow: var(--gjs-shadow) !important;
}

.gjs-input:hover,
.gjs-field:hover,
.gjs-sm-property input:hover,
.gjs-sm-property select:hover,
.gjs-sm-property textarea:hover {
  border-color: var(--gjs-primary) !important;
  box-shadow: var(--gjs-shadow-md) !important;
}

.gjs-input:focus,
.gjs-field:focus,
.gjs-sm-property input:focus,
.gjs-sm-property select:focus,
.gjs-sm-property textarea:focus {
  outline: none !important;
  border-color: var(--gjs-primary) !important;
  box-shadow: 0 0 0 4px var(--gjs-primary-light), var(--gjs-shadow-md) !important;
  transform: translateY(-1px) !important;
}

/* Select Dropdown */
.gjs-select,
.gjs-sm-property select {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M4.427 6.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 6H4.604a.25.25 0 00-.177.427z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 16px !important;
  padding-right: 3rem !important;
  cursor: pointer !important;
}

/* Textarea */
.gjs-sm-property textarea {
  min-height: 88px !important;
  resize: vertical !important;
}

/* ============================================
   COLOR PICKER
   ============================================ */

input[type="color"].gjs-field {
  min-height: 44px !important;
  padding: 0.5rem !important;
  cursor: pointer !important;
  border: 2px solid var(--gjs-border) !important;
}

input[type="color"].gjs-field:hover {
  border-color: var(--gjs-primary) !important;
  transform: scale(1.05) !important;
}

.gjs-field-colorp-c {
  width: 44px !important;
  height: 44px !important;
  border: 2px solid var(--gjs-border) !important;
  border-radius: var(--gjs-radius-sm) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: var(--gjs-transition) !important;
  box-shadow: var(--gjs-shadow) !important;
}

.gjs-field-colorp-c:hover {
  border-color: var(--gjs-primary) !important;
  transform: scale(1.08) !important;
  box-shadow: var(--gjs-shadow-md) !important;
}

/* ============================================
   CHECKBOXES & RADIOS
   ============================================ */

input[type="checkbox"],
input[type="radio"] {
  width: 20px !important;
  height: 20px !important;
  accent-color: var(--gjs-primary) !important;
  cursor: pointer !important;
}

/* ============================================
   BUTTONS
   ============================================ */

.gjs-btn-prim {
  min-height: 44px !important;
  padding: 0.75rem 1.5rem !important;
  background: var(--gjs-primary) !important;
  color: var(--gjs-primary-fg) !important;
  border: none !important;
  border-radius: var(--gjs-radius) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--gjs-transition) !important;
  box-shadow: var(--gjs-shadow) !important;
}

.gjs-btn-prim:hover {
  background: var(--gjs-primary) !important;
  filter: brightness(1.1) !important;
  box-shadow: var(--gjs-shadow-md) !important;
  transform: translateY(-2px) !important;
}

.gjs-btn-prim:active {
  transform: translateY(0) !important;
  box-shadow: var(--gjs-shadow) !important;
}

/* ============================================
   CANVAS FRAME
   ============================================ */

.gjs-cv-canvas {
  background: var(--gjs-bg-muted) !important;
}

.gjs-frame {
  border-radius: var(--gjs-radius) !important;
  box-shadow: var(--gjs-shadow-md) !important;
}

/* ============================================
   TOOLBAR
   ============================================ */

.gjs-toolbar {
  background: var(--gjs-bg) !important;
  border: 1.5px solid var(--gjs-border) !important;
  border-radius: var(--gjs-radius-sm) !important;
  box-shadow: var(--gjs-shadow-lg) !important;
  padding: 0.375rem !important;
}

.gjs-toolbar-item {
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 0.5rem !important;
  transition: var(--gjs-transition) !important;
}

.gjs-toolbar-item:hover {
  background: var(--gjs-primary-light) !important;
  color: var(--gjs-primary) !important;
}

/* ============================================
   SCROLLBARS
   ============================================ */

.gjs-blocks-c::-webkit-scrollbar,
#layers-container::-webkit-scrollbar,
#styles-container::-webkit-scrollbar {
  width: 8px;
}

.gjs-blocks-c::-webkit-scrollbar-track,
#layers-container::-webkit-scrollbar-track,
#styles-container::-webkit-scrollbar-track {
  background: var(--gjs-bg-muted);
  border-radius: 4px;
}

.gjs-blocks-c::-webkit-scrollbar-thumb,
#layers-container::-webkit-scrollbar-thumb,
#styles-container::-webkit-scrollbar-thumb {
  background: var(--gjs-border);
  border-radius: 4px;
}

.gjs-blocks-c::-webkit-scrollbar-thumb:hover,
#layers-container::-webkit-scrollbar-thumb:hover,
#styles-container::-webkit-scrollbar-thumb:hover {
  background: var(--gjs-primary);
}

/* ============================================
   RESPONSIVE - Mobile Optimization
   ============================================ */

@media (max-width: 768px) {
  .gjs-blocks-c {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  .gjs-block {
    min-height: 100px !important;
    padding: 1rem !important;
  }

  .gjs-block__media {
    width: 48px !important;
    height: 48px !important;
  }

  .gjs-block svg {
    width: 24px !important;
    height: 24px !important;
  }

  .gjs-block-label {
    font-size: 0.75rem !important;
  }
}

/* ============================================
   ANIMATION - Smooth Transitions
   ============================================ */

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gjs-sm-properties {
  animation: slideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.gjs-block {
  animation: slideIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
}

.gjs-block:nth-child(1) { animation-delay: 0.02s; }
.gjs-block:nth-child(2) { animation-delay: 0.04s; }
.gjs-block:nth-child(3) { animation-delay: 0.06s; }
.gjs-block:nth-child(4) { animation-delay: 0.08s; }
.gjs-block:nth-child(5) { animation-delay: 0.1s; }
.gjs-block:nth-child(6) { animation-delay: 0.12s; }
.gjs-block:nth-child(7) { animation-delay: 0.14s; }
.gjs-block:nth-child(8) { animation-delay: 0.16s; }