.version-controls .btn {
    padding: 10px;
    width: 42px;
    height: 42px;
}

.btn[disabled=""] {
    opacity: 0.5;
    pointer-events: none;
}

.resume-frontend-parent {
    position: relative;
}

.form-section {
  background: var(--color-white);
  border-radius: 15px;
  border: 2px dashed var(--color-light2);
  padding: 20px;
  position: relative;
}

.form-section.dragging {
    opacity: 0.7;
    transform: rotate(1deg) scale(0.95);
    z-index: 1000;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    border-color: var(--color-blue);
    max-height: 75px!important;
}

.form-section.drag-over {
    border-color: var(--color-blue);
    border-width: 2px;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
}


/* Section Drag Handle */
.section-drag-handle {
  position: absolute;
  left: -15px;
  top: 13px;
  width: 28px;
  height: 42px;
  background: var(--color-ultra);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 10;
  text-align: center;
  padding: 0;
}

.section-drag-handle:active {
    cursor: grabbing;
}

.form-section:hover .section-drag-handle {
    opacity: 1;
}

.section-drag-handle svg {
    width: 24px;
    height: auto;
    fill: var(--color-gray2);
}

/* Auto-collapse during drag */
.form-section.dragging .form-section-inner {
    max-height: 0 !important;
    padding: 0 20px !important;
    overflow: hidden !important;
}

.form-section.dragging .form-section-header {
    border-bottom: none;
}

/* ================================
   COLLAPSIBLE HEADERS
   ================================ */

.form-section-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
  user-select: none;
  position: relative;
}

.form-section-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--color-black);
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-section-toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}

.form-section-toggle svg {
    width: 24px;
    height: 24px;
}

.form-section.collapsed .form-section-toggle svg {
    transform: rotate(-180deg);
}

.form-section-inner {
}

.personal-info-section {
    margin-top: 20px;
}

.personal-info-section .form-section-inner {
    padding: 0;
}

.form-section.collapsed .form-section-inner {
    max-height: 0;
    padding: 0;
    overflow: hidden;
}

/* ================================
   SECTION ICONS
   ================================ */

.form-section-icon {
    width: 20px;
    height: 20px;
    opacity: 0.7;
    flex-shrink: 0;
}

/* ================================
   REPEATER ITEMS - DRAGGABLE
   ================================ */

.repeater-wrapper {
    position: relative;
}

.repeater-item {
    background: var(--color-white);
    border: 1px solid var(--color-light2);
    border-radius: 12px;
    margin-bottom: 15px;
    position: relative;
    transition: all 0.3s ease;
}

.repeater-item.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.repeater-item.drag-over {
    border-color: var(--color-blue);
    border-width: 2px;
    transform: translateY(-2px);
}

/* Repeater Drag Handle */
.drag-handle {
    position: absolute;
    left: -12px;
    top: 20px;
    width: 24px;
    height: 40px;
    background: var(--color-gray);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10;
}

.drag-handle:active {
    cursor: grabbing;
}

.repeater-item:hover .drag-handle {
    opacity: 1;
}

.drag-handle svg {
    width: 12px;
    height: 12px;
    fill: var(--color-gray2);
}

/* ================================
   REPEATER ITEM HEADERS
   ================================ */

.repeater-item-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--color-light2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: background-color 0.3s ease;
}

.repeater-item-header:hover {
    background-color: var(--color-water, #f8f9fa);
}

.repeater-item-title {
    font-weight: 600;
    color: var(--color-black);
    font-size: 14px;
}

.repeater-item-summary {
    font-size: 12px;
    color: var(--color-gray2);
    margin-top: 2px;
}

.repeater-item-toggle {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-water2);
    transition: all 0.3s ease;
}

.repeater-item-toggle svg {
    width: 10px;
    height: 10px;
    transition: transform 0.3s ease;
}

.repeater-item.collapsed .repeater-item-toggle svg {
    transform: rotate(-90deg);
}

.repeater-item-content {
    padding: 20px;
    transition: all 0.3s ease;
}

.repeater-item.collapsed .repeater-item-content {
    max-height: 0;
    padding: 0 20px;
    overflow: hidden;
}

/* ================================
   AUTO-SAVE INDICATOR
   ================================ */

.auto-save-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-gray2);
    transition: all 0.3s ease;
    position: relative;
}

.auto-save-indicator.pending {
    color: var(--color-black);
}

.auto-save-indicator.saving {
    color: var(--color-blue);
}

.auto-save-indicator.success {
    color: var(--color-blue);
}

.auto-save-indicator.error {
    color: var(--color-red);
}

.auto-save-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-light2);
    border-top: 2px solid var(--color-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Version History Controls */
.version-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.auto-save-indicator.has-history .version-controls {
    opacity: 1;
}

.version-btn {
    background: transparent;
    border: 1px solid var(--color-gray);
    color: var(--color-gray2);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.version-btn:hover:not(:disabled) {
    background: var(--color-water);
    border-color: var(--color-blue);
    color: var(--color-blue);
}

.version-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.version-btn svg {
    width: 12px;
    height: 12px;
}

/* ================================
   SORTABLE PLACEHOLDERS
   ================================ */

.section-sortable-placeholder {
    background: var(--color-water);
    border: 2px dashed var(--color-blue);
    border-radius: 15px;
    height: 80px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blue);
    font-size: 16px;
    font-weight: 500;
}

.sortable-placeholder {
    background: var(--color-water);
    border: 2px dashed var(--color-blue);
    border-radius: 12px;
    height: 60px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blue);
    font-size: 14px;
    font-weight: 500;
}

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

.remove-item-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: 1px solid #dc3545;
    color: #dc3545;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.remove-item-button:hover {
    background: #dc3545;
    color: white;
    opacity: 1;
    transform: scale(1.1);
}

.remove-item-button svg {
    width: 14px;
    height: 14px;
}

.add-item-button {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 15px;
    border: 2px dashed var(--color-gray);
    background: transparent;
    border-radius: 12px;
    transition: all 0.3s ease;
    margin-top: 15px;
}

.add-item-button:hover {
    border-color: var(--color-blue);
    background: var(--color-water);
    color: var(--color-blue);
    transform: translateY(-2px);
}

/* ================================
   RESPONSIVE DESIGN
   ================================ */

@media (max-width: 768px) {
    .section-drag-handle {
        position: static;
        width: 100%;
        height: 30px;
        margin-bottom: 10px;
        opacity: 1;
        border-radius: 8px;
        left: 0;
        transform: none;
    }

    .drag-handle {
        position: static;
        width: 100%;
        height: 30px;
        margin-bottom: 10px;
        opacity: 1;
        border-radius: 8px;
    }

    .remove-item-button {
        position: static;
        margin-top: 15px;
        margin-left: auto;
        margin-right: 0;
        width: auto;
        height: auto;
        padding: 8px 16px;
        border-radius: 20px;
    }

    .version-controls {
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .form-section-header {
        padding: 15px;
    }

    .form-section-inner {
        padding: 15px;
    }

    .repeater-item-content {
        padding: 15px;
    }
}