@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .text-blue-600 {
      --tw-text-opacity: 1;
      color: rgba(0, 0, 0, var(--tw-text-opacity)); /* Custom lighter blue */
    }

    .border-blue-600 {
      --tw-border-opacity: 1;
      border-color: rgba(242, 159, 44, var(--tw-border-opacity)); /* Custom darker blue */
    }

    .text-gray-500 {
        --tw-border-opacity: 1;
        border-color: rgba(150, 150, 150, var(--tw-border-opacity)); /* Custom darker blue */
    }
}

#hez-order-shipments {
    input[type="radio"] {
        @apply hidden !important;
    }

    /* Hide add package button when return type is selected */
    &:has(#hepsijet-return-fields-container[style*="display: block"]) #add-hepsijet-package,
    &:has(#hepsijet-return-fields-container:not([style*="display: none"])):has(#hepsijet-delivery-type-returned:checked) #add-hepsijet-package {
        display: none !important;
    }

    /* Simpler approach: when returned radio is checked, hide add package button */
    &:has(#hepsijet-delivery-type-returned:checked) #add-hepsijet-package {
        display: none !important;
    }

    .actions {
        a:hover {
            opacity: 0.7 !important;
            transition: 0.4s;
        }

        a:focus, svg:focus {
            outline: none !important;
            box-shadow: none !important;
        }
    }

    #shipping-companies {
        li label {
            @apply flex justify-center !important;
        }
    }

    #paywall-pro-area {
        * {
            cursor: not-allowed;
        }
    }

    #paywall-banner {
        h3 {
            font-size: 0.85em;
            line-height: normal;
        }

        svg {
            width: 0.8em;
        }

        h4 {
            font-size: 0.82em;
        }

        li {
            font-size: 0.90em;
            margin: 0.4em;
        }

        span {
            font-size: 0.80em;
            line-height: normal;
        }

        .campaign {
            h3, span {
                font-size: 0.80em;
                line-height: normal;
            }
        }
    }

    .campaign {
        .deadline {
            font-size: 0.75em;
        }

        .hezarfen-pricing * {
            font-size: 0.85em !important;

            h3 {
                font-size: 0.95em !important;
            }
        }

        background-color: #FFF3E3;

        &.campaign-hepsijet {
            #hepsijet-pricing * {
                font-size: 1em !important;
            }

            * {
                font-size: 0.6em !important;
                line-height: normal;
            }
        }
    }

    #countdown {
        div {
            font-size: 0.7em !important;
        }
    }

    #hps-upgrade:focus, #hps-upgrade:hover {
        color: #fff !important;
    }
}

.hez-shipment-migrate {
    a:hover, a:focus {
        opacity: 0.8;
    }
}

/* Feedback Request Styles */
#hezarfen-feedback-request {
    animation: slideInFromTop 0.3s ease-out;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-left: 4px solid #3b82f6;
}

#hezarfen-feedback-request button {
    transition: all 0.2s ease-in-out;
}

#hezarfen-feedback-request button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#hezarfen-feedback-request button:active {
    transform: translateY(0);
}

@keyframes slideInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark mode support for feedback */
@media (prefers-color-scheme: dark) {
    #hezarfen-feedback-request {
        background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
        border-color: #3b82f6;
    }
    
    #hezarfen-feedback-request h4 {
        color: #dbeafe;
    }
    
    #hezarfen-feedback-request p {
        color: #bfdbfe;
    }
}

.hezarfen-hide-form-field {display:none !important;}

.hezarfen-tc-num-field strong {
	display: block;
}

.shipment-forms-wrapper {
	display: flex;
	gap: 15px;
	justify-content: space-between;
}

/* Modern Modal Styles */
.hez-modal-overlay {
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease-out;
    z-index: 999999 !important; /* Ensure modal appears above WordPress admin bar and navigation */
}

.hez-modal-overlay.show .hez-modal-content {
    transform: scale(1);
    opacity: 1;
}

.hez-modal-content {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalSlideIn 0.3s ease-out;
}

.hez-modal-close:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.hez-modal-cancel:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
}

.hez-modal-confirm:hover {
    background-color: #dc2626;
}

.hez-modal-confirm:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.hez-modal-cancel:focus {
    box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.1);
}

/* Modal Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* Dark mode support for modal */
@media (prefers-color-scheme: dark) {
    .hez-modal-content {
        background-color: #1f2937;
        color: #f9fafb;
    }
    
    .hez-modal-content h3 {
        color: #f9fafb;
    }
    
    .hez-modal-content p {
        color: #d1d5db;
    }
    
    .hez-modal-cancel {
        background-color: #374151;
        border-color: #4b5563;
        color: #f9fafb;
    }
    
    .hez-modal-cancel:hover {
        background-color: #4b5563;
    }
    
    .hez-modal-close {
        color: #9ca3af;
    }
    
    .hez-modal-close:hover {
        color: #f9fafb;
        background-color: rgba(255, 255, 255, 0.1);
    }
}

/* Responsive modal adjustments */
@media (max-width: 640px) {
    .hez-modal-content {
        margin: 1rem;
        max-width: calc(100vw - 2rem);
    }
    
    .hez-modal-content .p-6 {
        padding: 1.25rem;
    }
}

/* Hepsijet Rotating Info Animation */
#hepsijet-rotating-info {
    position: relative;
    overflow: hidden;
}

#hepsijet-rotating-info .rotating-item {
    display: none;
    width: 100%;
    transition: all 0.5s ease-in-out;
    align-items: center;
    font-size: 0.85em;
}

#hepsijet-rotating-info .rotating-item.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

#hepsijet-rotating-info .rotating-item.fade-out {
    opacity: 0;
    transform: translateY(-10px);
}

#hepsijet-rotating-info .rotating-item.fade-in {
    opacity: 1;
    transform: translateY(0);
}