<?php
if (!defined('ABSPATH')) {
  exit;
}
?>

<div class="awxct-switcher-css-doc">

  <h2><?php esc_html_e('Custom CSS for the Language Switcher', 'anywarex-clone-translate'); ?></h2>

  <p>
    <?php esc_html_e(
      'You can fully restyle the language switcher button and dropdown using your own CSS. This page shows the most important selectors and some ready-to-use examples.',
      'anywarex-clone-translate'
    ); ?>
  </p>

  <h3><?php esc_html_e('Where to put your CSS', 'anywarex-clone-translate'); ?></h3>
  <ol>
    <li><?php esc_html_e('Go to “Languages” inside the plugin or to “Appearance → Customize → Additional CSS” in your WordPress admin.', 'anywarex-clone-translate'); ?></li>
    <li><?php esc_html_e('Paste your custom CSS into the built-in CSS field or into the Additional CSS editor.', 'anywarex-clone-translate'); ?></li>
    <li><?php esc_html_e('Save or publish the changes.', 'anywarex-clone-translate'); ?></li>
  </ol>
  <p>
    <?php esc_html_e(
      'Alternatively, you can place the CSS into your (child) theme stylesheet. The selectors shown below are still the current core selectors used by the switcher.',
      'anywarex-clone-translate'
    ); ?>
  </p>

  <h3><?php esc_html_e('Core selectors for the switcher', 'anywarex-clone-translate'); ?></h3>

  <p><?php esc_html_e('Header menu switcher button:', 'anywarex-clone-translate'); ?></p>
  <pre class="awxct-code"><code><span class="selector">.menu-item-awxct-lang .awxct-plg-ct-btn</span> { ... }</code></pre>

  <p><?php esc_html_e('Floating switcher button (top-left / top-right):', 'anywarex-clone-translate'); ?></p>
  <pre class="awxct-code"><code><span class="selector">#awxct-plg-ct-switcher-root .awxct-plg-ct-btn</span> { ... }</code></pre>

  <p><?php esc_html_e('Dropdown menu container:', 'anywarex-clone-translate'); ?></p>
  <pre class="awxct-code"><code><span class="selector">.menu-item-awxct-lang .awxct-plg-ct-menu</span>,
<span class="selector">#awxct-plg-ct-switcher-root .awxct-plg-ct-menu</span> { ... }</code></pre>

  <p><?php esc_html_e('Menu items inside the dropdown:', 'anywarex-clone-translate'); ?></p>
  <pre class="awxct-code"><code><span class="selector">.menu-item-awxct-lang .awxct-plg-ct-item</span>,
<span class="selector">#awxct-plg-ct-switcher-root .awxct-plg-ct-item</span> { ... }</code></pre>

  <h3><?php esc_html_e('Example: Dark button with rounded corners', 'anywarex-clone-translate'); ?></h3>
  <p><?php esc_html_e('This example makes the switcher look like a dark pill-shaped button.', 'anywarex-clone-translate'); ?></p>

  <pre class="awxct-code"><code><span class="comment">/* Header menu button */</span>
<span class="selector">.menu-item-awxct-lang .awxct-plg-ct-btn</span>,
<span class="selector">#awxct-plg-ct-switcher-root .awxct-plg-ct-btn</span> {
  <span class="property">background</span>: <span class="value">#151515</span>;
  <span class="property">color</span>: <span class="value">#ffffff</span>;
  <span class="property">border-color</span>: <span class="value">rgba(0, 0, 0, 0.4)</span>;
  <span class="property">border-radius</span>: <span class="value">999px</span>;
  <span class="property">text-transform</span>: <span class="value">uppercase</span>;
  <span class="property">letter-spacing</span>: <span class="value">0.04em</span>;
}

<span class="comment">/* Dropdown menu */</span>
<span class="selector">.menu-item-awxct-lang .awxct-plg-ct-menu</span>,
<span class="selector">#awxct-plg-ct-switcher-root .awxct-plg-ct-menu</span> {
  <span class="property">border-radius</span>: <span class="value">12px</span>;
  <span class="property">box-shadow</span>: <span class="value">0 12px 30px rgba(0, 0, 0, 0.3)</span>;
}

<span class="comment">/* Active language in dropdown */</span>
<span class="selector">.menu-item-awxct-lang .awxct-plg-ct-item.is-active</span>,
<span class="selector">#awxct-plg-ct-switcher-root .awxct-plg-ct-item.is-active</span> {
  <span class="property">font-weight</span>: <span class="value">600</span>;
  <span class="property">background</span>: <span class="value">rgba(255, 255, 255, 0.06)</span>;
}</code></pre>

  <h3><?php esc_html_e('Example: Minimal, border-only style', 'anywarex-clone-translate'); ?></h3>
  <p><?php esc_html_e('This example removes the background and keeps only a subtle border.', 'anywarex-clone-translate'); ?></p>

  <pre class="awxct-code"><code><span class="selector">.menu-item-awxct-lang .awxct-plg-ct-btn</span>,
<span class="selector">#awxct-plg-ct-switcher-root .awxct-plg-ct-btn</span> {
  <span class="property">background</span>: <span class="value">transparent</span>;
  <span class="property">border-color</span>: <span class="value">rgba(0, 0, 0, 0.25)</span>;
  <span class="property">box-shadow</span>: <span class="value">none</span>;
}

<span class="selector">.menu-item-awxct-lang .awxct-plg-ct-btn:hover</span>,
<span class="selector">#awxct-plg-ct-switcher-root .awxct-plg-ct-btn:hover</span> {
  <span class="property">background</span>: <span class="value">rgba(0, 0, 0, 0.05)</span>;
}</code></pre>

  <h3><?php esc_html_e('About !important and theme conflicts', 'anywarex-clone-translate'); ?></h3>
  <p>
    <?php esc_html_e(
      'Most of the time you do NOT need !important. Only use it if your theme or another plugin forces very specific styles that override the switcher.',
      'anywarex-clone-translate'
    ); ?>
  </p>

  <pre class="awxct-code"><code><span class="comment">/* Only if your theme overrides the styles aggressively */</span>
<span class="selector">.menu-item-awxct-lang .awxct-plg-ct-btn</span> {
  <span class="property">background</span>: <span class="value">#151515</span> <span class="value">!important</span>;
  <span class="property">color</span>: <span class="value">#ffffff</span> <span class="value">!important</span>;
}</code></pre>

  <p>
    <?php esc_html_e(
      'If something looks broken after adding custom CSS, remove your last changes step by step until the layout is stable again.',
      'anywarex-clone-translate'
    ); ?>
  </p>

</div>
