/*
Theme Name: WP Reels Pro Theme
Theme URI: https://example.com/wp-reels-theme
Author: WP Reels Studio
Description: VidAstr — clean full-screen Reels app theme (light / white). Pairs with WP Reels Core.
Version: 3.1.0
License: GNU General Public License v2 or later
Text Domain: wp-reels-theme
*/

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body.wp-reels-theme {
  height: 100%;
  background: #ffffff !important;
  color: #111111;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
}

/* Hide any residual WP chrome */
body.wp-reels-theme #wpadminbar,
body.wp-reels-theme .site-header,
body.wp-reels-theme header.wp-header,
body.wp-reels-theme .navbar,
body.wp-reels-theme nav.main-nav {
  display: none !important;
}

body.wp-reels-theme {
  margin: 0 !important;
  padding: 0 !important;
}

.reels-app-viewport {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  justify-content: center;
}

#wp-reels-root {
  width: 100%;
  height: 100%;
  max-width: 480px; /* phone column */
  margin: 0 auto;
  background: #ffffff;
  position: relative;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}

/* Tablet / laptop: centered app column like Instagram web */
@media (min-width: 768px) {
  body.wp-reels-theme {
    background: #ffffff !important;
  }
  .reels-app-viewport {
    background: #ffffff;
    align-items: stretch;
  }
  #wp-reels-root {
    max-width: 420px;
    box-shadow: 0 0 40px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.06);
  }
}

@media (min-width: 1100px) {
  #wp-reels-root {
    max-width: 440px;
  }
}

.reels-plugin-missing {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: #fff;
  color: #111;
}
.reels-plugin-missing a {
  background: #fe2c55;
  color: #fff;
  padding: 12px 24px;
  border-radius: 24px;
  text-decoration: none;
  font-weight: 700;
  margin-top: 16px;
}

/* phone column forced on all viewports */
html, body.wp-reels-theme { background: #e8e8e8 !important; }
#wp-reels-root {
  max-width: 430px !important;
  width: 100% !important;
  margin: 0 auto !important;
  background: #fff !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  min-height: 100vh;
}