/**
 * Custom Ecommerce Flow Frontend Styles
 * Includes styles for:
 * - Deposit Form (User's provided version with corrections)
 * - Default WooCommerce Message Hiding
 * - Helper classes
 *
 * @version 1.9.63 (User Provided Styles - Cart Styles Removed)
 */

/* ==========================================================================
   0. Helper Classes
   ========================================================================== */

   .cef-hide-element {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* ==========================================================================
   1. Deposit Form Styles (Using Background Clip for Gradient Borders)
   ========================================================================== */

/* --- 1.1 Main Container Styling --- */
.cef-deposit-coin-form-container {
    background-color: transparent; /* User Change */
    color: #ccc;
    border-radius: 15px; /* Container radius */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    display: flex;
    flex-direction: column;
}

/* --- 1.2 General Field and Label Styling --- */

/* User Added Separator for Rate Type */
.cef-deposit-coin-form-container .cef-rate-type-field{
	margin-bottom: 20px !important;
	padding-bottom: 23px;
	border: 1px solid #ee8d0030;
	border-width: 0px 0px 2px 0px;
}

/* User Added Margins */
.cef-deposit-coin-form-container .cef-coins-input-field{
	margin: 0px 0px 20px 0px !important;
}

.cef-deposit-coin-form-container .cef-username-field{
	margin: 0px 0px 20px 0px !important;
}

.cef-deposit-coin-form-container .cef-form-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: white;
    font-size: 1em;
}
.cef-deposit-coin-form-container .cef-form-field label .required { display: none; }
/* Hide default description, except for coin words */
.cef-deposit-coin-form-container .cef-form-field p.description:not(.cef-coin-words-display) {
     display: none;
}

/* --- 1.3 Input Field Styling (Gradient Border via Background Clip) --- */

/* Wrapper for Coins Input (if needed, but words are below now) */
.cef-coins-input-wrapper {
    position: relative;
}

/* Style the input elements */
.cef-deposit-coin-form-container input[type="text"],
.cef-deposit-coin-form-container input[type="number"].cef-deposit-coins-input {
    width: 100%;
    padding: 14px 18px; /* Standard padding - User Removed !important */
    box-sizing: border-box;
    color: white;
    border-radius: 100em; /* Fully Rounded */
    font-size: 1em;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    outline: none; /* Remove focus outline */
    transition: box-shadow 0.2s ease;

    /* Gradient Border via Background Clip */
    border: 2px solid transparent; /* User Changed: border width 2px */
    background: linear-gradient(#1A1A1A, #1A1A1A) padding-box, /* Inner background (#1A1A1A) */
                linear-gradient(to bottom, #ffc107, #ee8d00) border-box; /* Outer gradient (border) */
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
}

/* Style the coin words display BELOW input */
.cef-deposit-coin-form-container .cef-coin-words-display {
    font-size: 0.85em;
    color: #aaa;
    margin-top: 8px; /* Space below input */
    min-height: 1.3em;
    font-style: normal;
    text-transform: capitalize;
    display: block !important; /* Ensure visible */
    text-align: right;
    padding-right: 10px;
    position: static; /* Ensure it's not absolutely positioned */
    transform: none;
    pointer-events: auto;
    white-space: normal;
    line-height: normal;
}

/* Focus style: Add glow */
.cef-deposit-coin-form-container input[type="text"]:focus,
.cef-deposit-coin-form-container input[type="number"].cef-deposit-coins-input:focus {
     box-shadow: 0 0 8px rgba(255, 193, 7, 0.6); /* Subtle orange glow */
     /* Border remains gradient due to background-clip */
}

/* Placeholder text styling */
.cef-deposit-coin-form-container input[type="text"]::placeholder,
.cef-deposit-coin-form-container input[type="number"].cef-deposit-coins-input::placeholder { color: #bbb; opacity: 1; }
/* Remove number input arrows */
.cef-deposit-coin-form-container input[type="number"].cef-deposit-coins-input::-webkit-outer-spin-button,
.cef-deposit-coin-form-container input[type="number"].cef-deposit-coins-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- 1.4 Rate Type Radio Button Styling (Gradient Border via Background Clip) --- */
/* Hide the main "Rate Type" label */
.cef-deposit-coin-form-container .cef-rate-type-field > label:first-of-type { display: none; }
.cef-deposit-coin-form-container .cef-rate-type-options { display: flex; gap: 15px;}
.cef-deposit-coin-form-container .cef-rate-type-option-wrapper { display: inline-block; position: relative; }
/* Hide the actual radio input visually */
.cef-deposit-coin-form-container .cef-rate-type-radio { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; padding: 0; border: 0; }

/* Style the label as a pill button (Base State) */
.cef-deposit-coin-form-container .cef-rate-type-label {
    display: inline-flex; align-items: center;
    border: 2px solid #777; /* User Changed: border width 2px */
    border-radius: 100em; /* Fully Rounded */
    cursor: pointer;
    background-color: transparent; /* No background */
    background-clip: initial; /* Reset background-clip */
    background-origin: initial; /* Reset background-origin */
    color: #bbb; /* Grey text */
    transition: all 0.2s ease;
    font-weight: 500;
	font-size: 0.95em;
    position: relative;
	padding: 5px 20px 5px 40px; /* User Change: padding */
}

/* Custom radio outer circle */
.cef-deposit-coin-form-container .cef-rate-type-label::before { content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 1px solid #777; border-radius: 50%; background-color: white; transition: all 0.2s ease; box-sizing: border-box; z-index: 1; }
/* Custom radio inner dot */
.cef-deposit-coin-form-container .cef-rate-type-label::after { content: ''; position: absolute; left: 16px; top: 50%; transform: translateY(-50%) scale(0); width: 10px; height: 10px; background-color: #ffc107; border-radius: 50%; transition: transform 0.2s ease; box-sizing: border-box; z-index: 2; }
/* Hover state */
.cef-deposit-coin-form-container .cef-rate-type-label:hover { border-color: #aaa; color: #ddd; }
.cef-deposit-coin-form-container .cef-rate-type-label:hover::before { border-color: #aaa; }

/* Checked state - Apply gradient border using background clip */
.cef-deposit-coin-form-container .cef-rate-type-radio:checked + .cef-rate-type-label {
    color: white; /* White text */
    border: 2px solid transparent; /* User Changed: border width 2px, Match base state */
    background: linear-gradient(#1A1A1A, #1A1A1A) padding-box, /* Inner background */
                linear-gradient(to bottom, #ffc107, #ee8d00) border-box; /* Outer gradient */
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
}
/* Keep circle styles for checked */
.cef-deposit-coin-form-container .cef-rate-type-radio:checked + .cef-rate-type-label::before { border-color: #ffc107; background-color: white; }
.cef-deposit-coin-form-container .cef-rate-type-radio:checked + .cef-rate-type-label::after { transform: translateY(-50%) scale(1); }

/* Focus state - User Removed */
/* .cef-deposit-coin-form-container .cef-rate-type-radio:focus + .cef-rate-type-label, */
/* .cef-deposit-coin-form-container .cef-rate-type-radio:focus-visible + .cef-rate-type-label { ... } */
/* .cef-deposit-coin-form-container .cef-rate-type-radio:focus:checked + .cef-rate-type-label, */
/* .cef-deposit-coin-form-container .cef-rate-type-radio:focus-visible:checked + .cef-rate-type-label { ... } */


/* --- 1.5 Calculation Result Section (Gradient Price Text) --- */
.cef-deposit-coin-form-container .cef-deposit-calculation-result {
	margin: 20px 0px 20px 0px; /* User Change */
	padding: 26px 20px; /* User Change */
	background-color: transparent;
	text-align: center;
	border: 1px solid #ee8d0030; /* User Change */
	border-width: 2px 0px 0px 0px; /* User Change */
    /* Removed border-radius: 10px */
}
.cef-deposit-coin-form-container .cef-deposit-calculation-result h4 { margin-top: 0; margin-bottom: 10px; color: white; font-size: 1em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.cef-deposit-coin-form-container .cef-total-amount-numeric { font-size: 2.5em; font-weight: 700; margin-bottom: 5px; line-height: 1.1; display: inline-block; min-height: 1.1em; background: linear-gradient(to bottom, #ffc107, #ee8d00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cef-deposit-coin-form-container .cef-total-amount-numeric .woocommerce-Price-currencySymbol { color: transparent; background: linear-gradient(to bottom, #ffc107, #ee8d00); -webkit-background-clip: text; background-clip: text; }
.cef-deposit-coin-form-container .cef-total-amount-words { font-size: 0.9em; color: #aaa; text-transform: capitalize; min-height: 1.4em; display: block; font-style: normal; }

/* --- 1.6 Available Currency / Rate Row (Solid Border Pills, Gradient Text) --- */
.cef-deposit-coin-form-container .cef-form-row-currency-rate {
	display: flex;
	justify-content: space-evenly; /* User Change */
	padding: 0;
	border: none;
	gap: 20px; /* User Change */
	margin: 0 0 20px 0;
}
.cef-deposit-coin-form-container .cef-form-row-currency-rate .cef-form-field { flex-basis: calc(30% - 10px); margin-bottom: 0; } /* User Change: basis 30% */
.cef-deposit-coin-form-container .cef-form-row-currency-rate .cef-form-field label { font-size: 0.95em; color: #ddd; margin-bottom: 8px; text-align: center; }
.cef-deposit-coin-form-container .cef-form-row-currency-rate .cef-static-display {
    padding: 2px 5px; /* User Change */
    background-color: transparent;
    font-style: italic; /* User Change */
    font-weight: 700; /* User Change */
    text-align: center;
    font-size: 1.4em; /* User Change */
    border-radius: 100em;
    min-width: auto;
    display: block;
    border: 1px solid #777;
    border-image: none;
    background-image: linear-gradient(to bottom, #ffc107, #ee8d00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.cef-deposit-coin-form-container .cef-form-row-currency-rate .cef-rate-display-dynamic .woocommerce-Price-amount,
.cef-deposit-coin-form-container .cef-form-row-currency-rate .cef-rate-display-dynamic .woocommerce-Price-currencySymbol { background: linear-gradient(to bottom, #ffc107, #ee8d00); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- 1.7 Rate Chart Toggle --- */
.cef-deposit-coin-form-container .cef-rate-chart-container { width: 100%; display: block; margin: 0px 0 30px 0; }
.cef-deposit-coin-form-container .cef-rate-chart { border: none; background-color: transparent; }
.cef-deposit-coin-form-container .cef-rate-chart-header { padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: 500; background-color: transparent; border: none; border-radius: 0; color: #bbb; transition: color .2s ease; position: relative; font-size: 0.95em; }
.cef-deposit-coin-form-container .cef-rate-chart-header:hover { color: #fff; }
.cef-deposit-coin-form-container .cef-rate-chart-header .dashicons-info-outline { display: none; }
.cef-deposit-coin-form-container .cef-rate-chart-header .cef-rate-chart-toggle { margin-left: 5px; transition: transform .2s ease-in-out; color: #bbb; font-size: 1.2em; line-height: 1; transform-origin: center center; }
.cef-deposit-coin-form-container .cef-rate-chart-header .cef-rate-chart-toggle.open { transform: rotate(180deg); }
.cef-deposit-coin-form-container .cef-rate-chart-content { padding: 15px; border: 1px solid #444; border-radius: 8px; background-color: rgba(255, 255, 255, 0.03); display: none; margin-top: 15px; }
.cef-deposit-coin-form-container .cef-rate-chart-content table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.cef-deposit-coin-form-container .cef-rate-chart-content th,
.cef-deposit-coin-form-container .cef-rate-chart-content td { padding: 8px 5px; text-align: left; border-bottom: 1px solid #383838; color: #bbb; vertical-align: middle; }
.cef-deposit-coin-form-container .cef-rate-chart-content th { font-weight: 600; color: #ddd; font-size: 0.9em; }
.cef-deposit-coin-form-container .cef-rate-chart-content tr:last-child td { border-bottom: none; }
.cef-deposit-coin-form-container .cef-rate-chart-content td:last-child,
.cef-deposit-coin-form-container .cef-rate-chart-content th:last-child { text-align: right; }
.cef-deposit-coin-form-container .cef-rate-chart-content td:last-child { font-weight: 600; color: #eee; }

/* --- 1.8 Validation Message Area --- */
.cef-deposit-coin-form-container .cef-deposit-validation-message { padding: 12px 15px; margin: -10px 0 20px 0; border-radius: 8px; text-align: center; font-weight: 500; display: none; border: 1px solid transparent; clear: both; font-size: 0.9em; }
.cef-deposit-coin-form-container .cef-deposit-validation-message.woocommerce-error { background-color: rgba(220, 53, 69, 0.15); color: #ff8a96; border-color: #dc3545; }
.cef-deposit-coin-form-container .cef-deposit-validation-message.woocommerce-message { background-color: rgba(255, 193, 7, 0.1); color: #ffdd7e; border-color: #ffc107; }

/* --- 1.9 Action Buttons (Gradient Background) --- */
.cef-deposit-coin-form-container .cef-custom-buttons-container { display: flex; gap: 30px; margin-top: 40px; justify-content: stretch; } /* User Change: gap, margin-top */
.cef-deposit-coin-form-container .cef-custom-buttons-container .button { flex: 1; padding: 16px 20px; font-size: 1em; text-align: center; cursor: pointer; border-radius: 100em; font-weight: 700; opacity: 1; transition: all 0.2s ease; text-transform: uppercase; line-height: 1.2; color: black; border: none; background-image: linear-gradient(to bottom, #ffc107, #ee8d00); background-color: #ffc107; }
/* User Change: Button focus */
.cef-deposit-coin-form-container .cef-custom-buttons-container .button:focus{ color: black !important; }
.cef-deposit-coin-form-container .cef-custom-buttons-container .button .dashicons { display: none; }
/* User Change: Button hover */
.cef-deposit-coin-form-container .cef-custom-buttons-container .button:hover:not(:disabled) { background-image: linear-gradient(to bottom, #ee8d00, #ffc107 ); background-color: #e0a800; color: black; }
.cef-deposit-coin-form-container .cef-custom-buttons-container .button:disabled,
.cef-deposit-coin-form-container .cef-custom-buttons-container .button.cef-button-disabled { cursor: not-allowed; opacity: 0.5; pointer-events: none; background-image: none; background-color: #555; color: #999; }
.cef-deposit-coin-form-container .cef-custom-buttons-container .button .dashicons-update { display: inline-block; margin-right: 8px; vertical-align: middle; animation: spin 1s linear infinite; color: black; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- 1.10 Responsive Adjustments --- */
@media (max-width: 768px) {
    /* Removed form-row-currency-rate flex-basis change */
    .cef-deposit-coin-form-container .cef-total-amount-numeric { font-size: 2.2em; }
	.cef-deposit-coin-form-container .cef-custom-buttons-container{ gap: 15px; } /* User Change */
}
@media (max-width: 480px) {
    .cef-deposit-coin-form-container .cef-rate-type-label { justify-content: flex-start; width: 100%; box-sizing: border-box; font-size: 0.85em !important; } /* User Change: font-size */
    .cef-deposit-coin-form-container .cef-total-amount-numeric { font-size: 2em; }
    .cef-deposit-coin-form-container .cef-coin-words-display { text-align: right; font-size: 0.85em; padding-right: 5px; }
    .cef-deposit-coin-form-container .cef-total-amount-words { font-size: 0.85em; }
    .cef-deposit-coin-form-container .cef-custom-buttons-container .button { padding: 14px 15px; font-size: 0.95em; }
	.cef-deposit-coin-form-container .cef-form-row-currency-rate .cef-form-field{
		flex-basis: calc(50% - 10px);
	}
    /* Removed rate type options stacking */
    /* .cef-deposit-coin-form-container .cef-rate-type-options { flex-direction: column; align-items: stretch; } */
}

/* ==========================================================================
   2. Default WooCommerce Message Hiding
   ========================================================================== */

body.single-product div.woocommerce > .woocommerce-message:has(a.button.wc-forward),
body.single-product .woocommerce-notices-wrapper > .woocommerce-message:has(a.button.wc-forward) {
    display: none !important;
}

/* ==========================================================================
   3. Custom Cart Panel Styles (REMOVED)
   ========================================================================== */
/* Styles for .cef-custom-cart-panel-wrapper and its children are now removed from this file. */
/* They should be placed in public/custom-cart-styles.css */


/* ==========================================================================
   End of File
   ========================================================================== */