/*
========================================================================
                    SHOWMIRA CHECKOUT FORM STYLESHEET
========================================================================

File: checkout.css
Version: 3.2.0
Purpose: Complete styling for ShowMira IPTV checkout form
Author: ShowMira Development Team
Last Updated: January 2025

Table of Contents:
1. Security & Reset Styles
2. Main Container & Layout
3. Form Elements & Inputs
4. WhatsApp Phone Input
5. Checkbox Styling
6. Plan Selection & Details
7. Order Summary
8. Buttons & Interactive Elements
9. Loading & Success States
10. Responsive Design
11. WordPress Compatibility

========================================================================
*/

/* ========================================
   1. SECURITY & RESET STYLES
   ======================================== */

/* Block external font loading to prevent CORS errors */
@font-face {
    font-family: 'Roboto';
    src: none !important;
}

/* Hide external font links that cause CORS errors */
link[href*="weloveiptv.com"],
link[href*="roboto"],
link[href*="elementor/google-fonts"] {
    display: none !important;
}

/* Override any Roboto font usage with Inter */
* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}

/* Disable text selection for security - prevents content copying */
* {
    -webkit-user-select: none;    /* Safari/Chrome */
    -moz-user-select: none;       /* Firefox */
    -ms-user-select: none;        /* Internet Explorer/Edge */
    user-select: none;            /* Standard property */
    margin: 0;                    /* Remove default margins */
    padding: 0;                   /* Remove default padding */
    box-sizing: border-box;       /* Include padding/border in width calculations */
}

/* Re-enable text selection for form inputs - users need to interact with these */
input, textarea, select {
    -webkit-user-select: text !important;  /* Allow text selection in Safari/Chrome */
    -moz-user-select: text !important;     /* Allow text selection in Firefox */
    -ms-user-select: text !important;      /* Allow text selection in IE/Edge */
    user-select: text !important;          /* Standard property for text selection */
}

/* Specific input types - ensure they can be focused and edited */
input[type="text"], input[type="email"], input[type="tel"] {
    -webkit-user-select: text !important;  /* Text inputs must be selectable */
    -moz-user-select: text !important;     /* Firefox compatibility */
    -ms-user-select: text !important;      /* IE/Edge compatibility */
    user-select: text !important;          /* Standard property */
}

/* ========================================
   2. MAIN CONTAINER & LAYOUT
   ======================================== */

/* Main checkout form container - Responsive Full Width Design */
.checkout-container,
.showmira-checkout-container {
    width: 100%;                 /* Full width on mobile */
    max-width: 100%;             /* No restriction on mobile */
    margin: 0;                   /* No margin on mobile */
    padding: 15px;               /* Comfortable mobile padding */
    background: white;           /* Clean white background */
    border-radius: 0;            /* No rounded corners on mobile (edge-to-edge) */
    box-shadow: none;            /* No shadow on mobile */
    overflow: hidden;            /* Prevent content from breaking container */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Modern font stack */
    box-sizing: border-box;      /* Include padding in width calculation */
}

/* Tablet: 768px and up - Add some styling and center */
@media (min-width: 768px) {
    .checkout-container,
    .showmira-checkout-container {
        max-width: 95%;          /* 95% width on tablets */
        margin: 0 auto;          /* Center the container */
        padding: 30px;           /* More padding on tablets */
        border-radius: 10px;     /* Rounded corners */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Subtle shadow */
    }
}

/* Desktop: 1024px and up - Comfortable reading width */
@media (min-width: 1024px) {
    .checkout-container,
    .showmira-checkout-container {
        max-width: 900px;        /* Comfortable desktop width */
        padding: 40px;           /* Generous padding */
    }
}

/* Large Desktop: 1440px and up - Maximum comfortable width */
@media (min-width: 1440px) {
    .checkout-container,
    .showmira-checkout-container {
        max-width: 1100px;       /* Maximum width for large screens */
        padding: 50px;           /* Extra padding for large screens */
    }
}

/* Remove any external top margin from WordPress theme (but keep our responsive padding) */
.checkout-container,
.showmira-checkout-container {
    margin-top: 0 !important;    /* Remove top margin only */
}

/* Ensure parent containers don't add unwanted spacing */
.checkout-container::before,
.showmira-checkout-container::before,
.checkout-container::after,
.showmira-checkout-container::after {
    content: none !important;    /* Remove any pseudo-elements */
}

/* Override WordPress theme container spacing */
.entry-content .checkout-container,
.entry-content .showmira-checkout-container,
.post-content .checkout-container,
.post-content .showmira-checkout-container,
.page-content .checkout-container,
.page-content .showmira-checkout-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Remove spacing from common WordPress theme wrappers */
.site-main .checkout-container,
.site-main .showmira-checkout-container,
.main-content .checkout-container,
.main-content .showmira-checkout-container,
.content-area .checkout-container,
.content-area .showmira-checkout-container,
.primary .checkout-container,
.primary .showmira-checkout-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Handle Elementor and page builder spacing */
.elementor-widget-container .checkout-container,
.elementor-widget-container .showmira-checkout-container,
.elementor-section .checkout-container,
.elementor-section .showmira-checkout-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Remove any inherited spacing from parent elements */
.checkout-container:first-child,
.showmira-checkout-container:first-child {
    margin-top: 0 !important;
}

/* Ensure no spacing from shortcode wrapper */
.showmira-checkout-shortcode {
    margin: 0 !important;
    padding: 0 !important;
}

.showmira-checkout-shortcode .checkout-container,
.showmira-checkout-shortcode .showmira-checkout-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ========================================
   3. FORM ELEMENTS & INPUTS
   ======================================== */

/* Form section containers - provide consistent padding */
.form-section,
.showmira-form-section {
    padding: 15px;               /* Internal spacing for form sections */
}

/* Section titles - headers for different form sections */
.section-title,
.showmira-section-title {
    font-size: 18px;             /* Prominent heading size */
    font-weight: 600;            /* Semi-bold weight for emphasis */
    margin-bottom: 10px;         /* Space below title */
    color: #30353a;            /* Dark gray text color */
}

/* Form rows - container for horizontal form elements */
.form-row {
    margin-bottom: 10px;         /* Vertical spacing between rows */
}

/* Form groups - wrapper for individual form fields */
.form-group,
.showmira-form-group {
    width: 100%;                 /* Full width in single-column layout */
    margin-bottom: 10px;         /* Space between form groups */
}

/* Full-width form groups - explicitly set to 100% width */
.form-group.full-width,
.showmira-form-group.showmira-full-width {
    width: 100%;                 /* Ensure full width for important fields */
}

/* Standard form labels */
label {
    display: block;              /* Stack labels above inputs */
    margin-bottom: 5px;          /* Small gap between label and input */
    font-weight: 500;            /* Medium weight for readability */
    color: #30353a;            /* Dark gray text color */
}

/* Special WhatsApp labels with icon */
.whatsapp-label,
.showmira-whatsapp-label {
    display: flex;               /* Horizontal layout for icon + text */
    align-items: center;         /* Vertically center icon with text */
    gap: 8px;                    /* Space between icon and text */
    margin-bottom: 5px;          /* Space below label */
    font-weight: 500;            /* Medium weight for consistency */
    color: #30353a;            /* Dark gray text color */
}

/* WhatsApp icon styling */
.whatsapp-icon,
.showmira-whatsapp-icon {
    width: 20px;                 /* Fixed icon width */
    height: 20px;                /* Fixed icon height (square) */
    object-fit: contain;         /* Maintain aspect ratio */
}

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e6e1d8;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
    font-family: inherit;
    color: #30353a;
    background-color: #f7f5f1;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #089fac;
    box-shadow: 0 0 0 3px rgba(8, 159, 172, 0.1);
    color: #30353a;
}

/* Placeholder text styling - the gray text that appears before user types */
input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="tel"]::placeholder {
    color: #818487;              /* Medium gray for placeholder text */
}

/* Dropdown option styling */
select option {
    color: #30353a;              /* Dark gray text for options */
}

/* Disabled dropdown options */
select option:disabled {
    color: #818487;              /* Lighter gray for disabled options */
}

/* ========================================
   4. WHATSAPP PHONE INPUT
   ======================================== */

/* WhatsApp phone input container - country code + phone number layout */
.showmira-phone-input {
    display: flex !important;    /* Horizontal layout for country code + phone */
    gap: 10px;                   /* Space between country code and phone input */
    align-items: stretch;        /* Make both inputs same height */
    width: 100%;                 /* Full width of container */
}

/* Country code dropdown - fixed width for consistent layout */
.showmira-country-code {
    width: 180px !important;     /* Fixed width for country dropdown */
    min-width: 180px !important; /* Prevent shrinking below 180px */
    max-width: 180px !important; /* Prevent growing above 180px */
    flex-shrink: 0 !important;   /* Don't shrink when space is limited */
    padding: 8px 12px !important; /* Reduced padding for compact look */
    background-color: white !important; /* Clean white background */
}

/* Phone number input - takes remaining space after country code */
.showmira-phone-input input[type="tel"] {
    flex: 1 !important;          /* Take all remaining space */
    width: auto !important;      /* Let flexbox handle width */
    min-width: 0 !important;     /* Allow shrinking if needed */
    padding: 8px 12px !important; /* Reduced padding for compact look */
    background-color: white !important; /* Clean white background */
}

/* Global input overrides - ensure consistent styling across all inputs */
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
    padding: 8px 12px !important; /* Compact padding for better text clarity */
    background-color: white !important; /* Clean white background */
    margin: 0 !important;        /* Remove default margins */
    line-height: 1.4 !important; /* Comfortable line height for text */
    box-sizing: border-box !important; /* Include padding in width calculations */
    border-radius: 8px !important; /* Rounded corners */
    border: 2px solid #e6e1d8 !important; /* Light gray border */
}

/* Specific styling for name and email inputs - ensure consistent appearance */
#showmira-fullName,
#showmira-email {
    border-radius: 8px !important; /* Rounded corners */
    border: 2px solid #e6e1d8 !important; /* Light gray border */
    background-color: white !important; /* Clean white background */
}

/* Error state styling for form validation */
.error {
    border-color: #dc3545 !important; /* Red border for invalid inputs */
}

/* Error messages displayed below invalid inputs */
.error-message {
    color: #dc3545;              /* Red text for error messages */
    font-size: 12px;             /* Small text size */
    margin-top: 5px;             /* Space above error message */
    display: none;               /* Hidden by default, shown via JavaScript */
}

/* Radio button group container */
.radio-group {
    display: flex;               /* Horizontal layout for radio options */
    gap: 30px;                   /* Space between radio options */
    margin-top: 10px;            /* Space above radio group */
}

/* Individual radio button option */
.radio-option {
    display: flex;               /* Horizontal layout for radio + label */
    align-items: center;         /* Vertically center radio with label */
    gap: 8px;                    /* Space between radio and label */
}

/* ========================================
   LEGACY PHONE INPUT STYLING (Generic)
   ======================================== */

/* Legacy phone input container - kept for backward compatibility */
.phone-input {
    display: flex;               /* Horizontal layout */
    gap: 10px;                   /* Space between elements */
    margin-bottom: 15px;         /* Space below phone input */
}

/* Legacy country code dropdown styling */
.country-code {
    width: 150px;                /* Fixed width for legacy layout */
    padding: 12px 15px;          /* Standard padding */
    font-size: 13px;             /* Slightly smaller text */
    color: #30353a;              /* Dark gray text */
    background-color: #f7f5f1;   /* Light cream background */
    border: 2px solid #e6e1d8;   /* Light gray border */
    border-radius: 8px;          /* Rounded corners */
    transition: border-color 0.3s ease; /* Smooth border color change */
}

/* Legacy country code focus state */
.country-code:focus {
    color: #30353a;              /* Maintain text color */
    outline: none;               /* Remove default browser outline */
    border-color: #089fac;       /* Brand color border when focused */
    box-shadow: 0 0 0 3px rgba(8, 159, 172, 0.1); /* Subtle glow effect */
}

/* Legacy country code dropdown options */
.country-code option {
    color: #30353a;              /* Dark gray text for options */
}

/* Disabled options in legacy country code dropdown */
.country-code option:disabled {
    color: #818487;              /* Lighter gray for disabled options */
    font-style: italic;          /* Italic text to indicate disabled state */
}

/* Disabled state for WhatsApp inputs when checkbox is checked */
.showmira-phone-input.disabled input,
.showmira-phone-input.disabled select {
    background-color: #f5f5f5 !important;   /* Gray background for disabled state */
    color: #999 !important;                 /* Gray text color */
    cursor: not-allowed !important;         /* Show 'not allowed' cursor */
    opacity: 0.6 !important;                /* Reduce opacity to indicate disabled */
}

/* ========================================
   WHATSAPP CHECKBOX CONTAINER STYLING
   ======================================== */

/* Main container for "I don't have WhatsApp" checkbox and label - INVISIBLE CONTAINER */
.no-whatsapp-container,
.showmira-no-whatsapp-container {
    display: flex;           /* Horizontal layout for checkbox and label */
    align-items: center;     /* Vertically center checkbox with label */
    gap: 8px;               /* Small space between checkbox and label */
    margin: 0;              /* No margins at all */
    padding: 0;             /* No padding at all */
    background: none;       /* Completely transparent */
    border: none;           /* No border */
    box-shadow: none;       /* No shadow */
    outline: none;          /* No outline */
}

/* Wrapper for checkbox input and its label - COMPLETELY INVISIBLE */
.checkbox-wrapper,
.showmira-checkbox-wrapper {
    display: flex;           /* Horizontal layout */
    align-items: center;     /* Vertically align checkbox with text */
    gap: 6px;               /* Smaller gap between checkbox and label text */
    margin: 0;              /* No margins */
    padding: 0;             /* No padding */
    background: none;       /* No background */
    border: none;           /* No border */
    box-shadow: none;       /* No shadow */
    outline: none;          /* No outline */
}

/* Styling for the actual checkbox input element - SMALL AND CLEAN */
.checkbox-wrapper input[type="checkbox"],
.showmira-checkbox-wrapper input[type="checkbox"] {
    width: 16px !important;              /* Smaller checkbox size */
    height: 16px !important;             /* Square checkbox */
    accent-color: #089fac;             /* Brand color for checked state */
    cursor: pointer;                     /* Hand cursor on hover */
    margin: 0 !important;                /* Remove default margins */
    padding: 0 !important;               /* Remove default padding */
    background: white !important;      /* White background */
    border: 1px solid #ddd !important; /* Light border */
    border-radius: 3px !important;       /* Slightly rounded */
    -webkit-appearance: none !important; /* Remove default styling */
    appearance: none !important;         /* Remove default styling */
    position: relative;                  /* For custom styling */
}

/* Custom checkmark when checkbox is checked */
.checkbox-wrapper input[type="checkbox"]:checked,
.showmira-checkbox-wrapper input[type="checkbox"]:checked {
    background: #089fac !important;     /* Brand color background when checked */
    border-color: #089fac !important;   /* Brand color border when checked */
}

/* Custom checkmark icon */
.checkbox-wrapper input[type="checkbox"]:checked::after,
.showmira-checkbox-wrapper input[type="checkbox"]:checked::after {
    content: '✓   ';                   /* Checkmark character */
    position: absolute;                /* Position relative to checkbox */
    top: -1px;                         /* Center vertically */
    left: 2px;                         /* Center horizontally */
    color: rgb(0, 0, 0);             /* Black checkmark */
    font-size: 12px;                   /* Small checkmark */
    font-weight: bold;                 /* Bold checkmark */
    line-height: 1;                    /* Tight line height */
}

/* Styling for the checkbox label text - SMALLER AND CLEANER */
.checkbox-wrapper label,
.showmira-checkbox-wrapper label {
    margin: 0;               /* Remove default label margins */
    cursor: pointer;         /* Hand cursor - clicking label toggles checkbox */
    font-size: 14px;        /* Smaller text size to match checkbox */
    color: #30353a;         /* Dark gray text color */
    line-height: 1.2;       /* Compact line height */
}

/* ========================================
   WHATSAPP INFO MESSAGE STYLING
   ======================================== */

/* Info message shown when "I don't have WhatsApp" is checked */
.showmira-no-whatsapp-info {
    display: none;              /* Hidden by default - shown via JavaScript */
    background: #f8d7da;        /* Light red background */
    border: 1px solid #f5c6cb;  /* Red border */
    border-radius: 4px;         /* Slightly rounded corners */
    padding: 6px 8px;          /* Compact padding */
    margin-top: 6px;           /* Small space above the message */
    font-size: 11px;           /* Small text size */
    color: #721c24;            /* Dark red text */
    line-height: 1.3;          /* Tight line spacing */
}

/* Legacy no-whatsapp info message - alternative styling */
.no-whatsapp-info {
    background: #e7f3ff;         /* Light blue background */
    padding: 8px 12px;           /* Standard padding */
    border-radius: 6px;          /* Rounded corners */
    font-size: 12px;             /* Small text size */
    color: #0066cc;              /* Blue text */
    display: none;               /* Hidden by default */
    margin-top: 8px;             /* Space above message */
    border-left: 3px solid #fc3030; /* Brand color left border accent */
}

/* Show state for legacy no-whatsapp info with animation */
.no-whatsapp-info.show {
    display: block;              /* Make visible */
    animation: fadeIn 0.5s ease-out; /* Smooth fade-in animation */
}

/* ========================================
   PLAN SELECTION COMMENT STYLING
   ======================================== */

/* Comment/note displayed when user selects a plan */
.plan-selection-comment {
    background: #f7f5f1;         /* Light cream background */
    border: 1px solid #e6e1d8;   /* Light gray border */
    border-radius: 6px;          /* Rounded corners */
    padding: 10px 10px;          /* Internal spacing */
    margin-top: 8px;             /* Space above comment */
    font-size: 11px;             /* Small text size */
    color: #30353a;              /* Dark gray text */
    line-height: 1.4;            /* Comfortable line spacing */
    display: none;               /* Hidden by default */
    border-left: 3px solid #089fac; /* Brand color left border accent */
}

/* Show state for plan selection comment with animation */
.plan-selection-comment.show {
    display: block;              /* Make visible */
    animation: slideDown 0.5s ease-out; /* Smooth slide-down animation */
}

/* Header section of plan selection comment with logo and title */
.plan-selection-comment-header {
    display: flex;               /* Horizontal layout for logo + text */
    align-items: center;         /* Vertically center logo with text */
    gap: 8px;                    /* Space between logo and text */
    margin-bottom: 3px;          /* Space below header */
}

/* Mini logo for plan selection comment - small colored badge */
.plan-selection-comment .plan-comment-mini-logo {
    width: 20px;                 /* Fixed width for consistency */
    height: 20px;                /* Fixed height (square) */
    border-radius: 8px;          /* Rounded corners */
    display: flex;               /* Center content */
    align-items: center;         /* Vertically center text */
    justify-content: center;     /* Horizontally center text */
    font-size: 12px;             /* Small text size */
    font-weight: bold;           /* Bold text for emphasis */
    color: white;                /* White text on colored background */
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* Subtle shadow for readability */
}

/* Plan-specific color schemes for mini logos */
.plan-selection-comment .plan-comment-mini-logo.iron {
    background: linear-gradient(45deg, #708090, #2F4F4F); /* Gray gradient for Iron plan */
}

.plan-selection-comment .plan-comment-mini-logo.bronz {
    background: linear-gradient(45deg, #CD7F32, #8B4513); /* Bronze gradient for Bronze plan */
}

.plan-selection-comment .plan-comment-mini-logo.silver {
    background: linear-gradient(45deg, #C0C0C0, #808080); /* Silver gradient for Silver plan */
}

.plan-selection-comment .plan-comment-mini-logo.gold {
    background: linear-gradient(45deg, #FFD700, #DAA520); /* Gold gradient for Gold plan */
}

/* Plan comment title styling */
.plan-selection-comment .plan-comment-title {
    font-weight: 600;            /* Semi-bold weight for plan title */
    color: #30353a;              /* Dark gray text */
}

/* Plan comment description styling */
.plan-selection-comment .plan-comment-description {
    font-weight: 400;            /* Normal weight for description */
    color: #818487;              /* Medium gray text */
}

/* ========================================
   6. PLAN SELECTION & DETAILS
   ======================================== */

/* Main plan details container - shown when user selects a plan */
.plan-info,
.showmira-plan-details {
    background: #f7f5f1;         /* Light cream background */
    border: 1px solid #e6e1d8;   /* Light gray border */
    border-radius: 8px;          /* Rounded corners */
    padding: 20px;               /* Internal spacing */
    margin: 20px 0;              /* Vertical spacing */
    display: none;               /* Hidden by default */
    border-left: 4px solid #089fac; /* Brand color left accent */
    animation: slideDown 0.5s ease-out; /* Smooth slide-down animation */
}

/* Show state for plan details - makes them visible */
.plan-info.show,
.showmira-plan-details.show {
    display: block;              /* Make plan details visible */
}

/* Plan details header - contains logo and plan info */
.plan-info-header,
.showmira-plan-header {
    display: flex;               /* Horizontal layout for logo + text */
    align-items: center;         /* Vertically center logo with text */
    gap: 12px;                   /* Space between logo and text */
    margin-bottom: 10px;         /* Space below header */
}

/* Plan info text container - takes remaining space after logo */
.showmira-plan-info-text {
    flex: 1;                     /* Take all remaining space */
}

/* Plan title styling */
.showmira-plan-info-text h3 {
    margin: 0 0 5px 0;           /* Remove default margins, small bottom margin */
    font-size: 16px;             /* Prominent title size */
    font-weight: 600;            /* Semi-bold weight */
    color: #2c3e50;              /* Dark blue-gray color */
}

/* Plan description text */
.showmira-plan-info-text p {
    margin: 0;                   /* Remove default margins */
    font-size: 13px;             /* Smaller text for description */
    color: #666;                 /* Medium gray color */
    line-height: 1.4;            /* Comfortable line spacing */
}

/* Main plan logos - larger version for plan details */
.plan-logo,
.showmira-plan-logo {
    width: 40px;                 /* Fixed width for consistency */
    height: 40px;                /* Fixed height (square) */
    border-radius: 8px;          /* Rounded corners */
    display: flex;               /* Center content */
    align-items: center;         /* Vertically center text */
    justify-content: center;     /* Horizontally center text */
    font-size: 18px;             /* Larger text than mini logos */
    font-weight: bold;           /* Bold text for emphasis */
    color: white;                /* White text on colored background */
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* Subtle shadow for readability */
}

/* Plan-specific color schemes for main logos */
.plan-logo.iron, .showmira-plan-logo.iron {
    background: linear-gradient(45deg, #708090, #2F4F4F); /* Gray gradient for Iron plan */
}

.plan-logo.bronz, .showmira-plan-logo.bronz {
    background: linear-gradient(45deg, #CD7F32, #8B4513); /* Bronze gradient for Bronze plan */
}

.plan-logo.silver, .showmira-plan-logo.silver {
    background: linear-gradient(45deg, #C0C0C0, #808080); /* Silver gradient for Silver plan */
}

.plan-logo.gold, .showmira-plan-logo.gold {
    background: linear-gradient(45deg, #FFD700, #DAA520); /* Gold gradient for Gold plan */
}

/* Legacy plan title styling */
.plan-title {
    font-size: 16px;             /* Prominent title size */
    font-weight: 600;            /* Semi-bold weight */
    color: #2c3e50;              /* Dark blue-gray color */
    margin: 0;                   /* Remove default margins */
}

/* Legacy plan description styling */
.plan-description {
    font-size: 13px;             /* Smaller text for description */
    color: #666;                 /* Medium gray color */
    line-height: 1.4;            /* Comfortable line spacing */
    margin-top: 8px;             /* Space above description */
}

/* Plan features list - shows what's included in each plan */
.plan-features {
    list-style: none;            /* Remove default bullet points */
    margin: 8px 0 0 0;           /* Space above features list */
    padding: 0;                  /* Remove default padding */
}

/* Individual feature items */
.plan-features li {
    font-size: 12px;             /* Small text size */
    color: #555;                 /* Medium gray text */
    margin-bottom: 4px;          /* Space between features */
    padding-left: 16px;          /* Space for checkmark */
    position: relative;          /* For absolute positioning of checkmark */
}

/* Green checkmark before each feature */
.plan-features li::before {
    content: "✓";                /* Checkmark character */
    position: absolute;          /* Position relative to parent */
    left: 0;                     /* Align to left edge */
    color: #28a745;              /* Green color for checkmark */
    font-weight: bold;           /* Bold checkmark */
}

/* ========================================
   7. ORDER SUMMARY
   ======================================== */

/* Order summary container - shows selected plan and pricing */
.order-summary,
.showmira-order-summary {
    background: #f7f5f1;         /* Light cream background */
    padding: 10px;               /* Internal spacing */
    margin: 10px 0;              /* Vertical spacing */
    border-radius: 8px;          /* Rounded corners */
    border: 1px solid #e6e1d8;   /* Light gray border */
    max-height: none;            /* No height restriction */
    overflow: visible;           /* Show all content */
    opacity: 1;                  /* Fully visible */
    transition: all 0.4s ease-in-out; /* Smooth transitions */
}

/* Show state for order summary - legacy animation support */
.order-summary.show,
.showmira-order-summary.show {
    max-height: 200px;           /* Maximum height when shown */
    opacity: 1;                  /* Fully visible */
    margin-bottom: 0;            /* Remove bottom margin when shown */
}

/* Individual product item in order summary */
.product-item, .showmira-product-item {
    display: flex;               /* Horizontal layout for icon + text + price */
    align-items: center;         /* Vertically center all elements */
    gap: 12px;                   /* Space between elements */
    margin-bottom: 8px;          /* Space between product items */
    padding: 10px 12px;          /* Internal spacing */
    background: white;           /* White background for contrast */
    border-radius: 6px;          /* Rounded corners */
    border: 1px solid #e6e1d8;   /* Light gray border */
    min-height: 40px;            /* Minimum height for consistency */
}

/* Product icons in order summary - smaller version of plan logos */
.product-icon, .showmira-product-icon {
    width: 32px;                 /* Fixed width for consistency */
    height: 32px;                /* Fixed height (square) */
    border-radius: 6px;          /* Rounded corners */
    display: flex;               /* Center content */
    align-items: center;         /* Vertically center text */
    justify-content: center;     /* Horizontally center text */
    font-size: 16px;             /* Medium text size */
    font-weight: bold;           /* Bold text for emphasis */
    color: white;                /* White text on colored background */
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* Subtle shadow for readability */
    flex-shrink: 0;              /* Don't shrink when space is limited */
}

/* Plan-specific color schemes for product icons */
.product-icon.iron, .showmira-product-icon.iron {
    background: linear-gradient(45deg, #708090, #2F4F4F); /* Gray gradient for Iron plan */
}

.product-icon.bronz, .showmira-product-icon.bronz {
    background: linear-gradient(45deg, #CD7F32, #8B4513); /* Bronze gradient for Bronze plan */
}

.product-icon.silver, .showmira-product-icon.silver {
    background: linear-gradient(45deg, #C0C0C0, #808080); /* Silver gradient for Silver plan */
}

.product-icon.gold, .showmira-product-icon.gold {
    background: linear-gradient(45deg, #FFD700, #DAA520); /* Gold gradient for Gold plan */
}

/* Product name in order summary */
.product-name, .showmira-product-name {
    flex: 1;                     /* Take remaining space between icon and price */
    font-weight: 600;            /* Semi-bold weight */
    color: #089fac;              /* Brand color for product name */
    margin: 0;                   /* Remove default margins */
    font-size: 13px;             /* Small text size */
    line-height: 1.3;            /* Tight line spacing */
}

/* Price display in order summary */
.price, .showmira-price {
    font-weight: 600;            /* Semi-bold weight for emphasis */
    color: #30353a;              /* Dark gray text */
    font-size: 14px;             /* Slightly larger than product name */
    white-space: nowrap;         /* Prevent price from wrapping */
}

/* Order totals section - shows pricing breakdown */
.order-totals {
    border-top: 1px solid #e9ecef; /* Separator line above totals */
    padding-top: 8px;            /* Space above totals */
    margin-top: 8px;             /* Space above totals section */
}

/* Individual total row (subtotal, tax, etc.) */
.total-row {
    display: flex;               /* Horizontal layout for label + amount */
    justify-content: space-between; /* Push label left, amount right */
    margin-bottom: 4px;          /* Space between total rows */
    font-size: 13px;             /* Small text size */
}

/* Final total row - more prominent styling */
.total-row.final {
    font-size: 15px;             /* Larger text for final total */
    font-weight: 700;            /* Bold weight for emphasis */
    padding-top: 6px;            /* Extra space above final total */
    border-top: 1px solid #e9ecef; /* Separator line above final total */
}

/* ========================================
   8. BUTTONS & INTERACTIVE ELEMENTS
   ======================================== */

/* Main order button - primary call-to-action */
.order-btn {
    width: 100%;                 /* Full width button */
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); /* Purple gradient */
    color: white;                /* White text */
    border: none;                /* Remove default border */
    padding: 18px;               /* Large padding for prominence */
    border-radius: 8px;          /* Rounded corners */
    font-size: 16px;             /* Large text size */
    font-weight: 600;            /* Semi-bold weight */
    cursor: pointer;             /* Hand cursor on hover */
    margin: 20px 0;              /* Vertical spacing */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

/* Shimmer effect for order button - creates animated light sweep */
.order-btn::before {
    content: '';                 /* Empty pseudo-element */
    position: absolute;          /* Position over button */
    top: 0;                      /* Align to top */
    left: -100%;                 /* Start off-screen left */
    width: 100%;                 /* Full width of button */
    height: 100%;                /* Full height of button */
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); /* Light sweep gradient */
    transition: left 0.6s ease;  /* Smooth movement transition */
    animation: shimmerSweep 3s ease-in-out infinite; /* Repeating shimmer animation */
}

/* Button hover state - lift effect with shadow */
.order-btn:hover {
    transform: translateY(-2px);  /* Lift button up slightly */
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); /* Purple shadow for depth */
}

/* Pause shimmer animation on hover */
.order-btn:hover::before {
    animation-play-state: paused; /* Stop shimmer when hovering */
}

/* Disabled button state - gray and non-interactive */
.order-btn:disabled {
    background: #ccc;            /* Gray background for disabled state */
    cursor: not-allowed;         /* Show 'not allowed' cursor */
    transform: none;             /* Remove hover lift effect */
}

/* Hide shimmer effect on disabled button */
.order-btn:disabled::before {
    display: none;               /* Remove shimmer effect when disabled */
}

/* Shimmer sweep animation - creates periodic light sweep across button */
@keyframes shimmerSweep {
    0%, 90% {
        left: -100%;             /* Stay off-screen left for most of animation */
    }
    95%, 100% {
        left: 100%;              /* Quickly sweep across to right side */
    }
}

/* Order section container - holds the order button */
.order-section {
    padding: 10px 15px 10px 15px; /* Internal spacing */
    border-top: 1px solid #e6e1d8; /* Separator line above */
    margin-top: -70px;           /* Negative margin for layout adjustment */
}

/* ========================================
   9. LOADING & SUCCESS STATES
   ======================================== */

/* Loading spinner - shown during form submission */
.loading {
    display: none;               /* Hidden by default */
    width: 20px;                 /* Fixed width */
    height: 20px;                /* Fixed height (square) */
    border: 2px solid #ffffff;   /* White border */
    border-top: 2px solid transparent; /* Transparent top for spinning effect */
    border-radius: 50%;          /* Make it circular */
    animation: spin 1s linear infinite; /* Continuous spinning animation */
}

/* Spinning animation for loading spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }   /* Start at 0 degrees */
    100% { transform: rotate(360deg); } /* Complete full rotation */
}

/* Slide down animation - used for plan details and comments */
@keyframes slideDown {
    from {
        opacity: 0;              /* Start transparent */
        transform: translateY(-10px); /* Start 10px above final position */
    }
    to {
        opacity: 1;              /* End fully visible */
        transform: translateY(0); /* End at normal position */
    }
}

/* Fade in animation - used for info messages */
@keyframes fadeIn {
    from {
        opacity: 0;              /* Start transparent */
    }
    to {
        opacity: 1;              /* End fully visible */
    }
}

/* Success message - shown after successful form submission */
.success-message {
    display: none;               /* Hidden by default */
    background: #d4edda;         /* Light green background */
    color: #155724;              /* Dark green text */
    padding: 20px;               /* Internal spacing */
    border-radius: 8px;          /* Rounded corners */
    margin-top: 15px;            /* Space above message */
    border: 1px solid #c3e6cb;   /* Green border */
    text-align: center;          /* Center-align text */
}

/* WhatsApp button - opens WhatsApp chat */
.whatsapp-btn {
    background: #25D366;         /* WhatsApp green color */
    color: white;                /* White text */
    border: none;                /* Remove default border */
    padding: 12px 24px;          /* Internal spacing */
    border-radius: 25px;         /* Pill-shaped button */
    font-size: 16px;             /* Medium text size */
    font-weight: 600;            /* Semi-bold weight */
    cursor: pointer;             /* Hand cursor on hover */
    margin-top: 15px;            /* Space above button */
    display: inline-flex;        /* Inline flexbox for icon + text */
    align-items: center;         /* Vertically center content */
    gap: 8px;                    /* Space between icon and text */
    transition: all 0.3s ease;   /* Smooth hover transitions */
    text-decoration: none;       /* Remove link underline */
}

/* WhatsApp button hover state */
.whatsapp-btn:hover {
    background: #128C7E;         /* Darker green on hover */
    transform: translateY(-2px); /* Lift button up slightly */
}

/* WhatsApp button active state */
.whatsapp-btn:active {
    transform: translateY(0);    /* Return to normal position when clicked */
}

/* ========================================
   10. RESPONSIVE DESIGN
   ======================================== */

/* Mobile and tablet responsive styles */
@media (max-width: 768px) {
    /* Adjust container margins for mobile */
    .checkout-container {
        margin: 5px;             /* Smaller margins on mobile */
        border-radius: 8px;      /* Maintain rounded corners */
    }

    /* Increase padding on mobile for better touch targets */
    .form-section {
        padding: 20px 20px 30px 20px; /* More padding for mobile */
    }
    
    /* Stack form elements vertically on mobile */
    .form-row {
        flex-direction: column;  /* Stack elements vertically */
        gap: 10px;               /* Space between stacked elements */
    }
    
    /* Keep radio buttons horizontal even on mobile */
    .radio-group {
        flex-direction: row;     /* Keep horizontal layout */
        gap: 20px;               /* Space between radio options */
    }

    /* Full width country code on mobile */
    .country-code {
        width: 100%;             /* Full width on mobile */
    }
}

/* ========================================
   11. SECURITY & PROTECTION
   ======================================== */

/* Protection overlay - shown when dev tools are detected */
.protection-overlay {
    position: fixed;             /* Fixed positioning over entire screen */
    top: 0;                      /* Align to top */
    left: 0;                     /* Align to left */
    width: 100%;                 /* Full screen width */
    height: 100%;                /* Full screen height */
    background: rgba(0,0,0,0.8); /* Semi-transparent black background */
    color: white;                /* White text */
    display: none;               /* Hidden by default */
    justify-content: center;     /* Center content horizontally */
    align-items: center;         /* Center content vertically */
    z-index: 9999;               /* Highest z-index to appear above everything */
    font-size: 24px;             /* Large text size */
    text-align: center;          /* Center-align text */
}

/* ========================================
   12. WORDPRESS COMPATIBILITY
   ======================================== */

/* WordPress plugin main container - enhanced styling */
.showmira-checkout-container {
    max-width: 1000px;           /* Maximum width for desktop */
    margin: 0 auto;              /* Center the container */
    background: white;           /* Clean white background */
    border-radius: 12px;         /* More rounded corners for plugin */
    box-shadow: 0 4px 20px rgba(0,0,0,0.1); /* Enhanced shadow */
    overflow: hidden;            /* Prevent content overflow */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Modern font */
}

/* WordPress plugin form section */
.showmira-form-section {
    padding: 22px;               /* Reduced padding for compact layout */
}

/* WordPress plugin order summary section */
.showmira-order-summary-section {
    background: #f7f5f1;         /* Light cream background */
    padding: 12px 16px;          /* Reduced internal spacing */
    border-top: 1px solid #e6e1d8; /* Separator line */
}

/* WordPress plugin section titles */
.showmira-section-title {
    font-size: 18px;             /* Prominent heading size */
    font-weight: 600;            /* Semi-bold weight */
    margin-bottom: 12px;         /* Reduced space below */
    color: #30353a;              /* Dark gray text */
}

/* WordPress plugin form groups */
.showmira-form-group {
    margin-bottom: 12px;         /* Reduced space between groups */
}

.showmira-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #30353a;
}

.showmira-whatsapp-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-weight: 500;
    color: #30353a;
}

.showmira-phone-input {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.showmira-country-code {
    width: 150px;
    padding: 10px 12px;
    font-size: 13px;
    color: #30353a;
    background-color: #f7f5f1;
    border: 2px solid #e6e1d8;
    border-radius: 8px;
    transition: border-color 0.3s ease;
}

.showmira-no-whatsapp-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 10px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e6e1d8;
}

.showmira-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.showmira-plan-details {
    background: #f7f5f1;
    border: 1px solid #e6e1d8;
    border-radius: 8px;
    padding: 12px;
    margin-top: 8px;
    display: none;
    border-left: 4px solid #089fac;
    animation: slideDown 0.3s ease-out;
}

.showmira-plan-details.show {
    display: block;
}

.showmira-plan-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.showmira-plan-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.showmira-plan-logo.iron {
    background: linear-gradient(45deg, #708090, #2F4F4F);
}

.showmira-plan-logo.bronz {
    background: linear-gradient(45deg, #CD7F32, #8B4513);
}

.showmira-plan-logo.silver {
    background: linear-gradient(45deg, #C0C0C0, #808080);
}

.showmira-plan-logo.gold {
    background: linear-gradient(45deg, #FFD700, #DAA520);
}

.showmira-plan-info-text h3 {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

.showmira-plan-info-text p {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    margin-top: 6px;
}

.showmira-plan-features {
    list-style: none;
    margin: 6px 0 0 0;
    padding: 0;
}

.showmira-plan-features li {
    font-size: 12px;
    color: #555;
    margin-bottom: 4px;
    padding-left: 16px;
    position: relative;
}

.showmira-plan-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
}

/* Plan feature items styling */
.showmira-feature-item {
    font-size: 12px;
    color: #555;
    margin-bottom: 3px;
    padding-left: 16px;
    position: relative;
    line-height: 1.4;
}

.showmira-feature-item::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
    font-size: 14px;
}

.showmira-order-summary-container {
    background: #f7f5f1;
    padding: 12px 16px;
    border-top: 1px solid #e6e1d8;
}

.showmira-product-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    padding: 8px 10px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e6e1d8;
    min-height: 36px;
}

.showmira-product-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    flex-shrink: 0;
}

.showmira-product-icon.iron {
    background: linear-gradient(45deg, #708090, #2F4F4F);
}

.showmira-product-icon.bronz {
    background: linear-gradient(45deg, #CD7F32, #8B4513);
}

.showmira-product-icon.silver {
    background: linear-gradient(45deg, #C0C0C0, #808080);
}

.showmira-product-icon.gold {
    background: linear-gradient(45deg, #FFD700, #DAA520);
}

.showmira-product-name {
    flex: 1;
    font-weight: 600;
    color: #089fac;
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
}

.showmira-price {
    font-weight: 600;
    color: #30353a;
    font-size: 14px;
    white-space: nowrap;
}

.showmira-order-totals {
    border-top: 1px solid #e9ecef;
    padding-top: 6px;
    margin-top: 6px;
}

.showmira-total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    font-size: 13px;
}

.showmira-total-row.final {
    font-size: 14px;
    font-weight: 700;
    padding-top: 4px;
    border-top: 1px solid #e9ecef;
}

/* WordPress plugin order button - with reduced bottom margin */
.showmira-order-btn {
    width: 100%;                 /* Full width button */
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); /* Purple gradient */
    color: white;                /* White text */
    border: none;                /* Remove default border */
    padding: 16px;               /* Slightly reduced padding */
    border-radius: 8px;          /* Rounded corners */
    font-size: 16px;             /* Large text size */
    font-weight: 600;            /* Semi-bold weight */
    cursor: pointer;             /* Hand cursor on hover */
    margin: 14px 0 4px 0;        /* Further reduced vertical margins */
    transition: all 0.3s ease;   /* Smooth hover transitions */
    display: flex;               /* Center content */
    align-items: center;         /* Vertically center content */
    justify-content: center;     /* Horizontally center content */
    gap: 10px;                   /* Space between text and spinner */
    position: relative;          /* For shimmer effect positioning */
    overflow: hidden;            /* Hide shimmer overflow */
}

.showmira-order-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s ease;
    animation: shimmerSweep 3s ease-in-out infinite;
}

.showmira-order-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.showmira-order-btn:hover::before {
    animation-play-state: paused;
}

.showmira-order-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.showmira-order-btn:disabled::before {
    display: none;
}

/* WordPress plugin loading spinner */
.showmira-loading {
    display: none;               /* Hidden by default */
    width: 20px;                 /* Fixed width */
    height: 20px;                /* Fixed height (square) */
    border: 2px solid #ffffff;   /* White border */
    border-top: 2px solid transparent; /* Transparent top for spinning effect */
    border-radius: 50%;          /* Make it circular */
    animation: spin 1s linear infinite; /* Continuous spinning animation */
}

/* WordPress plugin success message */
.showmira-success-message {
    display: none;               /* Hidden by default */
    background: #d4edda;         /* Light green background */
    color: #155724;              /* Dark green text */
    padding: 20px;               /* Internal spacing */
    border-radius: 8px;          /* Rounded corners */
    margin-top: 15px;            /* Space above message */
    border: 1px solid #c3e6cb;   /* Green border */
    text-align: center;          /* Center-align text */
}

/* WordPress plugin error message */
.showmira-error-message {
    display: none;               /* Hidden by default */
    background: #f8d7da;         /* Light red background */
    color: #721c24;              /* Dark red text */
    padding: 20px;               /* Internal spacing */
    border-radius: 8px;          /* Rounded corners */
    margin-top: 15px;            /* Space above message */
    border: 1px solid #f5c6cb;   /* Red border */
    text-align: center;          /* Center-align text */
}

/* WordPress compatibility - input field overrides to ensure consistent styling */
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
    width: 100%;                 /* Full width within container */
    padding: 10px 12px;          /* Reduced padding for compact fields */
    border: 2px solid #e6e1d8;   /* Light gray border */
    border-radius: 8px;          /* Rounded corners */
    font-size: 14px;             /* Readable text size */
    transition: border-color 0.3s ease; /* Smooth border color change */
    font-family: inherit;        /* Use parent font family */
    color: #30353a;              /* Dark gray text */
    background-color: #f7f5f1;   /* Light cream background */
}

/* WordPress compatibility - input focus states */
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus, textarea:focus {
    outline: none;               /* Remove default browser outline */
    border-color: #089fac;       /* Brand color border when focused */
    box-shadow: 0 0 0 3px rgba(8, 159, 172, 0.1); /* Subtle glow effect */
    color: #30353a;              /* Maintain text color */
}

/* WordPress plugin mobile responsive adjustments */
@media (max-width: 768px) {
    /* WordPress plugin container adjustments for mobile */
    .showmira-checkout-container {
        margin: 5px;             /* Smaller margins on mobile */
        border-radius: 8px;      /* Maintain rounded corners */
    }

    /* WordPress plugin form section mobile padding */
    .showmira-form-section {
        padding: 16px 16px 20px 16px; /* Reduced padding for mobile */
    }
    
    /* WordPress plugin phone input mobile layout */
    .showmira-phone-input {
        flex-direction: column;  /* Stack country code and phone vertically */
        gap: 8px;                /* Reduced space between stacked elements */
    }

    /* Safeguard visibility for WhatsApp label and input on mobile */
    .showmira-whatsapp-label {
        display: flex !important;
        color: #30353a !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #showmira-phone-input {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* WordPress plugin country code mobile width */
    .showmira-country-code {
        width: 100%;             /* Full width on mobile */
    }
}

/*
========================================================================
                           END OF STYLESHEET
========================================================================

This stylesheet provides complete styling for the ShowMira IPTV checkout
form with comprehensive WordPress plugin compatibility, modern design
elements, responsive layout, security features, and detailed animations.

Total sections covered:
1. Security & Reset Styles
2. Main Container & Layout  
3. Form Elements & Inputs
4. WhatsApp Phone Input
5. Checkbox Styling
6. Plan Selection & Details
7. Order Summary
8. Buttons & Interactive Elements
9. Loading & Success States
10. Responsive Design
11. Security & Protection
12. WordPress Compatibility

Maintained by: ShowMira Development Team
Last Updated: January 2025
========================================================================
*/

/* ========================================
   PLAN FEATURES STYLING - REDESIGNED
   ======================================== */

/* Plan Features Container */
.showmira-plan-features {
    margin-top: 12px;
    padding: 0;
    list-style: none;
}

/* Reset all conflicting styles */
.showmira-feature-item,
.showmira-feature-item::before,
.showmira-feature-item::after {
    all: unset;
    box-sizing: border-box;
}

/* Individual Feature Item - Clean Layout */
.showmira-feature-item {
    display: block;
    margin-bottom: 3px;
    padding: 3px 0 3px 28px;
    font-size: 14px;
    line-height: 1.3;
    color: #30353a;
    position: relative;
    background-image: url('https://showmira.com/wp-content/uploads/2025/08/check-mark.png');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: 0 4px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Remove any pseudo-elements that might conflict */
.showmira-feature-item::before,
.showmira-feature-item::after {
    display: none !important;
    content: none !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .showmira-feature-item {
        font-size: 13px;
        padding: 2px 0 2px 24px;
        margin-bottom: 2px;
        background-size: 14px 14px;
        background-position: 0 3px;
    }
}

/* Small mobile screens */
@media (max-width: 480px) {
    .showmira-feature-item {
        font-size: 12px;
        padding: 2px 0 2px 20px;
        margin-bottom: 2px;
        background-size: 12px 12px;
        background-position: 0 2px;
    }
}

/* Complete style isolation and override */
.showmira-plan-features,
.showmira-plan-features * {
    box-sizing: border-box !important;
}

.showmira-plan-features .showmira-feature-item {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
    padding-left: 28px !important;
    
    /* Reset any inherited styles */
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    
    /* Ensure proper display */
    display: block !important;
    float: none !important;
    clear: none !important;
    
    /* Remove any pseudo-element content from themes */
    content: none !important;
}

/* Force remove any theme-added pseudo-elements */
.showmira-feature-item::before,
.showmira-feature-item::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure our background image shows properly */
.showmira-feature-item {
    background-attachment: scroll !important;
    background-clip: padding-box !important;
    background-origin: padding-box !important;
}