/* padlopay Frontend Styles */

/* Paddle Checkout Styles */
.padlopay-checkout-container {
    @apply w-full max-w-2xl mx-auto p-6 bg-white rounded-lg shadow-lg;
}

.padlopay-checkout-header {
    @apply text-center mb-6;
}

.padlopay-checkout-title {
    @apply text-2xl font-bold text-gray-900 mb-2;
}

.padlopay-checkout-description {
    @apply text-gray-600;
}

.padlopay-checkout-form {
    @apply space-y-4;
}

.padlopay-checkout-field {
    @apply space-y-2;
}

.padlopay-checkout-label {
    @apply block text-sm font-medium text-gray-700;
}

.padlopay-checkout-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.padlopay-checkout-button {
    @apply w-full bg-blue-600 text-white py-3 px-4 rounded-md font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200;
}

.padlopay-checkout-button:disabled {
    @apply bg-gray-400 cursor-not-allowed;
}

.padlopay-checkout-error {
    @apply text-red-600 text-sm mt-1;
}

.padlopay-checkout-success {
    @apply text-green-600 text-sm mt-1;
}

.padlopay-checkout-loading {
    @apply flex items-center justify-center py-4;
}

.padlopay-checkout-loading-spinner {
    @apply animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600;
}

/* Paddle Popup Styles */
.padlopay-popup-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4;
}

.padlopay-popup-container {
    @apply bg-white rounded-lg shadow-xl max-w-md w-full max-h-96 overflow-y-auto;
}

.padlopay-popup-header {
    @apply flex items-center justify-between p-4 border-b;
}

.padlopay-popup-title {
    @apply text-lg font-semibold text-gray-900;
}

.padlopay-popup-close {
    @apply text-gray-400 hover:text-gray-600 cursor-pointer;
}

.padlopay-popup-content {
    @apply p-4;
}

/* Subscription Management Styles */
.padlopay-subscription-card {
    @apply bg-white rounded-lg shadow-md p-6 mb-4;
}

.padlopay-subscription-header {
    @apply flex items-center justify-between mb-4;
}

.padlopay-subscription-title {
    @apply text-lg font-semibold text-gray-900;
}

.padlopay-subscription-status {
    @apply px-3 py-1 rounded-full text-sm font-medium;
}

.padlopay-subscription-status.active {
    @apply bg-green-100 text-green-800;
}

.padlopay-subscription-status.paused {
    @apply bg-yellow-100 text-yellow-800;
}

.padlopay-subscription-status.cancelled {
    @apply bg-red-100 text-red-800;
}

.padlopay-subscription-details {
    @apply grid grid-cols-1 md:grid-cols-2 gap-4 mb-4;
}

.padlopay-subscription-detail {
    @apply space-y-1;
}

.padlopay-subscription-detail-label {
    @apply text-sm text-gray-600;
}

.padlopay-subscription-detail-value {
    @apply font-medium text-gray-900;
}

.padlopay-subscription-actions {
    @apply flex space-x-2;
}

.padlopay-subscription-button {
    @apply px-4 py-2 rounded-md font-medium text-sm transition-colors duration-200;
}

.padlopay-subscription-button.primary {
    @apply bg-blue-600 text-white hover:bg-blue-700;
}

.padlopay-subscription-button.secondary {
    @apply bg-gray-200 text-gray-800 hover:bg-gray-300;
}

.padlopay-subscription-button.danger {
    @apply bg-red-600 text-white hover:bg-red-700;
}

/* Responsive Design */
@media (max-width: 768px) {
    .padlopay-checkout-container {
        @apply p-4;
    }
    
    .padlopay-subscription-details {
        @apply grid-cols-1;
    }
    
    .padlopay-subscription-actions {
        @apply flex-col space-x-0 space-y-2;
    }
    
    .padlopay-subscription-button {
        @apply w-full;
    }
}

/* Paddlepay Button Shortcode Styles */
.paddlepay-button-container {
    @apply w-full max-w-sm mx-auto text-center space-y-4 p-4;
}

.paddlepay-button-title {
    @apply text-2xl font-bold text-gray-900 mb-3;
}

.paddlepay-button-image {
    @apply mb-4;
}

.paddlepay-button-image img {
    @apply w-full h-auto rounded-lg shadow-md;
}

.paddlepay-button-price {
    @apply text-xl font-semibold text-gray-700 mb-4;
}

/* Remove underline from sale prices but keep strikethrough for regular price */
.paddlepay-button-price .woocommerce-Price-amount,
.paddlepay-button-price ins,
.paddlepay-button-price ins .woocommerce-Price-amount,
.paddlepay-button-price ins .amount,
.paddlepay-button-price .amount {
    text-decoration: none !important;
}

/* Keep strikethrough for regular price when on sale */
.paddlepay-button-price del,
.paddlepay-button-price del .woocommerce-Price-amount,
.paddlepay-button-price del .amount {
    text-decoration: line-through !important;
}

.paddlepay-button-description {
    @apply text-gray-600 mb-4 text-left;
}

.paddlepay-button-wrap {
    @apply mt-4;
}

.paddlepay-checkout-button {
    @apply inline-block w-full px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-colors duration-200 text-center;
    text-decoration: none !important;
}

.paddlepay-checkout-button:hover {
    @apply text-white;
    text-decoration: none !important;
}

.paddlepay-checkout-button:focus,
.paddlepay-checkout-button:active {
    text-decoration: none !important;
    outline: none;
}