/* Gift Card Purchase Form Styles */
.bulk-purchase-notice {
    background: linear-gradient(135deg, #f0f8ff 0%, #e8f4fd 100%);
    padding: 20px;
    margin-bottom: 25px;
    border-left: 4px solid #ed0000;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.bulk-purchase-notice a {
    color: #ed0000;
    text-decoration: none;
    font-weight: 500;
}

.bulk-purchase-notice a:hover {
    text-decoration: underline;
}

.gift-card-purchase-form {
    max-width: 900px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.form-section {
    margin-bottom: 30px;
    padding: 30px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}

.form-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ed0000 0%, #ff6b6b 100%);
}

.form-section h3 {
    margin-top: 0;
    margin-bottom: 25px;
    color: #1a202c;
    font-size: 24px;
    font-weight: 600;
    position: relative;
    padding-bottom: 15px;
}

.form-section h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #ed0000 0%, #ff6b6b 100%);
    border-radius: 2px;
}

.form-section input {
    padding: 14px 10px;
    border-radius: 8px;
    border: 1px solid #bbb;
}

/* Gift Card Options - Hide Radio Buttons */
.gift-card-options {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 20px;
}

.gift-card-option {
    position: relative;
    padding: 20px !important;
    cursor: pointer;
    border: 3px solid #e2e8f0;
    border-radius: 16px;
    padding: 0;
    margin: 0;
    background: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.gift-card-option:hover {
    border-color: #cbd5e0;
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.gift-card-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

.gift-card-option input[type="radio"]:checked + .gift-card-visual {
    border-color: #ed0000;
    box-shadow: 0 0 0 3px rgba(237, 0, 0, 0.1);
}

.gift-card-option input[type="radio"]:checked ~ .gift-card-visual .gift-card-svg .selection-overlay {
    opacity: 0.1 !important;
}

.gift-card-option input[type="radio"]:checked ~ .gift-card-visual .gift-card-svg .checkmark-icon {
    opacity: 1 !important;
}

.gift-card-visual {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.gift-card-svg {
    width: 100%;
    height: auto;
    display: block;
}

.gift-card-svg svg {
    width: 100%;
    height: auto;
    display: block;
}

.gift-card-info {
    padding: 20px;
    background: white;
}

.gift-card-info h4 {
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: 600;
    color: #1a202c;
}

.price-range {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #4a5568;
    margin-bottom: 12px;
}

.price-range .min-price,
.price-range .max-price {
    font-weight: 600;
    color: #ed0000;
    font-size: 18px;
}

.gift-card-info .description {
    color: #718096;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

/* Enhanced Form Inputs */
.form-row {
    margin-bottom: 20px;
}

.form-row label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2d3748;
    font-size: 15px;
}

.form-row input,
.form-row textarea,
.form-row select {
    width: 100%;
    padding: 14px 16px !important;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    background: white;
    font-family: inherit;
    
    /* Enhanced autocomplete styling */
    -webkit-autocomplete-background: transparent;
    -webkit-box-shadow: 0 0 0 1000px white inset;
    -webkit-text-fill-color: #2d3748;
}

/* Autocomplete styling for webkit browsers */
.form-row input:-webkit-autofill,
.form-row input:-webkit-autofill:hover,
.form-row input:-webkit-autofill:focus,
.form-row input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #2d3748 !important;
    background-color: white !important;
    background-clip: content-box !important;
    border: 2px solid #10b981 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Autocomplete focus state */
.form-row input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset, 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
    border-color: #10b981 !important;
    transform: translateY(-1px);
}

/* Custom styling for autofilled valid fields */
.form-row input:valid {
    border-color: #10b981;
    background-color: #f0fdf4;
}

.form-row input:valid:focus {
    border-color: #ed0000;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(237, 0, 0, 0.1);
}

/* Better mobile autocomplete experience */
@media (max-width: 768px) {
    .form-row input,
    .form-row textarea,
    .form-row select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        -webkit-appearance: none;
        border-radius: 10px;
    }
}

/* Autocomplete dropdown styling */
.form-row input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    position: absolute;
    right: 0;
}

/* Enhanced autocomplete for specific field types */
.form-row input[type="email"]:-webkit-autofill,
.form-row input[type="tel"]:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #f0f9ff inset !important;
    border-color: #3b82f6 !important;
}

.form-row input[name*="address"]:-webkit-autofill,
.form-row input[name*="postcode"]:-webkit-autofill,
.form-row input[name*="town"]:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fef7ff inset !important;
    border-color: #a855f7 !important;
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
    outline: none;
    border-color: #ed0000;
    box-shadow: 0 0 0 3px rgba(237, 0, 0, 0.1);
    background-color: #fff;
    transform: translateY(-1px);
}

.form-row input:hover:not(:focus),
.form-row textarea:hover:not(:focus),
.form-row select:hover:not(:focus) {
    border-color: #cbd5e0;
}

.form-row input[type="checkbox"] {
    width: auto !important;
    height: auto !important;
    margin-right: 10px;
    padding: 0 !important;
    transform: scale(1.2);
    accent-color: #ed0000;
    position: relative;
    cursor: pointer;
    
    /* Remove conflicting styles */
    border: 2px solid #e2e8f0 !important;
    border-radius: 4px !important;
    background: white !important;
    
    /* Ensure it's clickable */
    opacity: 1 !important;
    pointer-events: auto !important;
}

.form-row input[type="checkbox"]:checked {
    background-color: #ed0000 !important;
    border-color: #ed0000 !important;
}

/*
.form-row input[type="checkbox"]:focus {
    outline: 2px solid #ed0000;
    outline-offset: 2px;
    box-shadow: none !important;
    transform: scale(1.2) !important;
}
    */

/* Checkbox label styling */
.form-row .checkbox-label,
.form-row label.checkbox-label {
    display: flex !important;
    align-items: flex-start !important;
    cursor: pointer;
    font-weight: 500;
    line-height: 1.5;
    gap: 10px;
}

/* Make sure the checkbox text is clickable */
.checkbox-row label,
.form-row.checkbox-row label {
    user-select: none;
}

/* Override any conflicting padding/margin for checkbox containers */
.form-row.checkbox-row,
.checkbox-row {
    margin-bottom: 20px;
}

/* Ensure checkbox container doesn't inherit form input styles */
.form-row input[type="checkbox"] {
    /* Reset any inherited styles that might be causing issues */
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important;
}

/* Custom checkbox styling for better visibility */
.form-row input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 10px 0 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
}

/* Better mobile checkbox */
@media (max-width: 768px) {
    .form-row input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        transform: scale(1.3);
    }
}

/* Enhanced Checkbox Styling */
.checkbox-row {
    margin-bottom: 25px !important;
}

.checkbox-label {
    display: flex !important;
    align-items: flex-start !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
    gap: 12px !important;
}

.checkbox-label input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid #cbd5e0 !important;
    border-radius: 4px !important;
    background: white !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    
    /* Reset appearance for custom styling */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    position: relative;
    transition: all 0.2s ease;
}

.checkbox-label input[type="checkbox"]:checked {
    background-color: #ed0000 !important;
    border-color: #ed0000 !important;
}

.checkbox-label input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}

.checkbox-label input[type="checkbox"]:hover {
    border-color: #ed0000 !important;
    box-shadow: 0 0 0 3px rgba(237, 0, 0, 0.1);
}

.checkbox-text {
    color: #2d3748;
    font-size: 15px;
    line-height: 1.5;
    margin-top: 1px; /* Align with checkbox */
}

.checkbox-row small {
    margin-left: 32px; /* Align with checkbox text */
    color: #718096;
    font-size: 13px;
    line-height: 1.4;
    margin-top: 6px;
    display: block;
}

/* Make the entire label clickable */
.checkbox-label:hover .checkbox-text {
    color: #1a202c;
}

/* Mobile improvements */
@media (max-width: 768px) {
    .checkbox-label {
        gap: 15px !important;
    }
    
    .checkbox-label input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
    }
    
    .checkbox-label input[type="checkbox"]:checked::after {
        font-size: 16px;
    }
    
    .checkbox-row small {
        margin-left: 37px;
    }
}

.form-row input[type="number"] {
    -moz-appearance: textfield;
}

.form-row input[type="number"]::-webkit-outer-spin-button,
.form-row input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form-row small {
    color: #718096;
    font-size: 13px;
    margin-top: 6px;
    display: block;
}

.form-row textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

.form-row select {
    cursor: pointer;
    /* Remove default browser styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Custom dropdown arrow */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px !important;
    
    /* Ensure no default styling shows through */
    background-color: white;
}

/* Enhanced Suggested Values */
.suggested-values {
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.suggested-values p {
    margin: 0 0 15px 0;
    font-weight: 600;
    color: #2d3748;
    font-size: 16px;
}

.suggested-value {
    margin: 6px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #ed0000 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(237, 0, 0, 0.2);
}

.suggested-value:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(237, 0, 0, 0.3);
}

.suggested-value:active {
    transform: translateY(0);
}

/* Enhanced Delivery Options */
.delivery-options {
    margin-bottom: 25px;
    display: grid;
    gap: 15px;
}

.delivery-options label {
    display: block;
    padding: 20px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    position: relative;
}

.delivery-options label:hover {
    border-color: #ed0000;
    background: #fef2f2;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(237, 0, 0, 0.1);
}

.delivery-options input[type="radio"] {
    margin-right: 12px;
    transform: scale(1.2);
    accent-color: #ed0000;
}

.delivery-options label.delivery-option-checked {
    border-color: #ed0000;
    background: #fef2f2;
    box-shadow: 0 0 0 3px rgba(237, 0, 0, 0.1);
}

/* Also ensure the regular checked styling works */
.delivery-options input[type="radio"]:checked + strong {
    color: #ed0000;
}

.delivery-details {
    margin-top: 25px;
    padding: 25px;
    border-radius: 12px;
    border-left: 4px solid #0ea5e9;
}

.delivery-details h4 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #0c4a6e;
    font-size: 18px;
    font-weight: 600;
}

/* Enhanced Purchase Summary */
#purchase-summary {
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 25px;
}

#purchase-summary p {
    margin: 12px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    gap: 10px; /* Add gap between items */
}

#purchase-summary p strong:first-child {
    flex-grow: 1; /* Let the label take available space */
}

#purchase-summary p .summary-value {
    flex-shrink: 0; /* Prevent value from shrinking */
    font-weight: 600;
    color: #15803d;
    white-space: nowrap; /* Prevent line breaks */
}

#purchase-summary hr {
    border: none;
    border-top: 2px solid #22c55e;
    margin: 20px 0;
    opacity: 0.3;
}

#purchase-summary p:last-child {
    font-size: 20px;
    font-weight: 700;
    color: #15803d;
    padding-top: 10px;
    border-top: 1px solid rgba(34, 197, 94, 0.2);
}

#purchase-summary p:last-child .summary-value {
    font-size: 22px;
    font-weight: 800;
}

/* Better spacing for summary items */
.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0;
    font-size: 16px;
    gap: 15px;
}

.summary-label {
    flex-grow: 1;
    font-weight: 600;
    color: #374151;
}

.summary-value {
    flex-shrink: 0;
    font-weight: 600;
    color: #15803d;
    text-align: right;
    white-space: nowrap;
}

.summary-total {
    font-size: 20px !important;
    font-weight: 700 !important;
    padding-top: 15px;
    border-top: 2px solid rgba(34, 197, 94, 0.3);
    margin-top: 15px;
}

.summary-total .summary-value {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #15803d !important;
}

/* Enhanced Mobile Responsive Design */
@media (max-width: 768px) {
    .summary-item {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .summary-label {
        font-size: 15px;
    }
    
    .summary-value {
        font-size: 15px;
        font-weight: 600;
    }
    
    .summary-total .summary-label {
        font-size: 18px;
    }
    
    .summary-total .summary-value {
        font-size: 20px !important;
    }
}

@media (max-width: 480px) {
    #purchase-summary {
        padding: 20px;
    }
    
    .summary-item {
        margin: 10px 0;
        gap: 8px;
    }
    
    .summary-label {
        font-size: 14px;
    }
    
    .summary-value {
        font-size: 14px;
    }
    
    .summary-total .summary-label {
        font-size: 16px;
    }
    
    .summary-total .summary-value {
        font-size: 18px !important;
    }
}

/* Enhanced Buttons */
.buy-now-button {
    background: linear-gradient(135deg, #ed0000 0%, #dc2626 100%);
    color: white;
    padding: 18px 35px;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(237, 0, 0, 0.3);
}

.buy-now-button:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(237, 0, 0, 0.4);
}

.buy-now-button:active {
    transform: translateY(-1px);
}

.continue-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 150px;
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.continue-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.continue-btn:active {
    transform: translateY(0);
}

/* Enhanced Quantity Quick Select */
.quantity-quick-select-container {
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.quantity-quick-select-container p {
    margin: 0 0 15px 0;
    font-weight: 600;
    color: #2d3748;
    font-size: 16px;
}

.quantity-quick-select {
    margin: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 45px;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

.quantity-quick-select:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.quantity-quick-select:active {
    transform: translateY(0);
}

/* Enhanced Section Actions */
.section-actions {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    text-align: right;
}

/* Enhanced Error Messages */
.error-message {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #dc2626;
    padding: 15px 20px;
    border-radius: 10px;
    border-left: 4px solid #dc2626;
    margin-bottom: 20px;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.1);
}

/* Enhanced Character Counter */
#char-count {
    font-weight: 600;
    color: #4a5568;
}

/* Form Animations */
.form-section {
    animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Field States */
.gcj-field-error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
    background-color: #fef2f2 !important;
}

.gcj-field-valid {
    border-color: #10b981 !important;
    background-color: #f0fdf4 !important;
}

/* Enhanced Responsive Design */
@media (max-width: 768px) {
    .gift-card-purchase-form {
        margin: 0 15px;
    }
    
    .form-section {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .gift-card-options {
        grid-template-columns: 100%;
        gap: 20px;
    }
    
    .form-row input,
    .form-row textarea,
    .form-row select {
        padding: 12px 14px;
        font-size: 16px;
    }
    
    .suggested-value,
    .quantity-quick-select {
        display: block;
        margin: 8px 0;
        width: 100%;
    }
    
    .buy-now-button {
        padding: 16px 30px;
        font-size: 16px;
    }
    
    #purchase-summary p {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

@media (max-width: 480px) {
    .form-section {
        padding: 15px;
    }
    
    .form-section h3 {
        font-size: 20px;
    }
    
    .gift-card-info {
        padding: 15px;
    }
    
    .gift-card-info h4 {
        font-size: 18px;
    }
    
    .delivery-options label {
        padding: 15px;
    }
    
    .suggested-values,
    .quantity-quick-select-container,
    .delivery-details {
        padding: 15px;
    }
}

/* Focus States for Accessibility */
.gift-card-option:focus-within {
    outline: 2px solid #ed0000;
    outline-offset: 2px;
}

/* Loading States */
.buy-now-button:disabled,
.continue-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Custom Scrollbar for Better UX */
.form-section::-webkit-scrollbar {
    width: 6px;
}

.form-section::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.form-section::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

.form-section::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Custom Notification System */
#gcj-notifications {
    position: fixed;
    top: 250px;
    right: 20px;
    z-index: 10000;
    max-width: 400px;
}

.gcj-notification {
    margin-bottom: 10px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.gcj-notification-show {
    opacity: 1;
    transform: translateX(0);
}

.gcj-notification-content {
    display: flex;
    align-items: flex-start;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: white;
    border-left: 4px solid;
    position: relative;
}

.gcj-notification-error .gcj-notification-content {
    border-left-color: #dc2626;
    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
}

.gcj-notification-success .gcj-notification-content {
    border-left-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.gcj-notification-info .gcj-notification-content {
    border-left-color: #3b82f6;
    background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
}

.gcj-notification-icon {
    font-size: 20px;
    margin-right: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}

.gcj-notification-message {
    flex-grow: 1;
    color: #333;
    font-size: 14px;
    line-height: 1.4;
}

.gcj-notification-message strong {
    color: #111;
    font-weight: 600;
}

.gcj-notification-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.gcj-notification-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
}

/* Field Error Styling */
.gcj-field-error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1) !important;
    background-color: #fef2f2;
}

.gcj-field-error:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* Loading state for form */
.buy-now-button:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

.buy-now-button:disabled:hover {
    background: #9ca3af;
    transform: none;
    box-shadow: none;
}

/* Mobile responsiveness for notifications */
@media (max-width: 768px) {
    #gcj-notifications {
        left: 10px;
        right: 10px;
        top: 10px;
        max-width: none;
    }
    
    .gcj-notification-content {
        padding: 12px;
    }
    
    .gcj-notification-message {
        font-size: 13px;
    }
}

/* Smooth highlighting for error fields */
@keyframes fieldError {
    0% { background-color: #fef2f2; }
    50% { background-color: #fee2e2; }
    100% { background-color: #fef2f2; }
}

.gcj-field-error {
    animation: fieldError 0.3s ease;
}

/* Better focus states */
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
    outline: none;
    border-color: #ed0000;
    box-shadow: 0 0 0 3px rgba(237, 0, 0, 0.1);
    background-color: #fff;
}

/* Success state for valid fields */
.gcj-field-valid {
    border-color: #10b981 !important;
    background-color: #f0fdf4;
}


/* Gift Card Cart Styling */
.gift-card-cart-item {
    padding: 0;
    margin: 0;
}

.gift-card-product-name {
    font-weight: 600;
    font-size: 16px;
    color: #1a202c;
    margin-bottom: 12px;
}

.gift-card-details {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
    margin-top: 8px;
}

.gift-card-info-row {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.gift-card-value {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.gift-card-delivery {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.gift-card-message-section,
.gift-card-recipient-section,
.gift-card-delivery-address {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px;
    margin-top: 10px;
}

.gift-message-header,
.recipient-header,
.delivery-header {
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.gift-message-detail,
.recipient-detail,
.delivery-detail {
    color: #6b7280;
    font-size: 13px;
    margin-bottom: 4px;
    line-height: 1.4;
}

.gift-message-detail strong,
.recipient-detail strong,
.delivery-detail strong {
    color: #374151;
}

.gift-message-preview {
    font-style: italic;
    cursor: help;
}

/* Cart table enhancements */
.woocommerce-cart-form__contents .gift-card-cart-item {
    max-width: 100%;
}

/* Responsive design for cart */
@media (max-width: 768px) {
    .gift-card-info-row {
        flex-direction: column;
        gap: 8px;
    }
    
    .gift-card-value,
    .gift-card-delivery {
        font-size: 12px;
        padding: 4px 8px;
    }
    
    .gift-card-details {
        padding: 10px;
    }
    
    .gift-message-detail,
    .recipient-detail,
    .delivery-detail {
        font-size: 12px;
    }
}

/* Cart item hover effects */
.cart_item:hover .gift-card-details {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    transition: all 0.3s ease;
}

/* Enhanced cart totals styling to match form */
.cart-collaterals .cart_totals {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #22c55e;
    border-radius: 12px;
    padding: 25px;
}

.cart-collaterals .cart_totals h2 {
    color: #15803d;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(34, 197, 94, 0.3);
}

.cart-collaterals .cart_totals table {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cart-collaterals .cart_totals .order-total {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

.cart-collaterals .cart_totals .order-total th,
.cart-collaterals .cart_totals .order-total td {
    color: white;
    font-weight: 700;
    font-size: 18px;
    padding: 15px;
}

/* Checkout button styling */
.wc-proceed-to-checkout .checkout-button {
    background: linear-gradient(135deg, #ed0000 0%, #ff6b6b 100%);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(237, 0, 0, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}

.wc-proceed-to-checkout .checkout-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(237, 0, 0, 0.4);
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
}

/* Update cart button styling */
.woocommerce-cart-form .button[name="update_cart"] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.woocommerce-cart-form .button[name="update_cart"]:hover {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
    transform: translateY(-1px);
}

/* Coupon section styling */
.woocommerce-cart-form .coupon {
    background: #f8fafc;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.woocommerce-cart-form .coupon .button {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    margin-left: 10px;
}

.woocommerce-cart-form .coupon .button:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
}

/* Empty cart styling */
.woocommerce-info {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 20px;
    color: #92400e;
}

.woocommerce-info::before {
    content: "ℹ️ ";
    margin-right: 8px;
}


/* Enhanced Delivery Method Selection */
.delivery-method-selection {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 2px solid #e5e7eb;
}

.delivery-method-selection h4 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

.delivery-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.delivery-option-card {
    border: 3px solid #e5e7eb;
    border-radius: 16px;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    position: relative;
    overflow: hidden;
}

.delivery-option-card:hover {
    border-color: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.15);
}

.delivery-option-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.delivery-option-card input[type="radio"]:checked + .delivery-content {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.05) 0%, rgba(254, 0, 188, 0.05) 100%);
    border: 3px solid #dc2626;
    border-radius: 8px;
}

.delivery-content {
    display: flex;
    align-items: center;
    padding: 24px;
    gap: 16px;
    transition: all 0.3s ease;
}

.delivery-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.delivery-info {
    flex: 1;
}

.delivery-info h5 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

.delivery-info p {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #6b7280;
}

.delivery-price {
    font-size: 16px;
    font-weight: 700;
    color: #dc2626;
}

/* Section styling */
.billing-details-section,
.delivery-specific-details {
    margin: 30px 0;
    padding: 30px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid #e5e7eb;
}

.billing-details-section h4,
.delivery-specific-details h4 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-description {
    margin: 0 0 20px 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}

/* Form grid for better layout */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-grid .form-row.full-width {
    grid-column: 1 / -1;
}

/* Enhanced order summary */
.order-summary {
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 30px;
}

.order-summary h4 {
    margin: 0 0 20px 0;
    font-size: 20px;
    font-weight: 700;
    color: #15803d;
    text-align: center;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(34, 197, 94, 0.2);
}

.summary-item:last-child {
    border-bottom: none;
}

.summary-item.total-row {
    border-top: 2px solid #22c55e;
    margin-top: 12px;
    padding-top: 16px;
    font-size: 18px;
}

.summary-label {
    color: #374151;
    font-weight: 500;
}

.summary-value {
    color: #15803d;
    font-weight: 600;
}

.total-price {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #15803d !important;
}

/* Disabled field styling */
input:disabled,
select:disabled {
    background-color: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #6b7280 !important;
    cursor: not-allowed !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .delivery-options {
        grid-template-columns: 1fr;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .delivery-content {
        padding: 20px;
    }
    
    .billing-details-section,
    .delivery-specific-details {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .delivery-content {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }
    
    .delivery-icon {
        font-size: 24px;
    }
}


/* Payment Method Selection */
.payment-method-selection {
    margin-bottom: 30px;
}

.payment-method-selection h4 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

.payment-methods {
    display: grid;
    gap: 15px;
}

.payment-method-card {
    border: 3px solid #e5e7eb;
    border-radius: 16px;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    position: relative;
    overflow: hidden;
}

.payment-method-card:hover,
.payment-method-card.active {
    border-color: #ed0000;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(237, 0, 0, 0.15);
}

.payment-method-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.payment-method-card input[type="radio"]:checked + .payment-method-content {
    background: linear-gradient(135deg, rgba(237, 0, 0, 0.05) 0%, rgba(254, 0, 188, 0.05) 100%);
}

.payment-method-content {
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 16px;
    transition: all 0.3s ease;
}

.payment-method-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.payment-method-info {
    flex: 1;
}

.payment-method-info h5 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.payment-method-info p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}

.payment-method-badges {
    display: flex;
    gap: 8px;
}

.payment-badge {
    background: #f3f4f6;
    color: #374151;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Stripe Elements Styling */
.stripe-payment-section {
    margin: 30px 0;
    padding: 30px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid #e5e7eb;
}

.stripe-payment-section h4 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stripe-elements-container {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.stripe-elements-container:focus-within {
    border-color: #ed0000;
    box-shadow: 0 0 0 3px rgba(237, 0, 0, 0.1);
}

.stripe-element {
    min-height: 50px;
    display: flex;
    align-items: center;
}

.stripe-error {
    color: #dc2626;
    font-size: 14px;
    margin-top: 10px;
    padding: 10px;
    background: #fef2f2;
    border-radius: 8px;
    border-left: 4px solid #dc2626;
    display: none;
}

/* Final Order Summary */
.final-order-summary {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #22c55e;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: #15803d;
}

.final-total {
    font-size: 24px;
    font-weight: 800;
}

/* Terms Section */
.terms-section {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.terms-section a {
    color: #ed0000;
    text-decoration: none;
    font-weight: 500;
}

.terms-section a:hover {
    text-decoration: underline;
}

/* Payment Button */
.payment-button {
    background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
    color: white;
    padding: 20px 40px;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(21, 128, 61, 0.3);
    position: relative;
    overflow: hidden;
}

.payment-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #166534 0%, #15803d 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(21, 128, 61, 0.4);
}

.payment-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

.btn-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-icon {
    font-size: 20px;
}

.btn-loader {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Security Notice */
.payment-security-notice {
    margin-top: 20px;
    text-align: center;
    color: #6b7280;
}

.security-badges {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.security-badge {
    background: #f3f4f6;
    color: #374151;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

.payment-security-notice p {
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
}

/* Processing Section */
#processing-section {
    text-align: center;
    padding: 60px 30px;
}

.processing-animation {
    max-width: 400px;
    margin: 0 auto;
}

.processing-spinner {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 80px;
    margin-bottom: 30px;
}

.spinner-ring {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #ed0000;
    border-radius: 50%;
    animation: ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #ed0000 transparent transparent transparent;
}

.spinner-ring:nth-child(1) { animation-delay: -0.45s; }
.spinner-ring:nth-child(2) { animation-delay: -0.3s; }
.spinner-ring:nth-child(3) { animation-delay: -0.15s; }

@keyframes ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.processing-steps {
    text-align: left;
    max-width: 300px;
    margin: 30px auto 0;
}

.processing-steps .step {
    padding: 8px 0;
    color: #9ca3af;
    font-size: 14px;
    transition: color 0.3s ease;
}

.processing-steps .step.active {
    color: #15803d;
    font-weight: 500;
}

/* Payment Messages */
.payment-messages {
    margin: 20px 0;
}

.payment-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.payment-message-error {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid #dc2626;
    color: #dc2626;
}

.payment-message-success {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #22c55e;
    color: #15803d;
}

.message-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.message-text {
    flex: 1;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .payment-method-content {
        padding: 16px;
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .payment-method-badges {
        justify-content: center;
    }
    
    .stripe-payment-section {
        padding: 20px;
    }
    
    .security-badges {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    
    .final-order-summary {
        padding: 16px;
    }
    
    .summary-row {
        font-size: 18px;
    }
    
    .final-total {
        font-size: 20px;
    }
    
    .payment-button {
        padding: 16px 30px;
        font-size: 16px;
    }
}


/* Visual Credit Card Styling */
.visual-card-container {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.visual-card-container .container {
    width: 100%;
    max-width: 400px;
    max-height: 251px;
    height: 250px;
    padding: 10px;
}

.visual-card-container .container.preload {
    padding-top: 0px !important;
}

.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

#ccsingle {
    position: absolute;
    right: 15px;
    top: 20px;
}

#ccsingle svg {
    width: 60px;
    max-height: 40px;
}

.creditcard svg#cardfront,
.creditcard svg#cardback {
    width: 100%;
    -webkit-box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    border-radius: 22px;
}

/* CHANGEABLE CARD ELEMENTS */
.creditcard .lightcolor,
.creditcard .darkcolor {
    -webkit-transition: fill .5s;
    transition: fill .5s;
}

.creditcard .grey {
    fill: #bdbdbd;
}

.creditcard .greydark {
    fill: #616161;
}

/* FRONT OF CARD */
#svgname {
    text-transform: uppercase;
}

#cardfront .st2 {
    fill: #FFFFFF;
}

#cardfront .st3 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 600;
}

#cardfront .st4 {
    font-size: 54.7817px;
}

#cardfront .st5 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 400;
}

#cardfront .st6 {
    font-size: 33.1112px;
}

#cardfront .st7 {
    opacity: 0.6;
    fill: #FFFFFF;
}

#cardfront .st8 {
    font-size: 24px;
}

#cardfront .st9 {
    font-size: 36.5498px;
}

#cardfront .st10 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 300;
}

#cardfront .st11 {
    font-size: 16.1716px;
}

#cardfront .st12 {
    fill: #4C4C4C;
}

/* BACK OF CARD */
#cardback .st0 {
    fill: none;
    stroke: #0F0F0F;
    stroke-miterlimit: 10;
}

#cardback .st2 {
    fill: #111111;
}

#cardback .st3 {
    fill: #F2F2F2;
}

#cardback .st4 {
    fill: #D8D2DB;
}

#cardback .st5 {
    fill: #C4C4C4;
}

#cardback .st6 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 400;
}

#cardback .st7 {
    font-size: 27px;
}

#cardback .st8 {
    opacity: 0.6;
}

#cardback .st9 {
    fill: #FFFFFF;
}

#cardback .st10 {
    font-size: 24px;
}

#cardback .st11 {
    fill: #EAEAEA;
}

#cardback .st12 {
    font-family: 'Rock Salt', cursive;
}

#cardback .st13 {
    font-size: 37.769px;
}

/* FLIP ANIMATION */
.container {
    perspective: 1000px;
}

.creditcard {
    width: 100%;
    max-width: 400px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform 0.6s;
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
    cursor: pointer;
}

.creditcard .front,
.creditcard .back {
    position: absolute;
    width: 100%;
    max-width: 400px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    color: #47525d;
}

.creditcard .back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.creditcard.flipped {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

/* Card form fields styling */
.card-form-fields {
    margin-top: 20px;
}

.card-form-fields .form-row {
    margin-bottom: 15px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .visual-card-container .container {
        height: 150px;
        max-width: 300px;
    }
    
    #ccsingle svg {
        width: 50px;
        max-height: 30px;
    }
}

/* Card brand color variations */
.creditcard .lightblue { fill: #0E4595; }
.creditcard .lightbluedark { fill: #1e40af; }
.creditcard .red { fill: #dc2626; }
.creditcard .reddark { fill: #b91c1c; }
.creditcard .green { fill: #059669; }
.creditcard .greendark { fill: #047857; }
.creditcard .purple { fill: #ab47bc; }
.creditcard .purpledark { fill: #7b1fa2; }
.creditcard .cyan { fill: #26c6da; }
.creditcard .cyandark { fill: #0097a7; }
.creditcard .lime { fill: #d4e157; }
.creditcard .limedark { fill: #afb42b; }
.creditcard .yellow { fill: #ffeb3b; }
.creditcard .yellowdark { fill: #f9a825; }
.creditcard .orange { fill: #ff9800; }
.creditcard .orangedark { fill: #ef6c00; }


.card-form-fields .form-row {
    position: relative;
    margin-bottom: 20px;
}

.card-form-fields .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

/* Card icon styling */
#ccicon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 25px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#ccicon.show {
    opacity: 1;
}

/* Enhanced input styling for card fields */
.card-form-fields input[type="text"] {
    width: 100%;
    padding: 14px 50px 14px 16px; /* Extra right padding for card icon */
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 16px;
    font-family: 'Source Code Pro', monospace;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.card-form-fields input[type="text"]:focus {
    border-color: #ed0000;
    box-shadow: 0 0 0 3px rgba(237, 0, 0, 0.1);
    outline: none;
}

/* Special styling for card number field */
#cardnumber {
    font-family: 'Source Code Pro', monospace;
    font-size: 18px;
    letter-spacing: 2px;
}

/* Smaller inputs for expiry and CVV */
#expirationdate,
#securitycode {
    text-align: center;
    font-weight: 600;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .card-form-fields .form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .card-form-fields input[type="text"] {
        padding: 12px 45px 12px 14px;
        font-size: 16px;
    }
    
    #ccicon {
        width: 35px;
        height: 22px;
        right: 12px;
    }
}

/* Checkout Note */
.checkout-note {
    margin-top: 20px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 10px;
    border-left: 4px solid #2196f3;
}

.checkout-note p {
    margin: 0;
    color: #1565c0;
    font-size: 15px;
    line-height: 1.5;
}

.checkout-note strong {
    font-weight: 600;
}

/* Simplified form sections */
#delivery-section {
    /* Remove the complex grid layouts since we don't need address fields */
}

/* Update summary to be more prominent since it's the last step */
#summary-section .order-summary {
    background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 25px;
    border: 1px solid #e0e0e0;
}

#gift-message-summary .summary-value {
    font-style: italic;
    color: #666;
    font-size: 14px;
}

/* Review Order Button Styling */
.review-order-btn {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.review-order-btn:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}

.review-order-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

/* Auto-reveal animation */
.form-section {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.form-section:first-child {
    opacity: 1;
    transform: translateY(0);
}

.form-section[style*="display: block"],
.form-section:not([style*="display: none"]) {
    opacity: 1;
    transform: translateY(0);
}

/* Progress indicator for visual feedback
.form-section h3 {
    position: relative;
    padding-left: 40px;
}

.form-section h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: #e5e7eb;
    border-radius: 50%;
    border: 2px solid #d1d5db;
}

.form-section:not([style*="display: none"]) h3::before {
    background: #10b981;
    border-color: #059669;
}

.form-section:not([style*="display: none"]) h3::after {
    content: "✓";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

*/